@digigov/form 0.6.9 → 0.6.10

package/es/Field/index.js

@@ -1,11 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["required", "name", "component", "wrapper", "control", "type", "controlled", "enabled", "editable", "defaultValue", "label", "extra", "layout", "error", "register"],
     _excluded2 = ["name", "children"];
 import React, { useContext, useMemo } from 'react';
-import { ConditionalField } from '@digigov/form/Field/ConditionalField';
-import { Controller } from 'react-hook-form';
-import { FormContext } from '@digigov/form';
+import { Controller, useWatch } from 'react-hook-form';
+import { FormContext } from '@digigov/form/FormContext';
 import CoreField from '@digigov/react-core/Field';
 import CoreLabel from '@digigov/react-core/Label';
 import CoreFieldset from '@digigov/react-core/Fieldset';
@@ -20,6 +19,79 @@ import FileInput from '@digigov/form/inputs/FileInput';
 import DateInput from '@digigov/form/inputs/DateInput';
 import Label from '@digigov/form/inputs/Label';
 import { useTranslation } from '@digigov/ui/app/i18n';
+
+function evaluateFieldWithConditions(field, variables) {
+  var newField = _extends({}, field);
+
+  if (variables) {
+    for (var key in variables) {
+      if (field.condition[key] && field.condition[key].is === variables[key]) {
+        var then = field.condition[key].then || {};
+
+        for (var attr in then) {
+          newField[attr] = then[attr];
+        }
+      } else if (field.condition[key]) {
+        var otherwise = field.condition[key]["else"] || {};
+
+        for (var _attr in otherwise) {
+          newField[_attr] = otherwise[_attr];
+        }
+      }
+    }
+  }
+
+  return newField;
+}
+
+var ChildFieldMemo = /*#__PURE__*/React.memo(function ChildField(_ref) {
+  var dependencies = _ref.dependencies,
+      field = _ref.field,
+      control = _ref.control,
+      register = _ref.register,
+      error = _ref.error;
+  var newField = evaluateFieldWithConditions(field, dependencies);
+  return /*#__PURE__*/React.createElement(FieldBase, _extends({}, newField, {
+    name: newField.key,
+    control: control,
+    register: register,
+    error: error
+  }));
+}, function (prev, next) {
+  if (!prev || !prev.dependencies) {
+    return false;
+  }
+
+  if (prev.error !== next.error) {
+    return false;
+  }
+
+  for (var dep in next.dependencies) {
+    if (next.dependencies[dep] !== prev.dependencies[dep]) {
+      return false;
+    }
+  }
+
+  return true;
+});
+export var ConditionalField = function ConditionalField(_ref2) {
+  var control = _ref2.control,
+      field = _ref2.field,
+      register = _ref2.register,
+      error = _ref2.error;
+  var dependencyKeys = Object.keys(field.condition);
+  var variables = useWatch({
+    name: dependencyKeys,
+    control: control
+  });
+  return /*#__PURE__*/React.createElement(ChildFieldMemo, {
+    dependencies: variables,
+    field: field,
+    control: control,
+    register: register,
+    error: error
+  });
+};
 var FIELD_COMPONENTS = {
   text: {
     component: Input
@@ -54,12 +126,12 @@ var ALTERNATIVE_COMPONENTS = {
   }
 };
 
-var FieldContainer = function FieldContainer(_ref) {
-  var name = _ref.name,
-      wrapper = _ref.wrapper,
-      label = _ref.label,
-      children = _ref.children,
-      error = _ref.error;
+var FieldContainer = function FieldContainer(_ref3) {
+  var name = _ref3.name,
+      wrapper = _ref3.wrapper,
+      label = _ref3.label,
+      children = _ref3.children,
+      error = _ref3.error;
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -118,10 +190,10 @@ export var FieldBase = function FieldBase(props) {
     }, /*#__PURE__*/React.createElement(Controller, {
       control: control,
       name: name,
-      render: function render(_ref2) {
-        var onChange = _ref2.onChange,
-            onBlur = _ref2.onBlur,
-            value = _ref2.value;
+      render: function render(_ref4) {
+        var onChange = _ref4.onChange,
+            onBlur = _ref4.onBlur,
+            value = _ref4.value;
         return /*#__PURE__*/React.createElement(Component, _extends({
           name: name,
           onChange: onChange,
@@ -199,41 +271,41 @@ function calculateField(children, field, componentRegistry) {
 
   var calculatedField = _extends({}, field);
 
-  var FieldComponentRegistry = _extends({}, FIELD_COMPONENTS, componentRegistry);
+  var fieldComponentRegistry = _extends({}, FIELD_COMPONENTS, componentRegistry);
 
   if (children) {
     calculatedField.component = children;
   } else if (typeof field.component === 'function') {// leave as is
   } else if (!field.component && !field.type) {
-    var _FieldComponentRegist;
+    var _fieldComponentRegist;
 
-    calculatedField.component = FieldComponentRegistry.string.component;
-    calculatedField.controlled = ((_FieldComponentRegist = FieldComponentRegistry.string) === null || _FieldComponentRegist === void 0 ? void 0 : _FieldComponentRegist.controlled) || false;
+    calculatedField.component = fieldComponentRegistry.string.component;
+    calculatedField.controlled = ((_fieldComponentRegist = fieldComponentRegistry.string) === null || _fieldComponentRegist === void 0 ? void 0 : _fieldComponentRegist.controlled) || false;
   } else if (typeof (field === null || field === void 0 ? void 0 : (_field$extra = field.extra) === null || _field$extra === void 0 ? void 0 : _field$extra.component) === 'string' && ALTERNATIVE_COMPONENTS[field.extra.component]) {
     var _ALTERNATIVE_COMPONEN;
 
     calculatedField.controlled = ((_ALTERNATIVE_COMPONEN = ALTERNATIVE_COMPONENTS[field.extra.component]) === null || _ALTERNATIVE_COMPONEN === void 0 ? void 0 : _ALTERNATIVE_COMPONEN.controlled) || false;
     calculatedField.component = ALTERNATIVE_COMPONENTS[field.extra.component].component;
-  } else if (!field.component && field.type && FieldComponentRegistry[field.type]) {
-    var _FieldComponentRegist2;
+  } else if (!field.component && field.type && fieldComponentRegistry[field.type]) {
+    var _fieldComponentRegist2;
 
-    calculatedField.component = FieldComponentRegistry[field.type].component;
-    calculatedField.wrapper = FieldComponentRegistry[field.type].wrapper;
-    calculatedField.controlled = ((_FieldComponentRegist2 = FieldComponentRegistry[field.type]) === null || _FieldComponentRegist2 === void 0 ? void 0 : _FieldComponentRegist2.controlled) || false;
+    calculatedField.component = fieldComponentRegistry[field.type].component;
+    calculatedField.wrapper = fieldComponentRegistry[field.type].wrapper;
+    calculatedField.controlled = ((_fieldComponentRegist2 = fieldComponentRegistry[field.type]) === null || _fieldComponentRegist2 === void 0 ? void 0 : _fieldComponentRegist2.controlled) || false;
   } else {
-    var _FieldComponentRegist3;
+    var _fieldComponentRegist3;
 
-    calculatedField.component = FieldComponentRegistry.string.component;
-    calculatedField.controlled = ((_FieldComponentRegist3 = FieldComponentRegistry.string) === null || _FieldComponentRegist3 === void 0 ? void 0 : _FieldComponentRegist3.controlled) || false;
+    calculatedField.component = fieldComponentRegistry.string.component;
+    calculatedField.controlled = ((_fieldComponentRegist3 = fieldComponentRegistry.string) === null || _fieldComponentRegist3 === void 0 ? void 0 : _fieldComponentRegist3.controlled) || false;
   }
 
   return calculatedField;
 }
 
-export var Field = function Field(_ref3) {
-  var name = _ref3.name,
-      children = _ref3.children,
-      customField = _objectWithoutProperties(_ref3, _excluded2);
+export var Field = function Field(_ref5) {
+  var name = _ref5.name,
+      children = _ref5.children,
+      customField = _objectWithoutProperties(_ref5, _excluded2);
 
   var _useField = useField(name, customField !== null && customField !== void 0 && customField.type ? customField : null),
       field = _useField.field,

package/es/Field/types.js

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

package/es/Fieldset/FieldsetWithContext.js

@@ -0,0 +1,41 @@
+import React, { useContext, useMemo } from 'react';
+import { FormContext } from '@digigov/form/FormContext';
+import Field from '@digigov/form/Field';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import { Fieldset, FieldsetLabel, FieldsetCaption, FieldsetBody } from '@digigov/form/Fieldset/';
+export var FieldsetWithContext = function FieldsetWithContext(_ref) {
+  var name = _ref.name;
+
+  var _useFieldset = useFieldset(name),
+      label = _useFieldset.label,
+      body = _useFieldset.body,
+      fields = _useFieldset.fields;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _ref2 = /*#__PURE__*/React.createElement(FieldsetBody, null, body);
+
+  return useMemo(function () {
+    return /*#__PURE__*/React.createElement(Fieldset, null, (label === null || label === void 0 ? void 0 : label.primary) && /*#__PURE__*/React.createElement(FieldsetLabel, null, t(label.primary)), (label === null || label === void 0 ? void 0 : label.secondary) && /*#__PURE__*/React.createElement(FieldsetCaption, null, t(label.secondary)), body && _ref2, fields.map(function (field) {
+      return /*#__PURE__*/React.createElement(Field, {
+        key: field,
+        name: field
+      });
+    }));
+  }, [label === null || label === void 0 ? void 0 : label.primary, label === null || label === void 0 ? void 0 : label.secondary, body, fields]);
+};
+
+var useFieldset = function useFieldset(name) {
+  var _useContext = useContext(FormContext),
+      fieldsetsMap = _useContext.fieldsetsMap;
+
+  if (fieldsetsMap && fieldsetsMap[name]) {
+    return useMemo(function () {
+      return fieldsetsMap[name];
+    }, [name]);
+  } else {
+    if (!fieldsetsMap) throw new Error("Fieldsets is not defined");
+    throw new Error("No fieldset with name ".concat(name, " found"));
+  }
+};

package/es/Fieldset/index.js

@@ -1,12 +1,9 @@
-import React, { useContext, useMemo } from 'react';
+import React from 'react';
 import Grid from '@digigov/ui/layouts/Grid';
 import CoreFieldset from '@digigov/react-core/Fieldset';
 import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
 import Hint from '@digigov/react-core/Hint';
-import { FormContext } from '@digigov/form';
-import Field from '@digigov/form/Field';
 import NormalText from '@digigov/ui/typography/NormalText';
-import { useTranslation } from '@digigov/ui/app/i18n';
 export var FieldsetLabel = function FieldsetLabel(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement(FieldsetLegend, {
@@ -25,53 +22,8 @@ export var FieldsetBody = function FieldsetBody(_ref3) {
     xs: 12
   }, /*#__PURE__*/React.createElement(NormalText, null, children));
 };
-
-var useFieldset = function useFieldset(name) {
-  var _useContext = useContext(FormContext),
-      fieldsetsMap = _useContext.fieldsetsMap;
-
-  if (fieldsetsMap && fieldsetsMap[name]) {
-    return useMemo(function () {
-      return fieldsetsMap[name];
-    }, [name]);
-  } else {
-    if (!fieldsetsMap) throw new Error("Fieldsets is not defined");
-    throw new Error("No fieldset with name ".concat(name, " found"));
-  }
-};
-
-export var FieldsetWithContext = function FieldsetWithContext(_ref4) {
-  var name = _ref4.name;
-
-  var _useFieldset = useFieldset(name),
-      label = _useFieldset.label,
-      body = _useFieldset.body,
-      fields = _useFieldset.fields;
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
-  var _ref5 = /*#__PURE__*/React.createElement(FieldsetBody, null, body);
-
-  return useMemo(function () {
-    return /*#__PURE__*/React.createElement(Fieldset, null, (label === null || label === void 0 ? void 0 : label.primary) && /*#__PURE__*/React.createElement(FieldsetLabel, null, t(label.primary)), (label === null || label === void 0 ? void 0 : label.secondary) && /*#__PURE__*/React.createElement(FieldsetCaption, null, t(label.secondary)), body && _ref5, fields.map(function (field) {
-      return /*#__PURE__*/React.createElement(Field, {
-        key: field,
-        name: field
-      });
-    }));
-  }, [label === null || label === void 0 ? void 0 : label.primary, label === null || label === void 0 ? void 0 : label.secondary, body, fields]);
-};
-export var Fieldset = function Fieldset(_ref6) {
-  var name = _ref6.name,
-      children = _ref6.children;
-
-  if (name && !children) {
-    return /*#__PURE__*/React.createElement(FieldsetWithContext, {
-      name: name
-    });
-  }
-
+export var Fieldset = function Fieldset(_ref4) {
+  var children = _ref4.children;
   return /*#__PURE__*/React.createElement(CoreFieldset, null, children);
 };
 export default Fieldset;

package/es/Fieldset/types.js

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

package/es/FormBuilder.js

@@ -0,0 +1,148 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onSubmit", "children", "registerField", "fieldsMap", "fieldsetsMap", "resolver", "mode", "initial", "reValidateMode", "shouldFocusError", "criteriaMode", "componentRegistry"],
+    _excluded2 = ["fields", "fieldsets", "initial", "onSubmit", "children", "reValidateMode", "mode", "shouldFocusError", "criteriaMode", "auto", "validatorRegistry", "componentRegistry"];
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useCallback, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@digigov/form/utils';
+import Grid from '@digigov/ui/layouts/Grid';
+import { useValidationSchema } from '@digigov/form/validators';
+import Fieldset from '@digigov/form/Fieldset';
+import Field from '@digigov/form/Field';
+import { FormContext } from '@digigov/form/FormContext';
+export var FormBase = /*#__PURE__*/React.forwardRef(function FormBase(_ref, ref) {
+  var onSubmit = _ref.onSubmit,
+      children = _ref.children,
+      registerField = _ref.registerField,
+      fieldsMap = _ref.fieldsMap,
+      fieldsetsMap = _ref.fieldsetsMap,
+      resolver = _ref.resolver,
+      mode = _ref.mode,
+      initial = _ref.initial,
+      reValidateMode = _ref.reValidateMode,
+      shouldFocusError = _ref.shouldFocusError,
+      criteriaMode = _ref.criteriaMode,
+      componentRegistry = _ref.componentRegistry,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var form = useForm({
+    resolver: resolver,
+    mode: mode,
+    defaultValues: initial,
+    reValidateMode: reValidateMode,
+    shouldFocusError: shouldFocusError,
+    criteriaMode: criteriaMode
+  });
+  var handleSubmit = useCallback(function (data) {
+    var errors = onSubmit && onSubmit(data);
+
+    if (errors) {
+      for (var key in errors) {
+        form.setError(key, errors[key]);
+      }
+    }
+  }, [onSubmit]);
+  var ctx = {
+    fieldsMap: fieldsMap,
+    fieldsetsMap: fieldsetsMap,
+    control: form.control,
+    register: form.register,
+    registerField: registerField,
+    errors: form.errors,
+    reset: form.reset,
+    componentRegistry: componentRegistry
+  };
+  return /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: ctx
+  }, /*#__PURE__*/React.createElement("form", _extends({
+    onSubmit: form.handleSubmit(handleSubmit),
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement(Grid, {
+    container: true
+  }, /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, children))));
+});
+export var FormBuilder = /*#__PURE__*/React.forwardRef(function FormBuilder(_ref2, ref) {
+  var _ref2$fields = _ref2.fields,
+      fields = _ref2$fields === void 0 ? [] : _ref2$fields,
+      fieldsets = _ref2.fieldsets,
+      _ref2$initial = _ref2.initial,
+      initial = _ref2$initial === void 0 ? {} : _ref2$initial,
+      onSubmit = _ref2.onSubmit,
+      children = _ref2.children,
+      _ref2$reValidateMode = _ref2.reValidateMode,
+      reValidateMode = _ref2$reValidateMode === void 0 ? 'onSubmit' : _ref2$reValidateMode,
+      _ref2$mode = _ref2.mode,
+      mode = _ref2$mode === void 0 ? 'onSubmit' : _ref2$mode,
+      _ref2$shouldFocusErro = _ref2.shouldFocusError,
+      shouldFocusError = _ref2$shouldFocusErro === void 0 ? true : _ref2$shouldFocusErro,
+      _ref2$criteriaMode = _ref2.criteriaMode,
+      criteriaMode = _ref2$criteriaMode === void 0 ? 'firstError' : _ref2$criteriaMode,
+      _ref2$auto = _ref2.auto,
+      auto = _ref2$auto === void 0 ? false : _ref2$auto,
+      validatorRegistry = _ref2.validatorRegistry,
+      componentRegistry = _ref2.componentRegistry,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  var fieldsState = useRef(fields);
+  var setFieldsState = useCallback(function (newFields) {
+    fieldsState.current = newFields;
+  }, []);
+  var schema = useValidationSchema(fieldsState, validatorRegistry);
+  var registerField = useCallback(function (field) {
+    setFieldsState([].concat(_toConsumableArray(fieldsState.current), [field]));
+  }, []);
+  var resolver;
+  var fieldsMap;
+  var fieldsetsMap;
+  var fieldChildren;
+
+  if (schema) {
+    resolver = yupResolver(schema);
+    fieldsMap = fields ? fields.reduce(function (map, field) {
+      return _extends({}, map, _defineProperty({}, field.key, field));
+    }, {}) : {};
+    fieldsetsMap = fieldsets && fieldsets.reduce(function (map, fieldset) {
+      return _extends({}, map, _defineProperty({}, fieldset.key, fieldset));
+    }, {});
+
+    if (auto) {
+      if (fieldsets) {
+        fieldChildren = fieldsets.map(function (fieldset) {
+          return /*#__PURE__*/React.createElement(Fieldset, {
+            key: fieldset.key
+          });
+        });
+      } else if (fields) {
+        fieldChildren = fields.map(function (field) {
+          return /*#__PURE__*/React.createElement(Field, {
+            key: field.key,
+            name: field.key
+          });
+        });
+      }
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(FormBase, _extends({
+    resolver: resolver,
+    fieldsetsMap: fieldsetsMap,
+    fieldsMap: fieldsMap,
+    registerField: registerField,
+    initial: initial,
+    reValidateMode: reValidateMode,
+    mode: mode,
+    shouldFocusError: shouldFocusError,
+    criteriaMode: criteriaMode,
+    onSubmit: onSubmit,
+    componentRegistry: componentRegistry,
+    ref: ref
+  }, props), fieldChildren, children);
+});
+export default FormBuilder;

package/es/FormContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+export var FormContext = /*#__PURE__*/createContext({
+  fieldsMap: {},
+  fieldsetsMap: {}
+});

package/es/Questions/Questions.js

@@ -0,0 +1,84 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
+import { getNextStep } from '@digigov/form/Questions/getNextStep';
+var isBrowser = typeof window !== 'undefined';
+/**
+ * The Question component accepts question data as props
+ * uses composable components to provide a wholesome UX
+ *
+ */
+
+export var Questions = function Questions(_ref) {
+  var name = _ref.name,
+      steps = _ref.steps,
+      _ref$initialData = _ref.initialData,
+      initialData = _ref$initialData === void 0 ? {} : _ref$initialData,
+      onChange = _ref.onChange,
+      onSubmit = _ref.onSubmit,
+      onActiveStep = _ref.onActiveStep,
+      forceStepName = _ref.forceStepName,
+      _ref$localDraft = _ref.localDraft,
+      localDraft = _ref$localDraft === void 0 ? false : _ref$localDraft,
+      children = _ref.children;
+
+  var _useState = useState({
+    name: ''
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentStep = _useState2[0],
+      setCurrentStep = _useState2[1];
+
+  useEffect(function () {
+    if (!forceStepName) {
+      setCurrentStep(steps[0]);
+    }
+  }, [forceStepName, steps]);
+  useEffect(function () {
+    if (forceStepName !== currentStep.name) {
+      var forceStep = steps.find(function (_ref2) {
+        var name = _ref2.name;
+        return name === forceStepName;
+      });
+      forceStep && setCurrentStep(forceStep);
+    }
+  }, [forceStepName]);
+  var localData = isBrowser && localDraft && window.localStorage.getItem("questions-".concat(name));
+
+  var _useState3 = useState(localData && JSON.parse(localData) || initialData),
+      _useState4 = _slicedToArray(_useState3, 2),
+      data = _useState4[0],
+      setData = _useState4[1];
+
+  var submitStep = function submitStep(stepName, stepData) {
+    data[stepName] = stepData;
+
+    if (localDraft) {
+      isBrowser && window.localStorage.setItem("questions-".concat(name), JSON.stringify(data));
+    }
+
+    if (onChange) {
+      onChange && onChange(data);
+    }
+
+    setData(data);
+    var nextStep = getNextStep(currentStep, steps, data);
+
+    if (nextStep) {
+      onActiveStep && onActiveStep(nextStep);
+      setCurrentStep(nextStep);
+    } else {
+      onSubmit(data);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(QuestionsContext.Provider, {
+    value: {
+      steps: steps,
+      currentStep: currentStep,
+      submitStep: submitStep,
+      data: data,
+      onActiveStep: onActiveStep
+    }
+  }, children);
+};

package/es/Questions/QuestionsContext.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+var defaultStep = {
+  name: ''
+};
+export var QuestionsContext = /*#__PURE__*/createContext({
+  currentStep: defaultStep,
+  steps: [],
+  submitStep: function submitStep() {
+    return null;
+  }
+});

package/es/Questions/Step/ReviewStep.js

@@ -2,8 +2,9 @@ import React, { useContext } from 'react';
 import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from '@digigov/ui/core/SummaryList';
 import Title from '@digigov/ui/typography/Title';
 import { Button } from '@digigov/ui/core';
-import { QuestionsContext } from '@digigov/form/Questions/';
-import { StepTitleBase, StepContext } from '@digigov/form/Questions/Step';
+import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
+import { StepTitleBase } from '@digigov/form/Questions/Step/StepTitle';
+import { StepContext } from '@digigov/form/Questions/Step/StepContext';
 import { useTranslation } from '@digigov/ui/app/i18n';
 export var ReviewStep = function ReviewStep() {
   var _useTranslation = useTranslation(),
@@ -48,4 +49,5 @@ export var ReviewStep = function ReviewStep() {
       return submitStep && submitStep();
     }
   }, t('button.submit')));
-};
+};
+export default ReviewStep;

package/es/Questions/Step/Step.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useContext, useState } from 'react';
+import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
+import { StepContext } from '@digigov/form/Questions/Step/StepContext';
+import { StepArrayReview } from '@digigov/form/Questions/Step/StepArrayReview';
+
+/**
+ * The Step component accepts Step data as props
+ * uses composable components to provide a wholesome UX
+ *
+ */
+export var Step = function Step(props) {
+  // or return all Questions and currentStepName
+  // or return a specific Step object
+  var _useContext = useContext(QuestionsContext),
+      currentStep = _useContext.currentStep,
+      submitStep = _useContext.submitStep,
+      data = _useContext.data;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      stepData = _useState2[0],
+      setStepData = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      reviewActive = _useState4[0],
+      setReviewActive = _useState4[1];
+
+  var handleArraySubmit = function handleArraySubmit(_name, data) {
+    setStepData([].concat(_toConsumableArray(stepData), [data]));
+    setReviewActive(true);
+  };
+
+  var handleArrayDeleteItem = function handleArrayDeleteItem(deleteIndex) {
+    var nextStepData = stepData.filter(function (_item, stepIndex) {
+      return stepIndex !== deleteIndex;
+    });
+    setStepData(nextStepData);
+
+    if (nextStepData.length === 0) {
+      setReviewActive(false);
+    }
+  };
+
+  var handleArrayReviewStep = function handleArrayReviewStep(data) {
+    if (data.addMore === 'yes') {
+      setReviewActive(false);
+    } else if (data.addMore === 'no') {
+      submitStep(currentStep.name, stepData);
+    }
+  };
+
+  if (!currentStep || props.name !== currentStep.name) return null; // then provide the currentStep object
+
+  return /*#__PURE__*/React.createElement(StepContext.Provider, {
+    value: _extends({}, currentStep, {
+      submitStep: currentStep.type === 'array' ? handleArraySubmit : submitStep,
+      initial: data[props.name]
+    })
+  }, reviewActive ? /*#__PURE__*/React.createElement(StepArrayReview, {
+    array: stepData,
+    handleSubmit: handleArrayReviewStep,
+    handleDelete: handleArrayDeleteItem
+  }) : props.children);
+};
+export default Step;