@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/cjs/ui/ConfigPanel/Fields/DateRange.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _datetimePicker = require("@atlaskit/datetime-picker");
+var _form = require("@atlaskit/form");
+var _radio = require("@atlaskit/radio");
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
+var _messages = require("../messages");
+var _utils = require("../utils");
+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) { (0, _defineProperty2.default)(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; } /** @jsx jsx */
+var horizontalFieldsStyles = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between'
+});
+var horizontalFieldWrapperStyles = (0, _react2.css)({
+  flexBasis: '47%'
+});
+var hiddenStyles = (0, _react2.css)({
+  display: 'none'
+});
+var getFromDefaultValue = function getFromDefaultValue(field, attribute) {
+  if (field.defaultValue) {
+    return field.defaultValue[attribute];
+  }
+};
+var DateField = function DateField(_ref) {
+  var parentField = _ref.parentField,
+    scope = _ref.scope,
+    fieldName = _ref.fieldName,
+    onFieldChange = _ref.onFieldChange,
+    intl = _ref.intl,
+    isRequired = _ref.isRequired;
+  return (0, _react2.jsx)("div", {
+    css: horizontalFieldWrapperStyles,
+    key: fieldName
+  }, (0, _react2.jsx)(_form.Field, {
+    name: "".concat(scope, ".").concat(fieldName),
+    label: intl.formatMessage(_messages.messages[fieldName]),
+    defaultValue: getFromDefaultValue(parentField, fieldName),
+    isRequired: isRequired,
+    validate: function validate(value) {
+      return (0, _utils.validateRequired)({
+        isRequired: isRequired
+      }, value);
+    }
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps,
+      error = _ref2.error;
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_datetimePicker.DatePicker, (0, _extends2.default)({}, fieldProps, {
+      onChange: function onChange(date) {
+        fieldProps.onChange(date);
+        onFieldChange(parentField.name, true);
+      },
+      locale: intl.locale
+    })), (0, _react2.jsx)(_FieldMessages.default, {
+      error: error
+    }));
+  }));
+};
+var DateRange = function DateRange(_ref3) {
+  var name = _ref3.name,
+    field = _ref3.field,
+    onFieldChange = _ref3.onFieldChange,
+    intl = _ref3.intl;
+  var items = (0, _react.useMemo)(function () {
+    return [].concat((0, _toConsumableArray2.default)(field.items || []), [{
+      label: intl.formatMessage(_messages.messages.custom),
+      value: 'custom'
+    }]).map(function (option) {
+      return _objectSpread(_objectSpread({}, option), {}, {
+        name: name
+      });
+    });
+  }, [field.items, name, intl]);
+  var _useState = (0, _react.useState)(getFromDefaultValue(field, 'value') || items[0].value),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentValue = _useState2[0],
+    setCurrentValue = _useState2[1];
+  (0, _react.useEffect)(function () {
+    // calling onBlur here based on the currentValue changing will ensure that we
+    // get the most up to date value after the form has been rendered
+    onFieldChange(name, true);
+  }, [currentValue, onFieldChange, name]);
+  var element = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
+    css: hiddenStyles
+  }, (0, _react2.jsx)(_form.Field, {
+    name: "".concat(name, ".type"),
+    defaultValue: 'date-range'
+  }, function (_ref4) {
+    var fieldProps = _ref4.fieldProps;
+    return (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+      type: "hidden"
+    }));
+  })), (0, _react2.jsx)(_form.Field, {
+    name: "".concat(name, ".value"),
+    label: field.label,
+    defaultValue: currentValue,
+    isRequired: field.isRequired,
+    validate: function validate(value) {
+      return (0, _utils.validate)(field, value || '');
+    },
+    testId: "config-panel-date-range-".concat(name)
+  }, function (_ref5) {
+    var fieldProps = _ref5.fieldProps,
+      error = _ref5.error;
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_radio.RadioGroup, (0, _extends2.default)({}, fieldProps, {
+      options: items,
+      onChange: function onChange(event) {
+        fieldProps.onChange(event.target.value);
+        setCurrentValue(event.target.value);
+      }
+    })), (0, _react2.jsx)(_FieldMessages.default, {
+      error: error
+    }));
+  }), currentValue !== 'custom' ? (0, _react2.jsx)("div", {
+    css: hiddenStyles
+  }, (0, _react2.jsx)(_form.Field, {
+    name: "".concat(name, ".from"),
+    defaultValue: currentValue
+  }, function (_ref6) {
+    var fieldProps = _ref6.fieldProps;
+    return (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+      type: "hidden"
+    }));
+  })) : (0, _react2.jsx)("div", {
+    css: horizontalFieldsStyles
+  }, (0, _react2.jsx)(DateField, {
+    scope: name,
+    parentField: field,
+    fieldName: "from",
+    onFieldChange: onFieldChange,
+    intl: intl,
+    isRequired: field.isRequired
+  }), (0, _react2.jsx)(DateField, {
+    scope: name,
+    parentField: field,
+    fieldName: "to",
+    onFieldChange: onFieldChange,
+    intl: intl,
+    isRequired: field.isRequired
+  })), (0, _react2.jsx)(_FieldMessages.default, {
+    description: field.description
+  }));
+  return element;
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(DateRange);

