@atlaskit/renderer 124.5.2 → 124.6.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/renderer
 
+## 124.6.0
+
+### Minor Changes
+
+- [`dde0a58b7f0e5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dde0a58b7f0e5) -
+  Improve expand lazy loading children to render on initial open and remain in document
+
+## 124.5.3
+
+### Patch Changes
+
+- [`e22968790f2b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e22968790f2b5) -
+  [ux] [EDITOR-2374] prevent style overrides on codemarks in excerpts
+- Updated dependencies
+
 ## 124.5.2
 
 ### Patch Changes

package/dist/cjs/ui/Expand.js

@@ -212,6 +212,10 @@ function Expand(_ref2) {
     _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
     focused = _React$useState4[0],
     setFocused = _React$useState4[1];
+  var _React$useState5 = _react2.default.useState(false),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    hasLoadedChildren = _React$useState6[0],
+    setHasLoadedChildren = _React$useState6[1];
   var isMobile = false;
   var label = intl.formatMessage(expanded ? _ui.expandMessages.collapseNode : _ui.expandMessages.expandNode);
   var _useRef = (0, _react2.useRef)((0, _uniqueId2.default)('expand-title-')),
@@ -235,13 +239,21 @@ function Expand(_ref2) {
   }, nestedHeaderIds && nestedHeaderIds.length > 0 ? (0, _react.jsx)(_activeHeaderIdProvider.ActiveHeaderIdConsumer, {
     nestedHeaderIds: nestedHeaderIds,
     onNestedHeaderIdMatch: function onNestedHeaderIdMatch() {
-      return setExpanded(true);
+      if (!hasLoadedChildren) {
+        setHasLoadedChildren(true);
+      }
+      setExpanded(true);
     }
   }) : null, (0, _react.jsx)(TitleContainer, {
     onClick: function onClick(e) {
       e.preventDefault();
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
+
+      // Mark children as loaded when expanding for the first time
+      if (!expanded && !hasLoadedChildren) {
+        setHasLoadedChildren(true);
+      }
       setExpanded(!expanded);
       e.persist();
       // @ts-ignore detail doesn't exist on type
@@ -283,7 +295,7 @@ function Expand(_ref2) {
     className: "".concat(nodeType, "-content-wrapper")
   }, (0, _react.jsx)(_ui.WidthProvider, null, (0, _react.jsx)("div", {
     css: clearNextSiblingMarginTopStyle
-  }), (0, _platformFeatureFlags.fg)('hot-121622_lazy_load_expand_content') ? expanded ? (0, _react.jsx)(_react2.Suspense, {
+  }), (0, _platformFeatureFlags.fg)('hot-121622_lazy_load_expand_content') ? hasLoadedChildren ? (0, _react.jsx)(_react2.Suspense, {
     fallback: (0, _react.jsx)("div", null, "Loading...")
   }, (0, _react.jsx)(LazyChildren, null, children)) : null : children))));
 }

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

@@ -717,7 +717,7 @@ var codeMarkSharedStyles = (0, _react.css)({
 });
 var extensionStyle = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-renderer-extension :not([data-inline-card-lozenge] *)': {
+  '.ak-renderer-extension :not([data-inline-card-lozenge] *, code)': {
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: 'var(--ak-renderer-base-font-size)'
   }

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.5.1";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/ui/Expand.js

