@mailstep/design-system 0.6.62-beta.1 → 0.6.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.62-beta.1",
+  "version": "0.6.62",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Stepper/Stepper.js

@@ -3,12 +3,12 @@ import { useMemo } from 'react';
 import { StepItem } from './components/StepItem';
 import { Container, ItemsWrapper } from './styles';
 export var Stepper = function (_a) {
-    var items = _a.items, activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep;
+    var items = _a.items, activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep, isLoading = _a.isLoading;
     if (!(items === null || items === void 0 ? void 0 : items.length))
         return null;
     var Component = useMemo(function () { return items[activeStep].component; }, [items, activeStep]);
     return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { children: items.map(function (_a, index) {
                     var title = _a.title, disabled = _a.disabled, completed = _a.completed;
                     return (_jsx(StepItem, { onClick: handleChangeStep(index), title: title, index: index, activeStep: activeStep, disabled: disabled, completed: completed }, title));
-                }) }), _jsx(Component, { handleGoToNextStep: handleGoToNextStep })] }));
+                }) }), _jsx(Component, { handleGoToNextStep: handleGoToNextStep, isLoading: isLoading })] }));
 };

package/ui/Blocks/Stepper/components/CheckedCircle/styles.js

@@ -3,5 +3,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { th } from '@xstyled/styled-components';
-export var CheckedCircleContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), th.color('red1'), th.color('red1'));
+export var CheckedCircleContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"], ["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"])), th.color('red1'), th.color('red1'));
 var templateObject_1;

package/ui/Blocks/Stepper/hooks/useStepper.d.ts

@@ -1,5 +1,6 @@
 type Props = {
     totalSteps: number;
+    handleFinish?: () => Promise<void>;
 };
 type HookType = (props: Props) => {
     activeStep: number;

package/ui/Blocks/Stepper/hooks/useStepper.js

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 export var useStepper = function (_a) {
-    var totalSteps = _a.totalSteps;
+    var totalSteps = _a.totalSteps, handleFinish = _a.handleFinish;
     var _b = useState(0), activeStep = _b[0], setActiveStep = _b[1];
     var _c = useState(false), isSuccess = _c[0], setSuccess = _c[1];
     var handleReset = useCallback(function () {
@@ -9,6 +9,13 @@ export var useStepper = function (_a) {
     }, []);
     var handleGoToNextStep = useCallback(function () {
         if (activeStep + 1 === totalSteps) {
+            if (handleFinish) {
+                handleFinish().then(function () {
+                    handleReset();
+                    setSuccess(true);
+                });
+                return;
+            }
             handleReset();
             setSuccess(true);
             return;

package/ui/Blocks/Stepper/types.d.ts

@@ -4,9 +4,11 @@ export type StepperProps = {
     activeStep: number;
     handleChangeStep: (step: number) => () => void;
     handleGoToNextStep: () => void;
+    isLoading?: boolean;
 };
 export type StepperPassedDownProps = {
     handleGoToNextStep: () => void;
+    isLoading?: boolean;
 };
 export type StepperItem = {
     title: string;