cozy-ui-plus 1.1.0

package/dist/AppSections/search.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeSearchFromOption = exports.makeOptionMatcherFromSearch = exports.makeMatcherFromSearch = void 0;
+
+var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
+
+var _matches = _interopRequireDefault(require("lodash/matches"));
+
+var _overEvery = _interopRequireDefault(require("lodash/overEvery"));
+
+var _constants = require("./constants");
+
+var getDoctypesList = function getDoctypesList(permsObj) {
+  var doctypes = [];
+
+  for (var p in permsObj) {
+    if (permsObj[p].type) doctypes.push(permsObj[p].type);
+  }
+
+  return doctypes;
+};
+
+var typeMatcher = function typeMatcher(type) {
+  return function (app) {
+    return app.type === type;
+  };
+};
+
+var categoryMatcher = function categoryMatcher(category) {
+  return function (app) {
+    if (!Array.isArray(app.categories)) return false;
+    return app.categories.includes(category);
+  };
+};
+
+var tagMatcher = function tagMatcher(tag) {
+  return function (app) {
+    if (!Array.isArray(app.tags)) return false;
+    return app.tags.includes(tag);
+  };
+};
+
+var doctypeMatcher = function doctypeMatcher(doctype) {
+  return function (app) {
+    if (!app.permissions) return false;
+    return getDoctypesList(app.permissions).includes(doctype);
+  };
+};
+
+var pendingUpdateMatcher = function pendingUpdateMatcher() {
+  return function (app) {
+    return !!app.availableVersion;
+  };
+};
+
+var showMaintenanceMatcher = function showMaintenanceMatcher(isShowMaintenance) {
+  return function (app) {
+    if (isShowMaintenance) return true;
+    return app.maintenance === undefined;
+  };
+};
+
+var qualificationLabelsMatcher = function qualificationLabelsMatcher(label) {
+  return function (app) {
+    if (!Array.isArray(app.qualification_labels)) return false;
+    return app.qualification_labels.includes(label);
+  };
+};
+
+var searchAttrToMatcher = {
+  type: typeMatcher,
+  category: categoryMatcher,
+  tag: tagMatcher,
+  doctype: doctypeMatcher,
+  pendingUpdate: pendingUpdateMatcher,
+  showMaintenance: showMaintenanceMatcher,
+  qualificationLabels: qualificationLabelsMatcher
+};
+/**
+ * Returns a predicate function to match an app based on
+ * a search specification.
+ *
+ * @param  {Search} search - What to search, ex: { type: 'webapp', category: 'banking'}
+ * @return {Function<App>}
+ */
+
+var makeMatcherFromSearch = function makeMatcherFromSearch() {
+  var search = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  // Create all predicates from the search object
+  var predicates = Object.values((0, _mapValues.default)(search, function (value, name) {
+    var _searchAttrToMatcher$;
+
+    return (_searchAttrToMatcher$ = searchAttrToMatcher[name]) === null || _searchAttrToMatcher$ === void 0 ? void 0 : _searchAttrToMatcher$.call(searchAttrToMatcher, value);
+  })); // Return a function returning true if all predicates pass
+
+  return (0, _overEvery.default)(predicates);
+};
+/**
+ * Returns a predicate to find the corresponding category option for
+ * a search
+ *
+ * @param  {Search}
+ * @return {Function<CategoryOption>}
+ */
+
+
+exports.makeMatcherFromSearch = makeMatcherFromSearch;
+
+var makeOptionMatcherFromSearch = function makeOptionMatcherFromSearch() {
+  var search = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var typeParam = search.type;
+  var categoryParam = search.category;
+
+  if (typeParam === _constants.APP_TYPE.KONNECTOR && !categoryParam) {
+    return (0, _matches.default)({
+      value: 'konnectors'
+    });
+  } else if (!typeParam && !categoryParam) {
+    return (0, _matches.default)({
+      value: 'all'
+    });
+  }
+
+  return (0, _matches.default)({
+    value: categoryParam,
+    type: typeParam
+  });
+};
+/**
+ * Returns a Search from a category option
+ *
+ * @param  {CategoryOption}
+ * @return {Search}
+ */
+
+
+exports.makeOptionMatcherFromSearch = makeOptionMatcherFromSearch;
+
+var makeSearchFromOption = function makeSearchFromOption(option) {
+  if (option.value === 'all') {
+    return {};
+  }
+
+  var search = {};
+
+  if (option.value === 'konnectors') {
+    search.type = _constants.APP_TYPE.KONNECTOR;
+  } else {
+    search.type = option.type;
+    search.category = option.value;
+  }
+
+  return search;
+};
+
+exports.makeSearchFromOption = makeSearchFromOption;

