@atlaskit/renderer 114.11.2 → 114.12.0

package/dist/es2019/react/nodes/blockCard.js

@@ -12,6 +12,8 @@ import { getCardClickHandler } from '../utils/getCardClickHandler';
 import InlineCard from './inlineCard';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
+import { CardSSR } from '@atlaskit/smart-card/ssr';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N40 } from '@atlaskit/theme/colors';
 import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/utils';
 const datasourceContainerStyle = css({
@@ -109,6 +111,27 @@ export default function BlockCard(props) {
       url: url
     });
   }
+  let cardComponent;
+  if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url && fg('platform_ssr_smartlink_cards')) {
+    cardComponent = jsx(CardSSR, _extends({
+      appearance: "block",
+      platform: platform
+      // Ignored via go/ees005
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, cardProps, {
+      url: url,
+      onError: onError
+    }));
+  } else {
+    cardComponent = jsx(Card, _extends({
+      appearance: "block",
+      platform: platform
+      // Ignored via go/ees005
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, cardProps, {
+      onError: onError
+    }));
+  }
   return jsx(AnalyticsContext, {
     data: analyticsData
   }, jsx("div", {
@@ -121,12 +144,5 @@ export default function BlockCard(props) {
     unsupportedComponent: UnsupportedBlock
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, cardProps), jsx(Card, _extends({
-    appearance: "block",
-    platform: platform
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, cardProps, {
-    onError: onError
-  })))));
+  }, cardProps), cardComponent)));
 }

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

@@ -1,4 +1,5 @@
 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';
@@ -190,7 +191,9 @@ export const 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'
@@ -200,6 +203,6 @@ export const 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/es2019/react/nodes/table/table.js

@@ -25,7 +25,12 @@ export const Table = /*#__PURE__*/React.memo(({
     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;
+    }
   }
   const tableLayout = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
   const tableDisplayMode = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.displayMode;

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

@@ -16,13 +16,14 @@ 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 const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
   exposure: true
 });
 export const isStickyScrollbarEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) && editorExperiment('platform_renderer_table_sticky_scrollbar', true, {
   exposure: true
 });
-const orderChildren = (children, tableNode, smartCardStorage, tableOrderStatus) => {
+export const orderChildren = (children, tableNode, smartCardStorage, tableOrderStatus) => {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
     return children;
   }
@@ -53,17 +54,17 @@ const orderChildren = (children, tableNode, smartCardStorage, tableOrderStatus)
   }
   return sortedTable.map(elem => elem.rowReact);
 };
-const hasRowspan = row => {
+export const hasRowspan = row => {
   let hasRowspan = false;
   row.forEach(cell => hasRowspan = hasRowspan || cell.attrs.rowspan > 1);
   return hasRowspan;
 };
-const getRefTop = refElement => {
+export const getRefTop = refElement => {
   return Math.round(refElement.getBoundingClientRect().top);
 };
-const shouldHeaderStick = (scrollTop, tableTop, tableBottom, rowHeight) => tableTop <= scrollTop && !(tableBottom - rowHeight <= scrollTop);
-const shouldHeaderPinBottom = (scrollTop, tableBottom, rowHeight) => tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
-const addSortableColumn = (rows, tableOrderStatus, onSorting) => {
+export const shouldHeaderStick = (scrollTop, tableTop, tableBottom, rowHeight) => tableTop <= scrollTop && !(tableBottom - rowHeight <= scrollTop);
+export const shouldHeaderPinBottom = (scrollTop, tableBottom, rowHeight) => tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
+export const addSortableColumn = (rows, tableOrderStatus, onSorting) => {
   return React.Children.map(rows, (row, index) => {
     if (index === 0) {
       return /*#__PURE__*/React.cloneElement(React.Children.only(row), {
@@ -74,7 +75,7 @@ const addSortableColumn = (rows, tableOrderStatus, onSorting) => {
     return row;
   });
 };
-const isHeaderRowEnabled = rows => {
+export const isHeaderRowEnabled = rows => {
   if (!rows.length) {
     return false;
   }
@@ -91,7 +92,7 @@ const isHeaderRowEnabled = rows => {
   }
   return children.every(node => node.type === TableHeader);
 };
-const tableCanBeSticky = (node, children) => {
+export const tableCanBeSticky = (node, children) => {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 // Ignored via go/ees005
@@ -532,6 +533,19 @@ export class TableProcessor extends React.Component {
     return /*#__PURE__*/React.createElement(TableContainer, this.props, orderedChildren);
   }
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const 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 > .${TableSharedCssClassName.TABLE_NODE_WRAPPER}`,
+  useShadowObserver: true
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const TableWithShadows = overflowShadow(TableProcessor, {
   /**
    * The :scope is in reference to table container and we are selecting only
@@ -542,26 +556,40 @@ const TableWithShadows = overflowShadow(TableProcessor, {
   useShadowObserver: true
 });
 const TableWithWidth = props => {
-  // Remember, `width` will be 0 during SSR
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
-    width
-  }) => {
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (fg('platform-ssr-table-resize')) {
     var _props$columnWidths;
-    const renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
     const colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce((total, val) => 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, ({
+      width
+    }) => {
+      var _props$columnWidths2;
+      const renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
+      const colWidthsSum = ((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce((total, val) => 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);