@adaptabletools/adaptable 11.3.0 → 12.0.0-canary.2

package/src/View/UIHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIHelper = exports.isBrowserDocumentAvailable = exports.setCSSVariableValue = exports.getCSSVariableValue = 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;
+exports.UIHelper = exports.isBrowserDocumentAvailable = exports.setCSSVariableValue = exports.getCSSVariableValue = 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");
@@ -109,26 +109,26 @@ function getEmptyConfigState() {
 exports.getEmptyConfigState = getEmptyConfigState;
 function getDescriptionForDataType(dataType) {
     switch (dataType) {
-        case Enums_1.DataType.String:
+        case 'String':
             return 'string';
-        case Enums_1.DataType.Number:
+        case 'Number':
             return 'number';
-        case Enums_1.DataType.Date:
+        case 'Date':
             return 'date';
     }
 }
 exports.getDescriptionForDataType = getDescriptionForDataType;
-function getPlaceHolderforDataType(dataType) {
+function getPlaceholderForDataType(dataType) {
     switch (dataType) {
-        case Enums_1.DataType.String:
+        case 'String':
             return 'Enter Value';
-        case Enums_1.DataType.Number:
+        case 'Number':
             return 'Enter Number';
-        case Enums_1.DataType.Date:
+        case 'Date':
             return 'Enter Date';
     }
 }
-exports.getPlaceHolderforDataType = getPlaceHolderforDataType;
+exports.getPlaceholderForDataType = getPlaceholderForDataType;
 function getModalContainer(adaptableOptions, document) {
     let modalContainer;
     if (adaptableOptions.containerOptions.modalContainer) {
@@ -466,7 +466,7 @@ exports.UIHelper = {
     getDefaultColors,
     getEmptyConfigState,
     getDescriptionForDataType,
-    getPlaceHolderforDataType,
+    getPlaceHolderforDataType: getPlaceholderForDataType,
     getModalContainer,
     IsEmptyStyle,
     IsNotEmptyStyle,

package/src/View/Wizard/Interface/IAdaptableWizard.d.ts

@@ -34,9 +34,9 @@ export interface AdaptableObjectAdaptableWizardProps<View> extends AdaptableWiza
     api: AdaptableApi;
 }
 export interface AdaptableOnePageWizardProps<T extends AdaptableObject> {
-    moduleInfo: ModuleInfo;
+    moduleInfo?: ModuleInfo;
     data: T;
-    configEntities: T[];
+    configEntities?: T[];
     wizardStartIndex?: number;
     onCloseWizard: VoidFunction;
     onFinishWizard: (data: T) => void;

package/src/View/Wizard/ObjectTagsWizardSection.js

@@ -9,7 +9,7 @@ const OnePageAdaptableWizard_1 = require("./OnePageAdaptableWizard");
 const rebass_1 = require("rebass");
 exports.ObjectTagsWizardSection = (props) => {
     const { onChange } = props;
-    const { data } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data } = 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,

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

@@ -6,29 +6,28 @@ import { ModuleInfo } from '../../Strategy/Interface/IModule';
 import { ExpressionEditorNamedQuery } from '../../components/ExpressionEditor/NamedQueryContext';
 export declare type OnePageAdaptableWizardContextType<T> = {
     data: T;
-    sections: (OnePageWizardSection<T> | '-')[];
+    sections: (OnePageAdaptableWizardSection<T> | '-')[];
     moduleInfo: ModuleInfo;
     api: AdaptableApi;
-    setCurrentSection: (index: number) => void;
     namedQuery: ExpressionEditorNamedQuery;
 };
 export declare const SummaryTag: React.FunctionComponent<TextProps>;
 export declare const SummaryText: React.FunctionComponent<TextProps>;
 export declare const FormDescriptionText: React.FunctionComponent<TextProps>;
 export declare const OnePageAdaptableWizardContext: React.Context<OnePageAdaptableWizardContextType<any>>;
-export declare function useOnePageWizardContext<ENTITY>(): OnePageAdaptableWizardContextType<ENTITY>;
-export declare type OnePageWizardSection<ENTITY> = {
+export declare function useOnePageAdaptableWizardContext<ENTITY>(): OnePageAdaptableWizardContextType<ENTITY>;
+export interface OnePageAdaptableWizardSection<ENTITY> {
     title: string;
     details?: React.ReactNode;
     isValid?: (data: ENTITY, api: AdaptableApi, context: OnePageAdaptableWizardContextType<ENTITY>) => true | string;
     isVisible?: (data: ENTITY, api: AdaptableApi, context: OnePageAdaptableWizardContextType<ENTITY>) => boolean;
     render: (data: ENTITY, index: number) => React.ReactNode;
     renderSummary?: (data: ENTITY, api: AdaptableApi) => React.ReactNode;
-};
+}
 export interface OnePageAdaptableWizardProps<ENTITY> {
     moduleInfo: ModuleInfo;
     data: ENTITY;
-    sections: (OnePageWizardSection<ENTITY> | '-')[];
+    sections: (OnePageAdaptableWizardSection<ENTITY> | '-')[];
     currentIndex?: number;
     defaultCurrentIndex?: number;
     defaultCurrentSectionName?: string;

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -1,24 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OnePageWizardSummary = exports.OnePageAdaptableWizard = exports.useOnePageWizardContext = exports.OnePageAdaptableWizardContext = exports.FormDescriptionText = exports.SummaryText = exports.SummaryTag = void 0;
+exports.OnePageWizardSummary = exports.OnePageAdaptableWizard = exports.useOnePageAdaptableWizardContext = exports.OnePageAdaptableWizardContext = exports.FormDescriptionText = exports.SummaryText = exports.SummaryTag = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const react_redux_1 = require("react-redux");
 const rebass_1 = require("rebass");
 const QueryRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/QueryRedux"));
-const Dialog_1 = tslib_1.__importDefault(require("../../components/Dialog"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
-const useProperty_1 = tslib_1.__importDefault(require("../../components/utils/useProperty"));
 const AdaptableContext_1 = require("../AdaptableContext");
-const isMacLike_1 = require("../../Utilities/isMacLike");
 const Tabs_1 = require("../../components/Tabs");
-const KeyHint_1 = require("../KeyHint");
-const icons_1 = require("../../components/icons");
-const ResizeObserver_1 = require("../../components/ResizeObserver");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
-const useKeyboardNavigation_1 = require("./useKeyboardNavigation");
+const OnePageWizards_1 = require("./OnePageWizards");
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 exports.SummaryTag = (props) => React.createElement(rebass_1.Text, Object.assign({}, props));
 exports.SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
 exports.FormDescriptionText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props)));
@@ -26,187 +20,59 @@ exports.OnePageAdaptableWizardContext = React.createContext({
     data: null,
     sections: [],
     moduleInfo: null,
-    setCurrentSection: (index) => { },
     api: null,
     namedQuery: false,
 });
-function useOnePageWizardContext() {
+function useOnePageAdaptableWizardContext() {
     return React.useContext(exports.OnePageAdaptableWizardContext);
 }
-exports.useOnePageWizardContext = useOnePageWizardContext;
+exports.useOnePageAdaptableWizardContext = useOnePageAdaptableWizardContext;
 exports.OnePageAdaptableWizard = (props) => {
-    var _a, _b;
     const { api } = AdaptableContext_1.useAdaptable();
     const dispatch = react_redux_1.useDispatch();
     const saveNamedQuery = React.useCallback((namedQuery) => dispatch(QueryRedux.NamedQueryAdd(namedQuery)), []);
-    let defaultCurrentIndex = 0;
-    if (props.defaultCurrentSectionName) {
-        const candidate = props.sections.findIndex((section) => section !== '-' && section.title === props.defaultCurrentSectionName);
-        if (candidate >= 0) {
-            defaultCurrentIndex = candidate;
-        }
-    }
-    const [currentSection, setCurrentSection] = useProperty_1.default(props, 'currentIndex', defaultCurrentIndex, {
-        onChange: (index) => {
-            var _a;
-            (_a = props.onSectionChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
-        },
-    });
     const [namedQuery, setNamedQuery] = react_1.useState(false);
-    const [navIndexMap] = react_1.useState(() => new Map());
-    const handleClickFinish = () => {
-        var _a;
-        if (namedQuery && namedQuery.Name) {
-            saveNamedQuery(namedQuery);
-        }
-        (_a = props.onFinish) === null || _a === void 0 ? void 0 : _a.call(props, props.data);
-    };
-    const renderSection = (index) => {
-        const section = visibleSections[index];
-        if (section === '-') {
-            return React.createElement(React.Fragment, { key: index });
-        }
-        return (React.createElement(rebass_1.Flex, { flexDirection: "column", key: index, "data-name": `section-${index}`, style: { minHeight: '100%' }, mr: 2 },
-            React.createElement(rebass_1.Box, { py: 3, paddingLeft: 2, fontSize: 4, className: "ab-OnePageWizard__details" }, section.details),
-            React.createElement(rebass_1.Box, { flex: 1, className: "ab-OnePageWizard__section" }, section.render(props.data, index))));
-    };
-    const selectedNodeRef = react_1.useRef(null);
-    const selectedFeedback = (React.createElement("div", { ref: selectedNodeRef, className: "ab-OnePageWizard__selected-title-overlay", style: {
-            position: 'absolute',
-            background: 'var(--ab-cmp-one-page-wizard-selected-title__background)',
-            pointerEvents: 'none',
-            borderRadius: 'var(--ab__border-radius)',
-            transition: 'top 0.2s',
-        } }));
-    const sizeOwnerRef = react_1.useRef(null);
-    const [width, setWidth] = react_1.useState(0);
-    ResizeObserver_1.useResizeObserver(sizeOwnerRef, ({ width }) => {
-        setWidth(width);
-    });
-    React.useEffect(() => {
-        const node = selectedNodeRef.current;
-        const parent = node.parentNode;
-        const activeElement = parent.children[currentSection];
-        node.style.top = `${activeElement.offsetTop}px`;
-        node.style.left = `${activeElement.offsetLeft}px`;
-        node.style.height = `${activeElement.offsetHeight}px`;
-        node.style.width = `${activeElement.offsetWidth}px`;
-    }, [currentSection, width]);
-    let navIndex = 0;
-    const dialogRef = react_1.useRef(null);
-    let invalidCount = 0;
-    let firstErrorMessage = null;
-    const contextValue = {
+    const name = props.moduleInfo.FriendlyName
+        ? `${kebabCase_1.default(props.moduleInfo.FriendlyName)}-wizard`
+        : '';
+    const extraContext = {
         data: props.data,
         api,
-        //visible sections is updated below, as this is a chicken-egg problem
-        sections: props.sections,
-        setCurrentSection,
         namedQuery,
         moduleInfo: props.moduleInfo,
+        sections: props.sections,
     };
-    const visibleSections = React.useMemo(() => {
-        return props.sections.filter((section) => section === '-' ||
-            section.isVisible == undefined ||
-            section.isVisible(props.data, api, contextValue));
-    }, [props.sections]);
-    contextValue.sections = visibleSections;
-    const validSectionsMap = visibleSections.reduce((acc, section, index) => {
+    const sections = props.sections.map((section) => {
         if (section === '-') {
-            acc.set(index, true);
-            return acc;
+            return '-';
         }
-        const valid = section.isValid ? section.isValid(props.data, api, contextValue) : true; //!active && canFinish !== true;
-        if (valid !== true) {
-            invalidCount++;
-            if (firstErrorMessage == null) {
-                firstErrorMessage = valid;
+        const isValid = typeof section.isValid === 'function'
+            ? (data, innerContext) => {
+                return section.isValid(data, api, Object.assign(Object.assign({}, innerContext), extraContext));
+            }
+            : void 0;
+        const isVisible = typeof section.isVisible === 'function'
+            ? (data, innerContext) => {
+                return section.isVisible(data, api, Object.assign(Object.assign({}, innerContext), extraContext));
             }
+            : void 0;
+        return Object.assign(Object.assign({}, section), { isValid,
+            isVisible });
+    });
+    const handleClickFinish = () => {
+        var _a;
+        if (namedQuery && namedQuery.Name) {
+            saveNamedQuery(namedQuery);
         }
-        acc.set(index, valid);
-        return acc;
-    }, new Map());
-    useKeyboardNavigation_1.useKeyboardNavigation(setCurrentSection, visibleSections);
-    const canFinish = !invalidCount;
-    return (React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
-        React.createElement(exports.OnePageAdaptableWizardContext.Provider, { value: contextValue },
-            React.createElement(Dialog_1.default, { modal: true, isOpen: true, showCloseButton: false, focusOnBrowserVisible: true, style: {
-                    borderRadius: 'var(--ab__border-radius)',
-                    overflow: 'hidden',
-                    height: '80vh',
-                }, ref: dialogRef, onDismiss: () => { var _a; return (_a = props.onHide) === null || _a === void 0 ? void 0 : _a.call(props); }, onKeyDown: (event) => {
-                    if (event.metaKey || event.ctrlKey) {
-                        const { key } = event;
-                        if (!isNaN(Number(key))) {
-                            const num = Number(key);
-                            if (navIndexMap.has(num)) {
-                                const index = navIndexMap.get(num);
-                                setCurrentSection(index);
-                                event.preventDefault();
-                                event.stopPropagation();
-                                requestAnimationFrame(() => {
-                                    var _a;
-                                    (_a = dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current) === null || _a === void 0 ? void 0 : _a.bringToFront();
-                                });
-                            }
-                        }
-                    }
-                } },
-                React.createElement(rebass_1.Flex, { className: "ab-OnePageWizard", flexDirection: "column", "data-name": props.moduleInfo.FriendlyName
-                        ? `${kebabCase_1.default(props.moduleInfo.FriendlyName)}-wizard`
-                        : '', style: Object.assign({ height: '100%', width: '90vw', maxWidth: 1000 }, props.style) },
-                    React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "stretch", flex: 1, style: { overflow: 'auto' } },
-                        React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 3, className: "ab-OnePageWizard__section-title-container", ref: sizeOwnerRef, style: { overflow: 'auto', position: 'relative', flex: 'none' } },
-                            visibleSections.map((section, index) => {
-                                if (section === '-') {
-                                    return (React.createElement(rebass_1.Box, { as: "hr", mt: 2, className: "ab-OnePageWizard__section-separator", key: `${index}-`, style: {
-                                            width: '100%',
-                                            border: 'none',
-                                            borderTop: `1px solid var(--ab-color-inputborder)`,
-                                        } }));
-                                }
-                                navIndex++;
-                                navIndexMap.set(navIndex, index);
-                                const active = index === currentSection;
-                                const disabled = false; //!active && !currentSectionValid;
-                                return (React.createElement(rebass_1.Flex, { className: "ab-OnePageWizard__section-title", "data-name": section.title, flexDirection: "row", style: {
-                                        cursor: disabled ? 'auto' : 'pointer',
-                                        zIndex: 10,
-                                        transition: 'color 0.2s',
-                                        opacity: disabled ? 0.5 : 1,
-                                    }, key: section.title, color: active ? 'var(--ab-cmp-one-page-wizard-section-title__color)' : '', px: 2, py: 1, mt: index ? 2 : 0, onClick: () => {
-                                        if (disabled) {
-                                            return;
-                                        }
-                                        setCurrentSection(index);
-                                    } },
-                                    React.createElement(KeyHint_1.KeyHint, { mr: 2, style: { display: 'inline-block' } }, navIndex),
-                                    React.createElement("div", { style: { flex: 1 } }, section.title),
-                                    React.createElement(icons_1.Icon, { name: "error", style: {
-                                            marginLeft: 'var(--ab-space-2)',
-                                            visibility: validSectionsMap.get(index) !== true ? 'visible' : 'hidden',
-                                        } })));
-                            }),
-                            selectedFeedback,
-                            React.createElement(rebass_1.Box, { flex: 1 }),
-                            React.createElement(KeyHint_1.KeyHint, { style: { lineHeight: 1.5 }, className: "ab-OnePageWizard__key-hint" },
-                                isMacLike_1.isMacLike() ? 'Cmd' : 'Ctrl',
-                                " + #",
-                                React.createElement("br", null),
-                                "to navigate")),
-                        React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "column", className: "ab-OnePageWizard__section-container" }, renderSection(currentSection))),
-                    React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer" },
-                        React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => { var _a; return (_a = props.onHide) === null || _a === void 0 ? void 0 : _a.call(props); }, tooltip: (_a = props.closeTooltip) !== null && _a !== void 0 ? _a : 'Close wizard', accessLevel: 'Full' }, (_b = props.closeText) !== null && _b !== void 0 ? _b : 'CLOSE'),
-                        React.createElement(KeyHint_1.KeyHint, { ml: 2 }, "Esc"),
-                        React.createElement(rebass_1.Text, { fontSize: 2, mr: 3, className: "ab-OnePageWizard__error", style: {
-                                flex: 1,
-                                color: 'var(--ab-color-error)',
-                                textAlign: 'end',
-                            } }, firstErrorMessage),
-                        React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: 'Full' }, "Finish")))))));
+        (_a = props.onFinish) === null || _a === void 0 ? void 0 : _a.call(props, props.data);
+    };
+    return (React.createElement(exports.OnePageAdaptableWizardContext.Provider, { value: extraContext },
+        React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
+            React.createElement(OnePageWizards_1.OnePageWizard, Object.assign({}, props, { name: name, sections: sections, onFinish: handleClickFinish })))));
 };
 exports.OnePageWizardSummary = () => {
-    const { sections, setCurrentSection, data, api } = useOnePageWizardContext();
+    const { setCurrentSection } = OnePageWizards_1.useOnePageWizardContext();
+    const { sections, data, api } = useOnePageAdaptableWizardContext();
     const renderEdit = (index) => (React.createElement(SimpleButton_1.default, { px: 1, variant: "text", style: {
             textDecoration: 'underline',
             display: 'inline-block',

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { CSSProperties } from 'react';
+import { TextProps } from 'rebass';
+export declare type OnePageWizardContextType<T> = {
+    data: T;
+    sections: (OnePageWizardSection<T> | '-')[];
+    setCurrentSection: (index: number) => void;
+};
+export declare const SummaryTag: React.FunctionComponent<TextProps>;
+export declare const SummaryText: React.FunctionComponent<TextProps>;
+export declare const FormDescriptionText: React.FunctionComponent<TextProps>;
+export declare const OnePageWizardContext: React.Context<OnePageWizardContextType<any>>;
+export declare function useOnePageWizardContext<ENTITY>(): OnePageWizardContextType<ENTITY>;
+export declare type OnePageWizardSection<ENTITY> = {
+    title: string;
+    details?: React.ReactNode;
+    isValid?: (data: ENTITY, context: OnePageWizardContextType<ENTITY>) => true | string;
+    isVisible?: (data: ENTITY, context: OnePageWizardContextType<ENTITY>) => boolean;
+    render: (data: ENTITY, index: number) => React.ReactNode;
+    renderSummary?: (data: ENTITY) => React.ReactNode;
+};
+export interface OnePageWizardProps<ENTITY> {
+    data: ENTITY;
+    name: string;
+    sections: (OnePageWizardSection<ENTITY> | '-')[];
+    currentIndex?: number;
+    defaultCurrentIndex?: number;
+    defaultCurrentSectionName?: string;
+    onSectionChange?: (index: number) => void;
+    onHide?: VoidFunction;
+    onFinish?: (data: ENTITY) => any;
+    children?: React.ReactNode;
+    style?: CSSProperties;
+    closeText?: React.ReactNode;
+    closeTooltip?: string;
+}
+export declare const OnePageWizard: <ENTITY extends unknown>(props: OnePageWizardProps<ENTITY>) => JSX.Element;

package/src/View/Wizard/OnePageWizards.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnePageWizard = exports.useOnePageWizardContext = exports.OnePageWizardContext = exports.FormDescriptionText = exports.SummaryText = exports.SummaryTag = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const rebass_1 = require("rebass");
+const Dialog_1 = tslib_1.__importDefault(require("../../components/Dialog"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const useProperty_1 = tslib_1.__importDefault(require("../../components/utils/useProperty"));
+const isMacLike_1 = require("../../Utilities/isMacLike");
+const KeyHint_1 = require("../KeyHint");
+const icons_1 = require("../../components/icons");
+const ResizeObserver_1 = require("../../components/ResizeObserver");
+const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
+const useKeyboardNavigation_1 = require("./useKeyboardNavigation");
+exports.SummaryTag = (props) => React.createElement(rebass_1.Text, Object.assign({}, props));
+exports.SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
+exports.FormDescriptionText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props)));
+exports.OnePageWizardContext = React.createContext({
+    data: null,
+    sections: [],
+    setCurrentSection: (index) => { },
+});
+function useOnePageWizardContext() {
+    return React.useContext(exports.OnePageWizardContext);
+}
+exports.useOnePageWizardContext = useOnePageWizardContext;
+exports.OnePageWizard = (props) => {
+    var _a, _b;
+    let defaultCurrentIndex = 0;
+    if (props.defaultCurrentSectionName) {
+        const candidate = props.sections.findIndex((section) => section !== '-' && section.title === props.defaultCurrentSectionName);
+        if (candidate >= 0) {
+            defaultCurrentIndex = candidate;
+        }
+    }
+    const [currentSection, setCurrentSection] = useProperty_1.default(props, 'currentIndex', defaultCurrentIndex, {
+        onChange: (index) => {
+            var _a;
+            (_a = props.onSectionChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
+        },
+    });
+    const [namedQuery, setNamedQuery] = react_1.useState(false);
+    const [navIndexMap] = react_1.useState(() => new Map());
+    const handleClickFinish = () => {
+        var _a;
+        (_a = props.onFinish) === null || _a === void 0 ? void 0 : _a.call(props, props.data);
+    };
+    const renderSection = (index) => {
+        const section = visibleSections[index];
+        if (section === '-') {
+            return React.createElement(React.Fragment, { key: index });
+        }
+        return (React.createElement(rebass_1.Flex, { flexDirection: "column", key: index, "data-name": `section-${index}`, style: { minHeight: '100%' }, mr: 2 },
+            React.createElement(rebass_1.Box, { py: 3, paddingLeft: 2, fontSize: 4, className: "ab-OnePageWizard__details" }, section.details),
+            React.createElement(rebass_1.Box, { flex: 1, className: "ab-OnePageWizard__section" }, section.render(props.data, index))));
+    };
+    const selectedNodeRef = react_1.useRef(null);
+    const selectedFeedback = (React.createElement("div", { ref: selectedNodeRef, className: "ab-OnePageWizard__selected-title-overlay", style: {
+            position: 'absolute',
+            background: 'var(--ab-cmp-one-page-wizard-selected-title__background)',
+            pointerEvents: 'none',
+            borderRadius: 'var(--ab__border-radius)',
+            transition: 'top 0.2s',
+        } }));
+    const sizeOwnerRef = react_1.useRef(null);
+    const [width, setWidth] = react_1.useState(0);
+    ResizeObserver_1.useResizeObserver(sizeOwnerRef, ({ width }) => {
+        setWidth(width);
+    });
+    React.useEffect(() => {
+        const node = selectedNodeRef.current;
+        const parent = node.parentNode;
+        const activeElement = parent.children[currentSection];
+        node.style.top = `${activeElement.offsetTop}px`;
+        node.style.left = `${activeElement.offsetLeft}px`;
+        node.style.height = `${activeElement.offsetHeight}px`;
+        node.style.width = `${activeElement.offsetWidth}px`;
+    }, [currentSection, width]);
+    let navIndex = 0;
+    const dialogRef = react_1.useRef(null);
+    let invalidCount = 0;
+    let firstErrorMessage = null;
+    const contextValue = {
+        data: props.data,
+        sections: props.sections,
+        setCurrentSection,
+    };
+    const visibleSections = React.useMemo(() => {
+        return props.sections.filter((section) => section === '-' ||
+            section.isVisible == undefined ||
+            section.isVisible(props.data, contextValue));
+    }, [props.sections]);
+    contextValue.sections = visibleSections;
+    const validSectionsMap = visibleSections.reduce((acc, section, index) => {
+        if (section === '-') {
+            acc.set(index, true);
+            return acc;
+        }
+        const valid = section.isValid ? section.isValid(props.data, contextValue) : true; //!active && canFinish !== true;
+        if (valid !== true) {
+            invalidCount++;
+            if (firstErrorMessage == null) {
+                firstErrorMessage = valid;
+            }
+        }
+        acc.set(index, valid);
+        return acc;
+    }, new Map());
+    useKeyboardNavigation_1.useKeyboardNavigation(setCurrentSection, visibleSections);
+    const canFinish = !invalidCount;
+    return (React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
+        React.createElement(exports.OnePageWizardContext.Provider, { value: contextValue },
+            React.createElement(Dialog_1.default, { modal: true, isOpen: true, showCloseButton: false, focusOnBrowserVisible: true, style: {
+                    borderRadius: 'var(--ab__border-radius)',
+                    overflow: 'hidden',
+                    height: '80vh',
+                }, ref: dialogRef, onDismiss: () => { var _a; return (_a = props.onHide) === null || _a === void 0 ? void 0 : _a.call(props); }, onKeyDown: (event) => {
+                    if (event.metaKey || event.ctrlKey) {
+                        const { key } = event;
+                        if (!isNaN(Number(key))) {
+                            const num = Number(key);
+                            if (navIndexMap.has(num)) {
+                                const index = navIndexMap.get(num);
+                                setCurrentSection(index);
+                                event.preventDefault();
+                                event.stopPropagation();
+                                requestAnimationFrame(() => {
+                                    var _a;
+                                    (_a = dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current) === null || _a === void 0 ? void 0 : _a.bringToFront();
+                                });
+                            }
+                        }
+                    }
+                } },
+                React.createElement(rebass_1.Flex, { className: "ab-OnePageWizard", flexDirection: "column", "data-name": props.name, style: Object.assign({ height: '100%', width: '90vw', maxWidth: 1200 }, props.style) },
+                    React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "stretch", flex: 1, style: { overflow: 'auto' } },
+                        React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 3, className: "ab-OnePageWizard__section-title-container", ref: sizeOwnerRef, style: { overflow: 'auto', position: 'relative', flex: 'none' } },
+                            visibleSections.map((section, index) => {
+                                if (section === '-') {
+                                    return (React.createElement(rebass_1.Box, { as: "hr", mt: 2, className: "ab-OnePageWizard__section-separator", key: `${index}-`, style: {
+                                            width: '100%',
+                                            border: 'none',
+                                            borderTop: `1px solid var(--ab-color-inputborder)`,
+                                        } }));
+                                }
+                                navIndex++;
+                                navIndexMap.set(navIndex, index);
+                                const active = index === currentSection;
+                                const disabled = false; //!active && !currentSectionValid;
+                                return (React.createElement(rebass_1.Flex, { className: "ab-OnePageWizard__section-title", "data-name": section.title, flexDirection: "row", style: {
+                                        cursor: disabled ? 'auto' : 'pointer',
+                                        zIndex: 10,
+                                        transition: 'color 0.2s',
+                                        opacity: disabled ? 0.5 : 1,
+                                    }, key: section.title, color: active ? 'var(--ab-cmp-one-page-wizard-section-title__color)' : '', px: 2, py: 1, mt: index ? 2 : 0, onClick: () => {
+                                        if (disabled) {
+                                            return;
+                                        }
+                                        setCurrentSection(index);
+                                    } },
+                                    React.createElement(KeyHint_1.KeyHint, { mr: 2, style: { display: 'inline-block' } }, navIndex),
+                                    React.createElement("div", { style: { flex: 1 } }, section.title),
+                                    React.createElement(icons_1.Icon, { name: "error", style: {
+                                            marginLeft: 'var(--ab-space-2)',
+                                            visibility: validSectionsMap.get(index) !== true ? 'visible' : 'hidden',
+                                        } })));
+                            }),
+                            selectedFeedback,
+                            React.createElement(rebass_1.Box, { flex: 1 }),
+                            React.createElement(KeyHint_1.KeyHint, { style: { lineHeight: 1.5 }, className: "ab-OnePageWizard__key-hint" },
+                                isMacLike_1.isMacLike() ? 'Cmd' : 'Ctrl',
+                                " + #",
+                                React.createElement("br", null),
+                                "to navigate")),
+                        React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "column", className: "ab-OnePageWizard__section-container" }, renderSection(currentSection))),
+                    React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer" },
+                        React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => { var _a; return (_a = props.onHide) === null || _a === void 0 ? void 0 : _a.call(props); }, tooltip: (_a = props.closeTooltip) !== null && _a !== void 0 ? _a : 'Close wizard', accessLevel: 'Full' }, (_b = props.closeText) !== null && _b !== void 0 ? _b : 'CLOSE'),
+                        React.createElement(KeyHint_1.KeyHint, { ml: 2 }, "Esc"),
+                        React.createElement(rebass_1.Text, { fontSize: 2, mr: 3, className: "ab-OnePageWizard__error", style: {
+                                flex: 1,
+                                color: 'var(--ab-color-error)',
+                                textAlign: 'end',
+                            } }, firstErrorMessage),
+                        React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: 'Full' }, "Finish")))))));
+};

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

@@ -1,2 +1,2 @@
-import { OnePageWizardSection } from './OnePageAdaptableWizard';
+import { OnePageWizardSection } from './OnePageWizards';
 export declare const useKeyboardNavigation: <ENTITY>(setCurrentSection: (value: number | ((v: number) => number)) => void, sections: ("-" | OnePageWizardSection<ENTITY>)[]) => void;

package/src/agGrid/ActionColumnRenderer.js

@@ -51,7 +51,8 @@ class ActionColumnRenderer {
                             width: 15,
                         },
                     };
-                    const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
+                    const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context);
+                    const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
                     const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
                     const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
                     const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
@@ -66,7 +67,7 @@ class ActionColumnRenderer {
                     };
                     const disabled = button.disabled && button.disabled(button, context);
                     return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' },
-                        button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
+                        buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
                         buttonLabel));
                 })));
             };