@adaptabletools/adaptable 19.2.3 → 20.0.0-canary.0

package/src/View/Theme/ThemeEditor.js

@@ -71,7 +71,6 @@ const fields = [
     },
 ];
 export const ThemeEditor = (props) => {
-    var _a, _b;
     const adaptable = useAdaptable();
     const allThemes = adaptable.api.themeApi.getUserThemes();
     const disabled = props.accessLevel === 'ReadOnly';
@@ -79,10 +78,10 @@ export const ThemeEditor = (props) => {
         return adaptable.api.themeApi.getCurrentThemeObject();
     });
     // THEME variables
-    const themeVariables = currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.CSSVariables;
+    const themeVariables = currentThemeObject?.CSSVariables;
     const valuesFromTheme = fields.reduce((acc, field) => {
-        if (themeVariables === null || themeVariables === void 0 ? void 0 : themeVariables[field.variable]) {
-            acc[field.variable] = themeVariables === null || themeVariables === void 0 ? void 0 : themeVariables[field.variable];
+        if (themeVariables?.[field.variable]) {
+            acc[field.variable] = themeVariables?.[field.variable];
         }
         return acc;
     }, {});
@@ -93,7 +92,7 @@ export const ThemeEditor = (props) => {
     React.useEffect(() => {
         const updateTheme = () => {
             const theme = adaptable.api.themeApi.getCurrentThemeObject();
-            setCurrentThemeObject(Object.assign({}, theme));
+            setCurrentThemeObject({ ...theme });
         };
         const themeChangedUnsubscribe = adaptable.api.eventApi.on('ThemeChanged', updateTheme);
         return () => {
@@ -103,12 +102,15 @@ export const ThemeEditor = (props) => {
     const handleNameDescriptionChangeThrottled = React.useMemo(() => {
         return throttle((key, value) => {
             const theme = adaptable.api.themeApi.getCurrentThemeObject();
-            const newTheme = Object.assign(Object.assign({}, theme), { [key]: value });
+            const newTheme = {
+                ...theme,
+                [key]: value,
+            };
             adaptable.api.themeApi.editTheme(newTheme);
         }, 600);
     }, []);
     const handleDescriptionChange = React.useCallback((key, value) => {
-        setCurrentThemeObject((prev) => (Object.assign(Object.assign({}, prev), { [key]: value })));
+        setCurrentThemeObject((prev) => ({ ...prev, [key]: value }));
         handleNameDescriptionChangeThrottled(key, value);
     }, []);
     const handleDeleteTheme = React.useCallback(() => {
@@ -117,11 +119,11 @@ export const ThemeEditor = (props) => {
     }, []);
     const handleSaveName = () => {
         const name = currentThemeObject.Name;
-        setCurrentThemeObject((prev) => (Object.assign(Object.assign({}, prev), { Name: name })));
+        setCurrentThemeObject((prev) => ({ ...prev, Name: name }));
         handleNameDescriptionChangeThrottled('Name', name);
     };
     const handleVariantChange = (variant) => {
-        const newTheme = Object.assign({}, currentThemeObject);
+        const newTheme = { ...currentThemeObject };
         if (!variant) {
             delete newTheme.Variant;
         }
@@ -139,12 +141,15 @@ export const ThemeEditor = (props) => {
             React.createElement(SimpleButton, { "data-name": "delete", disabled: props.accessLevel !== 'Full', icon: "delete", onClick: handleDeleteTheme, variant: "text" })) },
         React.createElement(FormLayout, null,
             React.createElement(FormRow, { label: "Theme Name" },
-                React.createElement(AdaptableInput, { mr: 2, onChange: (event) => setCurrentThemeObject(Object.assign(Object.assign({}, currentThemeObject), { Name: event.target.value.replace(/ /g, '-') })), value: (_a = currentThemeObject.Name) !== null && _a !== void 0 ? _a : '' }),
+                React.createElement(AdaptableInput, { mr: 2, onChange: (event) => setCurrentThemeObject({
+                        ...currentThemeObject,
+                        Name: event.target.value.replace(/ /g, '-'),
+                    }), value: currentThemeObject.Name ?? '' }),
                 React.createElement(SimpleButton, { onClick: handleSaveName, disabled: saveNameDisabled, icon: "save" }),
                 React.createElement(Text, { fontSize: 2, marginTop: 1 }, "The name cannot contain spaces."),
                 nameIsNotUnique && (React.createElement(Text, { fontSize: 2, color: "var(--ab-color-error)" }, "Name must be unique."))),
             React.createElement(FormRow, { label: "Description" },
-                React.createElement(AdaptableInput, { onChange: (event) => handleDescriptionChange('Description', event.target.value), value: (_b = currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.Description) !== null && _b !== void 0 ? _b : '' })),
+                React.createElement(AdaptableInput, { onChange: (event) => handleDescriptionChange('Description', event.target.value), value: currentThemeObject?.Description ?? '' })),
             React.createElement(FormRow, { label: "Variant" },
                 React.createElement(VariantSelector, { onChange: handleVariantChange, theme: currentThemeObject })),
             fields.map((field) => {
@@ -153,11 +158,22 @@ export const ThemeEditor = (props) => {
                         const currentThemeObject = adaptable.api.themeApi.getCurrentThemeObject();
                         let newTheme = null;
                         if (val === false) {
-                            newTheme = Object.assign(Object.assign({}, currentThemeObject), { CSSVariables: Object.assign({}, currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.CSSVariables) });
+                            newTheme = {
+                                ...currentThemeObject,
+                                CSSVariables: {
+                                    ...currentThemeObject?.CSSVariables,
+                                },
+                            };
                             delete newTheme.CSSVariables[field.variable];
                         }
                         else {
-                            newTheme = Object.assign(Object.assign({}, currentThemeObject), { CSSVariables: Object.assign(Object.assign({}, currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.CSSVariables), { [field.variable]: val }) });
+                            newTheme = {
+                                ...currentThemeObject,
+                                CSSVariables: {
+                                    ...currentThemeObject?.CSSVariables,
+                                    [field.variable]: val,
+                                },
+                            };
                         }
                         setCurrentThemeObject(newTheme);
                         adaptable.api.themeApi.editTheme(newTheme);

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

@@ -9,9 +9,11 @@ interface ThemePopupProps extends ModuleViewPopupProps<ThemePopupComponent> {
     hideShowInWindow?: boolean;
 }
 declare class ThemePopupComponent extends React.Component<ThemePopupProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     onChangeTheme(value: string): void;
     handleCreateNewTheme: (variant: 'dark' | 'light') => void;
 }
-export declare let ThemePopup: import("react-redux").ConnectedComponent<typeof ThemePopupComponent, any>;
+export declare let ThemePopup: import("react-redux").ConnectedComponent<typeof ThemePopupComponent, {
+    [x: string]: any;
+}>;
 export {};

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

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const ThemeStatusbar: () => JSX.Element;
+import React from 'react';
+export declare const ThemeStatusbar: () => React.JSX.Element;

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 export interface ThemeViewPanelComponentProps extends ViewPanelProps {
 }
-export declare const ThemeViewPanelControl: (props: ThemeViewPanelComponentProps) => JSX.Element;
+export declare const ThemeViewPanelControl: (props: ThemeViewPanelComponentProps) => React.JSX.Element;

package/src/View/Theme/VariantSelector.js

@@ -3,7 +3,6 @@ import DropdownButton from '../../components/DropdownButton';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
 export const VariantSelector = (props) => {
-    var _a;
     const adaptable = useAdaptable();
     const systemTemes = adaptable.api.themeApi.getSystemThemes();
     const options = systemTemes.map((theme) => ({
@@ -12,7 +11,7 @@ export const VariantSelector = (props) => {
         onClick: () => props.onChange(theme.Name),
     }));
     const label = props.theme.Variant
-        ? (_a = options.find((theme) => theme.value === props.theme.Variant)) === null || _a === void 0 ? void 0 : _a.label
+        ? options.find((theme) => theme.value === props.theme.Variant)?.label
         : 'Select a theme';
     return (React.createElement(React.Fragment, null,
         React.createElement(DropdownButton, { mr: 2, columns: ['label'], items: options }, label),

package/src/View/UIHelper.d.ts

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

package/src/View/UIHelper.js

@@ -80,7 +80,7 @@ export function getDefaultColors() {
         getHexForName(GREEN),
         getHexForName(LIME_GREEN),
         getHexForName(YELLOW),
-        getHexForName(LIGHT_YELLOW),
+        getHexForName(LIGHT_YELLOW), //  (quick search default)
         getHexForName(DARK_BLUE),
         getHexForName(BLUE),
         getHexForName(LIGHT_BLUE),
@@ -102,21 +102,21 @@ export function getEmptyConfigState() {
 }
 export function getDescriptionForDataType(dataType) {
     switch (dataType) {
-        case 'String':
-            return 'string';
-        case 'Number':
+        case 'text':
+            return 'text';
+        case 'number':
             return 'number';
-        case 'Date':
+        case 'date':
             return 'date';
     }
 }
 export function getPlaceholderForDataType(dataType) {
     switch (dataType) {
-        case 'String':
+        case 'text':
             return 'Enter Value';
-        case 'Number':
+        case 'number':
             return 'Enter Number';
-        case 'Date':
+        case 'date':
             return 'Enter Date';
     }
 }
@@ -402,8 +402,7 @@ export function getButtonTextColourForMessageType(messageType) {
     }
 }
 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;
+    const numericValue = typeof stringValue === 'string' ? +stringValue.match(/\d/g)?.join('') : stringValue;
     return typeof numericValue === 'number' ? numericValue : defaultValue;
 }
 export function getAdaptableToolPanelWidth() {
@@ -434,7 +433,7 @@ export const UIHelper = {
     getDefaultColors,
     getEmptyConfigState,
     getDescriptionForDataType,
-    getPlaceHolderforDataType: getPlaceholderForDataType,
+    getPlaceholderForDataType,
     getModalContainer,
     IsEmptyStyle,
     IsNotEmptyStyle,

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

@@ -5,7 +5,7 @@ import { CSSProperties } from 'react';
 import { ModuleInfo } from '../../Strategy/Interface/IModule';
 export interface IWizardStepInfo {
     StepName: string;
-    Element: JSX.Element;
+    Element: React.JSX.Element;
     Index: number;
 }
 export declare const AdaptableWizardContext: React.Context<{
@@ -43,7 +43,7 @@ export declare class AdaptableWizard extends React.Component<AdaptableWizardProp
     private ActiveStep;
     private stepName;
     constructor(props: AdaptableWizardProps);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     private onStepButtonClicked;
     ForceUpdateGoBackState(): void;
     isLastStep(): boolean;

package/src/View/Wizard/AdaptableWizard.js

@@ -54,7 +54,6 @@ export class AdaptableWizard extends React.Component {
         this.state = { ActiveState: newElement, IndexState: indexStart };
     }
     render() {
-        var _a, _b;
         let wizardStepNames = ArrayExtensions.RetrieveDistinct(this.props.steps.map((x) => {
             return x.StepName;
         }));
@@ -72,11 +71,17 @@ export class AdaptableWizard extends React.Component {
             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) },
+                        : '', style: {
+                        height: '100%',
+                        width: '70vw',
+                        maxWidth: 1000,
+                        maxHeight: '80vh',
+                        ...this.props.style,
+                    } },
                     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(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => this.props.onHide(), tooltip: this.props.closeTooltip ?? 'Close wizard', accessLevel: 'Full' }, this.props.closeText ?? 'CLOSE'),
                         React.createElement("div", { style: { flex: 1 } }),
                         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,

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from '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 declare const ObjectTagsWizardSection: <T extends AdaptableObject>(props: ObjectTagsWizardSectionProps<T>) => React.JSX.Element;
+export declare const renderObjectTagsSummary: <T extends AdaptableObject>(data: T) => React.JSX.Element;
 export {};

package/src/View/Wizard/ObjectTagsWizardSection.js

@@ -9,10 +9,9 @@ export const ObjectTagsWizardSection = (props) => {
     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 })) }))));
+            React.createElement(TagValueSelector, { selectedTags: data.Tags, onChange: (selectedTags) => onChange({ ...data, Tags: selectedTags }) }))));
 };
 export const renderObjectTagsSummary = (data) => {
-    var _a;
-    return ((_a = data.Tags) === null || _a === void 0 ? void 0 : _a.length) ? (React.createElement(Text, { fontSize: 2 },
+    return data.Tags?.length ? (React.createElement(Text, { fontSize: 2 },
         React.createElement(TagValueOptionsTags, { tags: data.Tags }))) : null;
 };

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

@@ -41,5 +41,5 @@ export interface OnePageAdaptableWizardProps<ENTITY> {
     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;
+export declare const OnePageAdaptableWizard: <ENTITY extends unknown>(props: OnePageAdaptableWizardProps<ENTITY>) => React.JSX.Element;
+export declare const OnePageWizardSummary: <ENTITY extends unknown>() => React.JSX.Element;

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -9,9 +9,9 @@ import { Tabs } from '../../components/Tabs';
 import { NamedQueryContext, } from '../../components/ExpressionEditor/NamedQueryContext';
 import { OnePageWizard, useOnePageWizardContext } from './OnePageWizards';
 import kebabCase from 'lodash/kebabCase';
-export const SummaryTag = (props) => (React.createElement(Text, Object.assign({}, props)));
-export const SummaryText = (props) => (React.createElement(Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
-export const FormDescriptionText = (props) => React.createElement(Text, Object.assign({ fontSize: 2, mt: 1 }, props));
+export const SummaryTag = (props) => (React.createElement(Text, { ...props }));
+export const SummaryText = (props) => (React.createElement(Text, { fontSize: 2, mb: 3, ...props }));
+export const FormDescriptionText = (props) => React.createElement(Text, { fontSize: 2, mt: 1, ...props });
 export const OnePageAdaptableWizardContext = React.createContext({
     data: null,
     sections: [],
@@ -43,31 +43,40 @@ export const OnePageAdaptableWizard = (props) => {
         }
         const isValid = typeof section.isValid === 'function'
             ? (data, innerContext) => {
-                return section.isValid(data, api, Object.assign(Object.assign({}, innerContext), extraContext));
+                return section.isValid(data, api, {
+                    ...innerContext,
+                    ...extraContext,
+                });
             }
             : void 0;
         const isVisible = typeof section.isVisible === 'function'
             ? (data, innerContext) => {
-                return section.isVisible(data, api, Object.assign(Object.assign({}, innerContext), extraContext));
+                return section.isVisible(data, api, {
+                    ...innerContext,
+                    ...extraContext,
+                });
             }
             : void 0;
-        return Object.assign(Object.assign({}, section), { isValid,
-            isVisible });
+        return {
+            ...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);
+        props.onFinish?.(props.data);
     };
     return (React.createElement(OnePageAdaptableWizardContext.Provider, { value: extraContext },
         React.createElement(NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
-            React.createElement(OnePageWizard, Object.assign({}, props, { name: name, sections: sections, onFinish: handleClickFinish })))));
+            React.createElement(OnePageWizard, { ...props, name: name, sections: sections, onFinish: handleClickFinish }))));
 };
 export const OnePageWizardSummary = () => {
-    const { sections, data, api } = useOnePageAdaptableWizardContext();
+    const { sections, data, api, moduleInfo } = useOnePageAdaptableWizardContext();
     const { setCurrentSection } = useOnePageWizardContext();
+    const [namedQuery] = useState(false);
     const renderEdit = (index) => (React.createElement(SimpleButton, { px: 1, variant: "text", style: {
             textDecoration: 'underline',
             display: 'inline-block',
@@ -75,6 +84,13 @@ export const OnePageWizardSummary = () => {
         }, onClick: () => {
             setCurrentSection(index);
         } }, "edit"));
+    const extraContext = {
+        data,
+        api,
+        namedQuery,
+        moduleInfo: moduleInfo,
+        sections,
+    };
     return (React.createElement(Box, { className: "ab-OnePageWizardSummary" }, sections
         .map((section, index) => {
         if (section === '-') {
@@ -83,6 +99,9 @@ export const OnePageWizardSummary = () => {
         if (!section.renderSummary) {
             return null;
         }
+        if (section.isVisible && !section.isVisible(data, api, extraContext)) {
+            return null;
+        }
         return (React.createElement(Tabs, { keyboardNavigation: false, mt: index ? 2 : 0, key: index },
             React.createElement(Tabs.Tab, null,
                 section.title,

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

@@ -36,4 +36,4 @@ export interface OnePageWizardProps<ENTITY> {
     closeTooltip?: string;
     finishText?: React.ReactNode;
 }
-export declare const OnePageWizard: <ENTITY extends unknown>(props: OnePageWizardProps<ENTITY>) => JSX.Element;
+export declare const OnePageWizard: <ENTITY extends unknown>(props: OnePageWizardProps<ENTITY>) => React.JSX.Element;

package/src/View/Wizard/OnePageWizards.js

@@ -10,9 +10,9 @@ import { Icon } from '../../components/icons';
 import { useResizeObserver } from '../../components/ResizeObserver';
 import { NamedQueryContext, } from '../../components/ExpressionEditor/NamedQueryContext';
 import { useKeyboardNavigation } from './useKeyboardNavigation';
-export const SummaryTag = (props) => (React.createElement(Text, Object.assign({}, props)));
-export const SummaryText = (props) => (React.createElement(Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
-export const FormDescriptionText = (props) => React.createElement(Text, Object.assign({ fontSize: 2, mt: 1 }, props));
+export const SummaryTag = (props) => (React.createElement(Text, { ...props }));
+export const SummaryText = (props) => (React.createElement(Text, { fontSize: 2, mb: 3, ...props }));
+export const FormDescriptionText = (props) => React.createElement(Text, { fontSize: 2, mt: 1, ...props });
 export const OnePageWizardContext = React.createContext({
     data: null,
     sections: [],
@@ -22,25 +22,35 @@ export function useOnePageWizardContext() {
     return React.useContext(OnePageWizardContext);
 }
 export const OnePageWizard = (props) => {
-    var _a, _b, _c;
     let defaultCurrentIndex = 0;
+    const [currentSection, setCurrentSection] = useProperty(props, 'currentIndex', defaultCurrentIndex, {
+        onChange: (index) => {
+            props.onSectionChange?.(index);
+        },
+    });
+    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;
     if (props.defaultCurrentSectionName) {
-        const candidate = props.sections.findIndex((section) => section !== '-' && (section === null || section === void 0 ? void 0 : section.title) === props.defaultCurrentSectionName);
+        const candidate = visibleSections.findIndex((section) => section !== '-' && section?.title === props.defaultCurrentSectionName);
         if (candidate >= 0) {
             defaultCurrentIndex = candidate;
         }
     }
-    const [currentSection, setCurrentSection] = useProperty(props, 'currentIndex', defaultCurrentIndex, {
-        onChange: (index) => {
-            var _a;
-            (_a = props.onSectionChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
-        },
-    });
     const [namedQuery, setNamedQuery] = useState(false);
     const [navIndexMap] = useState(() => new Map());
     const handleClickFinish = () => {
-        var _a;
-        (_a = props.onFinish) === null || _a === void 0 ? void 0 : _a.call(props, props.data);
+        props.onFinish?.(props.data);
     };
     const renderSection = (index) => {
         const section = visibleSections[index];
@@ -77,19 +87,6 @@ export const OnePageWizard = (props) => {
     const dialogRef = 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);
@@ -112,8 +109,8 @@ export const OnePageWizard = (props) => {
             React.createElement(Dialog, { 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) => {
+                    height: '90vh',
+                }, ref: dialogRef, onDismiss: () => props.onHide?.(), onKeyDown: (event) => {
                     if (event.metaKey || event.ctrlKey) {
                         const { key } = event;
                         if (!isNaN(Number(key))) {
@@ -124,16 +121,25 @@ export const OnePageWizard = (props) => {
                                 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();
+                                    dialogRef?.current?.bringToFront();
                                 });
                             }
                         }
                     }
                 } },
-                React.createElement(Flex, { className: "ab-OnePageWizard", flexDirection: "column", "data-name": props.name, style: Object.assign({ height: '100%', width: '90vw', maxWidth: 1200 }, props.style) },
+                React.createElement(Flex, { className: "ab-OnePageWizard", flexDirection: "column", "data-name": props.name, style: {
+                        height: '100%',
+                        width: '90vw',
+                        maxWidth: 1200,
+                        ...props.style,
+                    } },
                     React.createElement(Flex, { flexDirection: "row", alignItems: "stretch", flex: 1, style: { overflow: 'auto' } },
-                        React.createElement(Flex, { flexDirection: "column", padding: 3, className: "ab-OnePageWizard__section-title-container", ref: sizeOwnerRef, style: Object.assign({ overflow: 'auto', position: 'relative', flex: 'none' }, props.titleContainerStyle) },
+                        React.createElement(Flex, { flexDirection: "column", padding: 3, className: "ab-OnePageWizard__section-title-container", ref: sizeOwnerRef, style: {
+                                overflow: 'auto',
+                                position: 'relative',
+                                flex: 'none',
+                                ...props.titleContainerStyle,
+                            } },
                             visibleSections.map((section, index) => {
                                 if (section === '-') {
                                     return (React.createElement(Box, { as: "hr", mt: 2, className: "ab-OnePageWizard__section-separator", key: `${index}-`, style: {
@@ -173,12 +179,12 @@ export const OnePageWizard = (props) => {
                                 "to navigate")),
                         React.createElement(Flex, { flex: 1, flexDirection: "column", className: "ab-OnePageWizard__section-container" }, renderSection(currentSection))),
                     React.createElement(Flex, { flexDirection: "row", padding: 2, alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer" },
-                        React.createElement(SimpleButton, { 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(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: 'Full' }, props.closeText ?? 'CLOSE'),
                         React.createElement(KeyHint, { ml: 2 }, "Esc"),
                         React.createElement(Text, { fontSize: 2, mr: 3, className: "ab-OnePageWizard__error", style: {
                                 flex: 1,
                                 color: 'var(--ab-color-error)',
                                 textAlign: 'end',
                             } }, firstErrorMessage),
-                        React.createElement(SimpleButton, { 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')))))));
+                        React.createElement(SimpleButton, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: 'Full' }, props.finishText ?? 'Finish')))))));
 };

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

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 export declare const TypeRadio: (props: {
-    checked: boolean;
+    checked?: boolean;
     text: string;
     description: string;
-    onClick: () => void;
-}) => JSX.Element;
+    onClick?: () => void;
+    value?: string;
+}) => React.JSX.Element;

package/src/View/Wizard/TypeRadio.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Flex, Text } from 'rebass';
 import Radio from '../../components/Radio';
-export const TypeRadio = (props) => (React.createElement(Radio, { onClick: () => props.onClick(), checked: props.checked },
+export const TypeRadio = (props) => (React.createElement(Radio, { onClick: () => props.onClick?.(), checked: props.checked, value: props.value },
     React.createElement(Flex, { flexDirection: "column" },
         React.createElement(Text, null, props.text),
         React.createElement(Text, { fontSize: 2, marginTop: 1 }, props.description))));

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

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

package/src/View/renderWithAdaptableContext.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
 import { ReactNode } from 'react';
-export declare const renderWithAdaptableContext: (children: ReactNode, adaptable: IAdaptable) => JSX.Element;
+export declare const renderWithAdaptableContext: (children: ReactNode, adaptable: IAdaptable) => React.JSX.Element;

package/src/agGrid/Adaptable.d.ts

@@ -20,6 +20,6 @@ export declare class AdaptableNoCodeWizard implements IAdaptableNoCodeWizard {
     /**
      * @param adaptableOptions
      */
-    constructor(adaptableOptions: AdaptableOptions, extraOptions?: AdaptableNoCodeWizardOptions, agGridOptons?: AgGridConfig);
+    constructor(adaptableOptions: AdaptableOptions, extraOptions?: AdaptableNoCodeWizardOptions, agGridOptions?: AgGridConfig);
     render(container?: HTMLElement | null): void;
 }