@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.1

package/src/View/UIHelper.js

@@ -1,113 +1,106 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIHelper = exports.isBrowserDocumentAvailable = exports.setCSSVariableValue = exports.getCSSVariableValue = exports.getSimpleButtonPaddingWidth = exports.getAdaptableToolPanelWidth = exports.getButtonTextColourForMessageType = exports.getButtonTextColourForArrayandMessageType = exports.getButtonColourForAdaptableAlerts = exports.getMessageTypeFromAdaptableAlerts = exports.getWeekDayByIndex = exports.getScheduleDescription = exports.getButtonToneForMessageType = exports.getGlyphForMessageType = exports.getGlyphForStatusColour = exports.getStyleForMessageType = exports.getStyleForStatusColour = exports.getColorByMessageType = exports.getGlyphByMessageType = exports.getButtonToneByMessageType = exports.getMessageTypeByStatusColour = exports.IsNotEmptyStyle = exports.IsEmptyStyle = exports.getModalContainer = exports.getPlaceholderForDataType = exports.getDescriptionForDataType = exports.getEmptyConfigState = exports.getDefaultColors = exports.getHexForName = exports.ORANGE = exports.LIGHT_RED = exports.RED = exports.DARK_RED = exports.PURPLE = exports.MAGENTA = exports.CYAN = exports.LIGHT_BLUE = exports.BLUE = exports.DARK_BLUE = exports.LIGHT_YELLOW = exports.YELLOW = exports.LIME_GREEN = exports.GREEN = exports.DARK_GREEN = exports.BROWN = exports.GRAY = exports.LIGHT_GRAY = exports.WHITE = exports.BLACK = void 0;
-const tslib_1 = require("tslib");
-const EditableConfigEntityState_1 = require("./Components/SharedProps/EditableConfigEntityState");
-const Enums_1 = require("../PredefinedConfig/Common/Enums");
-const StringExtensions_1 = require("../Utilities/Extensions/StringExtensions");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
-exports.BLACK = 'Black';
-exports.WHITE = 'White';
-exports.LIGHT_GRAY = 'LightGray';
-exports.GRAY = 'Gray';
-exports.BROWN = 'Brown';
-exports.DARK_GREEN = 'DarkGreen';
-exports.GREEN = 'Green';
-exports.LIME_GREEN = 'LimeGreen';
-exports.YELLOW = 'Yellow';
-exports.LIGHT_YELLOW = 'LightYellow';
-exports.DARK_BLUE = 'DarkBlue';
-exports.BLUE = 'Blue';
-exports.LIGHT_BLUE = 'LightBlue';
+import { WizardStatus, } from './Components/SharedProps/EditableConfigEntityState';
+import { FontWeight, FontStyle, StatusColour } from '../PredefinedConfig/Common/Enums';
+import { StringExtensions } from '../Utilities/Extensions/StringExtensions';
+import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
+export const BLACK = 'Black';
+export const WHITE = 'White';
+export const LIGHT_GRAY = 'LightGray';
+export const GRAY = 'Gray';
+export const BROWN = 'Brown';
+export const DARK_GREEN = 'DarkGreen';
+export const GREEN = 'Green';
+export const LIME_GREEN = 'LimeGreen';
+export const YELLOW = 'Yellow';
+export const LIGHT_YELLOW = 'LightYellow';
+export const DARK_BLUE = 'DarkBlue';
+export const BLUE = 'Blue';
+export const LIGHT_BLUE = 'LightBlue';
 //xport const LIGHT_GREEN: string = 'LightGreen';
