@adaptabletools/adaptable 17.0.0-canary.0 → 17.0.0-canary.2

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -50,7 +50,7 @@ export const CustomSortWizard = (props) => {
             },
             {
                 title: 'Sort Order',
-                details: 'Select values to specify Custom Sort order - use "Drag to reorder" checkbox to modify order',
+                details: 'Specify Custom Sort order - drag selected items to modify order',
                 isValid: isValidCustomSortOrder,
                 renderSummary: renderCustomSortValuesSummary,
                 render: () => (React.createElement(Box, { padding: 2, style: { height: '100%' } },

package/src/View/Dashboard/DashboardPopup.js

@@ -66,15 +66,15 @@ class DashboardPopupComponent extends React.Component {
         };
         return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
             React.createElement(Flex, { flex: 1, height: "100%", flexDirection: "column" },
-                areDashboardSettingsVisible && (React.createElement(Panel, { header: 'Dashboard Modes', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
-                    React.createElement(CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
+                areDashboardSettingsVisible && (React.createElement(Panel, { header: 'Dashboard Mode', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
+                    React.createElement(CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapsed"),
                     ' ',
-                    this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+                    this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Floating")),
                     ' ',
                     React.createElement(CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
                 React.createElement(Panel, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
                     React.createElement(Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
-                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Toolbars"),
+                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Tabs & Toolbars"),
                         React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons"),
                         React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.PinnedToolbars, checked: this.state.DashboardConfigView == DashboardConfigView.PinnedToolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Pinned Toolbars")),
                     React.createElement(Box, { className: `${baseClassName}__Module-Selector`, "data-name": this.state.DashboardConfigView === DashboardConfigView.Toolbars

package/src/View/Dashboard/DashboardToolbarFactory.js

@@ -14,7 +14,6 @@ const SystemDashboardToolbarFactory = (props) => {
         .getEntitlementAccessLevelForModule(props.toolbarName);
     const moduleToolbarView = AdaptableViewPanelFactory.get(props.toolbarName);
     if (!moduleToolbarView) {
-        console.log({ props });
         return React.createElement(React.Fragment, null, "adasdasdas");
     }
     const moduleToolbarElement = React.createElement(moduleToolbarView, {

package/src/View/Dashboard/PinnedDashboard.js

@@ -1,15 +1,18 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { Box, Flex } from 'rebass';
+import { useAdaptable } from '../AdaptableContext';
 import { DashboardToolbarFactory } from './DashboardToolbarFactory';
 export const PinnedDashboard = (props) => {
+    var _a;
+    const adaptable = useAdaptable();
     const dashboardState = useSelector((state) => state.Dashboard);
-    const pinnedToolbars = dashboardState.PinnedToolbars;
+    const pinnedToolbars = ((_a = dashboardState.PinnedToolbars) !== null && _a !== void 0 ? _a : []).filter((tb) => adaptable.api.internalApi.getModuleService().isModuleAvailable(tb));
     if (!pinnedToolbars || pinnedToolbars.length == 0) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(Flex, { p: 1, className: "ab-Dashboard__pinned-content" }, pinnedToolbars.map((toolbar, index) => {
-        return (React.createElement(Box, { key: index, mr: 2, mb: 1, className: `ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
+    return (React.createElement(Flex, { p: 1, className: "ab-Dashboard__pinned" }, pinnedToolbars.map((toolbar, index) => {
+        return (React.createElement(Box, { key: index, mr: 1, mb: 1, className: `ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
             React.createElement(Box, { className: "ab-Dashboard__toolbar-content" },
                 React.createElement(DashboardToolbarFactory, { toolbarName: toolbar }))));
     })));

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -38,5 +38,5 @@ export const PinnedToolbarsSelector = (props) => {
             editTabName: false,
         }, onTabsChange: (tabs) => {
             dispatch(DashboardSetPinnedToolbars(tabs[0].Items));
-        }, disabled: isDashboardDisabled, tabs: tabs, availableItems: toolbars, tabsTitle: 'Pinned Toolbars', unusedPanelTitle: "Available Pinned Toolbar Panels", dragItemText: "Drag into the Panel below" }));
+        }, disabled: isDashboardDisabled, tabs: tabs, availableItems: toolbars, tabsTitle: 'Pinned Toolbars', unusedPanelTitle: "Available Pinned Toolbars", dragItemText: "Drag into the Panel below" }));
 };

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -114,7 +114,9 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
             defaultAccessLevel: 'Hidden',
         },
         columnFilterOptions: {
-            quickFilterTrigger: 'click',
+            quickFilterOptions: {
+                quickFilterTrigger: 'click',
+            },
         },
         layoutOptions: {
             createDefaultLayout: false,

package/src/View/DataImport/DataImportPopup.js

@@ -15,7 +15,7 @@ export const DataImportPopup = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(PopupPanel, { headerText: 'Data Import', glyphicon: 'import', infoLink: props.moduleInfo.HelpPage },
             React.createElement(Box, null,
-                React.createElement(HelpBlock, { mb: 2, fontSize: 3 }, "Click the 'Import Data' button to insert or update data into AdapTable"),
+                React.createElement(HelpBlock, { mb: 2, fontSize: 3 }, "Click the 'Import Data' button to Insert or Update data into AdapTable"),
                 React.createElement(SimpleButton, { icon: "import", variant: "raised", onClick: () => setIsWizardOpen(true) }, "Import Data"))),
         isWizardOpen && (React.createElement(DataImportWizard, { onClose: () => {
                 var _a;

package/src/View/DataImport/DataImportWizard/DataImportWizard.d.ts

@@ -3,7 +3,7 @@ import { AdaptableColumn, DataImportValidationError } from '../../../types';
 export interface ValidationErrorsMap {
     [key: string]: DataImportValidationError[] | null;
 }
-export declare type ColumnsMap = {
+export type ColumnsMap = {
     field: string;
     abColumn?: AdaptableColumn;
     include?: boolean;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadSection.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-declare type UploadSectionProps = {
+type UploadSectionProps = {
     readFile: (data: File) => Promise<Record<string, unknown>[]>;
     supportedFileFormats: string;
     fileMessage: ReactNode;

package/src/View/DataSet/DataSetViewPanel.js

@@ -2,8 +2,9 @@ import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import * as React from 'react';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import { Flex } from 'rebass';
-import DropdownButton from '../../components/DropdownButton';
 import { connect } from 'react-redux';
+import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
+import { Select } from '../../components/Select';
 class DataSetViewPanelComponent extends React.Component {
     getCurrentDataSet() {
         return StringExtensions.IsNullOrEmpty(this.props.CurrentDataSetName)
@@ -26,7 +27,7 @@ class DataSetViewPanelComponent extends React.Component {
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__DataSet__wrap` },
-            React.createElement(DropdownButton, { marginRight: 2, columns: ['label'], style: { minWidth: 160, fontSize: 'small' }, className: `ab-${elementType}__DataSet__select`, items: availableDataSets, variant: "outlined", tone: 'neutral' }, currentDataSetName)));
+            React.createElement(Select, { style: { width: '100%' }, placeholder: 'Select Data Set', disabled: ArrayExtensions.IsNullOrEmpty(availableDataSets), options: availableDataSets, value: currentDataSetName, className: `ab-${elementType}__DataSet__select`, onChange: (destination) => this.onSelectedDataSetChanged(destination) })));
     }
     onSelectedDataSetChanged(dataSetName) {
         if (StringExtensions.IsNullOrEmpty(dataSetName)) {

package/src/View/Export/ExportViewPanel.js

@@ -7,7 +7,6 @@ import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
 import { VISUAL_DATA_REPORT } from '../../Utilities/Constants/GeneralConstants';
 import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
 import { Flex } from 'rebass';
-import DropdownButton from '../../components/DropdownButton';
 import join from '../../components/utils/join';
 import { ButtonExport } from '../Components/Buttons/ButtonExport';
 import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
@@ -19,6 +18,7 @@ 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);
@@ -26,7 +26,7 @@ class ExportViewPanelComponent extends React.Component {
             ? SELECT_REPORT_STRING
             : this.props.CurrentReport;
         const allReportNames = this.getAllReportNames();
-        let reportItems = allReportNames.map((report) => {
+        const reportItems = allReportNames.map((report) => {
             return {
                 label: report,
                 value: report,
@@ -46,19 +46,22 @@ class ExportViewPanelComponent extends React.Component {
             ...this.props.api.exportApi.getAvailableExportDestinations().map((destination) => ({
                 label: destination,
                 onClick: () => this.onSelectedDestinationChanged(destination),
-                disabled: !this.props.api.exportApi.internalApi.isDestinationEnabled(destination),
+                value: destination,
+                isDisabled: !this.props.api.exportApi.internalApi.isDestinationEnabled(destination),
             })),
             ...this.props.api.exportApi.getCustomDestinations().map((destination) => ({
                 label: destination.name,
                 onClick: () => this.onSelectedDestinationChanged(destination.name),
+                value: destination.name,
+                isDisabled: false,
             })),
         ];
         if ((currentReport === null || currentReport === void 0 ? void 0 : currentReport.Name) === VISUAL_DATA_REPORT) {
-            destinationItems.forEach((item) => (item.disabled = item.label === ExportDestination.Excel ? false : true));
+            destinationItems.forEach((item) => (item.isDisabled = item.label === ExportDestination.Excel ? false : true));
         }
         if (currentDestination &&
             !destinationItems
-                .filter((destinationItem) => !destinationItem.disabled)
+                .filter((destinationItem) => !destinationItem.isDisabled)
                 .map((destinationItem) => destinationItem.label)
                 .includes(this.props.CurrentDestination)) {
             // current destination is not available
@@ -75,10 +78,10 @@ class ExportViewPanelComponent extends React.Component {
         };
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(Flex, { style: { gap: 5 }, flexDirection: "row", className: `ab-${elementType}__Export__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(Flex, { flex: 1 },
-                React.createElement(DropdownButton, { disabled: allReportNames.length == 0, width: "100%", fontSize: "small", items: reportItems, columns: ['label'], className: `ab-${elementType}__Export__select`, onClear: () => this.onSelectedReportChanged(null), showClearButton: !!currentReport, variant: "outlined", marginRight: 2 }, currentReportId)),
-            React.createElement(Flex, { flex: 1 },
-                React.createElement(DropdownButton, { disabled: currentReportId === SELECT_REPORT_STRING, width: "100%", fontSize: "small", items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
+            React.createElement(Flex, { flex: 1, minWidth: 150 },
+                React.createElement(Select, { style: { width: '100%' }, placeholder: SELECT_REPORT_STRING, disabled: allReportNames.length == 0, className: `ab-${elementType}__Export__select`, options: reportItems, onChange: (report) => this.onSelectedReportChanged(report), value: currentReportId, isClearable: true })),
+            React.createElement(Flex, { flex: 1, minWidth: 150 },
+                React.createElement(Select, { style: { width: '100%' }, placeholder: SELECT_DESTINATION_STRING, disabled: currentReportId === SELECT_REPORT_STRING, options: destinationItems, value: currentDestinationId, className: `ab-${elementType}__Export__select`, onChange: (destination) => this.onSelectedDestinationChanged(destination) })),
             React.createElement(Flex, { className: join(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { width: '100%' } },
                 React.createElement(ButtonExport, { onClick: () => onApplyExport(), tooltip: "Export Report", className: `ab-${elementType}__Export__export`, disabled: currentReport == null || currentDestination == null }),
                 React.createElement(ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || this.props.api.exportApi.isExternalReport(currentReport), accessLevel: accessLevel }),

package/src/View/Export/Wizard/ReportColumnsWizardSection.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Report } from '../../../PredefinedConfig/ExportState';
-export declare type ReportColumnsWizardSectionProps = {
+export type ReportColumnsWizardSectionProps = {
     onChange: (data: Report) => void;
 };
 export declare const isValidReportColumnsScope: (report: Report) => true | "Column scope is not defined";

package/src/View/Export/Wizard/ReportNameWizardSection.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { Report } from '../../../PredefinedConfig/ExportState';
-export declare type ReportNameWizardSectionProps = {
+export type ReportNameWizardSectionProps = {
     onChange: (data: Report) => void;
 };
 export declare const renderReportNameSummary: (report: Report) => JSX.Element;

package/src/View/Export/Wizard/ReportRowsWizardSection.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Report } from '../../../PredefinedConfig/ExportState';
-export declare type ReportRowsWizardSectionProps = {
+export type ReportRowsWizardSectionProps = {
     onChange: (data: Report) => void;
 };
 export declare const isValidReportRowsQuery: (report: Report) => true | "Rows query cannot be empty";

package/src/View/Filter/FilterViewPanel.js

@@ -37,7 +37,7 @@ class FilterViewPanelComponent extends React.Component {
             React.createElement(Flex, { alignItems: "center" }, this.props.api.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox, { className: `ab-${elementType}__Filter__active-check`, disabled: this.props.accessLevel === 'ReadOnly' ||
                     this.props.api.internalApi.isGridInPivotMode(), marginTop: 0, marginBottom: 0, fontSize: 2, padding: 1, checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                     checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
-                } }, "Quick Filter")))));
+                } }, "Filter Bar")))));
     }
     onClearFilters() {
         this.props.api.columnFilterApi.clearColumnFilters();

package/src/View/FlashingCell/Wizard/FlashingCellRulesWizardSection.js

@@ -26,7 +26,7 @@ export const renderFlashingAlertRulesSummary = (flashingAlert) => {
 export const FlashingAlertRulesWizardSection = (props) => {
     const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
     const predicateDefs = api.flashingCellApi.getFlashingCellPredicateDefsForScope(data.Scope);
-    return (React.createElement(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: predicateDefs, getPredicateDefsForColId: (colId) => api.flashingCellApi.getFlashingCellPredicateDefsForScope({ ColumnIds: [colId] }), onChange: props.onChange, showAggregation: false, showObservable: false, showBoolean: true, showPredicate: true, descriptions: {
+    return (React.createElement(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "AnyChange", data: data, predicateDefs: predicateDefs, getPredicateDefsForColId: (colId) => api.flashingCellApi.getFlashingCellPredicateDefsForScope({ ColumnIds: [colId] }), onChange: props.onChange, showAggregation: false, showObservable: false, showBoolean: true, showPredicate: true, descriptions: {
             selectPredicate: 'Select an Flashing Cell Rule - to be applied when data changes',
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type FlashingAlertScopeWizardSectionProps = {
+type FlashingAlertScopeWizardSectionProps = {
     onChange: (data: any) => void;
 };
 export declare const FlashingAlertScopeWizardSection: (props: FlashingAlertScopeWizardSectionProps) => JSX.Element;

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.js

@@ -11,10 +11,10 @@ export const FlashingAlertScopeWizardSection = (props) => {
             }, scope: data.Scope, updateScope: (Scope) => {
                 const newData = Object.assign(Object.assign({}, data), { Scope });
                 if (newData.Rule.Predicates) {
-                    // when scope is changed, reset the rule to predicate of any
+                    // when scope is changed, reset the rule to predicate of AnyChange
                     // if it was set to a predicate before
                     newData.Rule = {
-                        Predicates: [{ PredicateId: 'Any' }],
+                        Predicates: [{ PredicateId: 'AnyChange' }],
                     };
                 }
                 props.onChange(newData);

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FlashingCellDefinition } from '../../../types';
-declare type FlashingAlertDurationWizardSectionProps = {
+type FlashingAlertDurationWizardSectionProps = {
     readOnly?: boolean;
     flashingCell?: FlashingCellDefinition;
     onChange: (data: FlashingCellDefinition) => void;

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { BoxProps } from 'rebass';
 import { AdaptableStyle } from '../../../types';
 import { FlashingCellDefinition } from '../../../../types';
-declare type FlashingAlertStyleWizardSectionProps = {
+type FlashingAlertStyleWizardSectionProps = {
     flashingAlert?: FlashingCellDefinition;
     onStyleChange: (styleName: 'UpChangeStyle' | 'DownChangeStyle' | 'NeutralChangeStyle', style: AdaptableStyle) => void;
 };

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -73,14 +73,7 @@ export const FlashingCellWizard = (props) => {
                 title: 'Rule',
             },
             {
-                details: 'Select the Duration of the Flash',
-                render: () => (React.createElement(Box, { padding: 2 },
-                    React.createElement(FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
-                renderSummary: renderFlashingAlertSettingsSummary,
-                title: 'Settings',
-            },
-            {
-                details: 'Choose the Flashing Styles',
+                details: 'Choose Flash Styles for Up, Down and Neutral Changes',
                 render: () => (React.createElement(Box, { padding: 2 },
                     React.createElement(FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
                             updateStyles[styleName](style);
@@ -88,6 +81,13 @@ export const FlashingCellWizard = (props) => {
                 renderSummary: renderFlashingAlertStyleSummary,
                 title: 'Flash Styles',
             },
+            {
+                details: 'Set Duration and Target Properties',
+                render: () => (React.createElement(Box, { padding: 2 },
+                    React.createElement(FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
+                renderSummary: renderFlashingAlertSettingsSummary,
+                title: 'Settings',
+            },
             {
                 details: 'Select Flashing Cell Tags',
                 title: 'Tags',

package/src/View/FlashingCell/Wizard/isValidFlashingCellRules.js

@@ -10,7 +10,7 @@ export const isValidFlashingCellRules = (flashingCell, api, context) => {
     }
     // boolean expressions may also be saved as named queries
     if (context.namedQuery != false) {
-        const isValidName = api.namedQueryApi.isValidNamedQueryName(context.namedQuery);
+        const isValidName = api.namedQueryApi.isValidNamedQuery(context.namedQuery);
         if (!isValidName.valid) {
             return isValidName.message;
         }

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -3,7 +3,7 @@ import { FormatColumn } from '../../../PredefinedConfig/FormatColumnState';
 import { AdaptableFormat } from '../../../PredefinedConfig/Common/AdaptableFormat';
 import { AdaptableScope } from '../../../PredefinedConfig/Common/AdaptableScope';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-export declare type FormatColumnFormatWizardSectionProps = {
+export type FormatColumnFormatWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
 export interface FormatColumnFormatWizardState {

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -16,6 +16,7 @@ import { Tag } from '../../../components/Tag';
 import { useAdaptable } from '../../AdaptableContext';
 import FormatHelper from '../../../Utilities/Helpers/FormatHelper';
 import { Toggle, ToggleGroup } from '../../../components/Toggle';
+import { DEFAULT_DOUBLE_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../Utilities/Constants/GeneralConstants';
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -82,13 +83,13 @@ export const getFormatColumnFormatSummaryValue = (data) => {
     }
     else {
         if (data.DisplayFormat.Formatter === 'NumberFormatter') {
-            content = FormatHelper.NumberFormatter(12345.6789, data.DisplayFormat.Options);
+            content = FormatHelper.NumberFormatter(DEFAULT_DOUBLE_DISPLAY_VALUE, data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'DateFormatter') {
-            content = FormatHelper.DateFormatter(new Date(2022, 0, 1), data.DisplayFormat.Options);
+            content = FormatHelper.DateFormatter(new Date(), data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'StringFormatter') {
-            content = FormatHelper.StringFormatter('Hello World ', data.DisplayFormat.Options);
+            content = FormatHelper.StringFormatter(DEFAULT_STRING_DISPLAY_VALUE, data.DisplayFormat.Options);
         }
     }
     return content;
@@ -311,16 +312,16 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                         { Content: 'Formatted Number', Size: 1 },
                     ] }),
                 React.createElement(AdaptableObjectRow, { colItems: [
-                        { Content: '12345.6789', Size: 1 },
+                        { Content: DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
                         {
-                            Content: FormatHelper.NumberFormatter(12345.6789, data.DisplayFormat.Options),
+                            Content: FormatHelper.NumberFormatter(DEFAULT_DOUBLE_DISPLAY_VALUE, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] }),
                 React.createElement(AdaptableObjectRow, { colItems: [
-                        { Content: '-12345.6789', Size: 1 },
+                        { Content: '-' + DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
                         {
-                            Content: FormatHelper.NumberFormatter(-12345.6789, data.DisplayFormat.Options),
+                            Content: FormatHelper.NumberFormatter(-DEFAULT_DOUBLE_DISPLAY_VALUE, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] }),
@@ -371,10 +372,10 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
                         { Content: 'Formatted String', Size: 1 },
                     ] }),
                 React.createElement(AdaptableObjectRow, { colItems: [
-                        { Content: '"Hello World "', Size: 1 },
+                        { Content: '"' + DEFAULT_STRING_DISPLAY_VALUE + '"', Size: 1 },
                         {
                             Content: '"' +
-                                FormatHelper.StringFormatter('Hello World ', data.DisplayFormat.Options) +
+                                FormatHelper.StringFormatter(DEFAULT_STRING_DISPLAY_VALUE, data.DisplayFormat.Options) +
                                 '"',
                             Size: 1,
                         },

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FormatColumn } from '../../../../types';
-declare type FormatColumnRuleWizardSectionProps = {
+type FormatColumnRuleWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
     defaultPredicateId: string;
 };

package/src/View/FormatColumn/Wizard/FormatColumnScopeWizardSection.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FormatColumn } from '../../../PredefinedConfig/FormatColumnState';
-declare type FormatColumnScopeWizardSectionProps = {
+type FormatColumnScopeWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
 export declare const renderFormatColumnScopeSummary: (data: FormatColumn) => JSX.Element;

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FormatColumn } from '../../../PredefinedConfig/FormatColumnState';
-declare type FormatColumnOptionsWizardSectionProps = {
+type FormatColumnOptionsWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
 export declare const renderFormatColumnSettingsSummary: (data: FormatColumn) => JSX.Element;

package/src/View/FormatColumn/Wizard/FormatColumnStyleWizardSection.d.ts

@@ -2,7 +2,7 @@
 import { FormatColumn } from '../../../PredefinedConfig/FormatColumnState';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 export declare const isFormatColumnStyleValid: (data: FormatColumn, api: AdaptableApi) => true | "No format applied";
-declare type FormatColumnStyleWizardSectionProps = {
+type FormatColumnStyleWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
 export declare const renderFormatColumnStyleWizardSummary: (data: FormatColumn) => JSX.Element;

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -115,7 +115,7 @@ export function FormatColumnWizard(props) {
             },
             {
                 title: 'Style',
-                details: 'Create a Style for the Format Column',
+                details: 'Create a Style',
                 isValid: isFormatColumnStyleValid,
                 renderSummary: renderFormatColumnStyleWizardSummary,
                 render: () => {
@@ -125,6 +125,7 @@ export function FormatColumnWizard(props) {
             },
             {
                 title: 'Display Format',
+                details: 'Provide a Display Format',
                 renderSummary: (data) => renderFormatColumnFormatSummary(data),
                 render: () => {
                     return React.createElement(FormatColumnFormatWizardSection, { onChange: setFormatColumn });
@@ -132,6 +133,7 @@ export function FormatColumnWizard(props) {
             },
             {
                 title: 'Settings',
+                details: 'Set Additional Properties',
                 renderSummary: renderFormatColumnSettingsSummary,
                 render: () => {
                     return (React.createElement(Box, { padding: 2 },

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.d.ts

@@ -3,7 +3,7 @@ import { FreeTextColumn } from '../../../PredefinedConfig/FreeTextColumnState';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 export declare const renderFreeTextColumnSummary: (data: FreeTextColumn) => JSX.Element;
 export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "Column Id cannot be empty" | "A Column already exists with that id" | "No data type specified for column";
-export declare type FreeTextColumnSettingsWizardSectionProps = {
+export type FreeTextColumnSettingsWizardSectionProps = {
     onChange: (data: FreeTextColumn) => void;
     isEdit: boolean;
 };

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

@@ -5,7 +5,6 @@ import Input from '../../../components/Input';
 import ErrorBox from '../../../components/ErrorBox';
 import Radio from '../../../components/Radio';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
-import DropdownButton from '../../../components/DropdownButton';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { CheckBox } from '../../../components/CheckBox';
@@ -13,6 +12,7 @@ import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
 import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
 import { Tag } from '../../../components/Tag';
 import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
+import { Select } from '../../../components/Select';
 const options = [
     { value: 'Number', label: 'Number' },
     { value: 'String', label: 'String' },
@@ -102,7 +102,7 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(FormLayout, null,
-            React.createElement(FormRow, { label: "ColumnId" },
+            React.createElement(FormRow, { label: "Column Id" },
                 React.createElement(Input, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
             React.createElement(FormRow, { label: "Column Name" },
                 React.createElement(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
@@ -110,19 +110,9 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
                     }, onBlur: () => {
                         setColumnNameFocused(false);
                     }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a name", onChange: (e) => handleColumnNameChange(e) })),
-            React.createElement(FormRow, { label: "Type" },
-                React.createElement(DropdownButton, { "data-name": "column-type-dropdown", style: {
-                        width: '300px',
-                        whiteSpace: 'normal',
-                        overflow: 'hidden',
-                        maxWidth: 'inherit',
-                    }, placeholder: "Select Data Type", showClearButton: !!data.FreeTextColumnSettings.DataType, onClear: () => handleDataTypeChange(null), columns: ['label'], items: options.map((item) => ({
-                        value: item.value,
-                        label: item.label,
-                        onClick: () => handleDataTypeChange(item.value),
-                    })) }, data.FreeTextColumnSettings.DataType
-                    ? data.FreeTextColumnSettings.DataType
-                    : 'Select Data Type')),
+            React.createElement(FormRow, { label: "Data Type" },
+                React.createElement(Box, { style: { maxWidth: 500 } },
+                    React.createElement(Select, { "data-name": "column-type-dropdown", options: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onChange: (value) => handleDataTypeChange(value) }))),
             React.createElement(FormRow, { label: "Default Value" }, data.FreeTextColumnSettings.DataType === 'Boolean' ? (React.createElement(CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
                     props.onChange(Object.assign(Object.assign({}, data), { DefaultValue }));
                 } })) : (React.createElement(AdaptableInput, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'Date' && data.DefaultValue
@@ -131,13 +121,13 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
                     ? 'number'
                     : data.FreeTextColumnSettings.DataType === 'Date'
                         ? 'date'
-                        : 'text', placeholder: "Default Column Value (not required)", onChange: (e) => handleDefaultValueChange(e) }))),
+                        : 'text', placeholder: "Default Column Value (optional)", onChange: (e) => handleDefaultValueChange(e) }))),
             React.createElement(FormRow, { label: "Header Tooltip" },
                 React.createElement(Input, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: ((_a = data.FreeTextColumnSettings) === null || _a === void 0 ? void 0 : _a.HeaderToolTip) || '', onChange: (e) => handleSpecialColumnSettingsChange({
                         HeaderToolTip: e.target.value,
                     }) })),
             ' ',
-            data.FreeTextColumnSettings.DataType == 'String' && (React.createElement(FormRow, { label: "Editor Type" },
+            data.FreeTextColumnSettings.DataType == 'String' && (React.createElement(FormRow, { label: "Cell Editor" },
                 React.createElement(Radio, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
                 React.createElement(Radio, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
         ErrorMessage ? (React.createElement(ErrorBox, { mt: 2, mb: 2 }, ErrorMessage)) : null,