@atlaskit/renderer 91.0.0 → 93.0.0

package/dist/cjs/react/nodes/mediaSingle/index.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
 });
@@ -9,7 +11,9 @@ exports.getMediaContainerWidth = exports.default = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -25,6 +29,11 @@ var _useObservedWidth2 = require("../../hooks/use-observed-width");
 
 var _styles = require("./styles");
 
+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 DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 200;
 
@@ -198,7 +207,9 @@ var MediaSingle = function MediaSingle(props) {
       featureFlags: featureFlags
     });
 
-    return /*#__PURE__*/_react.default.createElement(_styles.ExtendedUIMediaSingle, {
+    var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [_styles.uiMediaSingleBaseStyles, _styles.uiMediaSingleLayoutStyles] : [_styles.uiMediaSingleBaseStyles];
+    return (0, _react2.jsx)(_ui.MediaSingle, {
+      css: uiMediaSingleStyles,
       handleMediaSingleRef: ref,
       layout: layout,
       width: width,
@@ -207,10 +218,10 @@ var MediaSingle = function MediaSingle(props) {
       containerWidth: containerWidth,
       pctWidth: pctWidth,
       fullWidthMode: isFullWidth
-    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
+    }, (0, _react2.jsx)(_react.Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
   };
 
-  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
+  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref3) {
     var width = _ref3.width,
         breakpoint = _ref3.breakpoint;
     return renderMediaSingle(width, breakpoint);

package/dist/cjs/react/nodes/mediaSingle/styles.js

@@ -5,18 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ExtendedUIMediaSingle = void 0;
+exports.uiMediaSingleLayoutStyles = exports.uiMediaSingleBaseStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
-var _ui = require("@atlaskit/editor-common/ui");
+var _templateObject, _templateObject2;
 
-var _templateObject;
-
-var ExtendedUIMediaSingle = (0, _styledComponents.default)(_ui.MediaSingle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " transition: all 0.1s linear;\n"])), function (_ref) {
-  var layout = _ref.layout;
-  return layout === 'full-width' || layout === 'wide' ? "\n  margin-left: 50%;\n  transform: translateX(-50%);\n  " : "";
-});
-exports.ExtendedUIMediaSingle = ExtendedUIMediaSingle;
+var uiMediaSingleBaseStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  transition: all 0.1s linear;\n"])));
+exports.uiMediaSingleBaseStyles = uiMediaSingleBaseStyles;
+var uiMediaSingleLayoutStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
+exports.uiMediaSingleLayoutStyles = uiMediaSingleLayoutStyles;

package/dist/cjs/react/nodes/panel.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _hint = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/hint"));
 
@@ -27,19 +29,27 @@ var _theme = require("@atlaskit/theme");
 
 var _icons = require("@atlaskit/editor-common/icons");
 
-var _templateObject;
-
-var PanelStyled = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
-  if (props['data-panel-type'] !== _adfSchema.PanelType.CUSTOM || !props.backgroundColor) {
-    return '';
-  } // Similar to mainDynamicStyles()
+var _templateObject, _templateObject2;
 
+var PanelStyled = function PanelStyled(props) {
+  var styles = function styles(themeProps) {
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+  };
 
-  return "\n      &[data-panel-type=".concat(_adfSchema.PanelType.CUSTOM, "] {\n        background-color: ").concat(props.backgroundColor, ";\n        ").concat((0, _theme.themed)({
-    dark: _styles.getPanelBackgroundDarkModeColors
-  }), ";\n      }\n    ");
-});
+  if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && props.backgroundColor) {
+    styles = function styles(themeProps) {
+      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      &[data-panel-type=", "] {\n        background-color: ", ";\n        ", ";\n      }\n    "])), _adfSchema.PanelType.CUSTOM, props.backgroundColor, (0, _theme.themed)({
+        dark: _styles.getPanelBackgroundDarkModeColors
+      })(themeProps));
+    };
+  }
+
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles
+  }, props), props.children);
+};
 
