@atlaskit/renderer 124.1.7 → 124.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/renderer
 
+## 124.2.0
+
+### Minor Changes
+
+- [`eed7bfad5be2c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eed7bfad5be2c) -
+  Lazy load expand content on opening an expand element
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 124.1.7
 
 ### Patch Changes

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

@@ -153,7 +153,7 @@ var TableWrapper = function TableWrapper(_ref2) {
     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, @atlassian/a11y/no-noninteractive-tabindex
+    // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0,
     role: "region",

package/dist/cjs/ui/Expand.js

@@ -17,6 +17,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
 var _chevronRight2 = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
 var _reactIntlNext = require("react-intl-next");
 var _events = require("../analytics/events");
@@ -135,6 +136,16 @@ var clearNextSiblingMarginTopStyle = (0, _react.css)({
     marginTop: '0 !important'
   }
 });
+
+// Lazy-loaded children component
+var LazyChildren = /*#__PURE__*/(0, _react2.lazy)(function () {
+  return Promise.resolve({
+    default: function _default(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, children);
+    }
+  });
+});
 var Container = function Container(props) {
   return (0, _react.jsx)("div", (0, _extends2.default)({
     css: [containerStyles, props['data-node-type'] === 'expand' && containerStylesDataNodeTypeExpand, props.expanded && containerStylesExpanded, props.focused && containerStylesFocused]
@@ -178,15 +189,15 @@ function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
     eventType: _analytics.EVENT_TYPE.TRACK
   });
 }
-function Expand(_ref) {
-  var title = _ref.title,
-    children = _ref.children,
-    nodeType = _ref.nodeType,
-    intl = _ref.intl,
-    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
-    localId = _ref.localId,
-    nestedHeaderIds = _ref.nestedHeaderIds,
-    rendererAppearance = _ref.rendererAppearance;
+function Expand(_ref2) {
+  var title = _ref2.title,
+    children = _ref2.children,
+    nodeType = _ref2.nodeType,
+    intl = _ref2.intl,
+    fireAnalyticsEvent = _ref2.fireAnalyticsEvent,
+    localId = _ref2.localId,
+    nestedHeaderIds = _ref2.nestedHeaderIds,
+    rendererAppearance = _ref2.rendererAppearance;
   var _React$useState = _react2.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     expanded = _React$useState2[0],
@@ -264,6 +275,8 @@ function Expand(_ref) {
     className: "".concat(nodeType, "-content-wrapper")
   }, (0, _react.jsx)(_ui.WidthProvider, null, (0, _react.jsx)("div", {
     css: clearNextSiblingMarginTopStyle
-  }), children))));
+  }), (0, _platformFeatureFlags.fg)('hot-121622_lazy_load_expand_content') ? expanded ? (0, _react.jsx)(_react2.Suspense, {
+    fallback: (0, _react.jsx)("div", null, "Loading...")
+  }, (0, _react.jsx)(LazyChildren, null, children)) : null : children))));
 }
-var _default = exports.default = (0, _reactIntlNext.injectIntl)(Expand);
+var _default2 = exports.default = (0, _reactIntlNext.injectIntl)(Expand);

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

@@ -68,7 +68,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.1.6";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -124,7 +124,7 @@ const TableWrapper = ({
     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, @atlassian/a11y/no-noninteractive-tabindex
+    // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0,
     role: "region",

package/dist/es2019/ui/Expand.js

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, Suspense, lazy } from 'react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { ExpandIconWrapper, ExpandLayoutWrapperWithRef, expandMessages, WidthProvider } from '@atlaskit/editor-common/ui';
@@ -13,6 +13,7 @@ import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset } fr
 import { default as ChevronRightIconLegacy } from '@atlaskit/icon/glyph/chevron-right';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
+import { fg } from '@atlaskit/platform-feature-flags';
 import _uniqueId from 'lodash/uniqueId';
 import { injectIntl } from 'react-intl-next';
 import { MODE, PLATFORM } from '../analytics/events';
@@ -123,6 +124,17 @@ const clearNextSiblingMarginTopStyle = css({
     marginTop: '0 !important'
   }
 });
+
+// Lazy-loaded children component
+const LazyChildren = /*#__PURE__*/lazy(() => {
+  return Promise.resolve({
+    default: ({
+      children
+    }) => {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+    }
+  });
+});
 const Container = props => {
   return jsx("div", _extends({
     css: [containerStyles, props['data-node-type'] === 'expand' && containerStylesDataNodeTypeExpand, props.expanded && containerStylesExpanded, props.focused && containerStylesFocused]
@@ -244,6 +256,8 @@ function Expand({
     className: `${nodeType}-content-wrapper`
   }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
-  }), children))));
+  }), fg('hot-121622_lazy_load_expand_content') ? expanded ? jsx(Suspense, {
+    fallback: jsx("div", null, "Loading...")
+  }, jsx(LazyChildren, null, children)) : null : children))));
 }
 export default injectIntl(Expand);

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

@@ -54,7 +54,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 const TABLE_WIDTH_INFO_TIMEOUT = 10000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "124.1.6";
+const packageVersion = "0.0.0-development";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -146,7 +146,7 @@ var TableWrapper = function TableWrapper(_ref2) {
     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, @atlassian/a11y/no-noninteractive-tabindex
+    // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0,
     role: "region",

package/dist/esm/ui/Expand.js

@@ -8,7 +8,7 @@ var _excluded = ["expanded"];
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, Suspense, lazy } from 'react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { ExpandIconWrapper, ExpandLayoutWrapperWithRef, expandMessages, WidthProvider } from '@atlaskit/editor-common/ui';
@@ -16,6 +16,7 @@ import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset } fr
 import { default as ChevronRightIconLegacy } from '@atlaskit/icon/glyph/chevron-right';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
+import { fg } from '@atlaskit/platform-feature-flags';
 import _uniqueId from 'lodash/uniqueId';
 import { injectIntl } from 'react-intl-next';
 import { MODE, PLATFORM } from '../analytics/events';
@@ -126,6 +127,16 @@ var clearNextSiblingMarginTopStyle = css({
     marginTop: '0 !important'
   }
 });
+
+// Lazy-loaded children component
+var LazyChildren = /*#__PURE__*/lazy(function () {
+  return Promise.resolve({
+    default: function _default(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+    }
+  });
+});
 var Container = function Container(props) {
   return jsx("div", _extends({
     css: [containerStyles, props['data-node-type'] === 'expand' && containerStylesDataNodeTypeExpand, props.expanded && containerStylesExpanded, props.focused && containerStylesFocused]
@@ -169,15 +180,15 @@ function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
     eventType: EVENT_TYPE.TRACK
   });
 }
-function Expand(_ref) {
-  var title = _ref.title,
-    children = _ref.children,
-    nodeType = _ref.nodeType,
-    intl = _ref.intl,
-    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
-    localId = _ref.localId,
-    nestedHeaderIds = _ref.nestedHeaderIds,
-    rendererAppearance = _ref.rendererAppearance;
+function Expand(_ref2) {
+  var title = _ref2.title,
+    children = _ref2.children,
+    nodeType = _ref2.nodeType,
+    intl = _ref2.intl,
+    fireAnalyticsEvent = _ref2.fireAnalyticsEvent,
+    localId = _ref2.localId,
+    nestedHeaderIds = _ref2.nestedHeaderIds,
+    rendererAppearance = _ref2.rendererAppearance;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     expanded = _React$useState2[0],
@@ -255,6 +266,8 @@ function Expand(_ref) {
     className: "".concat(nodeType, "-content-wrapper")
   }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
-  }), children))));
+  }), fg('hot-121622_lazy_load_expand_content') ? expanded ? jsx(Suspense, {
+    fallback: jsx("div", null, "Loading...")
+  }, jsx(LazyChildren, null, children)) : null : children))));
 }
 export default injectIntl(Expand);

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

@@ -59,7 +59,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.1.6";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "124.1.7",
+	"version": "124.2.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,7 +57,7 @@
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.6.0",
+		"@atlaskit/tmp-editor-statsig": "^13.9.0",
 		"@atlaskit/tokens": "^6.4.0",
 		"@atlaskit/tooltip": "^20.5.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -71,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.9.0",
+		"@atlaskit/editor-common": "^110.10.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -89,8 +89,8 @@
 		"@atlaskit/media-core": "^37.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-helpers": "^39.0.0",
-		"@atlaskit/mention": "^24.2.0",
-		"@atlaskit/modal-dialog": "^14.4.0",
+		"@atlaskit/mention": "^24.3.0",
+		"@atlaskit/modal-dialog": "^14.5.0",
 		"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-958ca0ab9d.patch",
 		"@atlaskit/profilecard": "^24.18.0",
 		"@atlaskit/util-data-test": "^18.3.0",
@@ -250,6 +250,9 @@
 		},
 		"platform_editor_text_highlight_padding": {
 			"type": "boolean"
+		},
+		"hot-121622_lazy_load_expand_content": {
+			"type": "boolean"
 		}
 	}
 }