package/dist/cjs/ui/ConfigPanel/Fields/Enum.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Enum;
+var _react = _interopRequireDefault(require("react"));
+var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup"));
+var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
+var _Select = _interopRequireDefault(require("./Select"));
+function Enum(_ref) {
+  var name = _ref.name,
+    field = _ref.field,
+    autoFocus = _ref.autoFocus,
+    onFieldChange = _ref.onFieldChange,
+    fieldDefaultValue = _ref.fieldDefaultValue;
+  switch (field.style) {
+    case 'checkbox':
+      return /*#__PURE__*/_react.default.createElement(_CheckboxGroup.default, {
+        name: name,
+        field: field,
+        onFieldChange: onFieldChange
+      });
+    case 'radio':
+      return /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
+        name: name,
+        field: field,
+        onFieldChange: onFieldChange
+      });
+    case 'select':
+      return /*#__PURE__*/_react.default.createElement(_Select.default, {
+        name: name,
+        field: field,
+        onFieldChange: onFieldChange,
+        placeholder: field.placeholder,
+        autoFocus: autoFocus,
+        fieldDefaultValue: fieldDefaultValue
+      });
+  }
+}

package/dist/cjs/ui/ConfigPanel/Fields/Expand.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("../messages");
+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; }
+/** @jsx jsx */
+
+var expandContainerStyles = (0, _react2.css)({
+  borderBottom: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"))
+});
+var expandControlStyles = (0, _react2.css)({
+  display: 'flex',
+  height: "var(--ds-space-600, 48px)",
+  justifyContent: 'center',
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+var chevronContainerStyles = (0, _react2.css)({
+  display: 'flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '& > button': {
+    width: "var(--ds-space-300, 24px)",
+    height: "var(--ds-space-300, 24px)"
+  }
+});
+var labelContainerStyles = (0, _react2.css)({
+  width: '100%',
+  alignItems: 'center',
+  display: 'flex',
+  fontWeight: 500
+});
+var expandContentContainerHiddenStyles = (0, _react2.css)({
+  display: 'none',
+  marginTop: "var(--ds-space-negative-100, -8px)"
+});
+var expandContentContainerVisibleStyles = (0, _react2.css)({
+  display: 'block',
+  marginTop: "var(--ds-space-negative-100, -8px)"
+});
+function Expand(_ref) {
+  var field = _ref.field,
+    children = _ref.children,
+    _ref$isExpanded = _ref.isExpanded,
+    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+    intl = _ref.intl;
+  var _useState = (0, _react.useState)(isExpanded),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  return (0, _react2.jsx)("div", {
+    "data-testid": "expand-config-field",
+    css: expandContainerStyles
+  }, (0, _react2.jsx)("div", {
+    css: expandControlStyles
+  }, (0, _react2.jsx)("div", {
+    css: labelContainerStyles
+  }, field.label), (0, _react2.jsx)("div", {
+    css: chevronContainerStyles
+  }, (0, _react2.jsx)(_button.default, {
+    onClick: function onClick() {
+      setExpanded(!expanded);
+    },
+    testId: "form-expand-toggle",
+    iconBefore: expanded ? (0, _react2.jsx)(_chevronDown.default, {
+      label: intl.formatMessage(_messages.messages.collapse)
+    }) : (0, _react2.jsx)(_chevronRight.default, {
+      label: intl.formatMessage(_messages.messages.expand)
+    })
+  }))), (0, _react2.jsx)("div", {
+    "data-testid": "expand-content-container",
+    css: expanded ? expandContentContainerVisibleStyles : expandContentContainerHiddenStyles
+  }, children));
+}
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(Expand);

package/dist/cjs/ui/ConfigPanel/Fields/Fieldset.js

@@ -0,0 +1,270 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _addCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/add-circle"));
+var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
+var _select = _interopRequireDefault(require("@atlaskit/select"));
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("../messages");
+var _utils = require("../utils");
+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 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) { (0, _defineProperty2.default)(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; }
+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; } } /** @jsx jsx */
+var actionsWrapperStyles = (0, _react2.css)({
+  borderTop: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40A, ")")),
+  marginTop: "var(--ds-space-200, 16px)",
+  paddingTop: "var(--ds-space-200, 16px)"
+});
+var populateFromParameters = function populateFromParameters(parameters, fields) {
+  if (Object.keys(parameters).length) {
+    var keys = Object.keys(parameters);
+    var existingFieldKeys = keys.filter(function (key) {
+      return fields.find(function (field) {
+        return field.name === (0, _utils.getNameFromDuplicateField)(key);
+      });
+    });
+    if (existingFieldKeys.length > 0) {
+      return existingFieldKeys;
+    }
+  }
+};
+var populateFromRequired = function populateFromRequired(fields) {
+  return fields.filter(function (field) {
+    return field.isRequired;
+  }).map(function (field) {
+    return field.name;
+  });
+};
+var getInitialFields = function getInitialFields() {
+  var parameters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var fields = arguments.length > 1 ? arguments[1] : undefined;
+  var isDynamic = arguments.length > 2 ? arguments[2] : undefined;
+  if (!isDynamic) {
+    return new Set(fields.map(function (field) {
+      return field.name;
+    }));
+  }
+  var dynamicFields = [];
+  var fromRequired = populateFromRequired(fields);
+  if (fromRequired) {
+    dynamicFields.push.apply(dynamicFields, (0, _toConsumableArray2.default)(fromRequired));
+  }
+  var fromParameters = populateFromParameters(parameters, fields);
+  if (fromParameters) {
+    dynamicFields.push.apply(dynamicFields, (0, _toConsumableArray2.default)(fromParameters));
+  }
+  if (dynamicFields.length === 0 && Array.isArray(fields) && fields.length > 0) {
+    dynamicFields.push(fields[0].name);
+  }
+  return new Set(dynamicFields);
+};
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var FieldsetField = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(FieldsetField, _React$Component);
+  var _super = _createSuper(FieldsetField);
+  function FieldsetField(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, FieldsetField);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSelectedFields", function (visibleFields) {
+      var field = _this.props.field;
+      return (0, _toConsumableArray2.default)(visibleFields).map(function (fieldName) {
+        var originalFieldDef = field.fields.find(function (field) {
+          return field.name === (0, _utils.getNameFromDuplicateField)(fieldName);
+        });
+        var fieldDef = _objectSpread(_objectSpread({}, originalFieldDef), {}, {
+          name: fieldName
+        });
+        // for duplicate fields we only want the first one to actually be required
+        if (originalFieldDef.name !== fieldName && fieldDef.isRequired === true) {
+          fieldDef.isRequired = false;
+        }
+        return fieldDef;
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSelectOptions", function (visibleFields) {
+      var field = _this.props.field;
+      return field.fields.filter(function (field) {
+        return field.allowDuplicates || !visibleFields.has(field.name);
+      }).map(function (field) {
+        return {
+          value: field.name,
+          label: field.label
+        };
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setIsAdding", function (value) {
+      _this.setState(function (state) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isAdding: value
+        });
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setCurrentParameters", function (parameters) {
+      _this.setState(function (state) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          currentParameters: parameters
+        });
+      },
+      // callback required so autosave can be triggered on
+      // the right moment if fields are being removed
+      function () {
+        return _this.props.onFieldChange(_this.props.field.name, true);
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setVisibleFields", function (fields) {
+      _this.setState(function (state) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          visibleFields: fields,
+          selectedFields: _this.getSelectedFields(fields),
+          selectOptions: _this.getSelectOptions(fields)
+        });
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectItem", function (option) {
+      var visibleFields = _this.state.visibleFields;
+      var newItem = option.value;
+      var duplicates = (0, _toConsumableArray2.default)(visibleFields).filter(function (field) {
+        return (0, _utils.getNameFromDuplicateField)(field) === newItem;
+      });
+      if (duplicates.length > 0) {
+        newItem += ":".concat(duplicates.length);
+      }
+      _this.setVisibleFields(new Set([].concat((0, _toConsumableArray2.default)(visibleFields), [newItem])));
+      _this.setIsAdding(false);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClickRemove", function (fieldName) {
+      var _this$state = _this.state,
+        visibleFields = _this$state.visibleFields,
+        currentParameters = _this$state.currentParameters;
+      visibleFields.delete(fieldName);
+      _this.setVisibleFields(new Set(visibleFields));
+      var newParameters = _objectSpread({}, currentParameters);
+      delete newParameters[fieldName];
+      // if any there are duplicate fields that come after the one removed, we want to reduce their
+      // duplicate index eg. label:2 -> label:1
+      if ((0, _utils.isDuplicateField)(fieldName)) {
+        var _fieldName$split = fieldName.split(':'),
+          _fieldName$split2 = (0, _slicedToArray2.default)(_fieldName$split, 2),
+          key = _fieldName$split2[0],
+          idx = _fieldName$split2[1];
+        var currentIdx = +idx;
+        while (currentParameters["".concat(key, ":").concat(currentIdx + 1)]) {
+          newParameters["".concat(key, ":").concat(currentIdx)] = currentParameters["".concat(key, ":").concat(currentIdx + 1)];
+          currentIdx++;
+        }
+        delete newParameters["".concat(key, ":").concat(currentIdx)];
+      }
+      _this.setCurrentParameters(newParameters);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderActions", function () {
+      var intl = _this.props.intl;
+      var _this$state2 = _this.state,
+        selectOptions = _this$state2.selectOptions,
+        isAdding = _this$state2.isAdding;
+      if (selectOptions.length === 0) {
+        return null;
+      }
+      return (0, _react2.jsx)(_react.default.Fragment, null, isAdding ? (0, _react2.jsx)(_select.default, {
+        testId: "field-picker",
+        defaultMenuIsOpen: true,
+        autoFocus: true,
+        placeholder: intl.formatMessage(_messages.messages.addField),
+        options: selectOptions,
+        onChange: function onChange(option) {
+          if (option) {
+            _this.onSelectItem(option);
+          }
+        }
+      }) : (0, _react2.jsx)(_customThemeButton.default, {
+        testId: "add-more",
+        appearance: "subtle",
+        iconBefore: (0, _react2.jsx)(_addCircle.default, {
+          size: "small",
+          label: intl.formatMessage(_messages.messages.addField)
+        }),
+        onClick: function onClick() {
+          return _this.setIsAdding(true);
+        }
+      }, intl.formatMessage(_messages.messages.addField)));
+    });
+    var initialFields = getInitialFields(props.parameters, props.field.fields, props.field.options.isDynamic);
+    _this.state = {
+      isAdding: false,
+      currentParameters: props.parameters || {},
+      visibleFields: initialFields,
+      selectedFields: _this.getSelectedFields(initialFields),
+      selectOptions: _this.getSelectOptions(initialFields)
+    };
+    return _this;
+  }
+  (0, _createClass2.default)(FieldsetField, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        name = _this$props.name,
+        field = _this$props.field,
+        extensionManifest = _this$props.extensionManifest,
+        onFieldChange = _this$props.onFieldChange,
+        firstVisibleFieldName = _this$props.firstVisibleFieldName,
+        error = _this$props.error,
+        FormComponent = _this$props.formComponent;
+      var label = field.label,
+        options = field.options;
+      var _this$state3 = this.state,
+        selectedFields = _this$state3.selectedFields,
+        currentParameters = _this$state3.currentParameters,
+        visibleFields = _this$state3.visibleFields;
+      var children = this.renderActions();
+      return (0, _react2.jsx)(_react.Fragment, null, error && (0, _react2.jsx)(FieldsetError, {
+        message: error
+      }), (0, _react2.jsx)("div", null, options.showTitle && (0, _react2.jsx)("h5", null, label), (0, _react2.jsx)(FormComponent, {
+        fields: selectedFields,
+        parentName: name,
+        extensionManifest: extensionManifest,
+        parameters: currentParameters,
+        canRemoveFields: field.options.isDynamic && visibleFields.size > 1,
+        onClickRemove: this.onClickRemove,
+        onFieldChange: onFieldChange,
+        firstVisibleFieldName: firstVisibleFieldName
+      }), children && (0, _react2.jsx)("div", {
+        css: actionsWrapperStyles,
+        "data-testId": "fieldset-actions"
+      }, children)));
+    }
+  }]);
+  return FieldsetField;
+}(_react.default.Component);
+function FieldsetError(_ref) {
+  var message = _ref.message;
+  return (0, _react2.jsx)("div", {
+    css: sectionMessageWrapperStyles
+  }, (0, _react2.jsx)(_sectionMessage.default, {
+    appearance: "error"
+  }, (0, _react2.jsx)("p", null, message)));
+}
+var sectionMessageWrapperStyles = (0, _react2.css)({
+  marginBottom: "var(--ds-space-300, 24px)"
+});
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(FieldsetField);

