@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RadioField;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _form = require("@atlaskit/form");
+var _radio = require("@atlaskit/radio");
+var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
+var _types = require("../types");
+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 RadioField(_ref) {
+  var name = _ref.name,
+    field = _ref.field,
+    onFieldChange = _ref.onFieldChange;
+  if (field.isMultiple) {
+    return /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+      error: _types.FieldTypeError.isMultipleAndRadio
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_form.Field, {
+    name: name,
+    label: field.label,
+    defaultValue: field.defaultValue,
+    isRequired: field.isRequired,
+    validate: function validate(value) {
+      return (0, _utils.validate)(field, value);
+    },
+    testId: "config-panel-radio-group-".concat(field.name)
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps,
+      error = _ref2.error;
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_radio.RadioGroup, (0, _extends2.default)({}, fieldProps, {
+      options: (field.items || []).map(function (option) {
+        return _objectSpread(_objectSpread({}, option), {}, {
+          name: field.name
+        });
+      }),
+      onChange: function onChange(value) {
+        fieldProps.onChange(value);
+        onFieldChange(field.name, true);
+      }
+    })), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+      error: error
+    }));
+  });
+}

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectField;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _form = require("@atlaskit/form");
+var _select = _interopRequireDefault(require("@atlaskit/select"));
+var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
+var _utils = require("../utils");
+var _SelectItem = require("./SelectItem");
+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 SelectField(_ref) {
+  var name = _ref.name,
+    field = _ref.field,
+    onFieldChange = _ref.onFieldChange,
+    autoFocus = _ref.autoFocus,
+    placeholder = _ref.placeholder,
+    fieldDefaultValue = _ref.fieldDefaultValue;
+  //ignore arrays as mutli-value select fields are always clearable
+  var hasValidSingleDefaultValue = !Array.isArray(fieldDefaultValue) && fieldDefaultValue !== undefined;
+  var isClearable = !hasValidSingleDefaultValue || field.isMultiple;
+  return /*#__PURE__*/_react.default.createElement(_form.Field, {
+    name: name,
+    label: field.label,
+    defaultValue: (0, _utils.getOptionFromValue)(field.items, field.defaultValue),
+    testId: "config-panel-select-".concat(name),
+    isRequired: field.isRequired,
+    validate: function validate(value) {
+      return (0, _utils.validate)(field, value);
+    }
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps,
+      error = _ref2.error;
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, fieldProps, {
+      onChange: function onChange(value) {
+        fieldProps.onChange(value);
+        onFieldChange(name, true);
+      }
+      // add type cast to avoid adding a "IsMulti" generic prop (TODO: ED-12072)
+      ,
+      isMulti: field.isMultiple || false,
+      options: field.items || [],
+      isClearable: isClearable,
+      validationState: error ? 'error' : 'default',
+      formatOptionLabel: _SelectItem.formatOptionLabel,
+      autoFocus: autoFocus,
+      menuPlacement: "auto",
+      placeholder: placeholder
+    })), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+      error: error,
+      description: field.description
+    }));
+  });
+}

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatOptionLabel = void 0;
+var _react = require("@emotion/react");
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+/** @jsx jsx */
+
+var itemWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  small: {
+    margin: 0,
+    display: 'block',
+    color: 'currentColor'
+  }
+});
+var iconWrapperStyles = (0, _react.css)({
+  lineHeight: 1
+});
+var iconWrapperMenuStyles = (0, _react.css)({
+  alignSelf: 'flex-start',
+  marginTop: '3px'
+});
+var getIconSize = function getIconSize(context, description) {
+  if (context === 'value' || !description) {
+    return 'xsmall';
+  }
+  return 'small';
+};
+var formatOptionLabel = exports.formatOptionLabel = function formatOptionLabel(_ref, _ref2) {
+  var label = _ref.label,
+    icon = _ref.icon,
+    description = _ref.description;
+  var context = _ref2.context;
+  return (0, _react.jsx)("div", {
+    css: itemWrapperStyles
+  }, (0, _react.jsx)("span", {
+    css: [iconWrapperStyles, context === 'menu' && iconWrapperMenuStyles]
+  }, typeof icon === 'string' ? (0, _react.jsx)(_avatar.default, {
+    src: icon,
+    size: getIconSize(context, description),
+    appearance: "square"
+  }) : icon), (0, _react.jsx)("div", {
+    style: {
+      paddingLeft: icon ? "var(--ds-space-100, 8px)" : 0
+    }
+  }, (0, _react.jsx)("p", null, label, description && context !== 'value' && (0, _react.jsx)("small", null, description))));
+};

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = String;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _form = require("@atlaskit/form");
+var _textarea = _interopRequireDefault(require("@atlaskit/textarea"));
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
+var _utils = require("../utils");
+var _excluded = ["onChange"];
+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 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.default.createElement(_form.Field, {
+    name: name,
+    label: label,
+    defaultValue: defaultValue || '',
+    isRequired: isRequired,
+    validate: function validate(value) {
+      return (0, _utils.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 = (0, _objectWithoutProperties2.default)(fieldProps, _excluded);
+      var options = field.options;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_textarea.default, (0, _extends2.default)({}, 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.default.createElement(_FieldMessages.default, {
+        error: error,
+        description: description
+      }));
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+      type: "text",
+      autoFocus: autoFocus,
+      onBlur: function onBlur() {
+        fieldProps.onBlur();
+        onFieldChange(name, meta.dirty);
+      },
+      placeholder: placeholder
+    })), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+      error: error,
+      description: description
+    }));
+  });
+}

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