package/dist/AppTile/helpers.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isUnderMaintenance = exports.isInstalledAndNothingToReport = exports.hasPendingUpdate = exports.getCurrentStatusLabel = exports.APP_STATUS = void 0;
+var APP_STATUS = {
+  installed: 'installed',
+  maintenance: 'maintenance',
+  update: 'update'
+};
+exports.APP_STATUS = APP_STATUS;
+
+var getCurrentStatusLabel = function getCurrentStatusLabel(app) {
+  if (hasPendingUpdate(app)) return APP_STATUS.update;
+  if (isUnderMaintenance(app)) return APP_STATUS.maintenance;
+  if (isInstalledAndNothingToReport(app)) return APP_STATUS.installed;
+  return null;
+};
+
+exports.getCurrentStatusLabel = getCurrentStatusLabel;
+
+var hasPendingUpdate = function hasPendingUpdate(app) {
+  return !!app.availableVersion;
+};
+
+exports.hasPendingUpdate = hasPendingUpdate;
+
+var isUnderMaintenance = function isUnderMaintenance(app) {
+  return !hasPendingUpdate(app) && app.maintenance;
+};
+/* installed here means no actions needed */
+
+
+exports.isUnderMaintenance = isUnderMaintenance;
+
+var isInstalledAndNothingToReport = function isInstalledAndNothingToReport(app) {
+  return !hasPendingUpdate(app) && !isUnderMaintenance(app) && app.installed;
+};
+
+exports.isInstalledAndNothingToReport = isInstalledAndNothingToReport;

