@atlaskit/renderer 114.11.1 → 114.12.0

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

@@ -14,7 +14,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 const tableStickyPadding = 8;
 const modeSpecficStyles = {
   none: css({
@@ -30,7 +29,7 @@ const modeSpecficStyles = {
 
 // refactored based on fixedTableDivStaticStyles
 // TODO: DSP-4123 - Quality ticket
-const fixedTableDivStaticStylesNew = css({
+const fixedTableDivStaticStyles = css({
   zIndex: 'var(--ak-renderer-sticky-header-zindex)',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   [`& .${TableSharedCssClassName.TABLE_CONTAINER}, & .${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table`]: {
@@ -59,72 +58,7 @@ const fixedTableDivStaticStylesNew = css({
     zIndex: 'var(--ak-renderer-sticky-header-zindex)'
   }
 });
-
-// TODO: DSP-4123 - Quality ticket
-const fixedTableDivStaticStyles = (top, width, allowTableResizing) => {
-  let 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: ${top}px;`, {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: `${width}px`,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    zIndex: stickyHeaderZIndex,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    [`& .${TableSharedCssClassName.TABLE_CONTAINER}, & .${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: `${tableStickyPadding}px solid ${"var(--ds-surface, white)"}`,
-    background: "var(--ds-surface-overlay, white)",
-    boxShadow: `0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`}`,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    "div[data-expanded='false'] &": {
-      display: 'none'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    [`& .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.right-shadow::after, & .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.left-shadow::before`]: {
-      top: '0px',
-      height: '100%'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    "&.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
-    }
-  });
-};
-const FixedTableDivOld = props => {
-  const {
-    top,
-    wrapperWidth,
-    mode,
-    allowTableResizing
-  } = props;
-  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth, allowTableResizing), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
-  const attrs = {
-    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);
-};
-const FixedTableDivNew = props => {
+const FixedTableDiv = props => {
   const {
     top,
     wrapperWidth,
@@ -145,7 +79,7 @@ const 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: `${wrapperWidth}px`,
@@ -153,7 +87,6 @@ const FixedTableDivNew = props => {
     }
   }), props.children);
 };
-const FixedTableDiv = componentWithFG('platform_editor_emotion_refactor_renderer', FixedTableDivNew, FixedTableDivOld);
 export const StickyTable = ({
   top,
   left,

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);