@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/esm/ui/ConfigPanel/Fields/SelectItem.js

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import Avatar from '@atlaskit/avatar';
+var itemWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  small: {
+    margin: 0,
+    display: 'block',
+    color: 'currentColor'
+  }
+});
+var iconWrapperStyles = css({
+  lineHeight: 1
+});
+var iconWrapperMenuStyles = css({
+  alignSelf: 'flex-start',
+  marginTop: '3px'
+});
+var getIconSize = function getIconSize(context, description) {
+  if (context === 'value' || !description) {
+    return 'xsmall';
+  }
+  return 'small';
+};
+export var formatOptionLabel = function formatOptionLabel(_ref, _ref2) {
+  var label = _ref.label,
+    icon = _ref.icon,
+    description = _ref.description;
+  var context = _ref2.context;
+  return jsx("div", {
+    css: itemWrapperStyles
+  }, jsx("span", {
+    css: [iconWrapperStyles, context === 'menu' && iconWrapperMenuStyles]
+  }, typeof icon === 'string' ? jsx(Avatar, {
+    src: icon,
+    size: getIconSize(context, description),
+    appearance: "square"
+  }) : icon), jsx("div", {
+    style: {
+      paddingLeft: icon ? "var(--ds-space-100, 8px)" : 0
+    }
+  }, jsx("p", null, label, description && context !== 'value' && jsx("small", null, description))));
+};

package/dist/esm/ui/ConfigPanel/Fields/String.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onChange"];
+import React, { Fragment } from 'react';
+import { Field } from '@atlaskit/form';
+import TextArea from '@atlaskit/textarea';
+import TextField from '@atlaskit/textfield';
+import FieldMessages from '../FieldMessages';
+import { validate as _validate } from '../utils';
+export default function String(_ref) {
+  var name = _ref.name,
+    field = _ref.field,
+    autoFocus = _ref.autoFocus,
+    onFieldChange = _ref.onFieldChange,
+    placeholder = _ref.placeholder;
+  var label = field.label,
+    description = field.description,
+    defaultValue = field.defaultValue,
+    isRequired = field.isRequired;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    label: label,
+    defaultValue: defaultValue || '',
+    isRequired: isRequired,
+    validate: function validate(value) {
+      return _validate(field, value || '');
+    },
+    testId: "config-panel-string-".concat(name)
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps,
+      error = _ref2.error,
+      meta = _ref2.meta;
+    if (field.style === 'multiline') {
+      var _onChange = fieldProps.onChange,
+        restFieldProps = _objectWithoutProperties(fieldProps, _excluded);
+      var options = field.options;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TextArea, _extends({}, restFieldProps, options, {
+        onChange: function onChange(e) {
+          return _onChange(e.currentTarget.value);
+        },
+        onBlur: function onBlur() {
+          fieldProps.onBlur();
+          onFieldChange(name, meta.dirty);
+        },
+        placeholder: placeholder,
+        "data-testid": "config-panel-textarea-".concat(name)
+      })), /*#__PURE__*/React.createElement(FieldMessages, {
+        error: error,
+        description: description
+      }));
+    }
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+      type: "text",
+      autoFocus: autoFocus,
+      onBlur: function onBlur() {
+        fieldProps.onBlur();
+        onFieldChange(name, meta.dirty);
+      },
+      placeholder: placeholder
+    })), /*#__PURE__*/React.createElement(FieldMessages, {
+      error: error,
+      description: description
+    }));
+  });
+}

package/dist/esm/ui/ConfigPanel/Fields/TabGroup.js

