@adaptabletools/adaptable-cjs 17.0.0-canary.1

package/src/View/Wizard/AdaptableWizard.js

@@ -0,0 +1,169 @@
+"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({
+    data: null,
+    updateGoBackState: () => { },
+    onRender: (ActiveStep) => { },
+    api: null,
+});
+const useWizardContext = () => {
+    return React.useContext(exports.AdaptableWizardContext);
+};
+exports.useWizardContext = useWizardContext;
+class DummyActiveStep {
+    canNext() {
+        return false;
+    }
+    canBack() {
+        return false;
+    }
+    next() {
+        // no implementation for this
+    }
+    back() {
+        // no implementation for this
+    }
+    getIndexStepIncrement() {
+        return 1;
+    }
+    getIndexStepDecrement() {
+        return 1;
+    }
+}
+//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 {
+    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....
+        //I have no idea so far how to do it differently
+        this.ActiveStep = new DummyActiveStep();
+        let indexStart = 0;
+        if (this.props.stepStartIndex) {
+            indexStart = this.props.stepStartIndex;
+        }
+        let BodyElement = this.props.steps[indexStart].Element;
+        this.stepName = this.props.steps[indexStart].StepName;
+        let newElement = this.cloneWizardStep(BodyElement);
+        this.state = { ActiveState: newElement, IndexState: indexStart };
+    }
+    render() {
+        var _a, _b;
+        let wizardStepNames = ArrayExtensions_1.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: {
+                data: this.props.data,
+                updateGoBackState: () => this.ForceUpdateGoBackState(),
+                api: this.props.api,
+                onRender: (ActiveStep) => {
+                    this.ActiveStep = ActiveStep;
+                    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`
+                        : '', 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("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"))))));
+    }
+    onStepButtonClicked(stepName) {
+        let wizardStepInfo = this.props.steps.find((s) => s.StepName == stepName);
+        let bodyElement = wizardStepInfo.Element;
+        let newElement = this.cloneWizardStep(bodyElement);
+        this.stepName = wizardStepInfo.StepName;
+        this.setState({
+            ActiveState: newElement,
+            IndexState: wizardStepInfo.Index,
+        });
+    }
+    ForceUpdateGoBackState() {
+        this.forceUpdate();
+    }
+    isLastStep() {
+        return this.state.IndexState == this.props.steps.length - 1;
+    }
+    isFirstStep() {
+        return this.state.IndexState == 0;
+    }
+    canFinishWizard() {
+        return this.ActiveStep.canNext() && this.props.canFinishWizard();
+    }
+    handleClickBack() {
+        if (!this.isFirstStep()) {
+            if (this.ActiveStep.canBack()) {
+                let decrement = this.ActiveStep.getIndexStepDecrement();
+                this.ActiveStep.back();
+                let activeWizardInfo = this.props.steps[this.state.IndexState - decrement];
+                let bodyElement = activeWizardInfo.Element;
+                let newElement = this.cloneWizardStep(bodyElement);
+                this.stepName = activeWizardInfo.StepName;
+                this.setState({
+                    ActiveState: newElement,
+                    IndexState: this.state.IndexState - decrement,
+                });
+            }
+        }
+    }
+    handleClickNext() {
+        if (this.ActiveStep.canNext()) {
+            let increment = this.ActiveStep.getIndexStepIncrement();
+            this.ActiveStep.next();
+            let activeWizardInfo = this.props.steps[this.state.IndexState + increment];
+            let bodyElement = activeWizardInfo.Element;
+            let newElement = this.cloneWizardStep(bodyElement);
+            this.stepName = activeWizardInfo.StepName;
+            this.setState({
+                ActiveState: newElement,
+                IndexState: this.state.IndexState + increment,
+            });
+        }
+    }
+    handleClickFinish() {
+        if (this.ActiveStep.canNext()) {
+            this.ActiveStep.next();
+            if (this.props.onFinish) {
+                this.props.onFinish();
+            }
+            this.props.onHide();
+        }
+    }
+    //So we inject everything needed for the Wizard
+    cloneWizardStep(step) {
+        return React.cloneElement(step, {
+            ref: (Element) => {
+                if (Element) {
+                    this.ActiveStep = Element;
+                    this.forceUpdate();
+                }
+                else {
+                    this.ActiveStep = null;
+                }
+            },
+            data: this.props.data,
+            updateGoBackState: () => this.ForceUpdateGoBackState(),
+            api: this.props.api,
+        });
+    }
+}
+exports.AdaptableWizard = AdaptableWizard;

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

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import { AdaptableObject } from '../../../PredefinedConfig/Common/AdaptableObject';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+import { ModuleInfo } from '../../../Strategy/Interface/IModule';
+import { ModuleParams } from '../../Components/SharedProps/ModuleViewPopupProps';
+export interface AdaptableWizardStep {
+    canNext(): boolean;
+    canBack(): boolean;
+    next(): void;
+    back(): void;
+    getIndexStepIncrement(): number;
+    getIndexStepDecrement(): number;
+}
+export interface AdaptableWizardStepProps<T> {
+    data?: T;
+    updateGoBackState?(): void;
+    api: AdaptableApi;
+    moduleInfo: ModuleInfo;
+}
+export interface AdaptableObjectExpressionAdaptableWizardProps<View> extends AdaptableObjectAdaptableWizardProps<View> {
+    onSetNewNamedQuery: (newNamedQuery: string) => void;
+}
+export interface AdaptableWizardProps<View> extends React.ClassAttributes<View> {
+    wizardStartIndex: number;
+    onCloseWizard: () => void;
+    onFinishWizard: (data?: any) => void;
+    modalContainer: HTMLElement;
+    canFinishWizard: Function;
+    moduleInfo: ModuleInfo;
+}
+export interface AdaptableObjectAdaptableWizardProps<View> extends AdaptableWizardProps<View> {
+    configEntities: AdaptableObject[];
+    editedAdaptableObject: AdaptableObject;
+    api: AdaptableApi;
+}
+export interface AdaptableOnePageWizardProps<T extends AdaptableObject> {
+    moduleInfo?: ModuleInfo;
+    data: T;
+    configEntities?: T[];
+    wizardStartIndex?: number;
+    onCloseWizard: VoidFunction;
+    onFinishWizard: (data: T) => void;
+    defaultCurrentSectionName?: string;
+    abObjectType?: {
+        name: string;
+        label?: string;
+    };
+    popupParams?: ModuleParams;
+}

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

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

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

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

package/src/View/Wizard/ObjectTagsWizardSection.js

@@ -0,0 +1,24 @@
+"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) => {
+    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 })) }))));
+};
+exports.ObjectTagsWizardSection = ObjectTagsWizardSection;
+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;
+};
+exports.renderObjectTagsSummary = renderObjectTagsSummary;

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { CSSProperties } from 'react';
+import { TextProps } from 'rebass';
+import { AdaptableApi } from '../../types';
+import { ModuleInfo } from '../../Strategy/Interface/IModule';
+import { ExpressionEditorNamedQuery } from '../../components/ExpressionEditor/NamedQueryContext';
+export type OnePageAdaptableWizardContextType<T> = {
+    data: T;
+    sections: (OnePageAdaptableWizardSection<T> | '-')[];
+    moduleInfo: ModuleInfo;
+    api: AdaptableApi;
+    namedQuery: ExpressionEditorNamedQuery;
+};
+export declare const SummaryTag: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
+export declare const SummaryText: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
+export declare const FormDescriptionText: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
+export declare const OnePageAdaptableWizardContext: React.Context<OnePageAdaptableWizardContextType<any>>;
+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: (OnePageAdaptableWizardSection<ENTITY> | '-')[];
+    currentIndex?: number;
+    defaultCurrentIndex?: number;
+    defaultCurrentSectionName?: string;
+    onSectionChange?: (index: number) => void;
+    onHide?: VoidFunction;
+    onFinish?: (data: ENTITY) => any;
+    children?: React.ReactNode;
+    style?: CSSProperties;
+    titleContainerStyle?: CSSProperties;
+    closeText?: React.ReactNode;
+    closeTooltip?: string;
+    finishText?: React.ReactNode;
+}
+export declare const OnePageAdaptableWizard: <ENTITY extends unknown>(props: OnePageAdaptableWizardProps<ENTITY>) => JSX.Element;
+export declare const OnePageWizardSummary: <ENTITY extends unknown>() => JSX.Element;

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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/NamedQueryRedux"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const Tabs_1 = require("../../components/Tabs");
+const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
+const OnePageWizards_1 = require("./OnePageWizards");
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
+const SummaryTag = (props) => (React.createElement(rebass_1.Text, Object.assign({}, props)));
+exports.SummaryTag = SummaryTag;
+const SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
+exports.SummaryText = SummaryText;
+const FormDescriptionText = (props) => React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props));
+exports.FormDescriptionText = FormDescriptionText;
+exports.OnePageAdaptableWizardContext = React.createContext({
+    data: null,
+    sections: [],
+    moduleInfo: null,
+    api: null,
+    namedQuery: false,
+});
+function useOnePageAdaptableWizardContext() {
+    return React.useContext(exports.OnePageAdaptableWizardContext);
+}
+exports.useOnePageAdaptableWizardContext = useOnePageAdaptableWizardContext;
+const OnePageAdaptableWizard = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const saveNamedQuery = React.useCallback((namedQuery) => dispatch(QueryRedux.NamedQueryAdd(namedQuery)), []);
+    const [namedQuery, setNamedQuery] = (0, react_1.useState)(false);
+    const name = props.moduleInfo.FriendlyName
+        ? `${(0, kebabCase_1.default)(props.moduleInfo.FriendlyName)}-wizard`
+        : '';
+    const extraContext = {
+        data: props.data,
+        api,
+        namedQuery,
+        moduleInfo: props.moduleInfo,
+        sections: props.sections,
+    };
+    const sections = props.sections.map((section) => {
+        if (section === '-') {
+            return '-';
+        }
+        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);
+        }
+        (_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.OnePageAdaptableWizard = OnePageAdaptableWizard;
+const OnePageWizardSummary = () => {
+    const { setCurrentSection, sections, data } = (0, OnePageWizards_1.useOnePageWizardContext)();
+    const renderEdit = (index) => (React.createElement(SimpleButton_1.default, { px: 1, variant: "text", style: {
+            textDecoration: 'underline',
+            display: 'inline-block',
+            fontSize: 'var(--ab-font-size-2)',
+        }, onClick: () => {
+            setCurrentSection(index);
+        } }, "edit"));
+    return (React.createElement(rebass_1.Box, { className: "ab-OnePageWizardSummary" }, sections
+        .map((section, index) => {
+        if (section === '-') {
+            return null;
+        }
+        if (!section.renderSummary) {
+            return null;
+        }
+        return (React.createElement(Tabs_1.Tabs, { keyboardNavigation: false, mt: index ? 2 : 0, key: index },
+            React.createElement(Tabs_1.Tabs.Tab, null,
+                section.title,
+                " ",
+                renderEdit(index)),
+            React.createElement(Tabs_1.Tabs.Content, null, section.renderSummary(data))));
+    })
+        .filter(Boolean)));
+};
+exports.OnePageWizardSummary = OnePageWizardSummary;

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { CSSProperties } from 'react';
+import { TextProps } from 'rebass';
+export type OnePageWizardContextType<T> = {
+    data: T;
+    sections: (OnePageWizardSection<T> | '-')[];
+    setCurrentSection: (index: number) => void;
+};
+export declare const SummaryTag: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
+export declare const SummaryText: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
+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 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;
+    titleContainerStyle?: CSSProperties;
+    closeText?: React.ReactNode;
+    closeTooltip?: string;
+    finishText?: React.ReactNode;
+}
+export declare const OnePageWizard: <ENTITY extends unknown>(props: OnePageWizardProps<ENTITY>) => JSX.Element;

package/src/View/Wizard/OnePageWizards.js

@@ -0,0 +1,193 @@
+"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");
+const SummaryTag = (props) => (React.createElement(rebass_1.Text, Object.assign({}, props)));
+exports.SummaryTag = SummaryTag;
+const SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
+exports.SummaryText = SummaryText;
+const FormDescriptionText = (props) => React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props));
+exports.FormDescriptionText = FormDescriptionText;
+exports.OnePageWizardContext = React.createContext({
+    data: null,
+    sections: [],
+    setCurrentSection: (index) => { },
+});
+function useOnePageWizardContext() {
+    return React.useContext(exports.OnePageWizardContext);
+}
+exports.useOnePageWizardContext = useOnePageWizardContext;
+const OnePageWizard = (props) => {
+    var _a, _b, _c;
+    let defaultCurrentIndex = 0;
+    if (props.defaultCurrentSectionName) {
+        const candidate = props.sections.findIndex((section) => section !== '-' && (section === null || section === void 0 ? void 0 : section.title) === props.defaultCurrentSectionName);
+        if (candidate >= 0) {
+            defaultCurrentIndex = candidate;
+        }
+    }
+    const [currentSection, setCurrentSection] = (0, 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] = (0, react_1.useState)(false);
+    const [navIndexMap] = (0, 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 = (0, 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 = (0, react_1.useRef)(null);
+    const [width, setWidth] = (0, react_1.useState)(0);
+    (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 = (0, 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(Boolean)
+            .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());
+    (0, 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: Object.assign({ overflow: 'auto', position: 'relative', flex: 'none' }, props.titleContainerStyle) },
+                            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" },
+                                (0, 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' }, (_c = props.finishText) !== null && _c !== void 0 ? _c : 'Finish')))))));
+};
+exports.OnePageWizard = OnePageWizard;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const TypeRadio: (props: {
+    checked: boolean;
+    text: string;
+    description: string;
+    onClick: () => void;
+}) => JSX.Element;