+PanelStyled.displayName = 'PanelStyled';
 var panelIcons = {
   info: _icons.PanelInfoIcon,
   success: _icons.PanelSuccessIcon,
@@ -66,7 +76,7 @@ var Panel = function Panel(props) {
   var getIcon = function getIcon() {
     if (panelType === _adfSchema.PanelType.CUSTOM) {
       if (panelIcon && providers) {
-        return /*#__PURE__*/_react.default.createElement(_emoji2.default, {
+        return (0, _react2.jsx)(_emoji2.default, {
           id: panelIconId,
           text: panelIconText,
           shortName: panelIcon,
@@ -78,7 +88,7 @@ var Panel = function Panel(props) {
     }
 
     var Icon = panelIcons[panelType];
-    return /*#__PURE__*/_react.default.createElement(Icon, {
+    return (0, _react2.jsx)(Icon, {
       label: "Panel ".concat(panelType)
     });
   };
@@ -87,13 +97,13 @@ var Panel = function Panel(props) {
     var icon = getIcon();
 
     if (icon) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
         className: _styles.PanelSharedCssClassName.icon
       }, icon);
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement(PanelStyled, {
+  return (0, _react2.jsx)(PanelStyled, {
     className: _styles.PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
     "data-panel-color": panelColor,
@@ -101,7 +111,7 @@ var Panel = function Panel(props) {
     "data-panel-icon-id": panelIconId,
     "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor
-  }, renderIcon(), /*#__PURE__*/_react.default.createElement("div", {
+  }, renderIcon(), (0, _react2.jsx)("div", {
     className: _styles.PanelSharedCssClassName.content
   }, children));
 };

package/dist/cjs/react/nodes/table/sticky.js

@@ -17,7 +17,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 _styles = require("@atlaskit/editor-common/styles");
 
@@ -29,6 +29,8 @@ var _utils = require("../../../utils");
 
 var _table = require("./table");
 
+var _injectProps = require("../../utils/inject-props");
+
 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); }
@@ -38,82 +40,88 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var N40A = colors.N40A;
 var tableStickyPadding = 8;
 exports.tableStickyPadding = tableStickyPadding;
+var fixedTableDivModeToPosition = {
+  stick: 'fixed',
+  'pin-bottom': 'absolute'
+};
 
-// creates a new stacking context and places the div in the same
-// position as the table
-var RelativeTableDiv = _styledComponents.default.div.attrs({
-  style: function style(_ref) {
-    var left = _ref.left,
-        top = _ref.top;
-    return {
-      left: left && left < 0 ? left : undefined,
-      top: top
-    };
+var getModeSpecificStyles = function getModeSpecificStyles(mode) {
+  if (mode === 'none') {
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      display: none;\n    "])));
+  } else {
+    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      position: ", ";\n    "])), fixedTableDivModeToPosition[mode]);
   }
-})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
-
-var FixedTableDiv = _styledComponents.default.div.attrs({
-  style: function style(_ref2) {
-    var top = _ref2.top,
-        wrapperWidth = _ref2.wrapperWidth;
-    return {
-      top: top,
-      width: wrapperWidth
-    };
-  }
-})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  ", ";\n  ", ";\n\n  z-index: ", ";\n\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid white;\n  background: white;\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), function (props) {
-  return props.mode === 'stick' ? 'position: fixed' : '';
-}, function (props) {
-  return props.mode === 'pin-bottom' ? 'position: absolute' : '';
-}, function (props) {
-  return props.mode === 'none' ? 'display: none' : '';
-}, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+};
+
+var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  top: ", "px;\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid white;\n  background: white;\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), top, width, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+};
+
+var FixedTableDiv = function FixedTableDiv(props) {
+  var top = props.top,
+      wrapperWidth = props.wrapperWidth,
+      mode = props.mode;
+  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
+  return (0, _react2.jsx)("div", {
+    css: fixedTableCss
+  }, props.children);
+};
 
 exports.FixedTableDiv = FixedTableDiv;
 
-var StyledDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
-
-var StickyTable = function StickyTable(_ref3) {
-  var top = _ref3.top,
-      left = _ref3.left,
-      mode = _ref3.mode,
-      shadowClassNames = _ref3.shadowClassNames,
-      innerRef = _ref3.innerRef,
-      wrapperWidth = _ref3.wrapperWidth,
-      tableWidth = _ref3.tableWidth,
-      isNumberColumnEnabled = _ref3.isNumberColumnEnabled,
-      layout = _ref3.layout,
-      children = _ref3.children,
-      columnWidths = _ref3.columnWidths,
-      renderWidth = _ref3.renderWidth,
-      allowDynamicTextSizing = _ref3.allowDynamicTextSizing,
-      rowHeight = _ref3.rowHeight;
-  return /*#__PURE__*/_react.default.createElement(RelativeTableDiv, {
-    left: left,
-    top: mode === 'pin-bottom' ? top : undefined
-  }, /*#__PURE__*/_react.default.createElement(FixedTableDiv, {
+var StickyTable = function StickyTable(_ref) {
+  var top = _ref.top,
+      left = _ref.left,
+      mode = _ref.mode,
+      shadowClassNames = _ref.shadowClassNames,
+      innerRef = _ref.innerRef,
+      wrapperWidth = _ref.wrapperWidth,
+      tableWidth = _ref.tableWidth,
+      isNumberColumnEnabled = _ref.isNumberColumnEnabled,
+      layout = _ref.layout,
+      children = _ref.children,
+      columnWidths = _ref.columnWidths,
+      renderWidth = _ref.renderWidth,
+      allowDynamicTextSizing = _ref.allowDynamicTextSizing,
+      rowHeight = _ref.rowHeight;
+  return (0, _react2.jsx)("div", {
+    css: {
+      left: left && left < 0 ? left : undefined,
+      top: mode === 'pin-bottom' ? top : undefined,
+      position: 'relative'
+    }
+  }, (0, _react2.jsx)(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
-  }, /*#__PURE__*/_react.default.createElement(StyledDiv, {
+  }, (0, _react2.jsx)("div", {
     className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames),
     "data-layout": layout,
     style: {
       width: tableWidth
     }
-  }, /*#__PURE__*/_react.default.createElement(StyledDiv, {
-    innerRef: innerRef,
+  }, (0, _react2.jsx)("div", {
+    ref: innerRef,
     className: "".concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER),
     style: {
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement(_table.Table, {
+  }, (0, _react2.jsx)(_table.Table, {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
     allowDynamicTextSizing: allowDynamicTextSizing
-  }, children)))));
+  },
+  /**
+   * @see https://product-fabric.atlassian.net/browse/ED-10235
+   * We pass prop 'invisible' to our table's children nodes meaning
+   * they exist inside of the 'invisible' duplicated table component that
+   * enables sticky headers.
+   */
+  (0, _injectProps.recursivelyInjectProps)(children, {
+    invisible: true
+  }))))));
 };
 
 exports.StickyTable = StickyTable;

package/dist/cjs/react/nodes/table.js

@@ -23,12 +23,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _ui = require("@atlaskit/editor-common/ui");
@@ -49,8 +45,6 @@ var _sticky = require("./table/sticky");
 
 var _table = require("./table/table");
 
-var _templateObject;
-
 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; } }
@@ -152,8 +146,6 @@ var tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 
-var MainTableContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
-
 var canUseLinelength = function canUseLinelength(appearance) {
   return appearance === 'full-page' || appearance === 'mobile';
 };
@@ -348,10 +340,10 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         columnWidths: columnWidths,
         rowHeight: this.headerRowHeight,
         allowDynamicTextSizing: allowDynamicTextSizing
-      }, [children && children[0]]), /*#__PURE__*/_react.default.createElement(MainTableContainer, {
+      }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames),
         "data-layout": layout,
-        innerRef: this.props.handleRef,
+        ref: this.props.handleRef,
         style: {
           width: tableWidth,
           left: left && left < 0 ? left : undefined

package/dist/cjs/react/utils/inject-props.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.recursivelyInjectProps = recursivelyInjectProps;
+
+var _react = _interopRequireDefault(require("react"));
+
+/**
+ * Helper function to recursively injects props to
+ * all valid children react nodes.
+ */
+function recursivelyInjectProps(children, propsToInject) {
+  return _react.default.Children.toArray(children).map(function (child) {
+    // Cannot add a prop to an invalid element, so just return the child
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
+    } // Recursive call if child has nested children
+
+
+    if (child.props.children) {
+      child = /*#__PURE__*/_react.default.cloneElement(child, {
+        children: recursivelyInjectProps(child.props.children, propsToInject)
+      });
+    } // Add props to react child node
+
+
+    return /*#__PURE__*/_react.default.cloneElement(child, propsToInject);
+  });
+}

package/dist/cjs/react/utils/performance/RenderTracking.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RenderTracking = RenderTracking;
+
+var _react = require("react");
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _enums = require("../../../analytics/enums");
+
+function RenderTracking(props) {
+  var debouncedHandleAnalyticsEvent = (0, _react.useMemo)(function () {
+    return (0, _debounce.default)(props.handleAnalyticsEvent, 500);
+  }, [props.handleAnalyticsEvent]);
+  (0, _utils.useComponentRenderTracking)({
+    onRender: function onRender(_ref) {
+      var renderCount = _ref.renderCount,
+          propsDifference = _ref.propsDifference,
+          componentId = _ref.componentId;
+
+      if (!renderCount) {
+        return;
+      }
+
+      debouncedHandleAnalyticsEvent({
+        action: props.action,
+        actionSubject: props.actionSubject,
+        attributes: {
+          count: renderCount,
+          propsDifference: propsDifference,
+          componentId: componentId
+        },
+        eventType: _enums.EVENT_TYPE.OPERATIONAL
+      });
+    },
+    propsDiffingOptions: {
+      enabled: true,
+      props: props.componentProps,
+      propsToIgnore: props.propsToIgnore,
+      useShallow: props.useShallow
+    },
+    zeroBasedCount: true
+  });
+  return null;
+}

package/dist/cjs/ui/Expand.js

@@ -17,7 +17,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -45,28 +45,49 @@ 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 Title = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", "px;\n  text-align: left;\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _constants.gridSize)() / 2);
+var titleStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", "px;\n  text-align: left;\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _constants.gridSize)() / 2);
 
