@atlaskit/renderer 114.11.1 → 114.12.0

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

@@ -1,9 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _templateObject, _templateObject2;
-var _excluded = ["backgroundColor", "hasIcon"],
-  _excluded2 = ["backgroundColor", "hasIcon"];
+var _excluded = ["backgroundColor", "hasIcon"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -13,13 +10,12 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import TipIcon from '@atlaskit/icon/core/migration/lightbulb--editor-hint';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName, panelSharedStylesWithoutPrefix } from '@atlaskit/editor-common/panel';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import EmojiIcon from '@atlaskit/icon/core/migration/emoji--editor-emoji';
 import EmojiItem from './emoji';
 import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
-import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { fg } from '@atlaskit/platform-feature-flags';
 // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
@@ -160,29 +156,10 @@ var panelCustomBackground = css({
     }
   }
 });
-var PanelStyledOld = function PanelStyledOld(_ref) {
+var PanelStyled = function PanelStyled(_ref) {
   var backgroundColor = _ref.backgroundColor,
     hasIcon = _ref.hasIcon,
     props = _objectWithoutProperties(_ref, _excluded);
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- nested css mixins are violations
-  var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t&.", " {\n\t\t\t", "\n\n\t\t\t&[data-panel-type=", "] {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;');
-  if (props['data-panel-type'] === PanelType.CUSTOM && backgroundColor) {
-    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- nested css mixins are violations
-    styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t&.", " {\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t&[data-panel-type=", "] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\t", "\n\t\t\t}\n\t\t"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor, hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;');
-  }
-  return (
-    // eslint-disable-next-line
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    jsx("div", _extends({
-      css: styles
-    }, props), props.children)
-  );
-};
-var PanelStyledNew = function PanelStyledNew(_ref2) {
-  var backgroundColor = _ref2.backgroundColor,
-    hasIcon = _ref2.hasIcon,
-    props = _objectWithoutProperties(_ref2, _excluded2);
   var customBackgroundColor = backgroundColor ? hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor : undefined;
   return jsx("div", _extends({
     style:
@@ -195,7 +172,6 @@ var PanelStyledNew = function PanelStyledNew(_ref2) {
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);
 };
-var PanelStyled = componentWithFG('platform_editor_emotion_refactor_renderer', PanelStyledNew, PanelStyledOld);
 PanelStyled.displayName = 'PanelStyled';
 var panelIcons = {
   info: PanelInfoIcon,

package/dist/esm/react/nodes/table/colgroup.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -192,7 +193,9 @@ export var Colgroup = function Colgroup(props) {
   }
   return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    style: {
+    style: fg('platform-ssr-table-resize') ? undefined :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    {
       width: akEditorTableNumberColumnWidth
     },
     "data-test-id": 'num'
@@ -203,7 +206,7 @@ export var Colgroup = function Colgroup(props) {
       // eslint-disable-next-line react/no-array-index-key, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       React.createElement("col", {
         key: idx,
-        style: style
+        style: fg('platform-ssr-table-resize') ? undefined : style
       })
     );
   }));

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

@@ -17,7 +17,6 @@ import { N40A } from '@atlaskit/theme/colors';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
-import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 export var tableStickyPadding = 8;
 var modeSpecficStyles = {
   none: css({
@@ -33,7 +32,7 @@ var modeSpecficStyles = {
 
 // refactored based on fixedTableDivStaticStyles
 // TODO: DSP-4123 - Quality ticket
-var fixedTableDivStaticStylesNew = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+var fixedTableDivStaticStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
   zIndex: 'var(--ak-renderer-sticky-header-zindex)'
 }, "& .".concat(TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
   marginTop: 0,
@@ -51,59 +50,7 @@ var fixedTableDivStaticStylesNew = css(_defineProperty(_defineProperty(_definePr
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: 'var(--ak-renderer-sticky-header-zindex)'
 }));
-
-// TODO: DSP-4123 - Quality ticket
-var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, allowTableResizing) {
-  var stickyHeaderZIndex;
-  if (allowTableResizing) {
-    stickyHeaderZIndex = 13;
-  } else {
-    stickyHeaderZIndex = akEditorStickyHeaderZIndex;
-  }
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  return css(typeof top === 'number' && "top: ".concat(top, "px;"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: "".concat(width, "px"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    zIndex: stickyHeaderZIndex
-  }, "& .".concat(TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
-    marginTop: 0,
-    marginBottom: 0,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    tr: {
-      background: "var(--ds-surface, white)"
-    }
-  }), "borderTop", "".concat(tableStickyPadding, "px solid ", "var(--ds-surface, white)")), "background", "var(--ds-surface-overlay, white)"), "boxShadow", "0 6px 4px -4px ".concat("var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"))), "div[data-expanded='false'] &", {
-    display: 'none'
-  }), "& .".concat(TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.right-shadow::after, & .").concat(TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.left-shadow::before"), {
-    top: '0px',
-    height: '100%'
-  }), "&.fixed-table-div-custom-table-resizing[mode='stick']", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    zIndex: stickyHeaderZIndex
-  }));
-};
-var FixedTableDivOld = function FixedTableDivOld(props) {
-  var top = props.top,
-    wrapperWidth = props.wrapperWidth,
-    mode = props.mode,
-    allowTableResizing = props.allowTableResizing;
-  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth, allowTableResizing), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
-  var attrs = {
-    mode: mode
-  };
-  return jsx("div", _extends({}, attrs, {
-    "data-testid": "sticky-table-fixed"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : ''
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    css: fixedTableCss
-  }), props.children);
-};
-var FixedTableDivNew = function FixedTableDivNew(props) {
+var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
     wrapperWidth = props.wrapperWidth,
     mode = props.mode,
@@ -122,7 +69,7 @@ var FixedTableDivNew = function FixedTableDivNew(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : '',
-    css: [fixedTableDivStaticStylesNew, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]],
+    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]],
     style: {
       '--ak-renderer-sticky-header-zindex': stickyHeaderZIndex,
       width: "".concat(wrapperWidth, "px"),
@@ -130,7 +77,6 @@ var FixedTableDivNew = function FixedTableDivNew(props) {
     }
   }), props.children);
 };
