@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

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

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldComponent = FieldComponent;
+exports.default = FormContent;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _extensions = require("@atlaskit/editor-common/extensions");
+var _Boolean = _interopRequireDefault(require("./Fields/Boolean"));
+var _ColorPicker = _interopRequireDefault(require("./Fields/ColorPicker"));
+var _CustomSelect = _interopRequireDefault(require("./Fields/CustomSelect"));
+var _Date = _interopRequireDefault(require("./Fields/Date"));
+var _DateRange = _interopRequireDefault(require("./Fields/DateRange"));
+var _Enum = _interopRequireDefault(require("./Fields/Enum"));
+var _Expand = _interopRequireDefault(require("./Fields/Expand"));
+var _Fieldset = _interopRequireDefault(require("./Fields/Fieldset"));
+var _Number = _interopRequireDefault(require("./Fields/Number"));
+var _String = _interopRequireDefault(require("./Fields/String"));
+var _TabGroup = _interopRequireDefault(require("./Fields/TabGroup"));
+var _UnhandledType = _interopRequireDefault(require("./Fields/UnhandledType"));
+var _UserSelect = _interopRequireDefault(require("./Fields/UserSelect"));
+var _FormErrorBoundary = require("./FormErrorBoundary");
+var _RemovableField = _interopRequireDefault(require("./NestedForms/RemovableField"));
+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; }
+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 = (0, _utils.getSafeParentedName)(name, parentName);
+  var fieldDefaultValue = field.type === 'enum' ? field.defaultValue : undefined;
+  if (name in parameters && !(0, _extensions.isFieldset)(field)) {
+    field = _objectSpread(_objectSpread({}, field), defaultValue != null ? {
+      defaultValue: defaultValue
+    } : {});
+  }
+  switch (field.type) {
+    case 'string':
+      return /*#__PURE__*/_react.default.createElement(_String.default, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        placeholder: field.placeholder
+      });
+    case 'number':
+      return /*#__PURE__*/_react.default.createElement(_Number.default, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        placeholder: field.placeholder
+      });
+    case 'boolean':
+      return /*#__PURE__*/_react.default.createElement(_Boolean.default, {
+        name: parentedName,
+        field: field,
+        onFieldChange: onFieldChange
+      });
+    case 'color':
+      return /*#__PURE__*/_react.default.createElement(_ColorPicker.default, {
+        name: parentedName,
+        field: field,
+        onFieldChange: onFieldChange,
+        featureFlags: featureFlags
+      });
+    case 'date':
+      return /*#__PURE__*/_react.default.createElement(_Date.default, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        placeholder: field.placeholder
+      });
+    case 'date-range':
+      return /*#__PURE__*/_react.default.createElement(_DateRange.default, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange
+      });
+    case 'enum':
+      return /*#__PURE__*/_react.default.createElement(_Enum.default, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        fieldDefaultValue: fieldDefaultValue
+      });
+    case 'custom':
+      return /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+        name: parentedName,
+        field: field,
+        extensionManifest: extensionManifest,
+        placeholder: field.placeholder,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        parameters: parameters
+      });
+    case 'fieldset':
+      return /*#__PURE__*/_react.default.createElement(_Fieldset.default, {
+        name: parentedName,
+        field: field,
+        firstVisibleFieldName: firstVisibleFieldName,
+        onFieldChange: onFieldChange,
+        extensionManifest: extensionManifest,
+        parameters: defaultValue || {},
+        error: error,
+        formComponent: FormContent
+      });
+    case 'user':
+      return /*#__PURE__*/_react.default.createElement(_UserSelect.default, {
+        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.default.createElement(_Expand.default, {
+          field: field,
+          isExpanded: field.isExpanded
+        }, /*#__PURE__*/_react.default.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.default.createElement(FormContent, {
+            parentName: parentName,
+            fields: tabField.fields,
+            parameters: tabParameters,
+            onFieldChange: onFieldChange,
+            extensionManifest: extensionManifest,
+            featureFlags: featureFlags
+          });
+        };
+        return /*#__PURE__*/_react.default.createElement(_TabGroup.default, {
+          field: tabGroupField,
+          renderPanel: renderPanel
+        });
+      }
+    default:
+      return /*#__PURE__*/_react.default.createElement(_UnhandledType.default, {
+        field: field,
+        errorMessage: "Field \"".concat(name, "\" of type \"").concat(type, "\" not supported")
+      });
+  }
+}
+function Hidden(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'none'
+    }
+  }, children);
+}
+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.default.createElement(_FormErrorBoundary.FormErrorBoundary, {
+    contextIdentifierProvider: contextIdentifierProvider,
+    extensionKey: extensionManifest.key,
+    fields: fields
+  }, fields.map(function (field) {
+    var fieldElement = /*#__PURE__*/_react.default.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.default.createElement(Hidden, null, fieldElement);
+    }
+    var name = field.name,
+      type = field.type;
+    return /*#__PURE__*/_react.default.createElement(_RemovableField.default, {
+      key: name,
+      name: name,
+      canRemoveField: canRemoveFields && !field.isRequired,
+      onClickRemove: onClickRemove,
+      className: "field-wrapper-".concat(type)
+    }, fieldElement);
+  }));
+}