-var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: 0;\n  padding-bottom: ", "px;\n"])), _ui.sharedExpandStyles.ContainerStyles, function (props) {
-  return props.expanded ? (0, _constants.gridSize)() : 0;
-});
+var Container = function Container(props) {
+  var paddingBottom = "".concat(props.expanded ? (0, _constants.gridSize)() : 0, "px");
 
-var TitleContainer = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: ", "px;\n  padding-bottom: ", "px;\n"])), _ui.sharedExpandStyles.TitleContainerStyles, (0, _constants.gridSize)(), function (props) {
-  return !props.expanded ? (0, _constants.gridSize)() : 0;
-});
+  var sharedContainerStyles = _ui.sharedExpandStyles.containerStyles(props);
+
+  var styles = function styles(themeProps) {
+    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(themeProps), paddingBottom);
+  };
+
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles
+  }, props), props.children);
+};
+
+var TitleContainer = function TitleContainer(props) {
+  var paddingBottom = "".concat(!props.expanded ? (0, _constants.gridSize)() : 0, "px");
+
+  var styles = function styles(themeProps) {
+    return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", "px;\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles(themeProps), (0, _constants.gridSize)(), paddingBottom);
+  };
+
+  return (0, _react2.jsx)("button", (0, _extends2.default)({
+    css: styles
+  }, props), props.children);
+};
 
 TitleContainer.displayName = 'TitleContainerButton';
 