@@ -198,6 +198,7 @@ function Expand({
 }) {
   const [expanded, setExpanded] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
+  const [hasLoadedChildren, setHasLoadedChildren] = React.useState(false);
   const isMobile = false;
   const label = intl.formatMessage(expanded ? expandMessages.collapseNode : expandMessages.expandNode);
   const {
@@ -217,12 +218,22 @@ function Expand({
     focused: focused
   }, nestedHeaderIds && nestedHeaderIds.length > 0 ? jsx(ActiveHeaderIdConsumer, {
     nestedHeaderIds: nestedHeaderIds,
-    onNestedHeaderIdMatch: () => setExpanded(true)
+    onNestedHeaderIdMatch: () => {
+      if (!hasLoadedChildren) {
+        setHasLoadedChildren(true);
+      }
+      setExpanded(true);
+    }
   }) : null, jsx(TitleContainer, {
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
+
+      // Mark children as loaded when expanding for the first time
+      if (!expanded && !hasLoadedChildren) {
+        setHasLoadedChildren(true);
+      }
       setExpanded(!expanded);
       e.persist();
       // @ts-ignore detail doesn't exist on type
@@ -264,7 +275,7 @@ function Expand({
     className: `${nodeType}-content-wrapper`
   }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
-  }), fg('hot-121622_lazy_load_expand_content') ? expanded ? jsx(Suspense, {
+  }), fg('hot-121622_lazy_load_expand_content') ? hasLoadedChildren ? jsx(Suspense, {
     fallback: jsx("div", null, "Loading...")
   }, jsx(LazyChildren, null, children)) : null : children))));
 }

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

@@ -824,7 +824,7 @@ const codeMarkSharedStyles = css({
 });
 const extensionStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-renderer-extension :not([data-inline-card-lozenge] *)': {
+  '.ak-renderer-extension :not([data-inline-card-lozenge] *, code)': {
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: 'var(--ak-renderer-base-font-size)'
   }

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.5.1";
+const packageVersion = "0.0.0-development";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/ui/Expand.js

@@ -203,6 +203,10 @@ function Expand(_ref2) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     focused = _React$useState4[0],
     setFocused = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    hasLoadedChildren = _React$useState6[0],
+    setHasLoadedChildren = _React$useState6[1];
   var isMobile = false;
   var label = intl.formatMessage(expanded ? expandMessages.collapseNode : expandMessages.expandNode);
   var _useRef = useRef(_uniqueId('expand-title-')),
@@ -226,13 +230,21 @@ function Expand(_ref2) {
   }, nestedHeaderIds && nestedHeaderIds.length > 0 ? jsx(ActiveHeaderIdConsumer, {
     nestedHeaderIds: nestedHeaderIds,
     onNestedHeaderIdMatch: function onNestedHeaderIdMatch() {
-      return setExpanded(true);
+      if (!hasLoadedChildren) {
+        setHasLoadedChildren(true);
+      }
+      setExpanded(true);
     }
   }) : null, jsx(TitleContainer, {
     onClick: function onClick(e) {
       e.preventDefault();
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
+
+      // Mark children as loaded when expanding for the first time
+      if (!expanded && !hasLoadedChildren) {
+        setHasLoadedChildren(true);
+      }
       setExpanded(!expanded);
       e.persist();
       // @ts-ignore detail doesn't exist on type
@@ -274,7 +286,7 @@ function Expand(_ref2) {
     className: "".concat(nodeType, "-content-wrapper")
   }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
-  }), fg('hot-121622_lazy_load_expand_content') ? expanded ? jsx(Suspense, {
+  }), fg('hot-121622_lazy_load_expand_content') ? hasLoadedChildren ? jsx(Suspense, {
     fallback: jsx("div", null, "Loading...")
   }, jsx(LazyChildren, null, children)) : null : children))));
 }

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

@@ -710,7 +710,7 @@ var codeMarkSharedStyles = css({
 });
 var extensionStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-renderer-extension :not([data-inline-card-lozenge] *)': {
+  '.ak-renderer-extension :not([data-inline-card-lozenge] *, code)': {
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: 'var(--ak-renderer-base-font-size)'
   }

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.5.1";
+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.5.2",
+	"version": "124.6.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,8 +57,8 @@
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.12.0",
-		"@atlaskit/tokens": "^6.5.0",
+		"@atlaskit/tmp-editor-statsig": "^13.13.0",
+		"@atlaskit/tokens": "^7.0.0",
 		"@atlaskit/tooltip": "^20.5.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",