@@ -0,0 +1,62 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import React, { useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
+var tabWrapperStyles = css({
+  // increase specificity to make sure the tab style is overridden
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  "&&& [role='tabpanel'][tabindex]": {
+    padding: 0
+  },
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  "&&& [role='tablist']::before": {
+    left: 0,
+    right: 0
+  }
+});
+var panelWrapperStyles = css({
+  flexGrow: 1,
+  maxWidth: '100%'
+});
+var TabGroupImpl = function TabGroupImpl(props) {
+  var field = props.field,
+    renderPanel = props.renderPanel;
+  var fields = field.fields;
+  var _useState = useState(function () {
+      var activeTabName = field.defaultTab || fields[0].name;
+      var index = fields.findIndex(function (f) {
+        return f.name === activeTabName;
+      });
+      return Math.max(index, 0);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var onChange = React.useCallback(function (index) {
+    setActiveTab(index);
+  }, [setActiveTab]);
+  return jsx("div", {
+    css: tabWrapperStyles
+  }, jsx(Tabs, {
+    id: "configPanelTabs-".concat(field.name),
+    onChange: onChange,
+    selected: activeTab
+  }, jsx(TabList, null, fields.map(function (_ref) {
+    var name = _ref.name,
+      label = _ref.label;
+    return jsx(Tab, {
+      key: "tab-".concat(name)
+    }, label);
+  })), fields.map(function (field) {
+    return jsx(TabPanel, {
+      key: "panel-".concat(field.name)
+    }, jsx("div", {
+      css: panelWrapperStyles
+    }, renderPanel(field)));
+  })));
+};
+TabGroupImpl.displayName = 'TabGroup';
+var TabGroup = injectIntl(TabGroupImpl);
+export default TabGroup;

package/dist/esm/ui/ConfigPanel/Fields/UnhandledType.js

@@ -0,0 +1,10 @@
+import React, { useEffect } from 'react';
+import { HelperMessage } from '@atlaskit/form';
+export default function (_ref) {
+  var errorMessage = _ref.errorMessage;
+  useEffect(function () {
+    // eslint-disable-next-line no-console
+    console.error(errorMessage);
+  }, [errorMessage]);
+  return /*#__PURE__*/React.createElement(HelperMessage, null, errorMessage);
+}

package/dist/esm/ui/ConfigPanel/Fields/UserSelect.js

@@ -0,0 +1,258 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["value"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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; }
+import React, { useEffect, useState } from 'react';
+import { getUserFieldContextProvider } from '@atlaskit/editor-common/extensions';
+import { Field } from '@atlaskit/form';
+import SmartUserPicker, { hydrateDefaultValues } from '@atlaskit/smart-user-picker';
+import FieldMessages from '../FieldMessages';
+import { validate as _validate } from '../utils';
+import UnhandledType from './UnhandledType';
+function makeCompat(defaultValue) {
+  if (!defaultValue) {
+    return null;
+  }
+  if (Array.isArray(defaultValue)) {
+    return defaultValue.map(function (id) {
+      return {
+        type: 'user',
+        id: id
+      };
+    });
+  }
+  return {
+    type: 'user',
+    id: defaultValue
+  };
+}
+function makeSafe(value) {
+  if (!value) {
+    return null;
+  }
+  if (Array.isArray(value)) {
+    var ids = [];
+    var _iterator = _createForOfIteratorHelper(value),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var id = _step.value.id;
+        ids.push(id);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return ids;
+  }
+  return value.id;
+}
+var isOptionData = function isOptionData(value) {
+  if (!value) {
+    return false;
+  }
+  return (Array.isArray(value) ? value : [value]).every(function (item) {
+    return 'name' in item;
+  });
+};
+function SafeSmartUserPicker(_ref) {
+  var context = _ref.context,
+    field = _ref.field,
+    formFieldProps = _ref.formFieldProps,
+    autoFocus = _ref.autoFocus,
+    onBlur = _ref.onBlur,
+    onChange = _ref.onChange;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    unsafeValue = _useState2[0],
+    setUnsafeValue = _useState2[1];
+  var siteId = context.siteId,
+    principalId = context.principalId,
+    fieldId = context.fieldId,
+    productKey = context.productKey,
+    containerId = context.containerId,
+    objectId = context.objectId,
+    childObjectId = context.childObjectId,
+    productAttributes = context.productAttributes,
+    _context$includeUsers = context.includeUsers,
+    includeUsers = _context$includeUsers === void 0 ? true : _context$includeUsers;
+  var safeValue = formFieldProps.value,
+    formFieldPropsRest = _objectWithoutProperties(formFieldProps, _excluded);
+  var isMultiple = field.isMultiple,
+    placeholder = field.placeholder;
+  function onChangeUnsafe(newValue) {
+    setUnsafeValue(newValue);
+    onChange(makeSafe(newValue));
+  }
+  useEffect(function () {
+    var cancel = false;
+    function hydrate() {
+      return _hydrate.apply(this, arguments);
+    }
+    function _hydrate() {
+      _hydrate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var hydrated;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return hydrateDefaultValues(undefined,
+              // no need to override baseUrl
+              makeCompat(safeValue), productKey);
+            case 2:
+              hydrated = _context.sent;
+              if (!(cancel || !isOptionData(hydrated))) {
+                _context.next = 5;
+                break;
+              }
+              return _context.abrupt("return");
+            case 5:
+              setUnsafeValue(hydrated);
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return _hydrate.apply(this, arguments);
+    }
+    hydrate();
+    return function () {
+      cancel = true;
+    };
+  }, [safeValue, productKey]);
+  return /*#__PURE__*/React.createElement(SmartUserPicker, _extends({}, formFieldPropsRest, {
+    onChange: onChangeUnsafe,
+    autoFocus: autoFocus,
+    onBlur: onBlur,
+    maxOptions: 10,
+    isClearable: true,
+    isMulti: isMultiple,
+    includeUsers: includeUsers,
+    includeGroups: false,
+    includeTeams: false,
+    fieldId: fieldId,
+    principalId: principalId,
+    siteId: siteId,
+    productKey: productKey,
+    objectId: objectId,
+    containerId: containerId,
+    childObjectId: childObjectId,
+    placeholder: placeholder,
+    productAttributes: productAttributes,
+    value: unsafeValue,
+    width: "100%"
+  }));
+}
+export default function UserSelect(_ref2) {
+  var name = _ref2.name,
+    autoFocus = _ref2.autoFocus,
+    extensionManifest = _ref2.extensionManifest,
+    field = _ref2.field,
+    onFieldChange = _ref2.onFieldChange;
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    context = _useState4[0],
+    setContext = _useState4[1];
+  var siteId = context.siteId,
+    principalId = context.principalId,
+    fieldId = context.fieldId,
+    productKey = context.productKey;
+  var label = field.label,
+    defaultValue = field.defaultValue,
+    description = field.description,
+    isRequired = field.isRequired,
+    options = field.options;
+  var type = options.provider.type;
+  useEffect(function () {
+    var cancel = false;
+    function fetchContext() {
+      return _fetchContext.apply(this, arguments);
+    }
+    function _fetchContext() {
+      _fetchContext = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var _context2;
+        return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              _context3.next = 3;
+              return getUserFieldContextProvider(extensionManifest, field.options.provider);
+            case 3:
+              _context3.t0 = _context3.sent;
+              _context3.next = 6;
+              return (0, _context3.t0)();
+            case 6:
+              _context2 = _context3.sent;
+              if (!cancel) {
+                _context3.next = 9;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 9:
+              setContext(_context2);
+              _context3.next = 15;
+              break;
+            case 12:
+              _context3.prev = 12;
+              _context3.t1 = _context3["catch"](0);
+              // eslint-disable-next-line no-console
+              console.error(_context3.t1);
+            case 15:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee2, null, [[0, 12]]);
+      }));
+      return _fetchContext.apply(this, arguments);
+    }
+    fetchContext();
+    return function () {
+      cancel = true;
+    };
+  }, [extensionManifest, field.options.provider]);
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    defaultValue: defaultValue,
+    validate: function validate(value) {
+      return _validate(field, value);
+    },
+    testId: "config-panel-user-select-".concat(name)
+  }, function (_ref3) {
+    var fieldProps = _ref3.fieldProps,
+      error = _ref3.error;
+    // if any of these don't exists, the provider is missing
+    if (!siteId || !principalId || !fieldId || !productKey) {
+      return /*#__PURE__*/React.createElement(UnhandledType, {
+        key: name,
+        field: field,
+        errorMessage: "Field \"".concat(name, "\" can't be renderered. Missing provider for \"").concat(type, "\".")
+      });
+    }
+    function onChange(newValue) {
+      fieldProps.onChange(newValue);
+      onFieldChange(name, true);
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SafeSmartUserPicker, {
+      context: context,
+      field: field,
+      formFieldProps: fieldProps,
+      autoFocus: autoFocus || false,
+      onBlur: function onBlur() {
+        return onFieldChange(name, true);
+      },
+      onChange: onChange
+    }), /*#__PURE__*/React.createElement(FieldMessages, {
+      error: error,
+      description: description
+    }));
+  });
+}