package/dist/AppTile/index.js

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AppTile = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _WrenchCircle = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/WrenchCircle"));
+
+var _Tile = _interopRequireWildcard(require("cozy-ui/transpiled/react/Tile"));
+
+var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+
+var _helpers = require("./helpers");
+
+var _AppIcon = _interopRequireDefault(require("../AppIcon"));
+
+var _helpers2 = require("../AppSections/helpers.js");
+
+var _ShortcutTile = require("../ShortcutTile");
+
+var _proptypes = require("../proptypes");
+
+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; }
+
+var en = {
+  app_item: {
+    by: "By",
+    installed: "Installed",
+    maintenance: "In maintenance",
+    update: "Update available",
+    favorite: "Added to home page"
+  }
+};
+var fr = {
+  app_item: {
+    by: "Par",
+    installed: "Install\xE9e",
+    maintenance: "En maintenance",
+    update: "Mise \xE0 jour dispo.",
+    favorite: "Ajout\xE9 sur l'accueil"
+  }
+};
+var ru = {
+  app_item: {
+    by: "\u041E\u0442",
+    installed: "\u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u043E",
+    maintenance: "\u041D\u0430 \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u0438",
+    update: "\u041E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u0435 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u043E",
+    favorite: "\u0414\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u043E \u043D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443"
+  }
+};
+var vi = {
+  app_item: {
+    by: "B\u1EDFi",
+    installed: "\u0110\xE3 c\xE0i \u0111\u1EB7t",
+    maintenance: "\u0110ang b\u1EA3o tr\xEC",
+    update: "C\xF3 c\u1EADp nh\u1EADt m\u1EDBi",
+    favorite: "\u0110\xE3 th\xEAm v\xE0o trang ch\u1EE7"
+  }
+};
+var styles = {
+  "AppTile-icon": "styles__AppTile-icon___33KQ3",
+  "AppTile-icon--default": "styles__AppTile-icon--default___2wl2V",
+  "AppTile-icon-maintenance": "styles__AppTile-icon-maintenance___1aQmb",
+  "AppTile-container-maintenance": "styles__AppTile-container-maintenance___KL5F7"
+};
+var locales = {
+  en: en,
+  fr: fr,
+  ru: ru,
+  vi: vi
+};
+var dataset;
+
+var getDataset = function getDataset() {
+  if (dataset) return dataset;
+  var root = document.querySelector('[role=application]');
+  dataset = root && root.dataset;
+  return dataset;
+};
+
+var getAppIconProps = function getAppIconProps() {
+  return {
+    domain: getDataset() && getDataset().cozyDomain,
+    secure: window.location.protocol === 'https:'
+  };
+};
+
+var useI18n = (0, _I18n.createUseI18n)(locales);
+
+var AppTile = function AppTile(_ref) {
+  var app = _ref.app,
+      nameProp = _ref.name,
+      namePrefix = _ref.namePrefix,
+      onClick = _ref.onClick,
+      showDeveloper = _ref.showDeveloper,
+      showStatus = _ref.showStatus,
+      IconComponentProp = _ref.IconComponent,
+      displaySpecificMaintenanceStyle = _ref.displaySpecificMaintenanceStyle;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _app$developer = app.developer,
+      developer = _app$developer === void 0 ? {} : _app$developer;
+  var name = nameProp || app.name;
+  var statusLabel = (0, _helpers.getCurrentStatusLabel)(app);
+  var isStatusArray = Array.isArray(showStatus);
+  var statusToDisplay = (0, _helpers2.isShortcutFile)(app) && statusLabel === _helpers.APP_STATUS.installed ? 'favorite' : isStatusArray ? showStatus.indexOf(statusLabel) > -1 && statusLabel : showStatus && statusLabel;
+  var IconComponent = IconComponentProp || _AppIcon.default;
+  var isInMaintenanceWithSpecificDisplay = displaySpecificMaintenanceStyle && statusLabel === _helpers.APP_STATUS.maintenance;
+  return /*#__PURE__*/_react.default.createElement(_Tile.default, {
+    tag: "button",
+    type: "button",
+    onClick: onClick,
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, styles['AppTile-container-maintenance'], isInMaintenanceWithSpecificDisplay)),
+    isSecondary: statusLabel === _helpers.APP_STATUS.installed
+  }, /*#__PURE__*/_react.default.createElement(_Tile.TileIcon, null, (0, _helpers2.isShortcutFile)(app) ? /*#__PURE__*/_react.default.createElement(_ShortcutTile.ShortcutTile, {
+    file: app
+  }) : /*#__PURE__*/_react.default.createElement(IconComponent, (0, _extends2.default)({
+    app: app,
+    className: styles['AppTile-icon']
+  }, getAppIconProps())), isInMaintenanceWithSpecificDisplay && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    "data-testid": "icon-maintenance",
+    icon: _WrenchCircle.default,
+    color: "var(--coolGrey)",
+    className: styles['AppTile-icon-maintenance']
+  })), /*#__PURE__*/_react.default.createElement(_Tile.TileDescription, {
+    className: styles["AppTile-description"]
+  }, /*#__PURE__*/_react.default.createElement(_Tile.TileTitle, {
+    isMultiline: !statusLabel
+  }, namePrefix ? "".concat(namePrefix, " ").concat(name) : name), developer.name && showDeveloper && /*#__PURE__*/_react.default.createElement(_Tile.TileSubtitle, null, "".concat(t('app_item.by'), " ").concat(developer.name)), statusToDisplay && /*#__PURE__*/_react.default.createElement(_Tile.TileFooter, {
+    isAccent: statusLabel === _helpers.APP_STATUS.update
+  }, t("app_item.".concat(statusToDisplay)))));
+};
+
+exports.AppTile = AppTile;
+AppTile.propTypes = {
+  app: _proptypes.AppDoctype,
+  name: _propTypes.default.string,
+  namePrefix: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  IconComponent: _propTypes.default.element,
+  showDeveloper: _propTypes.default.bool,
+  showStatus: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.array]),
+  displaySpecificMaintenanceStyle: _propTypes.default.bool
+};
+AppTile.defaultProps = {
+  showDeveloper: true,
+  showStatus: true,
+  displaySpecificMaintenanceStyle: false
+};
+var _default = AppTile;
+exports.default = _default;

