@atlaskit/renderer 114.11.1 → 114.12.0

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

@@ -17,7 +17,6 @@ var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _table = require("./table");
 var _injectProps = require("../../utils/inject-props");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -42,7 +41,7 @@ var modeSpecficStyles = {
 
 // refactored based on fixedTableDivStaticStyles
 // TODO: DSP-4123 - Quality ticket
-var fixedTableDivStaticStylesNew = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+var fixedTableDivStaticStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   zIndex: 'var(--ak-renderer-sticky-header-zindex)'
 }, "& .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
   marginTop: 0,
@@ -60,59 +59,7 @@ var fixedTableDivStaticStylesNew = (0, _react2.css)((0, _defineProperty2.default
   // 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 = _editorSharedStyles.akEditorStickyHeaderZIndex;
-  }
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  return (0, _react2.css)(typeof top === 'number' && "top: ".concat(top, "px;"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    // 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(_styles.TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(_styles.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(_colors.N40A, ")"))), "div[data-expanded='false'] &", {
-    display: 'none'
-  }), "& .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.right-shadow::after, & .").concat(_styles.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 (0, _react2.jsx)("div", (0, _extends2.default)({}, 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,
@@ -131,7 +78,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"),
@@ -139,7 +86,6 @@ var FixedTableDivNew = function FixedTableDivNew(props) {
     }
   }), props.children);
 };
-var FixedTableDiv = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', FixedTableDivNew, FixedTableDivOld);
 var StickyTable = exports.StickyTable = function StickyTable(_ref) {
   var top = _ref.top,
     left = _ref.left,

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

@@ -31,7 +31,12 @@ var Table = exports.Table = /*#__PURE__*/_react.default.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 (!(0, _platformFeatureFlags.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/cjs/react/nodes/table.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isTableResizingEnabled = exports.isStickyScrollbarEnabled = exports.default = exports.TableProcessor = exports.TableContainer = void 0;
+exports.tableCanBeSticky = exports.shouldHeaderStick = exports.shouldHeaderPinBottom = exports.orderChildren = exports.isTableResizingEnabled = exports.isStickyScrollbarEnabled = exports.isHeaderRowEnabled = exports.hasRowspan = exports.getRefTop = exports.default = exports.addSortableColumn = exports.TableProcessor = exports.TableContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -29,6 +29,7 @@ var _sticky = require("./table/sticky");
 var _table = require("./table/table");
 var _appearance = require("../utils/appearance");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
+var _tableNew = require("./tableNew");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -44,7 +45,7 @@ var isStickyScrollbarEnabled = exports.isStickyScrollbarEnabled = function isSti
     exposure: true
   });
 };
-var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
+var orderChildren = exports.orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
   if (!tableOrderStatus || tableOrderStatus.order === _types.SortOrder.NO_ORDER) {
     return children;
   }
@@ -78,23 +79,23 @@ var orderChildren = function orderChildren(children, tableNode, smartCardStorage
     return elem.rowReact;
   });
 };
-var hasRowspan = function hasRowspan(row) {
+var hasRowspan = exports.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) {
+var getRefTop = exports.getRefTop = function getRefTop(refElement) {
   return Math.round(refElement.getBoundingClientRect().top);
 };
-var shouldHeaderStick = function shouldHeaderStick(scrollTop, tableTop, tableBottom, rowHeight) {
+var shouldHeaderStick = exports.shouldHeaderStick = function shouldHeaderStick(scrollTop, tableTop, tableBottom, rowHeight) {
   return tableTop <= scrollTop && !(tableBottom - rowHeight <= scrollTop);
 };
-var shouldHeaderPinBottom = function shouldHeaderPinBottom(scrollTop, tableBottom, rowHeight) {
+var shouldHeaderPinBottom = exports.shouldHeaderPinBottom = function shouldHeaderPinBottom(scrollTop, tableBottom, rowHeight) {
   return tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
 };
-var addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSorting) {
+var addSortableColumn = exports.addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSorting) {
   return _react.default.Children.map(rows, function (row, index) {
     if (index === 0) {
       return /*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(row), {
@@ -105,7 +106,7 @@ var addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSor
     return row;
   });
 };
-var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
+var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
   if (!rows.length) {
     return false;
   }
@@ -122,7 +123,7 @@ var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
     return node.type === _tableCell.TableHeader;
   });
 };
-var tableCanBeSticky = function tableCanBeSticky(node, children) {
+var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 // Ignored via go/ees005
@@ -592,7 +593,18 @@ var TableProcessor = exports.TableProcessor = /*#__PURE__*/function (_React$Comp
       return /*#__PURE__*/_react.default.createElement(TableContainer, this.props, orderedChildren);
     }
   }]);
-}(_react.default.Component);
+}(_react.default.Component); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+var TableWithShadowsAndContainerStyles = (0, _ui.overflowShadow)(_tableNew.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(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER),
+  useShadowObserver: true
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
   /**
    * The :scope is in reference to table container and we are selecting only
@@ -603,27 +615,43 @@ var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {
-  // Remember, `width` will be 0 during SSR
-  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if ((0, _platformFeatureFlags.fg)('platform-ssr-table-resize')) {
     var _props$columnWidths;
-    var width = _ref2.width;
-    var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.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.default.createElement(TableWithShadows, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(TableWithShadowsAndContainerStyles, props);
+    }
+    return /*#__PURE__*/_react.default.createElement(_tableNew.TableProcessorWithContainerStyles
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
+      var _props$columnWidths2;
+      var width = _ref2.width;
+      var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.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.default.createElement(TableWithShadows, (0, _extends2.default)({
+          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.default.createElement(TableProcessor, (0, _extends2.default)({
         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.default.createElement(TableProcessor, (0, _extends2.default)({
-      renderWidth: renderWidth
-      // Ignored via go/ees005
-      // eslint-disable-next-line react/jsx-props-no-spreading
-    }, props));
-  });
+    });
+  }
 };
 var _default = exports.default = (0, _SmartCardStorage.withSmartCardStorage)(TableWithWidth);