@wise/dynamic-flow-client 3.2.1 → 3.2.2-short-962e290

package/build/revamp/renderers/mappers/decisionComponentToProps.js

@@ -0,0 +1,4 @@
+export var decisionComponentToProps = function (_a) {
+    var options = _a.options, margin = _a.margin;
+    return ({ type: 'decision', options: options, margin: margin });
+};

package/build/revamp/renderers/mappers/dividerComponentToProps.js

@@ -0,0 +1,4 @@
+export var dividerComponentToProps = function (_a) {
+    var control = _a.control, margin = _a.margin;
+    return ({ type: 'divider', control: control, margin: margin });
+};

package/build/revamp/renderers/mappers/formComponentToProps.js

@@ -0,0 +1,4 @@
+export var formComponentToProps = function (_a, children) {
+    var control = _a.control, margin = _a.margin;
+    return ({ type: 'form', children: children, control: control, margin: margin });
+};

package/build/revamp/renderers/mappers/headingComponentToProps.js

@@ -0,0 +1,11 @@
+export var headingComponentToProps = function (_a) {
+    var align = _a.align, control = _a.control, margin = _a.margin, size = _a.size, text = _a.text;
+    return ({
+        type: 'heading',
+        align: align,
+        control: control,
+        margin: margin,
+        size: size,
+        text: text
+    });
+};

package/build/revamp/renderers/mappers/hiddenComponentToProps.js

@@ -0,0 +1,3 @@
+export var hiddenComponentToProps = function () { return ({
+    type: 'hidden'
+}); };

package/build/revamp/renderers/mappers/imageComponentToProps.js

@@ -0,0 +1,11 @@
+export var imageComponentToProps = function (_a) {
+    var accessibilityDescription = _a.accessibilityDescription, control = _a.control, margin = _a.margin, size = _a.size, url = _a.url;
+    return ({
+        type: 'image',
+        accessibilityDescription: accessibilityDescription,
+        control: control,
+        margin: margin,
+        size: size,
+        url: url
+    });
+};

package/build/revamp/renderers/mappers/instructionsComponentToProps.js

@@ -0,0 +1,10 @@
+export var instructionsComponentToProps = function (_a) {
+    var control = _a.control, items = _a.items, margin = _a.margin, title = _a.title;
+    return ({
+        type: 'instructions',
+        control: control,
+        items: items,
+        margin: margin,
+        title: title
+    });
+};

package/build/revamp/renderers/mappers/integerInputComponentToProps.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { inputComponentToProps } from './utils/inputComponentToProps';
+export var integerInputComponentToProps = function (component) { return (__assign(__assign({}, inputComponentToProps(component, 'input-integer')), { onChange: component.onChange.bind(component) })); };

package/build/revamp/renderers/mappers/loadingIndicatorComponentToProps.js

@@ -0,0 +1,9 @@
+export var loadingIndicatorComponentToProps = function (_a) {
+    var control = _a.control, margin = _a.margin, size = _a.size;
+    return ({
+        type: 'loading-indicator',
+        control: control,
+        margin: margin,
+        size: size
+    });
+};

package/build/revamp/renderers/mappers/markdownComponentToProps.js

@@ -0,0 +1,10 @@
+export var markdownComponentToProps = function (_a) {
+    var align = _a.align, content = _a.content, control = _a.control, margin = _a.margin;
+    return ({
+        type: 'markdown',
+        align: align,
+        margin: margin,
+        content: content,
+        control: control
+    });
+};

package/build/revamp/renderers/mappers/modalComponentToProps.js

@@ -0,0 +1,10 @@
+export var modalComponentToProps = function (_a, components) {
+    var control = _a.control, margin = _a.margin, trigger = _a.trigger;
+    return ({
+        type: 'modal',
+        content: { components: components },
+        control: control,
+        margin: margin,
+        trigger: trigger
+    });
+};

package/build/revamp/renderers/mappers/multiUploadInputComponentToProps.js