package/dist/CipherIcon/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _Keychain = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Keychain"));
+
+var _AppIcon = _interopRequireDefault(require("../AppIcon"));
+
+var _proptypes = require("../proptypes");
+
+var _excluded = ["className"];
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var CipherIcon = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(CipherIcon, _React$PureComponent);
+
+  var _super = _createSuper(CipherIcon);
+
+  function CipherIcon(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, CipherIcon);
+    _this = _super.call(this, props);
+    _this.fetchIcon = _this.fetchIcon.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+
+  (0, _createClass2.default)(CipherIcon, [{
+    key: "fetchIcon",
+    value: function fetchIcon() {
+      var _this$props = this.props,
+          client = _this$props.client,
+          konnector = _this$props.konnector;
+      return client.getStackClient().getIconURL({
+        type: 'konnector',
+        slug: konnector.slug || konnector,
+        appData: konnector
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          className = _this$props2.className,
+          rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
+      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+        className: (0, _classnames.default)('u-dib u-pos-relative', className)
+      }, rest), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        icon: _Keychain.default,
+        size: 32
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "u-pos-absolute u-right-0 u-bottom-0"
+      }, /*#__PURE__*/_react.default.createElement(_AppIcon.default, {
+        fetchIcon: this.fetchIcon,
+        className: "u-w-1 u-h-1"
+      })));
+    }
+  }]);
+  return CipherIcon;
+}(_react.default.PureComponent);
+
+CipherIcon.propTypes = {
+  konnector: _propTypes.default.oneOfType([_proptypes.AppDoctype, _propTypes.default.string]).isRequired
+};
+
+var _default = (0, _cozyClient.withClient)(CipherIcon);
+
+exports.default = _default;