@@ -0,0 +1,73 @@
+"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 _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
+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 tabWrapperStyles = (0, _react2.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 = (0, _react2.css)({
+  flexGrow: 1,
+  maxWidth: '100%'
+});
+var TabGroupImpl = function TabGroupImpl(props) {
+  var field = props.field,
+    renderPanel = props.renderPanel;
+  var fields = field.fields;
+  var _useState = (0, _react.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 = (0, _slicedToArray2.default)(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var onChange = _react.default.useCallback(function (index) {
+    setActiveTab(index);
+  }, [setActiveTab]);
+  return (0, _react2.jsx)("div", {
+    css: tabWrapperStyles
+  }, (0, _react2.jsx)(_tabs.default, {
+    id: "configPanelTabs-".concat(field.name),
+    onChange: onChange,
+    selected: activeTab
+  }, (0, _react2.jsx)(_tabs.TabList, null, fields.map(function (_ref) {
+    var name = _ref.name,
+      label = _ref.label;
+    return (0, _react2.jsx)(_tabs.Tab, {
+      key: "tab-".concat(name)
+    }, label);
+  })), fields.map(function (field) {
+    return (0, _react2.jsx)(_tabs.TabPanel, {
+      key: "panel-".concat(field.name)
+    }, (0, _react2.jsx)("div", {
+      css: panelWrapperStyles
+    }, renderPanel(field)));
+  })));
+};
+TabGroupImpl.displayName = 'TabGroup';
+var TabGroup = (0, _reactIntlNext.injectIntl)(TabGroupImpl);
+var _default = exports.default = TabGroup;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var _react = _interopRequireWildcard(require("react"));
+var _form = require("@atlaskit/form");
+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 _default(_ref) {
+  var errorMessage = _ref.errorMessage;
+  (0, _react.useEffect)(function () {
+    // eslint-disable-next-line no-console
+    console.error(errorMessage);
+  }, [errorMessage]);
+  return /*#__PURE__*/_react.default.createElement(_form.HelperMessage, null, errorMessage);
+}

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

@@ -0,0 +1,268 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UserSelect;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _extensions = require("@atlaskit/editor-common/extensions");
+var _form = require("@atlaskit/form");
+var _smartUserPicker = _interopRequireWildcard(require("@atlaskit/smart-user-picker"));
+var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
+var _utils = require("../utils");
+var _UnhandledType = _interopRequireDefault(require("./UnhandledType"));
+var _excluded = ["value"];
+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 _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; }
+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 = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_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 = (0, _objectWithoutProperties2.default)(formFieldProps, _excluded);
+  var isMultiple = field.isMultiple,
+    placeholder = field.placeholder;
+  function onChangeUnsafe(newValue) {
+    setUnsafeValue(newValue);
+    onChange(makeSafe(newValue));
+  }
+  (0, _react.useEffect)(function () {
+    var cancel = false;
+    function hydrate() {
+      return _hydrate.apply(this, arguments);
+    }
+    function _hydrate() {
+      _hydrate = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var hydrated;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return (0, _smartUserPicker.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.default.createElement(_smartUserPicker.default, (0, _extends2.default)({}, 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%"
+  }));
+}
+function UserSelect(_ref2) {
+  var name = _ref2.name,
+    autoFocus = _ref2.autoFocus,
+    extensionManifest = _ref2.extensionManifest,
+    field = _ref2.field,
+    onFieldChange = _ref2.onFieldChange;
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2.default)(_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;
+  (0, _react.useEffect)(function () {
+    var cancel = false;
+    function fetchContext() {
+      return _fetchContext.apply(this, arguments);
+    }
+    function _fetchContext() {
+      _fetchContext = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var _context2;
+        return _regenerator.default.wrap(function _callee2$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              _context3.next = 3;
+              return (0, _extensions.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.default.createElement(_form.Field, {
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    defaultValue: defaultValue,
+    validate: function validate(value) {
+      return (0, _utils.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.default.createElement(_UnhandledType.default, {
+        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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SafeSmartUserPicker, {
+      context: context,
+      field: field,
+      formFieldProps: fieldProps,
+      autoFocus: autoFocus || false,
+      onBlur: function onBlur() {
+        return onFieldChange(name, true);
+      },
+      onChange: onChange
+    }), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+      error: error,
+      description: description
+    }));
+  });
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.requiredIndicator = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _templateObject;
+var requiredIndicator = exports.requiredIndicator = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(_colors.R500, ")"));