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

package/src/View/Shortcut/Wizard/ShortcutWizard.js

@@ -48,9 +48,9 @@ export const ShortcutWizard = (props) => {
                 isValid: isScopeValid,
                 details: 'Specify where Shortcut should be applied',
                 renderSummary: () => renderScopeSummary(shortcut.Scope, {
-                    scopeWholeRow: 'Shortcut is triggered for matching rows',
-                    scopeColumns: 'Shortcut is triggered in cells in selected columns',
-                    scopeDataTypes: 'Shortcut is triggered for cells with selected data type',
+                    scopeWholeRow: 'Shortcut is triggered for all numeric cells',
+                    scopeColumns: 'Shortcut is triggered for cells in selected columns',
+                    scopeDataTypes: 'Shortcut is triggered for all numeric cells',
                 }),
                 render: () => (React.createElement(Box, { padding: 2 },
                     React.createElement(ShortcutScopeWizardSection, { onChange: setShortcut }))),
@@ -83,6 +83,7 @@ export const ShortcutWizard = (props) => {
             },
             '-',
             {
+                details: 'Review the Shortcut',
                 render: () => {
                     return (React.createElement(Box, { padding: 2 },
                         React.createElement(OnePageWizardSummary, null)));

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -6,12 +6,12 @@ import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
 import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
 import { Flex } from 'rebass';
-import DropdownButton from '../../components/DropdownButton';
 import Input from '../../components/Input';
 import { ButtonApply } from '../Components/Buttons/ButtonApply';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { UIHelper } from '../UIHelper';
 import { connect } from 'react-redux';
+import { Select } from '../../components/Select';
 class SmartEditViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -43,6 +43,7 @@ class SmartEditViewPanelComponent extends React.Component {
         const operationMenuItems = EnumExtensions.getNames(MathOperation).map((mathOperation, index) => {
             return {
                 onClick: () => this.props.onSmartEditOperationChange(mathOperation),
+                value: mathOperation,
                 label: mathOperation,
             };
         });
@@ -52,6 +53,7 @@ class SmartEditViewPanelComponent extends React.Component {
                 return {
                     onClick: () => this.props.onSmartEditOperationChange(operation),
                     label: operation.name,
+                    value: operation,
                 };
             }));
         }
@@ -65,12 +67,12 @@ class SmartEditViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__SmartEdit__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(Flex, null,
-                React.createElement(DropdownButton, { className: `ab-${elementType}__SmartEdit__select`, marginRight: 2, items: operationMenuItems, style: { fontSize: 'small' }, columns: ['label'], disabled: shouldDisable, variant: "outlined" }, typeof this.props.SmartEditOperation === 'object'
-                    ? this.props.SmartEditOperation.name
-                    : this.props.SmartEditOperation),
+                React.createElement(Select, { value: typeof this.props.SmartEditOperation === 'object'
+                        ? this.props.SmartEditOperation.name
+                        : this.props.SmartEditOperation, options: operationMenuItems, onChange: (operation) => this.props.onSmartEditOperationChange(operation), style: { marginRight: 1 } }),
                 React.createElement(Input, { style: {
                         width: '5rem',
-                    }, className: `ab-${elementType}__SmartEdit__select-value`, value: this.props.SmartEditValue.toString(), type: "number", placeholder: "Enter a Number", step: "any", onChange: (e) => this.onSmartEditValueChange(e), disabled: shouldDisable, marginRight: 2 })),
+                    }, className: `ab-${elementType}__SmartEdit__select-value`, value: this.props.SmartEditValue.toString(), type: "number", placeholder: "Enter a Number", step: "any", onChange: (e) => this.onSmartEditValueChange(e), disabled: shouldDisable })),
             React.createElement(Flex, null,
                 !shouldDisable && (React.createElement(ButtonApply, { onClick: () => this.onApplyClick(), style: applyButtonStyle, className: `ab-${elementType}__SmartEdit__apply`, tooltip: "Apply Smart Edit", disabled: StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                         (this.props.PreviewInfo != null &&

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -4,6 +4,7 @@ import { Flex } from 'rebass';
 import { CheckBox } from '../components/CheckBox';
 import FormLayout, { FormRow } from '../components/FormLayout';
 import { Tabs } from '../components/Tabs';
+import { ColumnFilterModuleId } from '../Utilities/Constants/ModuleConstants';
 import { useAdaptable } from './AdaptableContext';
 export const SpecialColumnSettingsWizardStep = (props) => {
     var _a, _b;
@@ -34,7 +35,9 @@ export const SpecialColumnSettingsWizardStep = (props) => {
                             { size: '30%', name: 'third' },
                         ] },
                         React.createElement(FormRow, null,
-                            React.createElement(CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getColumnFilterOptions().enableFilterOnSpecialColumns }, "Filterable"),
+                            React.createElement(CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getColumnFilterOptions()
+                                    .enableFilterOnSpecialColumns ||
+                                    adaptable.EntitlementService.getEntitlementAccessLevelForModule(ColumnFilterModuleId) == 'Hidden' }, "Filterable"),
                             React.createElement(CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
                             React.createElement(CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
                         React.createElement(FormRow, null,

package/src/View/StateManagement/StateManagementPopup.js

@@ -9,19 +9,19 @@ export const StateManagementPopup = (props) => {
     const baseClassName = 'ab-ManageState';
     return (React.createElement(PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
         React.createElement(Panel, { className: `${baseClassName}__panel`, "data-name": "user-state", header: 'User State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginRight: 2, mb: 2 },
-            React.createElement(HelpBlock, { marginBottom: 2 }, 'Clear all current user state that has been persisted.'),
-            React.createElement(HelpBlock, null, 'This will cause this window to close and any state you have previously created will be lost and the initial Predefined Config will then be reapplied.'),
-            React.createElement(ClearButton, { "data-name": "clear-user-state-button", tone: "error", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State")),
+            React.createElement(HelpBlock, { marginBottom: 2 }, 'Clear all current user state that has been persisted'),
+            React.createElement(HelpBlock, { style: { color: 'var(--ab-color-warn)' } }, 'This will cause this window to close and any state you have previously created will be lost and the initial Predefined Config will then be reapplied.'),
+            React.createElement(ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State")),
         React.createElement(Panel, { className: `${baseClassName}__panel`, "data-name": "predefined-config", header: 'Load Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
-            React.createElement(HelpBlock, { marginTop: 2 }, 'Load Predefined Config (from a .json file).  This will cause this window to close.'),
+            React.createElement(HelpBlock, { marginTop: 2 }, 'Load Predefined Config (from a .json file) - this will cause this window to close'),
             ' ',
             React.createElement(LoadButton, { tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json), "data-name": "load-predefined-config-button" }, "Load Predefined Config")),
         React.createElement(Panel, { className: `${baseClassName}__panel`, "data-name": "adaptable-state", header: 'Export Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
-            React.createElement(HelpBlock, { marginTop: 2, marginBottom: 2 }, 'Exports the currently persisted Adaptable state.'),
+            React.createElement(HelpBlock, { marginTop: 2, marginBottom: 2 }, 'Exports the currently persisted Adaptable State'),
             ' ',
             React.createElement(ExportDropdown, { api: props.api, type: "adaptableState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'], "data-name": "export-adaptable-state-dropdown" }, "Select Export Destination")),
         React.createElement(Panel, { className: `${baseClassName}__panel`, "data-name": "initial-predefined-config", header: 'Export Initial Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
-            React.createElement(HelpBlock, { marginTop: 2, marginBottom: 2 }, 'Exports the Predefined Config which was provided at design time.'),
+            React.createElement(HelpBlock, { marginTop: 2, marginBottom: 2 }, 'Exports the Predefined Config which was provided at design time'),
             ' ',
             React.createElement(ExportDropdown, { api: props.api, type: "predefinedConfig", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'], "data-name": "export-initial-predefined-config-dropdown" }, "Select Export Destination"))));
 };

package/src/View/StatusBar/StatusBarPopup.js

@@ -35,5 +35,5 @@ export const StatusBarPopup = (props) => {
             dragAndDropTab: false,
             deleteTab: false,
             editTabName: false,
-        }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'AdapTable Status Bar Panels', unusedPanelTitle: "Available Module Status Panels", dragItemText: "Drag into a Status Bar Panel below" })) : (React.createElement(EmptyContent, null, "To enable this feature add to Grid Options statusPanels the Adaptable Status Panel."))));
+        }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'AdapTable Status Bar Panels', unusedPanelTitle: "Available Status Bar Components", dragItemText: "Drag into a Status Bar Panel below" })) : (React.createElement(EmptyContent, null, "To enable this feature add to Grid Options statusPanels the Adaptable Status Panel."))));
 };

package/src/View/StyledColumn/Wizard/StyledColumnBadgeSection.js

@@ -15,6 +15,7 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { StyledColumnBadgePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
 import { Badge } from '../../Components/Badge';
 import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
+import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE } from '../../../Utilities/Constants/GeneralConstants';
 const BadgeEditor = (props) => {
     var _a, _b;
     const { api } = useOnePageAdaptableWizardContext();
@@ -22,8 +23,10 @@ const BadgeEditor = (props) => {
     // badges evaluate predicate per value
     const predicateDefs = api.styledColumnApi.internalApi.getBadgePredicateDefsForColumn(columnId);
     const dataType = api.columnApi.getColumnDataTypeForColumnId(columnId);
-    const previewValue = dataType === 'Number' || dataType == 'NumberArray' ? '12345' : 'Hello world';
-    return (React.createElement(Flex, { className: "ab-Badge-Definition-Editor", mb: 15, p: 3 },
+    const previewValue = dataType === 'Number' || dataType == 'NumberArray' ? DEFAULT_INTEGER_DISPLAY_VALUE : DEFAULT_STRING_DISPLAY_VALUE;
+    return (React.createElement(
+        Flex,
+        { className: "ab-Badge-Definition-Editor", mb: 15, p: 3 },
         React.createElement(Box, { flex: 1 },
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Preview" },
@@ -38,11 +41,15 @@ const BadgeEditor = (props) => {
                         ] },
                         React.createElement(SimpleButton, { variant: "raised" }, "Edit Badge Style"))),
                 !api.columnApi.hasArrayDataType(columnId) && ( // dont show predicates for arrays
-                React.createElement(FormRow, { label: 'Predicate' }, columnId ? (React.createElement(React.Fragment, null,
-                    React.createElement(HelpBlock, { fontSize: 2, mb: 1, mt: 2 }, "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)"),
-                    React.createElement(PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
-                            onChange(Object.assign(Object.assign({}, badge), { Predicate: predicate }));
-                        }, onClear: () => onChange(Object.assign(Object.assign({}, badge), { Predicate: undefined })) }))) : (React.createElement(ErrorBox, null, "Select a column first")))),
+                (React.createElement(
+                    FormRow,
+                    { label: 'Predicate' },
+                    columnId ? (React.createElement(React.Fragment, null,
+                        React.createElement(HelpBlock, { fontSize: 2, mb: 1, mt: 2 }, "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)"),
+                        React.createElement(PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
+                                onChange(Object.assign(Object.assign({}, badge), { Predicate: predicate }));
+                            }, onClear: () => onChange(Object.assign(Object.assign({}, badge), { Predicate: undefined })) }))) : (React.createElement(ErrorBox, null, "Select a column first"))
+                ))),
                 React.createElement(FormRow, { label: "Icon" },
                     React.createElement(HelpBlock, { fontSize: 2, mb: 1, mt: 2 }, "Select (optional) Icon (and Icon position) to display in the Badge"),
                     ' ',
@@ -69,7 +76,8 @@ const BadgeEditor = (props) => {
                             },
                         ] }, (_b = badge.IconPosition) !== null && _b !== void 0 ? _b : 'Start'))))),
         React.createElement(Box, { justifyContent: "end" },
-            React.createElement(SimpleButton, { icon: "delete", onClick: props.onDelete }))));
+            React.createElement(SimpleButton, { icon: "delete", onClick: props.onDelete }))
+    ));
 };
 export const renderBadgeSummary = (styledColumn) => {
     return React.createElement(StyledColumnBadgePreview, { data: styledColumn });

package/src/View/StyledColumn/Wizard/StyledColumnSparklineSettingsSection.js

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { Box, Flex } from 'rebass';
 import { CheckBox } from '../../../components/CheckBox';
 import { ColorPicker } from '../../../components/ColorPicker';
-import DropdownButton from '../../../components/DropdownButton';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import Input from '../../../components/Input';
+import { Select } from '../../../components/Select';
 import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { setInPath } from '../../../Utilities/Extensions/ObjectExtensions';
@@ -13,24 +13,21 @@ import AdaptableInput from '../../Components/AdaptableInput';
 import { BLACK, LIGHT_BLUE, LIGHT_GRAY, YELLOW } from '../../UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 const CommonProperties = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
     const { data, api } = useOnePageAdaptableWizardContext();
     const axisTypeOptions = React.useMemo(() => {
         return [
             {
                 label: 'Number',
                 value: 'number',
-                onClick: () => props.onOptionChange(['axis', 'type'], 'number'),
             },
             {
                 label: 'Category',
                 value: 'category',
-                onClick: () => props.onOptionChange(['axis', 'type'], 'category'),
             },
             {
                 label: 'Time',
                 value: 'time',
-                onClick: () => props.onOptionChange(['axis', 'type'], 'time'),
             },
         ];
     }, [data]);
@@ -51,21 +48,22 @@ const CommonProperties = (props) => {
         React.createElement(Tabs.Content, null,
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Axis Type" },
-                    React.createElement(DropdownButton, { columns: ['label'], items: axisTypeOptions }, (_k = (_j = axisTypeOptions.find((option) => { var _a, _b, _c; return option.value === ((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.SparkLineStyle) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.axis) === null || _c === void 0 ? void 0 : _c.type); })) === null || _j === void 0 ? void 0 : _j.label) !== null && _k !== void 0 ? _k : 'Select Axis Type')),
+                    React.createElement(Box, { maxWidth: 180 },
+                        React.createElement(Select, { value: (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.SparkLineStyle) === null || _j === void 0 ? void 0 : _j.options) === null || _k === void 0 ? void 0 : _k.axis) === null || _l === void 0 ? void 0 : _l.type, options: axisTypeOptions, onChange: (value) => props.onOptionChange(['axis', 'type'], value), placeholder: "Select Axis Type" }))),
                 React.createElement(FormRow, { label: "Stroke Color" },
-                    React.createElement(ColorPicker, { api: api, value: (_p = (_o = (_m = (_l = data.SparkLineStyle) === null || _l === void 0 ? void 0 : _l.options) === null || _m === void 0 ? void 0 : _m.axis) === null || _o === void 0 ? void 0 : _o.stroke) !== null && _p !== void 0 ? _p : '#fff', onChange: (color) => props.onOptionChange(['axis', 'stroke'], color) })),
+                    React.createElement(ColorPicker, { api: api, value: (_q = (_p = (_o = (_m = data.SparkLineStyle) === null || _m === void 0 ? void 0 : _m.options) === null || _o === void 0 ? void 0 : _o.axis) === null || _p === void 0 ? void 0 : _p.stroke) !== null && _q !== void 0 ? _q : '#fff', onChange: (color) => props.onOptionChange(['axis', 'stroke'], color) })),
                 React.createElement(FormRow, { label: "Stroke Width" },
-                    React.createElement(AdaptableInput, { type: "number", value: (_t = (_s = (_r = (_q = data.SparkLineStyle) === null || _q === void 0 ? void 0 : _q.options) === null || _r === void 0 ? void 0 : _r.axis) === null || _s === void 0 ? void 0 : _s.strokeWidth) !== null && _t !== void 0 ? _t : 0, onChange: (event) => props.onOptionChange(['axis', 'strokeWidth'], parseFloat(event.target.value)) })))),
+                    React.createElement(AdaptableInput, { type: "number", value: (_u = (_t = (_s = (_r = data.SparkLineStyle) === null || _r === void 0 ? void 0 : _r.options) === null || _s === void 0 ? void 0 : _s.axis) === null || _t === void 0 ? void 0 : _t.strokeWidth) !== null && _u !== void 0 ? _u : 0, onChange: (event) => props.onOptionChange(['axis', 'strokeWidth'], parseFloat(event.target.value)) })))),
         React.createElement(Tabs.Content, null,
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Size" },
-                    React.createElement(AdaptableInput, { type: "number", value: (_w = (_v = (_u = data.SparkLineStyle) === null || _u === void 0 ? void 0 : _u.options) === null || _v === void 0 ? void 0 : _v.highlightStyle) === null || _w === void 0 ? void 0 : _w.size, onChange: (event) => props.onOptionChange(['highlightStyle', 'size'], parseFloat(event.target.value)) })),
+                    React.createElement(AdaptableInput, { type: "number", value: (_x = (_w = (_v = data.SparkLineStyle) === null || _v === void 0 ? void 0 : _v.options) === null || _w === void 0 ? void 0 : _w.highlightStyle) === null || _x === void 0 ? void 0 : _x.size, onChange: (event) => props.onOptionChange(['highlightStyle', 'size'], parseFloat(event.target.value)) })),
                 React.createElement(FormRow, { label: "Fill" },
-                    React.createElement(ColorPicker, { api: api, value: (_0 = (_z = (_y = (_x = data.SparkLineStyle) === null || _x === void 0 ? void 0 : _x.options) === null || _y === void 0 ? void 0 : _y.highlightStyle) === null || _z === void 0 ? void 0 : _z.fill) !== null && _0 !== void 0 ? _0 : YELLOW, onChange: (color) => props.onOptionChange(['highlightStyle', 'fill'], color) })),
+                    React.createElement(ColorPicker, { api: api, value: (_1 = (_0 = (_z = (_y = data.SparkLineStyle) === null || _y === void 0 ? void 0 : _y.options) === null || _z === void 0 ? void 0 : _z.highlightStyle) === null || _0 === void 0 ? void 0 : _0.fill) !== null && _1 !== void 0 ? _1 : YELLOW, onChange: (color) => props.onOptionChange(['highlightStyle', 'fill'], color) })),
                 React.createElement(FormRow, { label: "Stroke" },
-                    React.createElement(ColorPicker, { api: api, value: (_4 = (_3 = (_2 = (_1 = data.SparkLineStyle) === null || _1 === void 0 ? void 0 : _1.options) === null || _2 === void 0 ? void 0 : _2.highlightStyle) === null || _3 === void 0 ? void 0 : _3.stroke) !== null && _4 !== void 0 ? _4 : LIGHT_GRAY, onChange: (color) => props.onOptionChange(['highlightStyle', 'stroke'], color) })),
+                    React.createElement(ColorPicker, { api: api, value: (_5 = (_4 = (_3 = (_2 = data.SparkLineStyle) === null || _2 === void 0 ? void 0 : _2.options) === null || _3 === void 0 ? void 0 : _3.highlightStyle) === null || _4 === void 0 ? void 0 : _4.stroke) !== null && _5 !== void 0 ? _5 : LIGHT_GRAY, onChange: (color) => props.onOptionChange(['highlightStyle', 'stroke'], color) })),
                 React.createElement(FormRow, { label: "Stroke Width" },
-                    React.createElement(AdaptableInput, { type: "number", value: (_7 = (_6 = (_5 = data.SparkLineStyle) === null || _5 === void 0 ? void 0 : _5.options) === null || _6 === void 0 ? void 0 : _6.highlightStyle) === null || _7 === void 0 ? void 0 : _7.strokeWidth, onChange: (event) => props.onOptionChange(['highlightStyle', 'strokeWidth'], parseFloat(event.target.value)) }))))));
+                    React.createElement(AdaptableInput, { type: "number", value: (_8 = (_7 = (_6 = data.SparkLineStyle) === null || _6 === void 0 ? void 0 : _6.options) === null || _7 === void 0 ? void 0 : _7.highlightStyle) === null || _8 === void 0 ? void 0 : _8.strokeWidth, onChange: (event) => props.onOptionChange(['highlightStyle', 'strokeWidth'], parseFloat(event.target.value)) }))))));
 };
 const SparklineMarkerProperties = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -116,16 +114,14 @@ const CrossHairsProperties = (props) => {
         'square',
     ];
     const buildLineDashProperties = (key) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         const lineDashOptions = lineDashes.map((item) => ({
             label: Humanize(item),
             value: item,
-            onClick: () => props.onOptionChange(['crosshairs', key, 'lineDash'], item),
         }));
         const lineCapOptionsItems = lineCapOptions.map((item) => ({
             label: Humanize(item),
             value: item,
-            onClick: () => props.onOptionChange(['crosshairs', key, 'lineCap'], item),
         }));
         return (React.createElement(FormLayout, null,
             React.createElement(FormRow, { label: "Show" },
@@ -135,9 +131,9 @@ const CrossHairsProperties = (props) => {
             React.createElement(FormRow, { label: "Stroke Width" },
                 React.createElement(AdaptableInput, { type: "number", value: (_j = (_h = (_g = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _g === void 0 ? void 0 : _g[key]) === null || _h === void 0 ? void 0 : _h.strokeWidth) !== null && _j !== void 0 ? _j : 1, onChange: (event) => props.onOptionChange(['crosshairs', key, 'strokeWidth'], event.target.value) })),
             React.createElement(FormRow, { label: "Line Dash" },
-                React.createElement(DropdownButton, { columns: ['label'], items: lineDashOptions }, (_l = (_k = lineDashOptions.find((option) => { var _a, _b; return option.value === ((_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.lineDash); })) === null || _k === void 0 ? void 0 : _k.label) !== null && _l !== void 0 ? _l : 'Solid')),
+                React.createElement(Select, { value: (_m = (_l = (_k = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _k === void 0 ? void 0 : _k[key]) === null || _l === void 0 ? void 0 : _l.lineDash) !== null && _m !== void 0 ? _m : 'solid', onChange: (value) => props.onOptionChange(['crosshairs', key, 'lineDash'], value), options: lineDashOptions, placeholder: "Select Line Dash" })),
             React.createElement(FormRow, { label: "Line Cap" },
-                React.createElement(DropdownButton, { columns: ['label'], items: lineCapOptionsItems }, (_o = (_m = lineCapOptionsItems.find((option) => { var _a, _b; return option.value === ((_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.lineCap); })) === null || _m === void 0 ? void 0 : _m.label) !== null && _o !== void 0 ? _o : 'Butt'))));
+                React.createElement(Select, { value: (_q = (_p = (_o = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _o === void 0 ? void 0 : _o[key]) === null || _p === void 0 ? void 0 : _p.lineCap) !== null && _q !== void 0 ? _q : 'butt', onChange: (value) => props.onOptionChange(['crosshairs', key, 'lineCap'], value), options: lineCapOptionsItems, placeholder: "Select Line Cap" }))));
     };
     return (React.createElement(Flex, null,
         React.createElement(Box, { mr: 3 },
@@ -236,17 +232,17 @@ const SparklineObjectNumberArrayProperties = (props) => {
             React.createElement(Tag, null, sparklineDataItem)))));
 };
 export const StyledColumnSparklineSettingsSection = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     const { data, api } = useOnePageAdaptableWizardContext();
     const handleTypeChange = React.useCallback((type) => {
         const newStyledColumn = Object.assign(Object.assign({}, data), { SparkLineStyle: Object.assign(Object.assign({}, data.SparkLineStyle), { options: Object.assign(Object.assign({}, data.SparkLineStyle.options), { type }) }) });
         props.onChange(newStyledColumn);
     }, [data]);
     const sparklineTypeOptions = React.useMemo(() => [
-        { label: 'Line', value: 'line', onClick: () => handleTypeChange('line') },
-        { label: 'Area', value: 'area', onClick: () => handleTypeChange('area') },
-        { label: 'Column', value: 'column', onClick: () => handleTypeChange('column') },
-        { label: 'Bar', value: 'bar', onClick: () => handleTypeChange('bar') },
+        { label: 'Line', value: 'line' },
+        { label: 'Area', value: 'area' },
+        { label: 'Column', value: 'column' },
+        { label: 'Bar', value: 'bar' },
     ], [data]);
     const handleOptionChange = React.useCallback((path, value) => {
         var _a;
@@ -260,7 +256,8 @@ export const StyledColumnSparklineSettingsSection = (props) => {
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Sparkline Type" },
-                        React.createElement(DropdownButton, { columns: ['label'], items: sparklineTypeOptions }, (_c = (_b = sparklineTypeOptions.find((option) => { var _a; return option.value === ((_a = data.SparkLineStyle.options) === null || _a === void 0 ? void 0 : _a.type); })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : 'Select Sparkline Type')),
+                        React.createElement(Box, { maxWidth: 160 },
+                            React.createElement(Select, { options: sparklineTypeOptions, value: (_b = data.SparkLineStyle.options) === null || _b === void 0 ? void 0 : _b.type, onChange: (value) => handleOptionChange(['type'], value), placeholder: "Select Sparkline Type" }))),
                     isObjectNumberArray && (React.createElement(SparklineObjectNumberArrayProperties, { onOptionChange: handleOptionChange }))))),
         React.createElement(CommonProperties, { onOptionChange: handleOptionChange }),
         (() => {

package/src/View/StyledColumn/Wizard/StyledColumnWizard.js

@@ -68,8 +68,7 @@ export const StyledColumnWizard = (props) => {
                 React.createElement(StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }))),
         });
     }