@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { inputComponentToProps } from './utils/inputComponentToProps';
+export var multiUploadInputComponentToProps = function (component) {
+    var accepts = component.accepts, fileMap = component.fileMap, maxSize = component.maxSize, minItems = component.minItems, maxItems = component.maxItems, uploadLabel = component.uploadLabel;
+    var findIdByValue = function (file) { return Object.keys(fileMap).find(function (id) { return fileMap[id] === file; }); };
+    var fileList = Object.values(fileMap).map(function (file) {
+        var _a;
+        return ({
+            id: (_a = findIdByValue(file)) !== null && _a !== void 0 ? _a : '',
+            file: file
+        });
+    });
+    return __assign(__assign({}, inputComponentToProps(component, 'input-upload-multi')), { accepts: accepts, maxSize: maxSize, minItems: minItems, maxItems: maxItems, uploadLabel: uploadLabel, value: fileList, onUpload: component.onUpload.bind(component), onDelete: component.onDelete.bind(component) });
+};

package/build/revamp/renderers/mappers/numberInputComponentToProps.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { inputComponentToProps } from './utils/inputComponentToProps';
+export var numberInputComponentToProps = function (component) { return (__assign(__assign({}, inputComponentToProps(component, 'input-number')), { onChange: component.onChange.bind(component) })); };

package/build/revamp/renderers/mappers/objectComponentToProps.js

@@ -0,0 +1,11 @@
+export var objectComponentToProps = function (_a, children) {
+    var control = _a.control, description = _a.description, help = _a.help, title = _a.title;
+    return ({
+        type: 'form-section',
+        children: children,
+        control: control,
+        description: description,
+        help: help,
+        title: title
+    });
+};

package/build/revamp/renderers/mappers/paragraphComponentToProps.js

@@ -0,0 +1,10 @@
+export var paragraphComponentToProps = function (_a) {
+    var align = _a.align, control = _a.control, margin = _a.margin, text = _a.text;
+    return ({
+        type: 'paragraph',
+        align: align,
+        control: control,
+        margin: margin,
+        text: text
+    });
+};

package/build/revamp/renderers/mappers/repeatableComponentToProps.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+export var repeatableComponentToProps = function (component, children, editableItemChildren) {
+    var addItemTitle = component.addItemTitle, control = component.control, components = component.components, description = component.description, editItemTitle = component.editItemTitle, errors = component.errors, summaryDefaults = component.summaryDefaults, _a = component.title, title = _a === void 0 ? '' : _a, onEdit = component.onEdit, onAdd = component.onAdd, onSave = component.onSave, onRemove = component.onRemove;
+    var getSummary = function (componentSummary) {
+        var _a, _b, _c, _d;
+        return ({
+            title: (_a = componentSummary.title) !== null && _a !== void 0 ? _a : summaryDefaults.title,
+            description: (_b = componentSummary.description) !== null && _b !== void 0 ? _b : summaryDefaults.description,
+            icon: (_c = componentSummary.icon) !== null && _c !== void 0 ? _c : summaryDefaults.icon,
+            image: (_d = componentSummary.image) !== null && _d !== void 0 ? _d : summaryDefaults.image
+        });
+    };
+    var itemProps = components.map(function (childComponent) { return (__assign(__assign({}, getSummary(childComponent.getSummary())), { id: "".concat(childComponent.uid, "-summary") })); });
+    return {
+        type: 'repeatable',
+        children: children,
+        control: control,
+        items: itemProps,
+        editableItem: editableItemChildren,
+        title: title,
+        description: description,
+        addItemTitle: addItemTitle,
+        editItemTitle: editItemTitle,
+        error: errors[0],
+        onAdd: onAdd.bind(component),
+        onEdit: onEdit.bind(component),
+        onSave: onSave.bind(component),
+        onRemove: onRemove.bind(component)
+    };
+};

package/build/revamp/renderers/mappers/reviewComponentToProps.js