package/dist/esm/ui/ConfigPanel/Fields/common/RequiredIndicator.js

@@ -0,0 +1,5 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+import { R500 } from '@atlaskit/theme/colors';
+export var requiredIndicator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(R500, ")"));

package/dist/esm/ui/ConfigPanel/FormContent.js

@@ -0,0 +1,223 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { isFieldset } from '@atlaskit/editor-common/extensions';
+import Boolean from './Fields/Boolean';
+import ColorPicker from './Fields/ColorPicker';
+import CustomSelect from './Fields/CustomSelect';
+import Date from './Fields/Date';
+import DateRange from './Fields/DateRange';
+import Enum from './Fields/Enum';
+import Expand from './Fields/Expand';
+import Fieldset from './Fields/Fieldset';
+import Number from './Fields/Number';
+import String from './Fields/String';
+import TabGroup from './Fields/TabGroup';
+import UnhandledType from './Fields/UnhandledType';
+import UserSelect from './Fields/UserSelect';
+import { FormErrorBoundary } from './FormErrorBoundary';
+import RemovableField from './NestedForms/RemovableField';
+import { getSafeParentedName } from './utils';
+export function FieldComponent(_ref) {
+  var _parameters$errors;
+  var field = _ref.field,
+    parameters = _ref.parameters,
+    parentName = _ref.parentName,
+    extensionManifest = _ref.extensionManifest,
+    firstVisibleFieldName = _ref.firstVisibleFieldName,
+    onFieldChange = _ref.onFieldChange,
+    featureFlags = _ref.featureFlags;
+  var _field = field,
+    name = _field.name,
+    type = _field.type;
+  var autoFocus = name === firstVisibleFieldName;
+  var defaultValue = parameters[name];
+  var error = (_parameters$errors = parameters.errors) === null || _parameters$errors === void 0 ? void 0 : _parameters$errors[name];
+  var parentedName = getSafeParentedName(name, parentName);
+  var fieldDefaultValue = field.type === 'enum' ? field.defaultValue : undefined;
+  if (name in parameters && !isFieldset(field)) {
+    field = _objectSpread(_objectSpread({}, field), defaultValue != null ? {
+      defaultValue: defaultValue
+    } : {});
+  }
+  switch (field.type) {
+    case 'string':
+      return /*#__PURE__*/React.createElement(String, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        placeholder: field.placeholder
+      });
+    case 'number':
+      return /*#__PURE__*/React.createElement(Number, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        placeholder: field.placeholder
+      });
+    case 'boolean':
+      return /*#__PURE__*/React.createElement(Boolean, {
+        name: parentedName,
+        field: field,
+        onFieldChange: onFieldChange
+      });
+    case 'color':
+      return /*#__PURE__*/React.createElement(ColorPicker, {
+        name: parentedName,
+        field: field,
+        onFieldChange: onFieldChange,
+        featureFlags: featureFlags
+      });
+    case 'date':
+      return /*#__PURE__*/React.createElement(Date, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        placeholder: field.placeholder
+      });
+    case 'date-range':
+      return /*#__PURE__*/React.createElement(DateRange, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange
+      });
+    case 'enum':
+      return /*#__PURE__*/React.createElement(Enum, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        fieldDefaultValue: fieldDefaultValue
+      });
+    case 'custom':
+      return /*#__PURE__*/React.createElement(CustomSelect, {
+        name: parentedName,
+        field: field,
+        extensionManifest: extensionManifest,
+        placeholder: field.placeholder,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        parameters: parameters
+      });
+    case 'fieldset':
+      return /*#__PURE__*/React.createElement(Fieldset, {
+        name: parentedName,
+        field: field,
+        firstVisibleFieldName: firstVisibleFieldName,
+        onFieldChange: onFieldChange,
+        extensionManifest: extensionManifest,
+        parameters: defaultValue || {},
+        error: error,
+        formComponent: FormContent
+      });
+    case 'user':
+      return /*#__PURE__*/React.createElement(UserSelect, {
+        name: parentedName,
+        field: field,
+        autoFocus: name === firstVisibleFieldName,
+        extensionManifest: extensionManifest,
+        onFieldChange: onFieldChange
+      });
+    case 'expand':
+      {
+        // if expand is under a tab with hasGroupedValues=true
+        var resolvedParentName = [parentName, field.hasGroupedValues ? field.name : undefined].filter(function (val) {
+          return !!val;
+        }).join('.') || undefined;
+        var resolvedParameters = !field.hasGroupedValues ? parameters : parameters[field.name] || {};
+        return /*#__PURE__*/React.createElement(Expand, {
+          field: field,
+          isExpanded: field.isExpanded
+        }, /*#__PURE__*/React.createElement(FormContent, {
+          parentName: resolvedParentName,
+          fields: field.fields,
+          parameters: resolvedParameters,
+          onFieldChange: onFieldChange,
+          extensionManifest: extensionManifest,
+          featureFlags: featureFlags
+        }));
+      }
+    case 'tab-group':
+      {
+        var tabGroupField = field;
+        var tabGroupParams = tabGroupField.hasGroupedValues ? parameters[tabGroupField.name] || {} : parameters;
+        var renderPanel = function renderPanel(tabField) {
+          var parentName = [tabGroupField.hasGroupedValues ? tabGroupField.name : undefined, tabField.hasGroupedValues ? tabField.name : undefined].filter(function (val) {
+            return !!val;
+          }).join('.') || undefined;
+          var tabParameters = tabField.hasGroupedValues ? tabGroupParams[tabField.name] || {} : tabGroupParams;
+          return /*#__PURE__*/React.createElement(FormContent, {
+            parentName: parentName,
+            fields: tabField.fields,
+            parameters: tabParameters,
+            onFieldChange: onFieldChange,
+            extensionManifest: extensionManifest,
+            featureFlags: featureFlags
+          });
+        };
+        return /*#__PURE__*/React.createElement(TabGroup, {
+          field: tabGroupField,
+          renderPanel: renderPanel
+        });
+      }
+    default:
+      return /*#__PURE__*/React.createElement(UnhandledType, {
+        field: field,
+        errorMessage: "Field \"".concat(name, "\" of type \"").concat(type, "\" not supported")
+      });
+  }
+}
+function Hidden(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'none'
+    }
+  }, children);
+}
+export default function FormContent(_ref3) {
+  var fields = _ref3.fields,
+    parentName = _ref3.parentName,
+    parameters = _ref3.parameters,
+    extensionManifest = _ref3.extensionManifest,
+    canRemoveFields = _ref3.canRemoveFields,
+    onClickRemove = _ref3.onClickRemove,
+    onFieldChange = _ref3.onFieldChange,
+    firstVisibleFieldName = _ref3.firstVisibleFieldName,
+    contextIdentifierProvider = _ref3.contextIdentifierProvider,
+    featureFlags = _ref3.featureFlags;
+  return /*#__PURE__*/React.createElement(FormErrorBoundary, {
+    contextIdentifierProvider: contextIdentifierProvider,
+    extensionKey: extensionManifest.key,
+    fields: fields
+  }, fields.map(function (field) {
+    var fieldElement = /*#__PURE__*/React.createElement(FieldComponent, {
+      field: field,
+      parameters: parameters || {},
+      parentName: parentName,
+      extensionManifest: extensionManifest,
+      firstVisibleFieldName: firstVisibleFieldName,
+      onFieldChange: onFieldChange,
+      featureFlags: featureFlags
+    });
+
+    // only to be supported by String fields at this time
+    if ('isHidden' in field && field.isHidden) {
+      fieldElement = /*#__PURE__*/React.createElement(Hidden, null, fieldElement);
+    }
+    var name = field.name,
+      type = field.type;
+    return /*#__PURE__*/React.createElement(RemovableField, {
+      key: name,
+      name: name,
+      canRemoveField: canRemoveFields && !field.isRequired,
+      onClickRemove: onClickRemove,
+      className: "field-wrapper-".concat(type)
+    }, fieldElement);
+  }));
+}