-    else if (styledColumn.CheckBoxStyle ||
-        styledColumn.GradientStyle ||
+    else if (styledColumn.GradientStyle ||
         styledColumn.PercentBarStyle) {
         specificSteps.push({
             details: 'Create the Style to apply',
@@ -113,7 +112,7 @@ export const StyledColumnWizard = (props) => {
             {
                 isValid: isValidStyledColumnColumn,
                 renderSummary: renderStyledColumnColumnSummary,
-                details: 'Select a Column where the Style will be applied',
+                details: 'Select the Column where the Style will be applied',
                 render: () => {
                     return (React.createElement(Box, { padding: 2, style: { height: '100%' } },
                         React.createElement(StyledColumnWizardColumnSection, { isNew: props.isNew, onChange: setStyledColumn })));

package/src/View/StyledColumn/Wizard/StyledColumnWizardColumnSection.d.ts

@@ -2,7 +2,7 @@
 import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
 export declare const renderStyledColumnColumnSummary: (data: StyledColumn) => JSX.Element;
 export declare const isValidStyledColumnColumn: (data: StyledColumn) => true | string;
-export declare type StyledColumnWizardColumnSectionProps = {
+export type StyledColumnWizardColumnSectionProps = {
     onChange: (data: StyledColumn) => void;
     isNew: boolean;
 };

package/src/View/StyledColumn/Wizard/StyledColumnWizardColumnSection.js

@@ -23,14 +23,16 @@ export const StyledColumnWizardColumnSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const sortableCols = React.useMemo(() => {
         let sortableColumns = [];
-        if (data.CheckBoxStyle) {
-            sortableColumns = api.columnApi.getBooleanColumns();
-        }
-        else if (data.SparkLineStyle) {
+        if (data.SparkLineStyle) {
             sortableColumns = api.columnApi.getNumericArrayColumns();
         }
         else if (data.BadgeStyle) {
-            sortableColumns = [...api.columnApi.getNumericColumns(), ...api.columnApi.getStringColumns(), ...api.columnApi.getStringArrayColumns(), ...api.columnApi.getNumberArrayColumns()];
+            sortableColumns = [
+                ...api.columnApi.getNumericColumns(),
+                ...api.columnApi.getStringColumns(),
+                ...api.columnApi.getStringArrayColumns(),
+                ...api.columnApi.getNumberArrayColumns(),
+            ];
         }
         else {
             sortableColumns = api.columnApi.getNumericColumns();

package/src/View/StyledColumn/Wizard/StyledColumnWizardSettingsSection.d.ts

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

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Box, Flex } from 'rebass';
 import { Tag } from '../../../../../components/Tag';
+import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../../../Utilities/Constants/GeneralConstants';
 import { useAdaptable } from '../../../../AdaptableContext';
 import { Badge } from '../../../../Components/Badge';
 export const StyledColumnBadgePreview = ({ data }) => {
@@ -9,10 +10,9 @@ export const StyledColumnBadgePreview = ({ data }) => {
     if (!badgeStyle || badgeStyle.Badges.length === 0) {
         return React.createElement("div", null, "No Badges Defined");
     }
-    let value = 'Hello world';
-    if (adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'Number') {
-        value = '12345';
-    }
+    const value = adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'Number'
+        ? DEFAULT_INTEGER_DISPLAY_VALUE
+        : DEFAULT_STRING_DISPLAY_VALUE;
     return (React.createElement(Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
         const predicateStr = badge.Predicate
             ? adaptable.api.predicateApi.predicateToString(badge.Predicate)

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection.js

@@ -3,7 +3,6 @@ import { Box, Flex } from 'rebass';
 import { CheckBox } from '../../../../components/CheckBox';
 import ErrorBox from '../../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
 import { ColorPicker } from '../../../../components/ColorPicker';
 import { RangesComponent } from '../../../Components/RangesComponent';
@@ -57,9 +56,6 @@ const getColumnComparison = (columnComparison, api) => {
             } })));
 };
 export const renderStyledColumnStyleSummary = (data, api) => {
-    if (data.CheckBoxStyle) {
-        return React.createElement(Tag, null, "Checkbox Style");
-    }
     if (data.GradientStyle) {
         if (data.GradientStyle.CellRanges) {
             return getRanges(data.GradientStyle.CellRanges, data.GradientStyle.RangeValueType);
@@ -231,10 +227,6 @@ export const StyledColumnWizardStyleSection = (props) => {
     }, [data]);
     const disabled = !data.ColumnId;
     return (React.createElement(Box, null,
-        data.CheckBoxStyle && (React.createElement(Tabs, null,
-            React.createElement(Tabs.Tab, null, "Check Box Column"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(CheckBox, { marginLeft: 2, readOnly: true, checked: true }, "Display Column As CheckBox")))),
         (data === null || data === void 0 ? void 0 : data.GradientStyle) && (React.createElement(RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: (_a = data.GradientStyle) === null || _a === void 0 ? void 0 : _a.CellRanges, rangeValueType: (_b = data.GradientStyle) === null || _b === void 0 ? void 0 : _b.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_c = data === null || data === void 0 ? void 0 : data.GradientStyle) === null || _c === void 0 ? void 0 : _c.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
         data.PercentBarStyle && (React.createElement(React.Fragment, null,
             React.createElement(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: (_d = data.PercentBarStyle) === null || _d === void 0 ? void 0 : _d.CellRanges, rangeValueType: (_e = data.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_f = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _f === void 0 ? void 0 : _f.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),

package/src/View/StyledColumn/Wizard/StyledColumnWizardTypeSection.js

@@ -14,9 +14,6 @@ export const renderStyledColumnTypeSummary = (data) => {
     else if (data.PercentBarStyle) {
         type = 'Percent Bar';
     }
-    else if (data.CheckBoxStyle) {
-        type = 'Check Box';
-    }
     else if (data.SparkLineStyle) {
         type = 'Spark Line';
     }
@@ -34,7 +31,6 @@ export const StyledColumnWizardTypeSection = (props) => {
         const newStyledColumn = Object.assign({}, data);
         delete newStyledColumn.GradientStyle;
         delete newStyledColumn.PercentBarStyle;
-        delete newStyledColumn.CheckBoxStyle;
         delete newStyledColumn.SparkLineStyle;
         delete newStyledColumn.BadgeStyle;
         switch (type) {
@@ -44,9 +40,6 @@ export const StyledColumnWizardTypeSection = (props) => {
             case 'percent':
                 newStyledColumn.PercentBarStyle = {};
                 break;
-            case 'checkbox':
-                newStyledColumn.CheckBoxStyle = true;
-                break;
             case 'sparkline':
                 newStyledColumn.SparkLineStyle = {
                     options: {
@@ -67,8 +60,8 @@ export const StyledColumnWizardTypeSection = (props) => {
         React.createElement(Tabs, { autoFocus: false, padding: 2 },
             React.createElement(Tabs.Tab, null, "Type"),
             React.createElement(Tabs.Content, null,
-                React.createElement(TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }),
-                React.createElement(TypeRadio, { text: "Percent Bar", description: "Display a coloured bar where the width is based on the cell (Numeric Columns)", checked: Boolean(data.PercentBarStyle), onClick: () => handleTypeChange('percent') }),
+                React.createElement(TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a Gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }),
+                React.createElement(TypeRadio, { text: "Percent Bar", description: "Display a coloured Bar where the width is based on the cell (Numeric Columns)", checked: Boolean(data.PercentBarStyle), onClick: () => handleTypeChange('percent') }),
                 adaptable.api.styledColumnApi.canDisplaySparklines() && (React.createElement(TypeRadio, { text: "Sparkline", description: "Render the column as a Sparkline (Numeric Array Columns)", checked: Boolean(data.SparkLineStyle), onClick: () => handleTypeChange('sparkline') })),
                 React.createElement(TypeRadio, { text: "Badge", description: "Display the column's values as Badges (All Columns)", checked: Boolean(data.BadgeStyle), onClick: () => handleTypeChange('badge') })))));
 };

package/src/View/SystemStatus/SystemStatusViewPanel.js

@@ -11,7 +11,7 @@ class SystemStatusViewPanelComponent extends React.Component {
         const { color, background } = getStatusItemStyle(currentSystemStatusMessageInfo);
         const message = currentSystemStatusMessageInfo === null || currentSystemStatusMessageInfo === void 0 ? void 0 : currentSystemStatusMessageInfo.statusMessage;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__SystemStatus__wrap` },
+        return (React.createElement(Flex, { alignItems: "stretch", className: `ab-${elementType}__SystemStatus__wrap` },
             React.createElement(Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__SystemStatus__text`, marginRight: 2, padding: 2, color: color, backgroundColor: message ? background : '', fontSize: 'var( --ab-font-size-2)', alignItems: "center", "data-name": "system-status-message" }, message || '0 Messages')));
     }
 }

package/src/View/SystemStatus/Utilities/getStatusItemStyle.js

@@ -4,7 +4,7 @@ export const getStatusItemStyle = (systemStatusMessageInfo) => {
     const background = UIHelper.getColorByMessageType((_a = systemStatusMessageInfo === null || systemStatusMessageInfo === void 0 ? void 0 : systemStatusMessageInfo.statusType) !== null && _a !== void 0 ? _a : 'Success');
     const color = systemStatusMessageInfo
         ? UIHelper.getButtonTextColourForMessageType(systemStatusMessageInfo.statusType)
-        : '';
+        : 'var(--ab-color-text-on-primary)';
     return {
         background,
         color,

package/src/View/Theme/ThemeEditor.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AccessLevel } from '../../types';
-export declare type FieldType = 'color' | 'number' | 'text';
+export type FieldType = 'color' | 'number' | 'text';
 export interface ThemeEditorProps {
     theme: string;
     accessLevel: AccessLevel;

package/src/View/Theme/ThemeViewPanel.js

@@ -2,13 +2,13 @@ import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
 import * as React from 'react';
 import join from '../../components/utils/join';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
-import DropdownButton from '../../components/DropdownButton';
 import { connect } from 'react-redux';
+import { Select } from '../../components/Select';
 class ThemeViewPanelComponent extends React.Component {
     render() {
         var _a, _b, _c, _d;
         const allThemes = (_c = (_b = (_a = this.props.api) === null || _a === void 0 ? void 0 : _a.themeApi) === null || _b === void 0 ? void 0 : _b.getThemes) === null || _c === void 0 ? void 0 : _c.call(_b);
-        let themes = allThemes.map((theme, index) => {
+        const themes = allThemes.map((theme, index) => {
             if (typeof theme === 'string') {
                 // protection against old state, which could be string
                 theme = {
@@ -18,6 +18,7 @@ class ThemeViewPanelComponent extends React.Component {
             }
             return {
                 label: theme.Description,
+                value: theme.Name,
                 onClick: () => this.onSelectTheme(theme),
             };
         });
@@ -34,7 +35,7 @@ class ThemeViewPanelComponent extends React.Component {
             }
             : { minWidth: '100%', fontSize: 'small' };
         return (React.createElement("div", { className: join(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Theme__wrap`) },
-            React.createElement(DropdownButton, { className: `ab-${elementType}__Theme__select`, style: dropDownStyle, items: themes, columns: ['label'], accessLevel: this.props.accessLevel }, currentThemeDescription)));
+            React.createElement(Select, { className: `ab-${elementType}__Theme__select`, options: themes, value: currentThemeObj === null || currentThemeObj === void 0 ? void 0 : currentThemeObj.Name, onChange: (theme) => this.onSelectTheme({ Name: theme }) })));
     }
     onSelectTheme(theme) {
         this.props.onSelectTheme(theme.Name);

package/src/View/UIHelper.d.ts

@@ -29,7 +29,7 @@ export declare const ORANGE: string;
 export declare function getHexForName(name: string): string;
 export declare function getDefaultColors(): string[];
 export declare function getEmptyConfigState(): EditableConfigEntityState;
-export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "string" | "number" | "date";
+export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "number" | "string" | "date";
 export declare function getPlaceholderForDataType(dataType: AdaptableColumnDataType): "Enter Value" | "Enter Number" | "Enter Date";
 export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document): HTMLElement;
 export declare function IsEmptyStyle(style: AdaptableStyle): boolean;

package/src/View/Wizard/ObjectTagsWizardSection.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AdaptableObject } from '../../PredefinedConfig/Common/AdaptableObject';
-declare type ObjectTagsWizardSectionProps<T extends AdaptableObject> = {
+type ObjectTagsWizardSectionProps<T extends AdaptableObject> = {
     onChange: (data: T) => void;
 };
 export declare const ObjectTagsWizardSection: <T extends AdaptableObject>(props: ObjectTagsWizardSectionProps<T>) => JSX.Element;

package/src/View/Wizard/OnePageAdaptableWizard.d.ts

@@ -4,7 +4,7 @@ import { TextProps } from 'rebass';
 import { AdaptableApi } from '../../types';
 import { ModuleInfo } from '../../Strategy/Interface/IModule';
 import { ExpressionEditorNamedQuery } from '../../components/ExpressionEditor/NamedQueryContext';
-export declare type OnePageAdaptableWizardContextType<T> = {
+export type OnePageAdaptableWizardContextType<T> = {
     data: T;
     sections: (OnePageAdaptableWizardSection<T> | '-')[];
     moduleInfo: ModuleInfo;

package/src/View/Wizard/OnePageWizards.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CSSProperties } from 'react';
 import { TextProps } from 'rebass';
-export declare type OnePageWizardContextType<T> = {
+export type OnePageWizardContextType<T> = {
     data: T;
     sections: (OnePageWizardSection<T> | '-')[];
     setCurrentSection: (index: number) => void;
@@ -11,7 +11,7 @@ export declare const SummaryText: React.FunctionComponent<React.PropsWithChildre
 export declare const FormDescriptionText: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
 export declare const OnePageWizardContext: React.Context<OnePageWizardContextType<any>>;
 export declare function useOnePageWizardContext<ENTITY>(): OnePageWizardContextType<ENTITY>;
-export declare type OnePageWizardSection<ENTITY> = {
+export type OnePageWizardSection<ENTITY> = {
     title: string;
     details?: React.ReactNode;
     isValid?: (data: ENTITY, context: OnePageWizardContextType<ENTITY>) => true | string;