@@ -0,0 +1,11 @@
+export var reviewComponentToProps = function (_a) {
+    var callToAction = _a.callToAction, control = _a.control, fields = _a.fields, margin = _a.margin, title = _a.title;
+    return ({
+        type: 'review',
+        callToAction: callToAction,
+        control: control,
+        fields: fields,
+        margin: margin,
+        title: title
+    });
+};

package/build/revamp/renderers/mappers/searchComponentToProps.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+export var searchComponentToProps = function (component) {
+    var uid = component.uid, control = component.control, emptyMessage = component.emptyMessage, error = component.error, isLoading = component.isLoading, margin = component.margin, query = component.query, results = component.results, title = component.title;
+    var onChange = component.onChange.bind(component);
+    var onSelect = component.onSelect.bind(component);
+    var state = getSearchState({
+        emptyMessage: emptyMessage,
+        error: error,
+        query: query,
+        results: results,
+        onChange: onChange,
+        onSelect: onSelect
+    });
+    return {
+        type: 'search',
+        id: uid,
+        control: control,
+        isLoading: isLoading,
+        margin: margin,
+        query: query,
+        state: state,
+        title: title,
+        onChange: onChange
+    };
+};
+var getSearchState = function (_a) {
+    var emptyMessage = _a.emptyMessage, error = _a.error, query = _a.query, results = _a.results, onChange = _a.onChange, onSelect = _a.onSelect;
+    if (!query) {
+        return { type: 'pending' };
+    }
+    if (error) {
+        return { type: 'error', onRetry: function () { return onChange(query); } };
+    }
+    if (results.length === 0) {
+        return { type: 'noResults', message: emptyMessage };
+    }
+    var rendererResults = results.map(function (result) { return (__assign(__assign({}, result), { onClick: function () { return onSelect(result); } })); });
+    return { type: 'results', results: rendererResults };
+};

package/build/revamp/renderers/mappers/selectInputComponentToProps.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { inputComponentToProps } from './utils/inputComponentToProps';
+export var selectInputComponentToProps = function (component, children) {
+    var _a;
+    var options = component.options, selectedIndex = component.selectedIndex, onSelect = component.onSelect;
+    var _b = inputComponentToProps(component, 'input-select'), value = _b.value, props = __rest(_b, ["value"]);
+    return __assign(__assign({}, props), { options: options, selectedIndex: selectedIndex, onSelect: onSelect.bind(component), children: (_a = children[selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : -1]) !== null && _a !== void 0 ? _a : null });
+};

package/build/revamp/renderers/mappers/statusListComponentToProps.js

@@ -0,0 +1,10 @@
+export var statusListComponentToProps = function (_a) {
+    var control = _a.control, items = _a.items, margin = _a.margin, title = _a.title;
+    return ({
+        type: 'status-list',
+        control: control,
+        items: items,
+        margin: margin,
+        title: title
+    });
+};

package/build/revamp/renderers/mappers/textInputComponentToProps.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { inputComponentToProps } from './utils/inputComponentToProps';
+export var textInputComponentToProps = function (component) { return (__assign(__assign({}, inputComponentToProps(component, 'input-text')), { displayFormat: component.displayFormat, onChange: component.onChange.bind(component) })); };

package/build/revamp/renderers/mappers/uploadInputComponentToProps.js

@@ -0,0 +1,16 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { inputComponentToProps } from './utils/inputComponentToProps';
+export var uploadInputComponentToProps = function (component) {
+    var accepts = component.accepts, maxSize = component.maxSize;
+    return __assign(__assign({}, inputComponentToProps(component, 'input-upload')), { accepts: accepts, maxSize: maxSize, onUpload: component.onUpload.bind(component) });
+};

package/build/revamp/renderers/mappers/utils/inputComponentToProps.js