-exports.CYAN = 'Cyan';
-exports.MAGENTA = 'Magenta';
-exports.PURPLE = 'Purple';
-exports.DARK_RED = 'DarkRed';
-exports.RED = 'Red';
-exports.LIGHT_RED = 'LightRed';
-exports.ORANGE = 'Orange';
-function getHexForName(name) {
+export const CYAN = 'Cyan';
+export const MAGENTA = 'Magenta';
+export const PURPLE = 'Purple';
+export const DARK_RED = 'DarkRed';
+export const RED = 'Red';
+export const LIGHT_RED = 'LightRed';
+export const ORANGE = 'Orange';
+export function getHexForName(name) {
     switch (name) {
-        case exports.BLACK:
+        case BLACK:
             return '#000000';
-        case exports.WHITE:
+        case WHITE:
             return '#FFFFFF';
-        case exports.LIGHT_GRAY:
+        case LIGHT_GRAY:
             return '#D3D3D3';
-        case exports.GRAY:
+        case GRAY:
             return '#808080';
-        case exports.BROWN:
+        case BROWN:
             return '#A52A2A';
-        case exports.DARK_GREEN:
+        case DARK_GREEN:
             return '#006400';
-        case exports.GREEN:
+        case GREEN:
             return '#008000';
-        case exports.LIME_GREEN:
+        case LIME_GREEN:
             return '#32CD32';
-        case exports.YELLOW:
+        case YELLOW:
             return '#FFFF00';
-        case exports.LIGHT_YELLOW:
+        case LIGHT_YELLOW:
             return '#FFFFE0';
-        case exports.DARK_BLUE:
+        case DARK_BLUE:
             return '#00008B';
-        case exports.BLUE:
+        case BLUE:
             return '#0000FF';
-        case exports.LIGHT_BLUE:
+        case LIGHT_BLUE:
             return '#87CEFA';
-        case exports.CYAN:
+        case CYAN:
             return '#00FFFF';
-        case exports.MAGENTA:
+        case MAGENTA:
             return '#FF00FF';
-        case exports.PURPLE:
+        case PURPLE:
             return '#800080';
-        case exports.DARK_RED:
+        case DARK_RED:
             return '#8B0000';
-        case exports.RED:
+        case RED:
             return '#FF0000';
-        case exports.LIGHT_RED:
+        case LIGHT_RED:
             return '#DC143C';
-        case exports.ORANGE:
+        case ORANGE:
             return '#FFA500';
         default:
             return 'not found';
     }
 }
-exports.getHexForName = getHexForName;
-function getDefaultColors() {
+export function getDefaultColors() {
     return [
-        getHexForName(exports.BLACK),
-        getHexForName(exports.WHITE),
-        getHexForName(exports.LIGHT_GRAY),
-        getHexForName(exports.GRAY),
-        getHexForName(exports.BROWN),
-        getHexForName(exports.DARK_GREEN),
-        getHexForName(exports.GREEN),
-        getHexForName(exports.LIME_GREEN),
-        getHexForName(exports.YELLOW),
-        getHexForName(exports.LIGHT_YELLOW),
-        getHexForName(exports.DARK_BLUE),
-        getHexForName(exports.BLUE),
-        getHexForName(exports.LIGHT_BLUE),
-        getHexForName(exports.CYAN),
-        getHexForName(exports.MAGENTA),
-        getHexForName(exports.PURPLE),
-        getHexForName(exports.DARK_RED),
-        getHexForName(exports.RED),
-        getHexForName(exports.LIGHT_RED),
-        getHexForName(exports.ORANGE),
+        getHexForName(BLACK),
+        getHexForName(WHITE),
+        getHexForName(LIGHT_GRAY),
+        getHexForName(GRAY),
+        getHexForName(BROWN),
+        getHexForName(DARK_GREEN),
+        getHexForName(GREEN),
+        getHexForName(LIME_GREEN),
+        getHexForName(YELLOW),
+        getHexForName(LIGHT_YELLOW),
+        getHexForName(DARK_BLUE),
+        getHexForName(BLUE),
+        getHexForName(LIGHT_BLUE),
+        getHexForName(CYAN),
+        getHexForName(MAGENTA),
+        getHexForName(PURPLE),
+        getHexForName(DARK_RED),
+        getHexForName(RED),
+        getHexForName(LIGHT_RED),
+        getHexForName(ORANGE),
     ];
 }
-exports.getDefaultColors = getDefaultColors;
-function getEmptyConfigState() {
+export function getEmptyConfigState() {
     return {
         editedAdaptableObject: null,
         wizardStartIndex: 0,
-        wizardStatus: EditableConfigEntityState_1.WizardStatus.None,
+        wizardStatus: WizardStatus.None,
     };
 }
-exports.getEmptyConfigState = getEmptyConfigState;
-function getDescriptionForDataType(dataType) {
+export function getDescriptionForDataType(dataType) {
     switch (dataType) {
         case 'String':
             return 'string';
@@ -117,8 +110,7 @@ function getDescriptionForDataType(dataType) {
             return 'date';
     }
 }
-exports.getDescriptionForDataType = getDescriptionForDataType;
-function getPlaceholderForDataType(dataType) {
+export function getPlaceholderForDataType(dataType) {
     switch (dataType) {
         case 'String':
             return 'Enter Value';
@@ -128,8 +120,7 @@ function getPlaceholderForDataType(dataType) {
             return 'Enter Date';
     }
 }
-exports.getPlaceholderForDataType = getPlaceholderForDataType;
-function getModalContainer(adaptableOptions, document) {
+export function getModalContainer(adaptableOptions, document) {
     let modalContainer;
     if (adaptableOptions.containerOptions.modalContainer) {
         // this has been set, so we use the property
@@ -149,35 +140,31 @@ function getModalContainer(adaptableOptions, document) {
     }
     return modalContainer;
 }
-exports.getModalContainer = getModalContainer;
-function IsEmptyStyle(style) {
+export function IsEmptyStyle(style) {
     return !IsNotEmptyStyle(style);
 }
-exports.IsEmptyStyle = IsEmptyStyle;
-function IsNotEmptyStyle(style) {
+export function IsNotEmptyStyle(style) {
     return (style.BackColor != null ||
         style.ForeColor != null ||
         style.BorderColor != null ||
-        style.FontWeight != Enums_1.FontWeight.Normal ||
-        style.FontStyle != Enums_1.FontStyle.Normal ||
+        style.FontWeight != FontWeight.Normal ||
+        style.FontStyle != FontStyle.Normal ||
         style.FontSize != null ||
-        StringExtensions_1.StringExtensions.IsNotNullOrEmpty(style.ClassName));
+        StringExtensions.IsNotNullOrEmpty(style.ClassName));
 }
-exports.IsNotEmptyStyle = IsNotEmptyStyle;
-function getMessageTypeByStatusColour(statusColour) {
+export function getMessageTypeByStatusColour(statusColour) {
     switch (statusColour) {
-        case Enums_1.StatusColour.Error:
+        case StatusColour.Error:
             return 'Error';
-        case Enums_1.StatusColour.Warn:
+        case StatusColour.Warn:
             return 'Warning';
-        case Enums_1.StatusColour.Success:
+        case StatusColour.Success:
             return 'Success';
-        case Enums_1.StatusColour.Info:
+        case StatusColour.Info:
             return 'Info';
     }
 }
-exports.getMessageTypeByStatusColour = getMessageTypeByStatusColour;
-function getButtonToneByMessageType(messageType) {
+export function getButtonToneByMessageType(messageType) {
     switch (messageType) {
         case 'Info':
             return 'info';
@@ -191,8 +178,7 @@ function getButtonToneByMessageType(messageType) {
             return 'neutral';
     }
 }
-exports.getButtonToneByMessageType = getButtonToneByMessageType;
-function getGlyphByMessageType(messageType) {
+export function getGlyphByMessageType(messageType) {
     switch (messageType) {
         case 'Info':
             return 'info';
@@ -204,8 +190,7 @@ function getGlyphByMessageType(messageType) {
             return 'error';
     }
 }
-exports.getGlyphByMessageType = getGlyphByMessageType;
-function getColorByMessageType(messageType) {
+export function getColorByMessageType(messageType) {
     switch (messageType) {
         case 'Error':
             return 'var(--ab-color-error)';
@@ -217,26 +202,25 @@ function getColorByMessageType(messageType) {
             return 'var(--ab-color-info)';
     }
 }
-exports.getColorByMessageType = getColorByMessageType;
-function getStyleForStatusColour(statusColour) {
+export function getStyleForStatusColour(statusColour) {
     let result;
     switch (statusColour) {
-        case Enums_1.StatusColour.Info:
+        case StatusColour.Info:
             result = {
                 fill: 'var(--ab-color-info)',
             };
             break;
-        case Enums_1.StatusColour.Success:
+        case StatusColour.Success:
             result = {
                 fill: 'var(--ab-color-success)',
             };
             break;
-        case Enums_1.StatusColour.Warn:
+        case StatusColour.Warn:
             result = {
                 fill: 'var(--ab-color-warn)',
             };
             break;
-        case Enums_1.StatusColour.Error:
+        case StatusColour.Error:
             result = {
                 fill: 'var(--ab-color-error)',
             };
@@ -247,8 +231,7 @@ function getStyleForStatusColour(statusColour) {
     }
     return result;
 }
-exports.getStyleForStatusColour = getStyleForStatusColour;
-function getStyleForMessageType(messageType) {
+export function getStyleForMessageType(messageType) {
     let result;
     switch (messageType) {
         case 'Info':
@@ -277,21 +260,19 @@ function getStyleForMessageType(messageType) {
     }
     return result;
 }
-exports.getStyleForMessageType = getStyleForMessageType;
-function getGlyphForStatusColour(statusColour) {
+export function getGlyphForStatusColour(statusColour) {
     switch (statusColour) {
-        case Enums_1.StatusColour.Info:
+        case StatusColour.Info:
             return 'info';
-        case Enums_1.StatusColour.Success:
+        case StatusColour.Success:
             return 'check';
-        case Enums_1.StatusColour.Warn:
+        case StatusColour.Warn:
             return 'warning';
-        case Enums_1.StatusColour.Error:
+        case StatusColour.Error:
             return 'error';
     }
 }
-exports.getGlyphForStatusColour = getGlyphForStatusColour;
-function getGlyphForMessageType(messageType) {
+export function getGlyphForMessageType(messageType) {
     switch (messageType) {
         case 'Info':
             return 'info';
@@ -303,8 +284,7 @@ function getGlyphForMessageType(messageType) {
             return 'error';
     }
 }
-exports.getGlyphForMessageType = getGlyphForMessageType;
-function getButtonToneForMessageType(messageType) {
+export function getButtonToneForMessageType(messageType) {
     switch (messageType) {
         case 'Info':
             return 'info';
@@ -316,20 +296,19 @@ function getButtonToneForMessageType(messageType) {
             return 'success';
     }
 }
-exports.getButtonToneForMessageType = getButtonToneForMessageType;
-function getScheduleDescription(schedule) {
+export function getScheduleDescription(schedule) {
     if (schedule == null) {
         return '[No Schedule]';
     }
     let dateString;
     if (schedule.OneOffDate == null) {
-        if (ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Monday') &&
-            ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Tuesday') &&
-            ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Wednesday') &&
-            ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Thursday') &&
-            ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Friday')) {
-            if (ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Sunday') &&
-                ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Saturday')) {
+        if (ArrayExtensions.ContainsItem(schedule.DaysOfWeek, 'Monday') &&
+            ArrayExtensions.ContainsItem(schedule.DaysOfWeek, 'Tuesday') &&
+            ArrayExtensions.ContainsItem(schedule.DaysOfWeek, 'Wednesday') &&
+            ArrayExtensions.ContainsItem(schedule.DaysOfWeek, 'Thursday') &&
+            ArrayExtensions.ContainsItem(schedule.DaysOfWeek, 'Friday')) {
+            if (ArrayExtensions.ContainsItem(schedule.DaysOfWeek, 'Sunday') &&
+                ArrayExtensions.ContainsItem(schedule.DaysOfWeek, 'Saturday')) {
                 dateString = 'Everyday';
             }
             else {
@@ -338,7 +317,7 @@ function getScheduleDescription(schedule) {
         }
         else {
             const names = schedule.DaysOfWeek.sort().map((d) => getShortenedDayString(d));
-            dateString = ArrayExtensions_1.default.createCommaSeparatedString(names);
+            dateString = ArrayExtensions.createCommaSeparatedString(names);
         }
     }
     else {
@@ -346,7 +325,6 @@ function getScheduleDescription(schedule) {
     }
     return `${dateString} @ ${addLeadingZero(schedule.Hour)}:${addLeadingZero(schedule.Minute)}`;
 }
-exports.getScheduleDescription = getScheduleDescription;
 function getShortenedDayString(dayOfWeek) {
     switch (dayOfWeek) {
         case 'Sunday':
@@ -365,7 +343,7 @@ function getShortenedDayString(dayOfWeek) {
             return 'Sat';
     }
 }
-function getWeekDayByIndex(dayOfWeek) {
+export function getWeekDayByIndex(dayOfWeek) {
     switch (dayOfWeek) {
         case 0:
             return 'Sunday';
@@ -383,7 +361,6 @@ function getWeekDayByIndex(dayOfWeek) {
             return 'Saturday';
     }
 }
-exports.getWeekDayByIndex = getWeekDayByIndex;
 function addLeadingZero(item) {
     item = item || 0;
     if (item < 10) {
@@ -391,7 +368,7 @@ function addLeadingZero(item) {
     }
     return item.toString();
 }
-function getMessageTypeFromAdaptableAlerts(adaptableAlerts) {
+export function getMessageTypeFromAdaptableAlerts(adaptableAlerts) {
     if (adaptableAlerts.find((a) => a.alertDefinition.MessageType == 'Error') != null) {
         return 'Error';
     }
@@ -403,19 +380,16 @@ function getMessageTypeFromAdaptableAlerts(adaptableAlerts) {
     }
     return 'Info';
 }
-exports.getMessageTypeFromAdaptableAlerts = getMessageTypeFromAdaptableAlerts;
-function getButtonColourForAdaptableAlerts(adaptableAlerts, messageTypeColor) {
-    return ArrayExtensions_1.default.IsNotNullOrEmpty(adaptableAlerts) ? messageTypeColor : 'primary';
+export function getButtonColourForAdaptableAlerts(adaptableAlerts, messageTypeColor) {
+    return ArrayExtensions.IsNotNullOrEmpty(adaptableAlerts) ? messageTypeColor : 'primary';
 }
-exports.getButtonColourForAdaptableAlerts = getButtonColourForAdaptableAlerts;
-function getButtonTextColourForArrayandMessageType(adaptableAlerts, messageType) {
-    if (ArrayExtensions_1.default.IsNullOrEmpty(adaptableAlerts)) {
+export function getButtonTextColourForArrayandMessageType(adaptableAlerts, messageType) {
+    if (ArrayExtensions.IsNullOrEmpty(adaptableAlerts)) {
         return 'text-on-primary';
     }
     return this.getButtonTextColourForMessageType(messageType);
 }
-exports.getButtonTextColourForArrayandMessageType = getButtonTextColourForArrayandMessageType;
-function getButtonTextColourForMessageType(messageType) {
+export function getButtonTextColourForMessageType(messageType) {
     switch (messageType) {
         case 'Info':
             return 'var( --ab-color-text-on-info)';
@@ -427,41 +401,35 @@ function getButtonTextColourForMessageType(messageType) {
             return 'var( --ab-color-text-on-error)';
     }
 }
-exports.getButtonTextColourForMessageType = getButtonTextColourForMessageType;
 function getNumericCSSVariableValue(stringValue, defaultValue) {
     var _a;
     const numericValue = typeof stringValue === 'string' ? +((_a = stringValue.match(/\d/g)) === null || _a === void 0 ? void 0 : _a.join('')) : stringValue;
     return typeof numericValue === 'number' ? numericValue : defaultValue;
 }
-function getAdaptableToolPanelWidth() {
+export function getAdaptableToolPanelWidth() {
     return getNumericCSSVariableValue(getCSSVariableValue('--ab-cmp-toolpanel__width'), 200);
 }
-exports.getAdaptableToolPanelWidth = getAdaptableToolPanelWidth;
-function getSimpleButtonPaddingWidth() {
+export function getSimpleButtonPaddingWidth() {
     return getNumericCSSVariableValue(getCSSVariableValue('--ab-space-1'), 4);
 }
-exports.getSimpleButtonPaddingWidth = getSimpleButtonPaddingWidth;
-function getCSSVariableValue(cssVariable) {
+export function getCSSVariableValue(cssVariable) {
     if (!isBrowserDocumentAvailable()) {
         // possible during static/server-side rendering (should happen only in test cases)
         return undefined;
     }
     return getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
 }
-exports.getCSSVariableValue = getCSSVariableValue;
-function setCSSVariableValue(cssVariable, value) {
+export function setCSSVariableValue(cssVariable, value) {
     if (!isBrowserDocumentAvailable()) {
         // possible during static/server-side rendering (should happen only in test cases)
         return undefined;
     }
     document.documentElement.style.setProperty(cssVariable, value);
 }
-exports.setCSSVariableValue = setCSSVariableValue;
-function isBrowserDocumentAvailable() {
+export function isBrowserDocumentAvailable() {
     return typeof window !== 'undefined' && typeof window.document !== 'undefined';
 }
-exports.isBrowserDocumentAvailable = isBrowserDocumentAvailable;
-exports.UIHelper = {
+export const UIHelper = {
     getHexForName,
     getDefaultColors,
     getEmptyConfigState,
@@ -491,4 +459,4 @@ exports.UIHelper = {
     isBrowserDocumentAvailable,
     getSimpleButtonPaddingWidth,
 };
-exports.default = exports.UIHelper;
+export default UIHelper;

package/src/View/UIInterfaces.js

@@ -1,3 +1,2 @@
-"use strict";
 // NOTE:  this file will include only those interfaces that are used in the UI / views,
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/src/View/Wizard/AdaptableWizard.js

@@ -1,25 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableWizard = exports.useWizardContext = exports.AdaptableWizardContext = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const WizardLegend_1 = require("./WizardLegend");
-const ArrayExtensions_1 = require("../../Utilities/Extensions/ArrayExtensions");
-const rebass_1 = require("rebass");
-const Dialog_1 = tslib_1.__importDefault(require("../../components/Dialog"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
-exports.AdaptableWizardContext = React.createContext({
+import * as React from 'react';
+import { WizardLegend } from './WizardLegend';
+import { ArrayExtensions } from '../../Utilities/Extensions/ArrayExtensions';
+import { Flex } from 'rebass';
+import Dialog from '../../components/Dialog';
+import SimpleButton from '../../components/SimpleButton';
+import Panel from '../../components/Panel';
+import kebabCase from 'lodash/kebabCase';
+export const AdaptableWizardContext = React.createContext({
     data: null,
     updateGoBackState: () => { },
     onRender: (ActiveStep) => { },
     api: null,
 });
-const useWizardContext = () => {
-    return React.useContext(exports.AdaptableWizardContext);
+export const useWizardContext = () => {
+    return React.useContext(AdaptableWizardContext);
 };
-exports.useWizardContext = useWizardContext;
 class DummyActiveStep {
     canNext() {
         return false;
@@ -43,7 +38,7 @@ class DummyActiveStep {
 //Remark : the component doesnt handle the change of props once displayed... It's easy to do but not sure it's needed
 //as in the top component we do the render with a ternary expression so we add/remove the element from the render instead of having a property
 //Show/hide.
-class AdaptableWizard extends React.Component {
+export class AdaptableWizard extends React.Component {
     constructor(props) {
         super(props);
         //we need to init with a dummy one as Ref is a callback once the component is rendered. So once set we force Re render....
@@ -60,12 +55,12 @@ class AdaptableWizard extends React.Component {
     }
     render() {
         var _a, _b;
-        let wizardStepNames = ArrayExtensions_1.ArrayExtensions.RetrieveDistinct(this.props.steps.map((x) => {
+        let wizardStepNames = ArrayExtensions.RetrieveDistinct(this.props.steps.map((x) => {
             return x.StepName;
         }));
         const hasNext = this.props.steps.length > 1;
         const hasBack = hasNext;
-        return (React.createElement(exports.AdaptableWizardContext.Provider, { value: {
+        return (React.createElement(AdaptableWizardContext.Provider, { value: {
                 data: this.props.data,
                 updateGoBackState: () => this.ForceUpdateGoBackState(),
                 api: this.props.api,
@@ -74,18 +69,18 @@ class AdaptableWizard extends React.Component {
                     this.forceUpdate();
                 },
             } },
-            React.createElement(Dialog_1.default, { modal: true, isOpen: true, showCloseButton: false, onDismiss: () => (this.props.onHide ? this.props.onHide() : null) },
-                React.createElement(rebass_1.Flex, { flexDirection: "column", "data-name": this.props.moduleInfo.FriendlyName
-                        ? `${(0, kebabCase_1.default)(this.props.moduleInfo.FriendlyName)}-wizard`
+            React.createElement(Dialog, { modal: true, isOpen: true, showCloseButton: false, onDismiss: () => (this.props.onHide ? this.props.onHide() : null) },
+                React.createElement(Flex, { flexDirection: "column", "data-name": this.props.moduleInfo.FriendlyName
+                        ? `${kebabCase(this.props.moduleInfo.FriendlyName)}-wizard`
                         : '', style: Object.assign({ height: '100%', width: '70vw', maxWidth: 1000, maxHeight: '80vh' }, this.props.style) },
-                    React.createElement(Panel_1.default, { header: this.props.moduleInfo.FriendlyName, border: "none", className: "ab-WizardDialog__steps", borderRadius: "none", variant: "primary", style: { flex: 'none' } }, this.props.showStepsLegend === false ? null : (React.createElement(WizardLegend_1.WizardLegend, { StepNames: wizardStepNames, ActiveStepName: this.stepName, FriendlyName: '', CanShowAllSteps: this.canFinishWizard(), onStepButtonClicked: (s) => this.onStepButtonClicked(s) }))),
-                    React.createElement(rebass_1.Flex, { style: { flex: 1, overflow: 'auto' }, flexDirection: "column" }, this.state.ActiveState),
-                    React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, backgroundColor: "primary", alignItems: "center", className: "ab-WizardDialog__footer" },
-                        React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => this.props.onHide(), tooltip: (_a = this.props.closeTooltip) !== null && _a !== void 0 ? _a : 'Close wizard', accessLevel: 'Full' }, (_b = this.props.closeText) !== null && _b !== void 0 ? _b : 'CLOSE'),
+                    React.createElement(Panel, { header: this.props.moduleInfo.FriendlyName, border: "none", className: "ab-WizardDialog__steps", borderRadius: "none", variant: "primary", style: { flex: 'none' } }, this.props.showStepsLegend === false ? null : (React.createElement(WizardLegend, { StepNames: wizardStepNames, ActiveStepName: this.stepName, FriendlyName: '', CanShowAllSteps: this.canFinishWizard(), onStepButtonClicked: (s) => this.onStepButtonClicked(s) }))),
+                    React.createElement(Flex, { style: { flex: 1, overflow: 'auto' }, flexDirection: "column" }, this.state.ActiveState),
+                    React.createElement(Flex, { flexDirection: "row", padding: 2, backgroundColor: "primary", alignItems: "center", className: "ab-WizardDialog__footer" },
+                        React.createElement(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => this.props.onHide(), tooltip: (_a = this.props.closeTooltip) !== null && _a !== void 0 ? _a : 'Close wizard', accessLevel: 'Full' }, (_b = this.props.closeText) !== null && _b !== void 0 ? _b : 'CLOSE'),
                         React.createElement("div", { style: { flex: 1 } }),
-                        hasBack ? (React.createElement(SimpleButton_1.default, { "data-name": "back", variant: "outlined", disabled: !this.ActiveStep.canBack() || this.isFirstStep(), onClick: () => this.handleClickBack(), icon: "arrow-left", accessLevel: 'Full' }, "Back")) : null,
-                        hasNext ? (React.createElement(SimpleButton_1.default, { variant: "outlined", "data-name": "next", disabled: !this.ActiveStep.canNext() || this.isLastStep(), onClick: () => this.handleClickNext(), icon: "arrow-right", iconPosition: "end", accessLevel: 'Full', marginLeft: 2, marginRight: 2 }, "Next")) : null,
-                        React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: !this.canFinishWizard(), onClick: () => this.handleClickFinish(), icon: 'check', accessLevel: 'Full' }, "Finish"))))));
+                        hasBack ? (React.createElement(SimpleButton, { "data-name": "back", variant: "outlined", disabled: !this.ActiveStep.canBack() || this.isFirstStep(), onClick: () => this.handleClickBack(), icon: "arrow-left", accessLevel: 'Full' }, "Back")) : null,
+                        hasNext ? (React.createElement(SimpleButton, { variant: "outlined", "data-name": "next", disabled: !this.ActiveStep.canNext() || this.isLastStep(), onClick: () => this.handleClickNext(), icon: "arrow-right", iconPosition: "end", accessLevel: 'Full', marginLeft: 2, marginRight: 2 }, "Next")) : null,
+                        React.createElement(SimpleButton, { tone: "accent", "data-name": "finish", variant: "raised", disabled: !this.canFinishWizard(), onClick: () => this.handleClickFinish(), icon: 'check', accessLevel: 'Full' }, "Finish"))))));
     }
     onStepButtonClicked(stepName) {
         let wizardStepInfo = this.props.steps.find((s) => s.StepName == stepName);
@@ -166,4 +161,3 @@ class AdaptableWizard extends React.Component {
         });
     }
 }
-exports.AdaptableWizard = AdaptableWizard;

package/src/View/Wizard/Interface/IAdaptableWizard.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/src/View/Wizard/ObjectTagsWizardSection.js

@@ -1,24 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderObjectTagsSummary = exports.ObjectTagsWizardSection = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Tabs_1 = require("../../components/Tabs");
-const TagValueSelector_1 = require("../Components/TagValueSelector");
-const OnePageAdaptableWizard_1 = require("./OnePageAdaptableWizard");
-const rebass_1 = require("rebass");
-const ObjectTagsWizardSection = (props) => {
+import * as React from 'react';
+import { Tabs } from '../../components/Tabs';
+import { TagValueOptionsTags, TagValueSelector } from '../Components/TagValueSelector';
+import { useOnePageAdaptableWizardContext } from './OnePageAdaptableWizard';
+import { Text } from 'rebass';
+export const ObjectTagsWizardSection = (props) => {
     const { onChange } = props;
-    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Tags"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(TagValueSelector_1.TagValueSelector, { selectedTags: data.Tags, onChange: (selectedTags) => onChange(Object.assign(Object.assign({}, data), { Tags: selectedTags })) }))));
+    const { data } = useOnePageAdaptableWizardContext();
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Tags"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(TagValueSelector, { selectedTags: data.Tags, onChange: (selectedTags) => onChange(Object.assign(Object.assign({}, data), { Tags: selectedTags })) }))));
 };
-exports.ObjectTagsWizardSection = ObjectTagsWizardSection;
-const renderObjectTagsSummary = (data) => {
+export const renderObjectTagsSummary = (data) => {
     var _a;
-    return ((_a = data.Tags) === null || _a === void 0 ? void 0 : _a.length) ? (React.createElement(rebass_1.Text, { fontSize: 2 },
-        React.createElement(TagValueSelector_1.TagValueOptionsTags, { tags: data.Tags }))) : null;
+    return ((_a = data.Tags) === null || _a === void 0 ? void 0 : _a.length) ? (React.createElement(Text, { fontSize: 2 },
+        React.createElement(TagValueOptionsTags, { tags: data.Tags }))) : null;
 };
-exports.renderObjectTagsSummary = renderObjectTagsSummary;