package/dist/cjs/ui/ConfigPanel/Fields/Number.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Number;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _isNumber = _interopRequireDefault(require("is-number"));
+var _form = require("@atlaskit/form");
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
+var _types = require("../types");
+var _utils = require("../utils");
+function Number(_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;
+  function validateNumber(value) {
+    var error = (0, _utils.validate)(field, value || '');
+    if (error) {
+      return error;
+    }
+    if (value === '') {
+      return;
+    }
+    if ((0, _isNumber.default)(value)) {
+      return;
+    }
+    return _types.ValidationError.Invalid;
+  }
+  return /*#__PURE__*/_react.default.createElement(_form.Field, {
+    name: name,
+    label: label,
+    defaultValue: defaultValue === undefined ? '' : String(defaultValue),
+    isRequired: isRequired,
+    validate: validateNumber,
+    testId: "config-panel-number-".concat(name)
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps,
+      error = _ref2.error,
+      meta = _ref2.meta;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+      autoFocus: autoFocus,
+      onBlur: function onBlur() {
+        fieldProps.onBlur();
+        onFieldChange(name, meta.dirty);
+      },
+      type: "text" // do not change this to type="number", it will return invalid strings as ''
+      ,
+      placeholder: placeholder
+    })), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+      error: error,
+      description: description
+    }));
+  });
+}