-var ContentContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  padding-right: ", "px;\n  padding-left: ", "px;\n  visibility: ", ";\n"])), _ui.sharedExpandStyles.ContentStyles, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, function (props) {
-  return props.expanded ? 'visible' : 'hidden';
-});
+var ContentContainer = function ContentContainer(props) {
+  var sharedContentStyles = _ui.sharedExpandStyles.contentStyles(props);
 
-var ExpandLayoutWrapperWithRef = /*#__PURE__*/(0, _react.forwardRef)(function WithRef(props, ref) {
-  // @ts-ignore: incorrect innerRef typing
-  return /*#__PURE__*/_react.default.createElement(_ui.ExpandLayoutWrapper, (0, _extends2.default)({}, props, {
-    innerRef: ref
-  }));
-});
+  var visibility = props.expanded ? 'visible' : 'hidden';
+
+  var styles = function styles(themeProps) {
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", "px;\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles(themeProps), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, visibility);
+  };
+
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles
+  }, props), props.children);
+};
 
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
@@ -114,18 +135,18 @@ function Expand(_ref) {
   var handleBlur = (0, _react.useCallback)(function () {
     return setFocused(false);
   }, []);
-  return /*#__PURE__*/_react.default.createElement(Container, {
+  return (0, _react2.jsx)(Container, {
     "data-node-type": nodeType,
     "data-title": title,
     "data-expanded": expanded,
     expanded: expanded,
     focused: focused
-  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? /*#__PURE__*/_react.default.createElement(_activeHeaderIdProvider.ActiveHeaderIdConsumer, {
+  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdConsumer, {
     nestedHeaderIds: nestedHeaderIds,
     onNestedHeaderIdMatch: function onNestedHeaderIdMatch() {
       return setExpanded(true);
     }
-  }) : null, /*#__PURE__*/_react.default.createElement(TitleContainer, {
+  }) : null, (0, _react2.jsx)(TitleContainer, {
     onClick: function onClick(e) {
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
@@ -140,21 +161,24 @@ function Expand(_ref) {
     "aria-expanded": expanded,
     contentEditable: false,
     expanded: expanded
-  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  }, (0, _react2.jsx)(_tooltip.default, {
     content: label,
     position: "top",
-    tag: ExpandLayoutWrapperWithRef
-  }, /*#__PURE__*/_react.default.createElement(_ui.ExpandIconWrapper, {
+    tag: _ui.ExpandLayoutWrapperWithRef
+  }, (0, _react2.jsx)(_ui.ExpandIconWrapper, {
     expanded: expanded
-  }, /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
+  }, (0, _react2.jsx)(_chevronRight.default, {
     label: label
-  }))), /*#__PURE__*/_react.default.createElement(Title, {
+  }))), (0, _react2.jsx)("span", {
+    css: titleStyles,
     id: id
-  }, title || intl.formatMessage(_ui.expandMessages.expandDefaultTitle))), /*#__PURE__*/_react.default.createElement(ContentContainer, {
+  }, title || intl.formatMessage(_ui.expandMessages.expandDefaultTitle))), (0, _react2.jsx)(ContentContainer, {
     expanded: expanded
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _react2.jsx)("div", {
     className: "".concat(nodeType, "-content-wrapper")
-  }, /*#__PURE__*/_react.default.createElement(_ui.WidthProvider, null, /*#__PURE__*/_react.default.createElement(_ui.ClearNextSiblingMarginTop, null), children))));
+  }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
+    css: _ui.clearNextSiblingMarginTopStyle
+  }), children))));
 }
 
 var _default = (0, _reactIntlNext.injectIntl)(Expand);