-var FixedTableDiv = componentWithFG('platform_editor_emotion_refactor_renderer', FixedTableDivNew, FixedTableDivOld);
 export var StickyTable = function StickyTable(_ref) {
   var top = _ref.top,
     left = _ref.left,

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

@@ -24,7 +24,12 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     tableWidth = 'inherit';
   }
   if (rendererAppearance === 'comment' && !allowTableResizing) {
-    tableWidth = renderWidth;
+    // in the case we have css container stylings,
+    // we don't need to calculate width here as this
+    // is done via css
+    if (!fg('platform-ssr-table-resize')) {
+      tableWidth = renderWidth;
+    }
   }
   var tableLayout = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
   var tableDisplayMode = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.displayMode;

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

@@ -27,6 +27,7 @@ import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky'
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
+import { TableProcessorWithContainerStyles } from './tableNew';
 export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
   return isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
     exposure: true
@@ -37,7 +38,7 @@ export var isStickyScrollbarEnabled = function isStickyScrollbarEnabled(appearan
     exposure: true
   });
 };
-var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
+export var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
     return children;
   }
@@ -71,23 +72,23 @@ var orderChildren = function orderChildren(children, tableNode, smartCardStorage
     return elem.rowReact;
   });
 };
-var hasRowspan = function hasRowspan(row) {
+export var hasRowspan = function hasRowspan(row) {
   var hasRowspan = false;
   row.forEach(function (cell) {
     return hasRowspan = hasRowspan || cell.attrs.rowspan > 1;
   });
   return hasRowspan;
 };
-var getRefTop = function getRefTop(refElement) {
+export var getRefTop = function getRefTop(refElement) {
   return Math.round(refElement.getBoundingClientRect().top);
 };
-var shouldHeaderStick = function shouldHeaderStick(scrollTop, tableTop, tableBottom, rowHeight) {
+export var shouldHeaderStick = function shouldHeaderStick(scrollTop, tableTop, tableBottom, rowHeight) {
   return tableTop <= scrollTop && !(tableBottom - rowHeight <= scrollTop);
 };
-var shouldHeaderPinBottom = function shouldHeaderPinBottom(scrollTop, tableBottom, rowHeight) {
+export var shouldHeaderPinBottom = function shouldHeaderPinBottom(scrollTop, tableBottom, rowHeight) {
   return tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
 };
-var addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSorting) {
+export var addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSorting) {
   return React.Children.map(rows, function (row, index) {
     if (index === 0) {
       return /*#__PURE__*/React.cloneElement(React.Children.only(row), {
@@ -98,7 +99,7 @@ var addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSor
     return row;
   });
 };
-var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
+export var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
   if (!rows.length) {
     return false;
   }
@@ -115,7 +116,7 @@ var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
     return node.type === TableHeader;
   });
 };
-var tableCanBeSticky = function tableCanBeSticky(node, children) {
+export var tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 // Ignored via go/ees005
@@ -586,6 +587,19 @@ export var TableProcessor = /*#__PURE__*/function (_React$Component2) {
     }
   }]);
 }(React.Component);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var TableWithShadowsAndContainerStyles = overflowShadow(TableProcessorWithContainerStyles, {
+  /**
+   * The :scope is in reference to table container and we are selecting only
+   * direct children that match the table node wrapper selector, not their
+   * descendants.
+   */
+  overflowSelector: ":scope > .".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER),
+  useShadowObserver: true
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var TableWithShadows = overflowShadow(TableProcessor, {
   /**
    * The :scope is in reference to table container and we are selecting only
@@ -596,27 +610,43 @@ var TableWithShadows = overflowShadow(TableProcessor, {
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {
-  // Remember, `width` will be 0 during SSR
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (fg('platform-ssr-table-resize')) {
     var _props$columnWidths;
-    var width = _ref2.width;
-    var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
     var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
       return total + val;
     }, 0)) || 0;
     if (colWidthsSum || props.allowTableResizing) {
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
+      return /*#__PURE__*/React.createElement(TableWithShadowsAndContainerStyles, props);
+    }
+    return /*#__PURE__*/React.createElement(TableProcessorWithContainerStyles
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , props);
+  } else {
+    return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
+      var _props$columnWidths2;
+      var width = _ref2.width;
+      var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
+      var colWidthsSum = ((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce(function (total, val) {
+        return total + val;
+      }, 0)) || 0;
+      if (colWidthsSum || props.allowTableResizing) {
+        // Ignored via go/ees005
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
+          renderWidth: renderWidth
+        }, props));
+      }
+      // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
+      return /*#__PURE__*/React.createElement(TableProcessor, _extends({
         renderWidth: renderWidth
+        // Ignored via go/ees005
+        // eslint-disable-next-line react/jsx-props-no-spreading
       }, props));
-    }
-    // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
-    return /*#__PURE__*/React.createElement(TableProcessor, _extends({
-      renderWidth: renderWidth
-      // Ignored via go/ees005
-      // eslint-disable-next-line react/jsx-props-no-spreading
-    }, props));
-  });
+    });
+  }
 };
 export default withSmartCardStorage(TableWithWidth);