@atlaskit/editor-core 163.0.0 → 164.0.2

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

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _ui = require("@atlaskit/editor-common/ui");
 
@@ -38,10 +38,9 @@ var _types = require("../../plugins/analytics/types");
 var _templateObject, _templateObject2;
 
 // helps adjusts position of popup
-var ColorPickerButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
+var colorPickerButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
 
-
-var ColorPickerWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
+var colorPickerWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
 
 var ColorPickerButton = function ColorPickerButton(props) {
   var _props$size, _props$size2;
@@ -91,13 +90,15 @@ var ColorPickerButton = function ColorPickerButton(props) {
       return;
     }
 
-    return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    return (0, _react2.jsx)(_ui.Popup, {
       target: buttonRef.current,
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10],
       alignX: props.alignX
-    }, /*#__PURE__*/_react.default.createElement(ColorPickerWrapper, null, /*#__PURE__*/_react.default.createElement(ColorPaletteWithListeners, {
+    }, (0, _react2.jsx)("div", {
+      css: colorPickerWrapper
+    }, (0, _react2.jsx)(ColorPaletteWithListeners, {
       palette: props.colorPalette,
       cols: props.cols,
       selectedColor: props.currentColor || null,
@@ -107,10 +108,12 @@ var ColorPickerButton = function ColorPickerButton(props) {
   };
 
   var title = props.title || '';
-  return /*#__PURE__*/_react.default.createElement(ColorPickerButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react2.jsx)("div", {
+    css: colorPickerButtonWrapper
+  }, (0, _react2.jsx)(_tooltip.default, {
     content: title,
     position: "top"
-  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+  }, (0, _react2.jsx)(_button.default, {
     ref: buttonRef,
     "aria-label": title,
     spacing: "compact",

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

@@ -52,8 +52,14 @@ function _validate(value, isRequired) {
 function handleOnChange(onChange, onFieldChange, event) {
   var _event$target;
 
-  onChange((event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.checked) || false);
-  onFieldChange(name, true);
+  onChange((event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.checked) || false); // Note: prior to bumping typescript to version 2.4.2 onFieldChange
+  // was being called with a global variable (which had a value of '')
+  // While this was not intended, the code still worked as expected.
+  // In typescript 2.4.2 accessing the global variable name has been
+  // deprecated, so this has been replaced with the value it was
+  // previously passing.
+
+  onFieldChange('', true);
 }
 
 function Checkbox(_ref) {
@@ -120,7 +126,8 @@ function Toggle(_ref3) {
       css: toggleLabel,
       id: id,
       htmlFor: id
-    }, label, isRequired ? (0, _react2.jsx)(_RequiredIndicator.RequiredIndicator, {
+    }, label, isRequired ? (0, _react2.jsx)("span", {
+      css: _RequiredIndicator.requiredIndicator,
       "aria-hidden": "true"
     }, "*") : null), (0, _react2.jsx)(_toggle.default, (0, _extends2.default)({}, restFieldProps, {
       onChange: function onChange(event) {

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,9 +15,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _checkbox = require("@atlaskit/checkbox");
 
@@ -33,17 +31,13 @@ var _excluded = ["onChange", "value"];
 
 var _templateObject;
 
-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 _validate(value, isRequired) {
   if (isRequired && !(value !== null && value !== void 0 && value.length)) {
     return _types.ValidationError.Required;
   }
 }
 
-var RequiredIndicator = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: #bf2600;\n"])));
+var requiredIndicator = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: #bf2600;\n"])));
 
 function CheckboxGroupInner(_ref) {
   var label = _ref.label,
@@ -69,7 +63,7 @@ function CheckboxGroupInner(_ref) {
     onFieldChange();
   }
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_form.Fieldset, {
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_form.Fieldset, {
     legend: label
   }, options.map(function (_ref2, i) {
     var optionLabel = _ref2.label,
@@ -80,7 +74,7 @@ function CheckboxGroupInner(_ref) {
       _onChange(optionValue, event.target.checked);
     };
 
-    return /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, (0, _extends2.default)({
+    return (0, _react2.jsx)(_checkbox.Checkbox, (0, _extends2.default)({
       key: i
     }, restFieldProps, {
       isRequired: false,
@@ -88,7 +82,7 @@ function CheckboxGroupInner(_ref) {
       isChecked: isChecked,
       onChange: onOptionChange
     }));
-  })), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+  })), (0, _react2.jsx)(_FieldMessages.default, {
     error: error,
     description: description
   }));
@@ -104,16 +98,16 @@ function CheckboxGroup(_ref3) {
       _field$isRequired = field.isRequired,
       isRequired = _field$isRequired === void 0 ? false : _field$isRequired,
       options = field.items;
-
-  var label = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, labelBase, isRequired ? /*#__PURE__*/_react.default.createElement(RequiredIndicator, {
+  var label = (0, _react2.jsx)(_react.Fragment, null, labelBase, isRequired ? (0, _react2.jsx)("span", {
+    css: requiredIndicator,
     "aria-hidden": "true"
-  }, " *") : null);
+  }, ' ', "*") : null);
 
   var _onFieldChange = (0, _react.useCallback)(function () {
     onFieldChange(name, true);
   }, [name, onFieldChange]);
 
-  return /*#__PURE__*/_react.default.createElement(_form.Field, {
+  return (0, _react2.jsx)(_form.Field, {
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
@@ -121,7 +115,7 @@ function CheckboxGroup(_ref3) {
       return _validate(value, isRequired);
     }
   }, function (props) {
-    return /*#__PURE__*/_react.default.createElement(CheckboxGroupInner, (0, _extends2.default)({
+    return (0, _react2.jsx)(CheckboxGroupInner, (0, _extends2.default)({
       label: label,
       description: description,
       options: options,

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

@@ -11,7 +11,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = require("react");
 
 var _form = require("@atlaskit/form");
 
@@ -19,8 +21,6 @@ var _common = require("../../../ui/ColorPalette/Palettes/common");
 
 var _utils = require("../utils");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _RequiredIndicator = require("./common/RequiredIndicator");
@@ -129,10 +129,8 @@ var colorPalette = [{
     border: _common.DEFAULT_BORDER_COLOR
   });
 });
-
-var ColorPickerWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: ", "px;\n  padding-right: ", "px;\n"])), 4 * (0, _constants.gridSize)(), (0, _constants.gridSize)());
-
-var ColorPickerLabel = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  margin-top: 0;\n"])), _typography.headingSizes.h400.size);
+var colorPickerWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: ", "px;\n  padding-right: ", "px;\n"])), 4 * (0, _constants.gridSize)(), (0, _constants.gridSize)());
+var colorPickerLabel = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  margin-top: 0;\n"])), _typography.headingSizes.h400.size);
 
 var ColorPicker = function ColorPicker(props) {
   var name = props.name,
@@ -153,7 +151,7 @@ var ColorPicker = function ColorPicker(props) {
     onFieldChange(name, currentColor !== colorValue);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_ColorPickerButton.default, {
+  return (0, _react.jsx)(_ColorPickerButton.default, {
     title: title,
     currentColor: currentColor,
     onChange: onColorChange,
@@ -175,7 +173,7 @@ var ColorPickerField = function ColorPickerField(_ref) {
   var label = field.label,
       defaultValue = field.defaultValue,
       isRequired = field.isRequired;
-  return /*#__PURE__*/_react.default.createElement(_form.Field, {
+  return (0, _react.jsx)(_form.Field, {
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
@@ -185,16 +183,21 @@ var ColorPickerField = function ColorPickerField(_ref) {
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
         error = _ref2.error;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ColorPickerWrapper, null, /*#__PURE__*/_react.default.createElement(ColorPickerLabel, null, label, isRequired && /*#__PURE__*/_react.default.createElement(_RequiredIndicator.RequiredIndicator, {
+    return (0, _react.jsx)(_react2.Fragment, null, (0, _react.jsx)("div", {
+      css: colorPickerWrapper
+    }, (0, _react.jsx)("label", {
+      css: colorPickerLabel
+    }, label, isRequired && (0, _react.jsx)("span", {
+      css: _RequiredIndicator.requiredIndicator,
       "aria-hidden": "true"
-    }, "*")), /*#__PURE__*/_react.default.createElement(ColorPicker, {
+    }, "*")), (0, _react.jsx)(ColorPicker, {
       name: name,
       title: label,
       currentColor: fieldProps.value,
       colorPalette: colorPalette,
       onChange: fieldProps.onChange,
       onFieldChange: onFieldChange
-    })), error && /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+    })), error && (0, _react.jsx)(_FieldMessages.default, {
       error: error,
       description: ""
     }));

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,11 +17,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _form = require("@atlaskit/form");
 
@@ -41,19 +39,13 @@ var _utils = require("../utils");
 
 var _templateObject, _templateObject2, _templateObject3;
 
-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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var HorizontalFields = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
-
-var HorizontalFieldWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-basis: 47%;\n"])));
-
-var Hidden = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n"])));
+var horizontalFields = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
+var horizontalFieldWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-basis: 47%;\n"])));
+var hidden = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n"])));
 
 var getFromDefaultValue = function getFromDefaultValue(field, attribute) {
   if (field.defaultValue) {
@@ -68,9 +60,10 @@ var DateField = function DateField(_ref) {
       onFieldChange = _ref.onFieldChange,
       intl = _ref.intl,
       isRequired = _ref.isRequired;
-  return /*#__PURE__*/_react.default.createElement(HorizontalFieldWrapper, {
+  return (0, _react2.jsx)("div", {
+    css: horizontalFieldWrapper,
     key: fieldName
-  }, /*#__PURE__*/_react.default.createElement(_form.Field, {
+  }, (0, _react2.jsx)(_form.Field, {
     name: "".concat(scope, ".").concat(fieldName),
     label: intl.formatMessage(_messages.messages[fieldName]),
     defaultValue: getFromDefaultValue(parentField, fieldName),
@@ -83,13 +76,13 @@ var DateField = function DateField(_ref) {
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
         error = _ref2.error;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_datetimePicker.DatePicker, (0, _extends2.default)({}, fieldProps, {
+    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
-    })), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+    })), (0, _react2.jsx)(_FieldMessages.default, {
       error: error
     }));
   }));
@@ -121,16 +114,17 @@ var DateRange = function DateRange(_ref3) {
     // get the most up to date value after the form has been rendered
     onFieldChange(name, true);
   }, [currentValue, onFieldChange, name]);
-
-  var element = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Hidden, null, /*#__PURE__*/_react.default.createElement(_form.Field, {
+  var element = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
+    css: hidden
+  }, (0, _react2.jsx)(_form.Field, {
     name: "".concat(name, ".type"),
     defaultValue: 'date-range'
   }, function (_ref4) {
     var fieldProps = _ref4.fieldProps;
-    return /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+    return (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
       type: "hidden"
     }));
-  })), /*#__PURE__*/_react.default.createElement(_form.Field, {
+  })), (0, _react2.jsx)(_form.Field, {
     name: "".concat(name, ".value"),
     label: field.label,
     defaultValue: currentValue,
@@ -141,41 +135,44 @@ var DateRange = function DateRange(_ref3) {
   }, function (_ref5) {
     var fieldProps = _ref5.fieldProps,
         error = _ref5.error;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_radio.RadioGroup, (0, _extends2.default)({}, fieldProps, {
+    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);
       }
-    })), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+    })), (0, _react2.jsx)(_FieldMessages.default, {
       error: error
     }));
-  }), currentValue !== 'custom' ? /*#__PURE__*/_react.default.createElement(Hidden, null, /*#__PURE__*/_react.default.createElement(_form.Field, {
+  }), currentValue !== 'custom' ? (0, _react2.jsx)("div", {
+    css: hidden
+  }, (0, _react2.jsx)(_form.Field, {
     name: "".concat(name, ".from"),
     defaultValue: currentValue
   }, function (_ref6) {
     var fieldProps = _ref6.fieldProps;
-    return /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+    return (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
       type: "hidden"
     }));
-  })) : /*#__PURE__*/_react.default.createElement(HorizontalFields, null, /*#__PURE__*/_react.default.createElement(DateField, {
+  })) : (0, _react2.jsx)("div", {
+    css: horizontalFields
+  }, (0, _react2.jsx)(DateField, {
     scope: name,
     parentField: field,
     fieldName: "from",
     onFieldChange: onFieldChange,
     intl: intl,
     isRequired: field.isRequired
-  }), /*#__PURE__*/_react.default.createElement(DateField, {
+  }), (0, _react2.jsx)(DateField, {
     scope: name,
     parentField: field,
     fieldName: "to",
     onFieldChange: onFieldChange,
     intl: intl,
     isRequired: field.isRequired
-  })), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+  })), (0, _react2.jsx)(_FieldMessages.default, {
     description: field.description
   }));
-
   return element;
 };
 

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ExpandControl = exports.ExpandContainer = void 0;
+exports.expandControl = exports.expandContainer = exports.default = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -15,9 +15,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -37,49 +37,50 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var ExpandContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-bottom: 1px solid ", ";\n"])), _colors.N40);
-
-exports.ExpandContainer = ExpandContainer;
-
-var ExpandControl = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  padding-right: ", "px;\n"])), (0, _constants.gridSize)() * 6, (0, _constants.gridSize)());
-
-exports.ExpandControl = ExpandControl;
-
-var ChevronContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  & > button {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3);
-
-var LabelContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  align-items: center;\n  display: flex;\n  font-weight: 500;\n"])));
-
-var ExpandContentContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n  margin-top: -", "px;\n"])), function (_ref) {
-  var isHidden = _ref.isHidden;
-  return isHidden ? 'none' : 'block';
-}, _constants.gridSize);
+var expandContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-bottom: 1px solid ", ";\n"])), _colors.N40);
+exports.expandContainer = expandContainer;
+var expandControl = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  padding-right: ", "px;\n"])), (0, _constants.gridSize)() * 6, (0, _constants.gridSize)());
+exports.expandControl = expandControl;
+var chevronContainer = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  & > button {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3);
+var labelContainer = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  align-items: center;\n  display: flex;\n  font-weight: 500;\n"])));
 
-ExpandContentContainer.displayName = 'ExpandContentContainer';
+var expandContentContainer = function expandContentContainer(isHidden) {
+  return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n  margin-top: -", "px;\n"])), isHidden ? 'none' : 'block', (0, _constants.gridSize)());
+};
 
-function Expand(_ref2) {
-  var field = _ref2.field,
-      children = _ref2.children,
-      _ref2$isExpanded = _ref2.isExpanded,
-      isExpanded = _ref2$isExpanded === void 0 ? false : _ref2$isExpanded,
-      intl = _ref2.intl;
+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 /*#__PURE__*/_react.default.createElement(ExpandContainer, null, /*#__PURE__*/_react.default.createElement(ExpandControl, null, /*#__PURE__*/_react.default.createElement(LabelContainer, null, field.label), /*#__PURE__*/_react.default.createElement(ChevronContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+  return (0, _react2.jsx)("div", {
+    css: expandContainer
+  }, (0, _react2.jsx)("div", {
+    css: expandControl
+  }, (0, _react2.jsx)("div", {
+    css: labelContainer
+  }, field.label), (0, _react2.jsx)("div", {
+    css: chevronContainer
+  }, (0, _react2.jsx)(_button.default, {
     onClick: function onClick() {
       setExpanded(!expanded);
     },
     testId: "form-expand-toggle",
-    iconBefore: expanded ? /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+    iconBefore: expanded ? (0, _react2.jsx)(_chevronDown.default, {
       label: intl.formatMessage(_messages.messages.collapse)
-    }) : /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
+    }) : (0, _react2.jsx)(_chevronRight.default, {
       label: intl.formatMessage(_messages.messages.expand)
     })
-  }))), /*#__PURE__*/_react.default.createElement(ExpandContentContainer, {
-    isHidden: !expanded
+  }))), (0, _react2.jsx)("div", {
+    "data-testid": "expand-content-container",
+    css: expandContentContainer(!expanded)
   }, children));
 }
 

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,9 +29,9 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -53,6 +55,10 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject, _templateObject2;
 
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -61,7 +67,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var ActionsWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  padding-top: ", "px;\n"])), _colors.N40A, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2);
+var actionsWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  padding-top: ", "px;\n"])), _colors.N40A, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2);
 
 var populateFromParameters = function populateFromParameters(parameters, fields) {
   if (Object.keys(parameters).length) {
@@ -240,7 +246,7 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isAdding ? /*#__PURE__*/_react.default.createElement(_select.default, {
+      return (0, _react2.jsx)(_react.default.Fragment, null, isAdding ? (0, _react2.jsx)(_select.default, {
         testId: "field-picker",
         defaultMenuIsOpen: true,
         autoFocus: true,
@@ -251,10 +257,10 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
             _this.onSelectItem(option);
           }
         }
-      }) : /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      }) : (0, _react2.jsx)(_customThemeButton.default, {
         testId: "add-more",
         appearance: "subtle",
-        iconBefore: /*#__PURE__*/_react.default.createElement(_addCircle.default, {
+        iconBefore: (0, _react2.jsx)(_addCircle.default, {
           size: "small",
           label: intl.formatMessage(_messages.messages.addField)
         }),
@@ -291,9 +297,9 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
           currentParameters = _this$state3.currentParameters,
           visibleFields = _this$state3.visibleFields;
       var children = this.renderActions();
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, error && /*#__PURE__*/_react.default.createElement(FieldsetError, {
+      return (0, _react2.jsx)(_react.Fragment, null, error && (0, _react2.jsx)(FieldsetError, {
         message: error
-      }), /*#__PURE__*/_react.default.createElement("div", null, options.showTitle && /*#__PURE__*/_react.default.createElement("h5", null, label), /*#__PURE__*/_react.default.createElement(_FormContent.default, {
+      }), (0, _react2.jsx)("div", null, options.showTitle && (0, _react2.jsx)("h5", null, label), (0, _react2.jsx)(_FormContent.default, {
         fields: selectedFields,
         parentName: name,
         extensionManifest: extensionManifest,
@@ -302,8 +308,9 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
         onClickRemove: this.onClickRemove,
         onFieldChange: onFieldChange,
         firstVisibleFieldName: firstVisibleFieldName
-      }), children && /*#__PURE__*/_react.default.createElement(ActionsWrapper, {
-        testId: "fieldset-actions"
+      }), children && (0, _react2.jsx)("div", {
+        css: actionsWrapper,
+        "data-testId": "fieldset-actions"
       }, children)));
     }
   }]);
@@ -312,12 +319,14 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
 
 function FieldsetError(_ref) {
   var message = _ref.message;
-  return /*#__PURE__*/_react.default.createElement(SectionMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_sectionMessage.default, {
+  return (0, _react2.jsx)("div", {
+    css: sectionMessageWrapper
+  }, (0, _react2.jsx)(_sectionMessage.default, {
     appearance: "error"
-  }, /*#__PURE__*/_react.default.createElement("p", null, message)));
+  }, (0, _react2.jsx)("p", null, message)));
 }
 
-var SectionMessageWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 24px;\n"])));
+var sectionMessageWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 24px;\n"])));
 
 var _default = (0, _reactIntlNext.injectIntl)(FieldsetField);