@@ -0,0 +1,27 @@
+export var inputComponentToProps = function (component, type) {
+    var _a, _b;
+    var autoComplete = component.autoComplete, control = component.control, description = component.description, disabled = component.disabled, errors = component.errors, help = component.help, id = component.id, placeholder = component.placeholder, required = component.required, title = component.title, onBlur = component.onBlur, onFocus = component.onFocus;
+    var validationState = componentHasValidationState(component)
+        ? component.validationState
+        : undefined;
+    var messages = (validationState !== null && validationState !== void 0 ? validationState : {}).messages;
+    return {
+        type: type,
+        autoComplete: autoComplete,
+        control: control,
+        description: (_a = messages === null || messages === void 0 ? void 0 : messages.success) !== null && _a !== void 0 ? _a : description,
+        disabled: disabled,
+        error: (_b = messages === null || messages === void 0 ? void 0 : messages.error) !== null && _b !== void 0 ? _b : errors[0],
+        help: help,
+        id: id,
+        label: title,
+        placeholder: placeholder,
+        required: required,
+        value: component.getLocalValue(),
+        onBlur: onBlur.bind(component),
+        onFocus: onFocus.bind(component)
+    };
+};
+var componentHasValidationState = function (component) {
+    return Boolean('validationState' in component && component.validationState);
+};

package/build/revamp/renderers/stepComponentToProps.js

@@ -0,0 +1,8 @@
+export var stepComponentToProps = function (_a, children) {
+    var loadingState = _a.loadingState;
+    return ({
+        type: 'step',
+        loadingState: loadingState,
+        children: children
+    });
+};

package/build/revamp/renderers/types.js

@@ -0,0 +1 @@
+export {};

package/build/revamp/step/Step.js

