@atlaskit/renderer 120.2.0 → 120.2.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/renderer
 
+## 120.2.1
+
+### Patch Changes
+
+- [#190087](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190087)
+  [`3a050d48dee0c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a050d48dee0c) -
+  [ux] [CONFCLOUD-82045] Fixes regression where numbered take up too much space inside include
+  macros
+- [#190422](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190422)
+  [`232f2b56060b1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/232f2b56060b1) -
+  [ENGHEALTH-27833] Make table's with overflow scrolling a labelled focusable region that users can
+  tab to so keyboard users can navigate the scrollable region
+- Updated dependencies
+
 ## 120.2.0
 
 ### Minor Changes

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

@@ -73,7 +73,9 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled,
     allowTableResizing = props.allowTableResizing,
     isTopLevelRenderer = props.isTopLevelRenderer;
-  if (!columnWidths) {
+  if (!columnWidths || columnWidths.every(function (width) {
+    return width === 0;
+  }) && (0, _platformFeatureFlags.fg)('platform_editor_numbered_column_in_include')) {
     return [];
   }
   var tableColumnResized = isTableColumnResized(columnWidths);

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

@@ -14,7 +14,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
 var _styles = require("@atlaskit/editor-common/styles");
+var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -123,6 +125,41 @@ var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnable
     return node.type === _tableCell.TableHeader;
   });
 };
+/**
+ * This TableWrapper component was created to make sure that the aria-label can be
+ * internationalized without needing to add `intl` to the TableContainer.
+ *
+ * @param {TableWrapperProps} root0 - The props object.
+ * @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
+ * @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
+ * @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
+ * @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
+ * @returns The rendered table wrapper component.
+ * @example
+ * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
+ *   <Table>...</Table>
+ * </TableWrapper>
+ */
+var TableWrapper = function TableWrapper(_ref2) {
+  var children = _ref2.children,
+    wrapperRef = _ref2.wrapperRef,
+    onScroll = _ref2.onScroll,
+    stickyHeaders = _ref2.stickyHeaders;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
+    ref: wrapperRef,
+    onScroll: stickyHeaders ? onScroll : undefined
+    // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    role: "region",
+    "aria-label": formatMessage(_messages.tableMessages.tableScrollRegion)
+  }, children);
+};
 var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
@@ -515,7 +552,24 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         allowTableResizing: allowTableResizing
-      }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
+      }, [children && children[0]]), (0, _platformFeatureFlags.fg)('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/_react.default.createElement(TableWrapper, {
+        wrapperRef: this.wrapperRef,
+        onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
+        stickyHeaders: stickyHeaders
+      }, /*#__PURE__*/_react.default.createElement(_table.Table, {
+        innerRef: this.tableRef,
+        columnWidths: columnWidths,
+        layout: layout,
+        isNumberColumnEnabled: isNumberColumnEnabled,
+        renderWidth: renderWidth,
+        tableNode: tableNode,
+        rendererAppearance: rendererAppearance,
+        isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfTable: isInsideOfTable,
+        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+        allowTableResizing: allowTableResizing,
+        isPresentational: isPresentational
+      }, this.grabFirstRowRef(children))) : /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
         ref: this.wrapperRef,
@@ -673,9 +727,9 @@ var TableWithWidth = function TableWithWidth(props) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     , props);
   } else {
-    return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
+    return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
       var _props$columnWidths2;
-      var width = _ref2.width;
+      var width = _ref3.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;

package/dist/cjs/ui/Renderer/index.js

@@ -62,7 +62,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "120.1.11";
+var packageVersion = "120.2.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -61,7 +61,7 @@ const renderScaleDownColgroup = props => {
     allowTableResizing,
     isTopLevelRenderer
   } = props;
-  if (!columnWidths) {
+  if (!columnWidths || columnWidths.every(width => width === 0) && fg('platform_editor_numbered_column_in_include')) {
     return [];
   }
   const tableColumnResized = isTableColumnResized(columnWidths);

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { useIntl } from 'react-intl-next';
 import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { tableMessages } from '@atlaskit/editor-common/messages';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
@@ -92,6 +94,43 @@ export const isHeaderRowEnabled = rows => {
   }
   return children.every(node => node.type === TableHeader);
 };