package/dist/cjs/ui/ConfigPanel/FormErrorBoundary.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormErrorBoundaryImpl = exports.FormErrorBoundary = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+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 _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
+var _messages = require("./messages");
+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; } }
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var FormErrorBoundaryInner = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(FormErrorBoundaryInner, _React$Component);
+  var _super = _createSuper(FormErrorBoundaryInner);
+  function FormErrorBoundaryInner() {
+    var _this;
+    (0, _classCallCheck2.default)(this, FormErrorBoundaryInner);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      error: undefined
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getProductName", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var contextIdentifierProvider, context;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            contextIdentifierProvider = _this.props.contextIdentifierProvider;
+            if (!contextIdentifierProvider) {
+              _context.next = 7;
+              break;
+            }
+            _context.next = 4;
+            return contextIdentifierProvider;
+          case 4:
+            context = _context.sent;
+            if (!context.product) {
+              _context.next = 7;
+              break;
+            }
+            return _context.abrupt("return", context.product);
+          case 7:
+            return _context.abrupt("return", 'atlaskit');
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireAnalytics", function (analyticsErrorPayload) {
+      var _this$props = _this.props,
+        createAnalyticsEvent = _this$props.createAnalyticsEvent,
+        extensionKey = _this$props.extensionKey,
+        fields = _this$props.fields;
+      _this.getProductName().then(function (product) {
+        var _window;
+        if (!createAnalyticsEvent) {
+          // eslint-disable-next-line no-console
+          console.error('ConfigPanel FormErrorBoundary: Missing `createAnalyticsEvent`', {
+            channel: _analytics.editorAnalyticsChannel,
+            product: product,
+            error: analyticsErrorPayload
+          });
+          return;
+        }
+        var error = analyticsErrorPayload.error,
+          errorInfo = analyticsErrorPayload.errorInfo,
+          errorStack = analyticsErrorPayload.errorStack;
+        var payload = {
+          action: _analytics.ACTION.ERRORED,
+          actionSubject: _analytics.ACTION_SUBJECT.CONFIG_PANEL,
+          eventType: _analytics.EVENT_TYPE.UI,
+          attributes: {
+            product: product,
+            browserInfo: ((_window = window) === null || _window === void 0 || (_window = _window.navigator) === null || _window === void 0 ? void 0 : _window.userAgent) || 'unknown',
+            extensionKey: extensionKey,
+            fields: JSON.stringify(fields),
+            error: error,
+            errorInfo: errorInfo,
+            errorStack: errorStack
+          }
+        };
+        createAnalyticsEvent(payload).fire(_analytics.editorAnalyticsChannel);
+      }).catch(function (e) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to resolve product name from contextIdentifierProvider.', e);
+      });
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(FormErrorBoundaryInner, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      var _this2 = this;
+      this.setState({
+        error: error
+      }, function () {
+        // Log the error
+        _this2.fireAnalytics({
+          error: error.toString(),
+          errorInfo: errorInfo,
+          errorStack: error.stack
+        });
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var intl = this.props.intl;
+      var error = this.state.error;
+      if (!error) {
+        return this.props.children;
+      }
+      return /*#__PURE__*/_react.default.createElement(_sectionMessage.default, {
+        title: intl.formatMessage(_messages.messages.errorBoundaryTitle),
+        appearance: "error"
+      }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("i", null, error.message)), /*#__PURE__*/_react.default.createElement("p", null, intl.formatMessage(_messages.messages.errorBoundaryNote)));
+    }
+  }]);
+  return FormErrorBoundaryInner;
+}(_react.default.Component);
+var FormErrorBoundaryImpl = exports.FormErrorBoundaryImpl = (0, _reactIntlNext.injectIntl)(FormErrorBoundaryInner);
+var FormErrorBoundary = exports.FormErrorBoundary = (0, _analyticsNext.withAnalyticsContext)()((0, _analyticsNext.withAnalyticsEvents)()(FormErrorBoundaryImpl));
+FormErrorBoundary.displayName = 'FormErrorBoundary';

package/dist/cjs/ui/ConfigPanel/Header.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
+var _messages = require("./messages");
+/** @jsx jsx */
+
+var iconWidth = 40;
+var buttonWidth = 40;
+var margin = 16;
+var gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
+var itemStyles = (0, _react2.css)({
+  display: 'flex',
+  marginBottom: "var(--ds-space-300, 24px)"
+});
+var itemIconStyles = (0, _react2.css)({
+  width: iconWidth,
+  height: iconWidth,
+  overflow: 'hidden',
+  border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))"),
+  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  div: {
+    width: iconWidth,
+    height: iconWidth
+  }
+});
+var itemBodyStyles = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'space-between',
+  lineHeight: 1.4,
+  margin: "0 ".concat("var(--ds-space-200, 16px)"),
+  flexGrow: 3,
+  maxWidth: "calc(100% - ".concat(gapSizeForEllipsis, "px)")
+});
+var centeredItemTitleStyles = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+});
+var itemTextStyles = (0, _react2.css)({
+  maxWidth: '100%',
+  whiteSpace: 'initial',
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  itemSummary: {
+    fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67),
+    color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+    marginTop: "var(--ds-space-050, 4px)",
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }
+});
+var descriptionStyles = (0, _react2.css)({
+  marginBottom: "var(--ds-space-300, 24px)"
+});
+var helpLinkStyles = (0, _react2.css)({
+  paddingTop: "var(--ds-space-150, 12px)"
+});
+var closeButtonWrapperStyles = (0, _react2.css)({
+  width: buttonWidth,
+  textAlign: 'right'
+});
+var Header = function Header(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description,
+    summary = _ref.summary,
+    documentationUrl = _ref.documentationUrl,
+    enableHelpCTA = _ref.enableHelpCTA,
+    onClose = _ref.onClose,
+    intl = _ref.intl;
+  var ResolvedIcon = (0, _reactLoadable.default)({
+    loader: icon,
+    loading: function loading() {
+      return null;
+    }
+  });
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
+    css: itemStyles
+  }, (0, _react2.jsx)("div", {
+    css: itemIconStyles
+  }, (0, _react2.jsx)(ResolvedIcon, {
+    label: title
+  })), (0, _react2.jsx)("div", {
+    css: itemBodyStyles
+  }, summary ? (0, _react2.jsx)("div", {
+    css: itemTextStyles
+  }, (0, _react2.jsx)("div", {
+    className: "item-title",
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
+  }, title), (0, _react2.jsx)("div", {
+    className: "item-summary"
+  }, summary)) : (0, _react2.jsx)("div", {
+    css: centeredItemTitleStyles,
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
+  }, title)), (0, _react2.jsx)("div", {
+    css: closeButtonWrapperStyles
+  }, (0, _react2.jsx)(_customThemeButton.default, {
+    appearance: "subtle",
+    iconBefore: (0, _react2.jsx)(_cross.default, {
+      label: intl.formatMessage(_messages.messages.close)
+    }),
+    onClick: onClose
+  }))), (description || documentationUrl) && (0, _react2.jsx)("p", {
+    css: descriptionStyles,
+    "data-testid": "config-panel-header-description"
+  }, description && (0, _react2.jsx)(_react.Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? (0, _react2.jsx)("p", {
+    css: helpLinkStyles
+  }, (0, _react2.jsx)(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: intl.formatMessage(_messages.messages.help)
+  })) : (0, _react2.jsx)(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: intl.formatMessage(_messages.messages.documentation)
+  }))));
+};
+var HelpLink = function HelpLink(_ref2) {
+  var documentationUrl = _ref2.documentationUrl,
+    label = _ref2.label;
+  return (0, _react2.jsx)("a", {
+    target: "_blank",
+    rel: "noopener noreferrer",
+    href: documentationUrl,
+    "data-testid": "config-panel-header-documentation-link"
+  }, label);
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(Header);

package/dist/cjs/ui/ConfigPanel/LoadingState.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+/** @jsx jsx */
+
+var spinnerWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-800, 64px)"
+});
+var LoadingState = function LoadingState() {
+  return (0, _react.jsx)("div", {
+    css: spinnerWrapperStyles,
+    "data-testid": "ConfigPanelLoading"
+  }, (0, _react.jsx)(_spinner.default, {
+    size: "small"
+  }));
+};
+var _default = exports.default = LoadingState;

package/dist/cjs/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
+var _colors = require("@atlaskit/theme/colors");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _messages = require("../messages");
+/** @jsx jsx */
+
+var removableFieldWrapperStyles = (0, _react2.css)({
+  position: 'relative',
+  marginBottom: 0
+});
+var wrapperWithMarginBottomStyles = (0, _react2.css)({
+  marginBottom: "var(--ds-space-200, 16px)"
+});
+var removeButtonWrapperStyles = (0, _react2.css)({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  cursor: 'pointer',
+  color: "var(--ds-icon-subtle, ".concat(_colors.N80, ")"),
+  '&:hover': {
+    color: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
+  }
+});
+var RemovableField = function RemovableField(_ref) {
+  var _children$props$field;
+  var name = _ref.name,
+    canRemoveField = _ref.canRemoveField,
+    onClickRemove = _ref.onClickRemove,
+    children = _ref.children,
+    intl = _ref.intl,
+    className = _ref.className;
+  var onClickCallback = _react.default.useCallback(function () {
+    return onClickRemove && onClickRemove(name);
+  }, [name, onClickRemove]);
+  var hasMarginBottom = ((_children$props$field = children.props.field) === null || _children$props$field === void 0 ? void 0 : _children$props$field.type) !== 'expand';
+  return (0, _react2.jsx)("div", {
+    css: [removableFieldWrapperStyles, hasMarginBottom && wrapperWithMarginBottomStyles],
+    className: className
+  }, children, canRemoveField && (0, _react2.jsx)("div", {
+    css: removeButtonWrapperStyles,
+    "data-testid": "remove-field-".concat(name),
+    onClick: onClickCallback
+  }, (0, _react2.jsx)(_tooltip.default, {
+    content: intl.formatMessage(_messages.messages.removeField),
+    position: "left"
+  }, (0, _react2.jsx)(_crossCircle.default, {
+    size: "small",
+    label: intl.formatMessage(_messages.messages.removeField)
+  }))));
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(RemovableField);

package/dist/cjs/ui/ConfigPanel/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ALLOWED_PARAM_TYPES = exports.ALLOWED_LOGGED_MACRO_PARAMS = void 0;
+// Allowlist of { macroKey: parameterName[] } for analytics logging
+var ALLOWED_LOGGED_MACRO_PARAMS = exports.ALLOWED_LOGGED_MACRO_PARAMS = {
+  children: ['all', 'first', 'depth', 'style', 'excerptType', 'sort', 'reverse'],
+  'recently-updated': ['width', 'types', 'max', 'theme', 'showProfilePic', 'hideHeading'],
+  excerpt: ['hidden']
+};
+var ALLOWED_PARAM_TYPES = exports.ALLOWED_PARAM_TYPES = ['enum', 'number', 'boolean'];

package/dist/cjs/ui/ConfigPanel/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ConfigPanelLoader = _interopRequireDefault(require("./ConfigPanelLoader"));
+var _default = exports.default = _ConfigPanelLoader.default;