@@ -0,0 +1,162 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { mapStepToComponent } from '../domain/mappers/mapStepToComponent';
+import { mergeModels } from '../utils/component-utils';
+import { findComponent } from '../utils/findComponent';
+import { createEmptyStepComponent, } from '../domain/components/StepDomainComponent';
+var emptyStepComponent = createEmptyStepComponent();
+function Step(_a) {
+    var _this = this;
+    var _b;
+    var initialLocalValue = _a.localValue, step = _a.step, _c = _a.displayStepTitle, displayStepTitle = _c === void 0 ? true : _c, loadingState = _a.loadingState, getErrorMessageFunctions = _a.getErrorMessageFunctions, render = _a.render, httpClient = _a.httpClient, trackEvent = _a.trackEvent, logEvent = _a.logEvent, triggerSubmission = _a.triggerSubmission, triggerRefresh = _a.triggerRefresh;
+    var _d = useState(emptyStepComponent), stepComponent = _d[0], setStepComponent = _d[1];
+    var stepComponentRef = useRef(emptyStepComponent);
+    var updateComponent = useCallback(function (id, update) {
+        update(findComponent([stepComponentRef.current], id));
+        setStepComponent(function () {
+            var newStepDomainComponent = __assign({}, stepComponentRef.current);
+            stepComponentRef.current = newStepDomainComponent;
+            return newStepDomainComponent;
+        });
+    }, []);
+    useEffect(function () {
+        setStepComponent(function () {
+            var newStepDomainComponent = __assign(__assign({}, stepComponentRef.current), { loadingState: loadingState });
+            stepComponentRef.current = newStepDomainComponent;
+            return newStepDomainComponent;
+        });
+    }, [loadingState]);
+    var onAction = useCallback(function (action) { return __awaiter(_this, void 0, void 0, function () {
+        var skipValidation, canSubmit, model, payload, localValue, e_1;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    skipValidation = action.method === 'GET' || Boolean(action.skipValidation);
+                    canSubmit = skipValidation || stepComponentRef.current.validate();
+                    if (!canSubmit) return [3 /*break*/, 4];
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, stepComponentRef.current.getSubmittableValue()];
+                case 2:
+                    model = _b.sent();
+                    payload = mergeModels(model, (_a = action.data) !== null && _a !== void 0 ? _a : null);
+                    localValue = stepComponentRef.current.getLocalValue();
+                    void triggerSubmission(action, payload, localValue);
+                    return [3 /*break*/, 4];
+                case 3:
+                    e_1 = _b.sent();
+                    if (process.env.NODE_ENV !== 'test') {
+                        // eslint-disable-next-line no-console
+                        console.log('❌:', 'Failed to get submittable data');
+                    }
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [triggerSubmission]);
+    var onRefresh = useCallback(function (schemaId, url) { return __awaiter(_this, void 0, void 0, function () {
+        var refreshUrl, model, localValue;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    refreshUrl = (_a = url !== null && url !== void 0 ? url : step.refreshUrl) !== null && _a !== void 0 ? _a : step.refreshFormUrl;
+                    if (!refreshUrl) return [3 /*break*/, 2];
+                    return [4 /*yield*/, stepComponentRef.current.getSubmittableValue()];
+                case 1:
+                    model = _b.sent();
+                    localValue = stepComponentRef.current.getLocalValue();
+                    void triggerRefresh({ refreshUrl: refreshUrl, model: model, localValue: localValue, schemaId: schemaId });
+                    _b.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); }, [step.refreshUrl, step.refreshFormUrl, triggerRefresh]);
+    useEffect(function () {
+        var initialComponent = mapStepToComponent({
+            stepLocalValue: initialLocalValue,
+            step: step,
+            displayStepTitle: displayStepTitle,
+            loadingState: loadingState,
+            updateComponent: updateComponent,
+            getErrorMessageFunctions: getErrorMessageFunctions,
+            trackEvent: trackEvent,
+            logEvent: logEvent,
+            httpClient: httpClient,
+            onAction: onAction,
+            onRefresh: onRefresh
+        });
+        setStepComponent(initialComponent);
+        stepComponentRef.current = initialComponent;
+        if (step.key) {
+            logEvent('warning', 'Step.key is deprecated, please use "id" instead');
+        }
+        // we don't want to re-run this effect when the loadingState or initialLocalValue changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        step,
+        displayStepTitle,
+        updateComponent,
+        onAction,
+        getErrorMessageFunctions,
+        httpClient,
+        trackEvent,
+        logEvent,
+        onRefresh,
+    ]);
+    useEffect(function () {
+        trackEvent('Step Shown');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [(_b = step.id) !== null && _b !== void 0 ? _b : step.key]);
+    return _jsx(_Fragment, { children: render(stepComponent) });
+}
+export default Step;

package/build/revamp/step/utils/getRenderFunction.js

@@ -0,0 +1,55 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { componentToRendererProps } from '../../renderers/mappers/componentToRendererProps';
+import { isColumnsComponent, hasChildren, isRepeatableComponent } from '../../utils/type-utils';
+export var getRenderFunction = function (renderers) {
+    function ComponentRenderer(props) {
+        var type = props.type;
+        if (type === 'hidden') {
+            return null;
+        }
+        var renderer = renderers.find(function (_a) {
+            var canRenderType = _a.canRenderType, _b = _a.canRender, canRender = _b === void 0 ? function () { return true; } : _b;
+            // once the type is matched, we know the props are of the correct type
+            return canRenderType === type && canRender(props);
+        });
+        if (!renderer) {
+            throw new Error("Could not find a renderer for ".concat(type));
+        }
+        // if renderer defined, we know props are of the correct type
+        return renderer.render(props);
+    }
+    var getNestedContent = function (component) {
+        if (!hasChildren(component)) {
+            return {};
+        }
+        if (isColumnsComponent(component)) {
+            return {
+                startChildren: component.startComponents.map(render),
+                endChildren: component.endComponents.map(render)
+            };
+        }
+        if (isRepeatableComponent(component)) {
+            return {
+                // We specifically only want components here, because getChildren() includes the editable component
+                children: component.components.map(render),
+                editableItemChildren: component.editableComponent !== null ? render(component.editableComponent) : null
+            };
+        }
+        return {
+            children: component.getChildren().map(render)
+        };
+    };
+    var render = function (component) { return (_jsx(ComponentRenderer, __assign({}, componentToRendererProps(component, getNestedContent(component))), component.uid)); };
+    return render;
+};