+/**
+ * This TableWrapper component was created to make sure that the aria-label can be
+ * internationalized without needing to add `intl` to the TableContainer.
+ *
+ * @param {TableWrapperProps} root0 - The props object.
+ * @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
+ * @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
+ * @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
+ * @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
+ * @returns The rendered table wrapper component.
+ * @example
+ * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
+ *   <Table>...</Table>
+ * </TableWrapper>
+ */
+const TableWrapper = ({
+  children,
+  wrapperRef,
+  onScroll,
+  stickyHeaders
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
+    ref: wrapperRef,
+    onScroll: stickyHeaders ? onScroll : undefined
+    // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    role: "region",
+    "aria-label": formatMessage(tableMessages.tableScrollRegion)
+  }, children);
+};
 export const tableCanBeSticky = (node, children) => {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
@@ -456,7 +495,24 @@ export class TableContainer extends React.Component {
       tableNode: tableNode,
       rendererAppearance: rendererAppearance,
       allowTableResizing: allowTableResizing
-    }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
+    }, [children && children[0]]), fg('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/React.createElement(TableWrapper, {
+      wrapperRef: this.wrapperRef,
+      onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
+      stickyHeaders: stickyHeaders
+    }, /*#__PURE__*/React.createElement(Table, {
+      innerRef: this.tableRef,
+      columnWidths: columnWidths,
+      layout: layout,
+      isNumberColumnEnabled: isNumberColumnEnabled,
+      renderWidth: renderWidth,
+      tableNode: tableNode,
+      rendererAppearance: rendererAppearance,
+      isInsideOfBlockNode: isInsideOfBlockNode,
+      isInsideOfTable: isInsideOfTable,
+      isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+      allowTableResizing: allowTableResizing,
+      isPresentational: isPresentational
+    }, this.grabFirstRowRef(children))) : /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
       ref: this.wrapperRef,

package/dist/es2019/ui/Renderer/index.js

@@ -48,7 +48,7 @@ import { PortalContext } from './PortalContext';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "120.1.11";
+const packageVersion = "120.2.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -67,7 +67,9 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled,
     allowTableResizing = props.allowTableResizing,
     isTopLevelRenderer = props.isTopLevelRenderer;
-  if (!columnWidths) {
+  if (!columnWidths || columnWidths.every(function (width) {
+    return width === 0;
+  }) && fg('platform_editor_numbered_column_in_include')) {
     return [];
   }
   var tableColumnResized = isTableColumnResized(columnWidths);

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

@@ -12,7 +12,9 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
+import { useIntl } from 'react-intl-next';
 import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { tableMessages } from '@atlaskit/editor-common/messages';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
@@ -116,6 +118,41 @@ export var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
     return node.type === TableHeader;
   });
 };
+/**
+ * This TableWrapper component was created to make sure that the aria-label can be
+ * internationalized without needing to add `intl` to the TableContainer.
+ *
+ * @param {TableWrapperProps} root0 - The props object.
+ * @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
+ * @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
+ * @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
+ * @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
+ * @returns The rendered table wrapper component.
+ * @example
+ * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
+ *   <Table>...</Table>
+ * </TableWrapper>
+ */
+var TableWrapper = function TableWrapper(_ref2) {
+  var children = _ref2.children,
+    wrapperRef = _ref2.wrapperRef,
+    onScroll = _ref2.onScroll,
+    stickyHeaders = _ref2.stickyHeaders;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
+    ref: wrapperRef,
+    onScroll: stickyHeaders ? onScroll : undefined
+    // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    role: "region",
+    "aria-label": formatMessage(tableMessages.tableScrollRegion)
+  }, children);
+};
 export var tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
@@ -508,7 +545,24 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         allowTableResizing: allowTableResizing
-      }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
+      }, [children && children[0]]), fg('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/React.createElement(TableWrapper, {
+        wrapperRef: this.wrapperRef,
+        onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
+        stickyHeaders: stickyHeaders
+      }, /*#__PURE__*/React.createElement(Table, {
+        innerRef: this.tableRef,
+        columnWidths: columnWidths,
+        layout: layout,
+        isNumberColumnEnabled: isNumberColumnEnabled,
+        renderWidth: renderWidth,
+        tableNode: tableNode,
+        rendererAppearance: rendererAppearance,
+        isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfTable: isInsideOfTable,
+        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+        allowTableResizing: allowTableResizing,
+        isPresentational: isPresentational
+      }, this.grabFirstRowRef(children))) : /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
         ref: this.wrapperRef,
@@ -668,9 +722,9 @@ var TableWithWidth = function TableWithWidth(props) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     , props);
   } else {
-    return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
+    return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref3) {
       var _props$columnWidths2;
-      var width = _ref2.width;
+      var width = _ref3.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;

package/dist/esm/ui/Renderer/index.js

@@ -53,7 +53,7 @@ import { PortalContext } from './PortalContext';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "120.1.11";
+var packageVersion = "120.2.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "120.2.0",
+	"version": "120.2.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -68,7 +68,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.9.0",
+		"@atlaskit/editor-common": "^107.10.0",
 		"@atlaskit/link-provider": "^3.4.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -190,6 +190,9 @@
 		"platform_editor_nested_dnd_styles_changes": {
 			"type": "boolean"
 		},
+		"editor_enghealth_focusable_scrollable_tables": {
+			"type": "boolean"
+		},
 		"platform_editor_comments_api_manager": {
 			"type": "boolean"
 		},
@@ -270,6 +273,9 @@
 		},
 		"platform_editor_avatar_group_margin_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_numbered_column_in_include": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {