@ukhomeoffice/cop-react-form-renderer 2.8.4 → 2.10.0

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _hooks = require("../../hooks");
+
 var _utils = _interopRequireDefault(require("../../utils"));
 
 var _PageActions = _interopRequireDefault(require("../PageActions"));
@@ -74,13 +76,11 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
 
   var _useState3 = (0, _react.useState)([]),
       _useState4 = _slicedToArray(_useState3, 2),
-      errors = _useState4[0],
-      setErrors = _useState4[1];
+      listOfGroups = _useState4[0],
+      setListOfGroups = _useState4[1];
 
-  var _useState5 = (0, _react.useState)([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      listOfGroups = _useState6[0],
-      setListOfGroups = _useState6[1];
+  var _useValidation = (0, _hooks.useValidation)(),
+      errors = _useValidation.errors;
 
   (0, _react.useEffect)(function () {
     var getRows = function getRows(page, pageIndex) {
@@ -112,10 +112,6 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
     return index === pages.length - 1;
   };
 
-  var onError = function onError(errors) {
-    setErrors(errors);
-  };
-
   (0, _react.useEffect)(function () {
     var groupsList = function groupsList() {
       var groupIds = [];
@@ -160,7 +156,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       key: pageIndex
     }, !hide_page_titles && page.title && !isGroup(page.id) && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, page.title), isGroup(page.id) && /*#__PURE__*/_react.default.createElement("div", {
       className: "group-title"
-    }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, currentGroup.title ? currentGroup.title : page.title)), /*#__PURE__*/_react.default.createElement(_SummaryList.default, {
+    }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, currentGroup.title || page.title)), /*#__PURE__*/_react.default.createElement(_SummaryList.default, {
       className: className,
       rows: page.rows,
       classModifiers: summaryListClassModifiers,
@@ -170,7 +166,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
   }), !hide_actions && /*#__PURE__*/_react.default.createElement(_PageActions.default, {
     actions: actions,
     onAction: function onAction(action) {
-      return _onAction(action, onError);
+      return _onAction(action);
     }
   }));
 };

package/dist/components/CheckYourAnswers/CheckYourAnswers.test.js

@@ -28,6 +28,8 @@ var _group = _interopRequireDefault(require("../../json/group.json"));
 
 var _groupOfRow = _interopRequireDefault(require("../../json/groupOfRow.json"));
 
+var _setupTests = require("../../setupTests");
+
 var _utils = _interopRequireDefault(require("../../utils"));
 
 var _CheckYourAnswers = _interopRequireWildcard(require("./CheckYourAnswers"));
@@ -135,7 +137,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context.prev = _context.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: PAGES,
                           onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION
@@ -175,7 +177,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context3.prev = _context3.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           title: TITLE,
                           pages: PAGES,
                           onRowAction: ON_ROW_ACTION,
@@ -216,7 +218,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context5.prev = _context5.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: PAGES,
                           onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION
@@ -260,7 +262,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context7.prev = _context7.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: PAGES,
                           onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION
@@ -304,7 +306,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context9.prev = _context9.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: PAGES,
                           onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION,
@@ -350,7 +352,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context11.prev = _context11.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: PAGES,
                           onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION,
@@ -396,7 +398,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context13.prev = _context13.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: GROUP_PAGES,
                           onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION,
@@ -416,7 +418,7 @@ describe('components', function () {
               groupedComponent = cya.childNodes[10];
               keyGroup = groupedComponent.childNodes[0].childNodes[0].childNodes[0];
               expect(keyGroup.tagName).toEqual('DT');
-              expect(keyGroup.textContent).toEqual('Address details (optional)');
+              expect(keyGroup.textContent).toEqual('Address details');
               valueGroup = groupedComponent.childNodes[0].childNodes[0].childNodes[1];
               expect(valueGroup.childNodes.length).toEqual(4);
               expect(valueGroup.tagName).toEqual('DD');
@@ -450,7 +452,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context15.prev = _context15.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: GROUP_PAGES,
                           onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION,

package/dist/components/FormComponent/Collection.js

@@ -0,0 +1,244 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_CLASS = void 0;
+
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _models = require("../../models");
+
+var _utils = _interopRequireDefault(require("../../utils"));
+
+var _Container = _interopRequireDefault(require("./Container"));
+
+require("./Collection.scss");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var DEFAULT_CLASS = 'hods-form-collection';
+exports.DEFAULT_CLASS = DEFAULT_CLASS;
+
+var Collection = function Collection(_ref) {
+  var config = _ref.config,
+      _value = _ref.value,
+      formData = _ref.formData,
+      onChange = _ref.onChange,
+      wrap = _ref.wrap;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setValue(_value || []);
+  }, [_value, setValue]);
+
+  var reportChange = function reportChange(newValue) {
+    setValue(newValue);
+
+    if (typeof onChange === 'function') {
+      onChange({
+        target: {
+          name: config.fieldId,
+          value: newValue
+        }
+      });
+    }
+  };
+
+  var onCollectionChange = function onCollectionChange(_ref2) {
+    var target = _ref2.target;
+
+    if (typeof onChange === 'function') {
+      if (target.name === _utils.default.Meta.name) {
+        onChange({
+          target: target
+        });
+      } else {
+        var itemIndex = value.findIndex(function (item) {
+          return item.id === target.name;
+        });
+        reportChange([].concat(_toConsumableArray(value.slice(0, itemIndex)), [target.value], _toConsumableArray(value.slice(itemIndex + 1))));
+      }
+    }
+  };
+
+  var onAddAnother = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              reportChange([].concat(_toConsumableArray(value), [{
+                id: Date.now().toString()
+              }]));
+
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onAddAnother() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var onRemoveItem = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(item) {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              reportChange(value.filter(function (i) {
+                return i.id !== item.id;
+              }));
+
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function onRemoveItem(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var labels = _objectSpread(_objectSpread({}, _models.CollectionLabels), config.labels);
+
+  var classes = _utils.default.classBuilder(DEFAULT_CLASS, [], config.className);
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes(),
+    id: config.id
+  }, config.label && /*#__PURE__*/_react.default.createElement(_copReactComponents.Label, {
+    id: config.id,
+    required: config.required,
+    className: classes('title')
+  }, config.label), value && value.map(function (item, index) {
+    var full_path = "".concat(config.full_path || config.fieldId, "[").concat(index, "]");
+    var labelCount = (config.countOffset || 0) + index + 1;
+
+    var itemTitle = _utils.default.interpolateString(labels.item, _objectSpread(_objectSpread({}, item), {}, {
+      index: labelCount
+    }));
+
+    var removeLabel = _utils.default.interpolateString(labels.remove, _objectSpread(_objectSpread({}, item), {}, {
+      index: labelCount
+    }));
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(classes('item')),
+      key: item.id
+    }, /*#__PURE__*/_react.default.createElement(_copReactComponents.Label, {
+      id: item.id,
+      required: true,
+      className: classes('item-title')
+    }, itemTitle, !config.disableAddAndRemove && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+      onClick: function onClick() {
+        return onRemoveItem(item);
+      },
+      classModifiers: "secondary"
+    }, removeLabel)), /*#__PURE__*/_react.default.createElement(_Container.default, {
+      container: {
+        id: item.id,
+        fieldId: item.id,
+        type: 'container',
+        required: config.required,
+        full_path: full_path,
+        components: config.item.map(function (component) {
+          return _objectSpread(_objectSpread({}, component), {}, {
+            label: _utils.default.interpolateString(component.label, _objectSpread(_objectSpread({}, item), {}, {
+              index: labelCount
+            })),
+            full_path: "".concat(full_path, ".").concat(component.fieldId)
+          });
+        })
+      },
+      value: item,
+      formData: formData,
+      onChange: onCollectionChange,
+      wrap: wrap
+    }));
+  }), !config.disableAddAndRemove && /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    onClick: onAddAnother,
+    classModifiers: "secondary"
+  }, labels.add)));
+};
+
+Collection.propTypes = {
+  config: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    fieldId: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string,
+    labels: _propTypes.default.shape({
+      item: _propTypes.default.string,
+      add: _propTypes.default.string,
+      remove: _propTypes.default.string
+    }),
+    disableAddAndRemove: _propTypes.default.bool,
+    countOffset: _propTypes.default.number,
+    className: _propTypes.default.string,
+    item: _propTypes.default.arrayOf(_propTypes.default.shape({
+      fieldId: _propTypes.default.string,
+      type: _propTypes.default.string
+    }))
+  }).isRequired,
+  value: _propTypes.default.arrayOf(_propTypes.default.shape()),
+  formData: _propTypes.default.any,
+  wrap: _propTypes.default.bool,
+  onChange: _propTypes.default.func
+};
+Collection.defaultProps = {
+  value: []
+};
+var _default = Collection;
+exports.default = _default;

package/dist/components/FormComponent/Collection.scss

@@ -0,0 +1,23 @@
+.hods-form-collection {
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+  }
+  &__item {
+    margin-top: 0;
+    position: relative;
+  }
+  &__item-title {
+    display: block;
+    font-weight: 700;
+    font-size: 1.25rem;
+    line-height: 1.1111111;
+    margin-bottom: 0.75rem;
+    .hods-button {
+      margin-bottom: 0.25rem;
+      margin-top: -0.3125rem;
+      float: right;
+    }
+  }
+}

package/dist/components/FormComponent/Container.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_CLASS = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _models = require("../../models");
+
+var _utils = _interopRequireDefault(require("../../utils"));
+
+var _FormComponent = _interopRequireDefault(require("./FormComponent"));
+
+var _excluded = ["container", "value", "formData", "onChange", "wrap"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var DEFAULT_CLASS = 'hods-form-container';
+exports.DEFAULT_CLASS = DEFAULT_CLASS;
+
+var Container = function Container(_ref) {
+  var container = _ref.container,
+      value = _ref.value,
+      formData = _ref.formData,
+      onChange = _ref.onChange,
+      wrap = _ref.wrap,
+      attrs = _objectWithoutProperties(_ref, _excluded);
+
+  var onComponentChange = function onComponentChange(_ref2) {
+    var target = _ref2.target;
+
+    if (typeof onChange === 'function') {
+      if (target.name === _utils.default.Meta.name) {
+        onChange({
+          target: target
+        });
+      } else {
+        var val = _objectSpread(_objectSpread({}, value), {}, _defineProperty({}, target.name, target.value));
+
+        onChange({
+          target: {
+            name: container.fieldId,
+            value: val
+          }
+        });
+      }
+    }
+  };
+
+  var shouldShow = function shouldShow(options) {
+    if (options.type === _models.ComponentTypes.CONTAINER) {
+      return _utils.default.Container.show(options, formData);
+    }
+
+    return _utils.default.Component.show(options, formData);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, attrs, {
+    className: DEFAULT_CLASS,
+    id: container.id
+  }), container.components && container.components.filter(shouldShow).map(function (component, index) {
+    var defaultValue = component.type === _models.ComponentTypes.FILE ? {} : '';
+    var val = value ? value[component.fieldId] : defaultValue;
+    return /*#__PURE__*/_react.default.createElement(_FormComponent.default, _extends({
+      key: index
+    }, attrs, {
+      component: component,
+      formData: formData,
+      value: val || defaultValue,
+      wrap: wrap,
+      onChange: onComponentChange
+    }));
+  }));
+};
+
+Container.propTypes = {
+  container: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    fieldId: _propTypes.default.string.isRequired,
+    components: _propTypes.default.arrayOf(_propTypes.default.shape({
+      fieldId: _propTypes.default.string,
+      type: _propTypes.default.string
+    }))
+  }).isRequired,
+  value: _propTypes.default.any,
+  formData: _propTypes.default.any,
+  wrap: _propTypes.default.bool,
+  onChange: _propTypes.default.func
+};
+Container.defaultProps = {
+  wrap: true
+};
+var _default = Container;
+exports.default = _default;