package/dist/CollectionField/index.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _CrossSmall = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/CrossSmall"));
+
+var _Plus = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Plus"));
+
+var _Label = _interopRequireDefault(require("cozy-ui/transpiled/react/Label"));
+
+var _Stack = _interopRequireDefault(require("cozy-ui/transpiled/react/Stack"));
+
+var _Button = _interopRequireDefault(require("cozy-ui/transpiled/react/deprecated/Button"));
+
+var _Field = require("../Field");
+
+var _excluded = ["values", "component", "placeholder", "label", "addButtonLabel", "removeButtonLabel", "onChange", "onAddField"];
+
+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; }
+
+var styles = {
+  "CollectionField__addBtn": "styles__CollectionField__addBtn___1pQLs",
+  "CollectionField__addBtnIcon": "styles__CollectionField__addBtnIcon___rWdyr",
+  "CollectionField__row": "styles__CollectionField__row___3JFOW"
+};
+
+/**
+ * Handles a collection of form fields.
+ * This is a controlled component. You have to give it some values and handle
+ * changes via the onChange prop. See examples in readme.
+ *
+ * When a field is added, the underlying component receives `null` as
+ * its value.
+ * When a field is being added, the "Add" button is not shown.
+ */
+var CollectionField = function CollectionField(props) {
+  var values = props.values,
+      Component = props.component,
+      placeholder = props.placeholder,
+      label = props.label,
+      addButtonLabel = props.addButtonLabel,
+      removeButtonLabel = props.removeButtonLabel,
+      onChange = props.onChange,
+      onAddField = props.onAddField,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded); // This ref is used to support the onAddField props.
+  // It contains the index of the field that has been
+  // added and is used when handling refs to pass the
+  // instance of the component that was added to the
+  // onAddField prop of the parent.
+
+  var justAddedFieldIndex = (0, _react.useRef)();
+
+  var handleChange = function handleChange(index) {
+    return function (contact) {
+      var data = (0, _toConsumableArray2.default)(values);
+      data[index] = contact;
+      onChange(data);
+    };
+  };
+
+  var handleAdd = function handleAdd() {
+    var data = [].concat((0, _toConsumableArray2.default)(values), [null]);
+    onChange(data);
+    justAddedFieldIndex.current = data.length - 1;
+  };
+
+  var handleRemove = function handleRemove(index) {
+    var data = [].concat((0, _toConsumableArray2.default)(values.slice(0, index)), (0, _toConsumableArray2.default)(values.slice(index + 1)));
+    onChange(data);
+  };
+
+  var handleFieldRef = function handleFieldRef(index, componentInstance) {
+    if (!onAddField) {
+      return;
+    }
+
+    if (index === justAddedFieldIndex.current && componentInstance) {
+      justAddedFieldIndex.current = null;
+      onAddField(componentInstance);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_Field.FieldContainer, rest, /*#__PURE__*/_react.default.createElement(_Label.default, null, label), /*#__PURE__*/_react.default.createElement(_Stack.default, null, values.length > 0 ? /*#__PURE__*/_react.default.createElement(_Stack.default, {
+    spacing: "s"
+  }, values.map(function (value, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: styles.CollectionField__row
+    }, /*#__PURE__*/_react.default.createElement(Component, {
+      ref: function ref(value) {
+        return handleFieldRef(index, value);
+      },
+      value: value,
+      onChange: handleChange(index),
+      placeholder: placeholder
+    }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      type: "button",
+      theme: "secondary",
+      label: removeButtonLabel,
+      iconOnly: true,
+      round: true,
+      icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        icon: _CrossSmall.default,
+        color: "var(--slateGrey)"
+      }),
+      onClick: function onClick() {
+        return handleRemove(index);
+      }
+    }));
+  })) : null, values[values.length - 1] !== null ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    label: addButtonLabel,
+    type: "button",
+    theme: "text",
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      icon: _Plus.default,
+      className: styles.CollectionField__addBtnIcon
+    }),
+    onClick: handleAdd,
+    className: styles.CollectionField__addBtn
+  }) : null));
+};
+
+CollectionField.propTypes = {
+  /** @type {Array} Individual values will be passed through `value` to the underlying Component */
+  values: _propTypes.default.array.isRequired,
+
+  /** @type {ElementType} Component used to render a field */
+  component: _propTypes.default.elementType.isRequired,
+
+  /** @type {String} Label of the field */
+  label: _propTypes.default.node.isRequired,
+
+  /** @type {Function} Callback called when a value is added / updated / removed */
+  onChange: _propTypes.default.func.isRequired,
+
+  /** @type {String} Label of the "Add" button */
+  addButtonLabel: _propTypes.default.node.isRequired,
+
+  /** @type {String} Label of the "Remove" button */
+  removeButtonLabel: _propTypes.default.node.isRequired,
+
+  /** @type {String} Placeholder passed to the Component */
+  placeholder: _propTypes.default.string,
+
+  /** @type {String} Callback called with the instance of the Component when a field is being added */
+  onAddField: _propTypes.default.func
+};
+var _default = CollectionField;
+exports.default = _default;