@atlaskit/onboarding 14.0.1 → 14.0.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/onboarding
 
+## 14.0.2
+
+### Patch Changes
+
+- [#139445](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139445)
+  [`0f13df85731d6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0f13df85731d6) -
+  the component state update causes React Streming to have Suspense boundary received update before
+  hydrating finished error. Wrapping the state update in startTransition
+
 ## 14.0.1
 
 ### Patch Changes

package/dist/cjs/components/clone.js

@@ -61,7 +61,6 @@ var Clone = function Clone(props) {
     ,
     style: style
   }, /*#__PURE__*/_react.default.createElement("div", {
-    // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
       __html: contentHTML
     }

package/dist/cjs/components/modal.js

@@ -104,20 +104,25 @@ var BenefitsModal = exports.default = /*#__PURE__*/function (_Component) {
           id: titleId
         }, heading);
       };
-      return /*#__PURE__*/_react.default.createElement(_modalDialog.default, (0, _extends2.default)({
-        autoFocus: true,
-        shouldCloseOnEscapePress: false,
-        shouldCloseOnOverlayClick: false,
-        shouldScrollInViewport: true
-        // @ts-ignore All of the following props were in the rest props, so I'm
-        // making them explicit here even though the Modal doesn't accept them.
-        ,
-        experimental_shouldShowPrimaryButtonOnRight: experimental_shouldShowPrimaryButtonOnRight,
-        footer: footer,
-        header: header,
-        heading: heading,
-        image: image
-      }, rest), /*#__PURE__*/_react.default.createElement(Header, null), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_modal.ModalBody, null, heading && /*#__PURE__*/_react.default.createElement(CustomHeader, null), children)), /*#__PURE__*/_react.default.createElement(Footer, null));
+      return (
+        /*#__PURE__*/
+        // TODO: This is a problem that needs solving: https://product-fabric.atlassian.net/browse/DSP-22238
+        // eslint-disable-next-line @atlaskit/design-system/use-modal-dialog-close-button
+        _react.default.createElement(_modalDialog.default, (0, _extends2.default)({
+          autoFocus: true,
+          shouldCloseOnEscapePress: false,
+          shouldCloseOnOverlayClick: false,
+          shouldScrollInViewport: true
+          // @ts-ignore All of the following props were in the rest props, so I'm
+          // making them explicit here even though the Modal doesn't accept them.
+          ,
+          experimental_shouldShowPrimaryButtonOnRight: experimental_shouldShowPrimaryButtonOnRight,
+          footer: footer,
+          header: header,
+          heading: heading,
+          image: image
+        }, rest), /*#__PURE__*/_react.default.createElement(Header, null), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_modal.ModalBody, null, heading && /*#__PURE__*/_react.default.createElement(CustomHeader, null), children)), /*#__PURE__*/_react.default.createElement(Footer, null))
+      );
     }
   }]);
 }(_react.Component);

package/dist/cjs/components/spotlight-manager.js

@@ -15,6 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _blanket = _interopRequireDefault(require("../styled/blanket"));
 var _animation = require("./animation");
@@ -62,7 +63,23 @@ var SpotlightManager = exports.default = /*#__PURE__*/function (_PureComponent)
       spotlightCount: 0,
       targets: {}
     });
-    (0, _defineProperty2.default)(_this, "getTargetRef", function (name) {
+    /*
+     * When enabling React Streaming in Confluence, a
+     * "This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering"
+     * error happens.
+     * This is to fix this error by wrapping the state update in startTransition as suggested by React: https://react.dev/errors/421?invariant=421
+     */
+    (0, _defineProperty2.default)(_this, "getTargetRef", (0, _platformFeatureFlags.fg)('platform_fix_component_state_update_for_suspense') ? function (name) {
+      return function (element) {
+        (0, _react.startTransition)(function () {
+          _this.setState(function (state) {
+            return {
+              targets: _objectSpread(_objectSpread({}, state.targets), {}, (0, _defineProperty2.default)({}, name, element || undefined))
+            };
+          });
+        });
+      };
+    } : function (name) {
       return function (element) {
         _this.setState(function (state) {
           return {

package/dist/cjs/styled/modal.js

@@ -13,8 +13,6 @@ var _compiled = require("@atlaskit/primitives/compiled");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var modalBodyStyles = null;
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-array-arguments -- Ignored via go/DSP-18766
 var modalHeadingStyles = null;
 var modalImageStyles = null;
 var modalActionContainerStyles = null;

package/dist/cjs/styled/target.js

@@ -94,7 +94,6 @@ var TargetOverlay = exports.TargetOverlay = function TargetOverlay(_ref3) {
     onClick: onClick
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props, {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: {
       cursor: onClick ? 'pointer' : 'auto'
     },

package/dist/cjs/utils/use-element-observer.js

@@ -84,10 +84,7 @@ function callWhenIdle(callback) {
   var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var _opts$timeout = opts.timeout,
     timeout = _opts$timeout === void 0 ? 100 : _opts$timeout;
-
-  // eslint-disable-next-line compat/compat
   if (typeof window.requestIdleCallback === 'function') {
-    // eslint-disable-next-line compat/compat
     var idleHandle = window.requestIdleCallback(callback, {
       timeout: timeout
     });

package/dist/es2019/components/clone.js

@@ -52,7 +52,6 @@ const Clone = props => {
     ,
     style: style
   }, /*#__PURE__*/React.createElement("div", {
-    // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
       __html: contentHTML
     }

package/dist/es2019/components/modal.js

@@ -81,19 +81,24 @@ export default class BenefitsModal extends Component {
         id: titleId
       }, heading);
     };
-    return /*#__PURE__*/React.createElement(Modal, _extends({
-      autoFocus: true,
-      shouldCloseOnEscapePress: false,
-      shouldCloseOnOverlayClick: false,
-      shouldScrollInViewport: true
-      // @ts-ignore All of the following props were in the rest props, so I'm
-      // making them explicit here even though the Modal doesn't accept them.
-      ,
-      experimental_shouldShowPrimaryButtonOnRight: experimental_shouldShowPrimaryButtonOnRight,
-      footer: footer,
-      header: header,
-      heading: heading,
-      image: image
-    }, rest), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Body, null, heading && /*#__PURE__*/React.createElement(CustomHeader, null), children)), /*#__PURE__*/React.createElement(Footer, null));
+    return (
+      /*#__PURE__*/
+      // TODO: This is a problem that needs solving: https://product-fabric.atlassian.net/browse/DSP-22238
+      // eslint-disable-next-line @atlaskit/design-system/use-modal-dialog-close-button
+      React.createElement(Modal, _extends({
+        autoFocus: true,
+        shouldCloseOnEscapePress: false,
+        shouldCloseOnOverlayClick: false,
+        shouldScrollInViewport: true
+        // @ts-ignore All of the following props were in the rest props, so I'm
+        // making them explicit here even though the Modal doesn't accept them.
+        ,
+        experimental_shouldShowPrimaryButtonOnRight: experimental_shouldShowPrimaryButtonOnRight,
+        footer: footer,
+        header: header,
+        heading: heading,
+        image: image
+      }, rest), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Body, null, heading && /*#__PURE__*/React.createElement(CustomHeader, null), children)), /*#__PURE__*/React.createElement(Footer, null))
+    );
   }
 }

package/dist/es2019/components/spotlight-manager.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { createContext, PureComponent } from 'react';
+import React, { createContext, PureComponent, startTransition } from 'react';
 import memoizeOne from 'memoize-one';
 import noop from '@atlaskit/ds-lib/noop';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import Blanket from '../styled/blanket';
 import { Fade } from './animation';
@@ -42,7 +43,22 @@ export default class SpotlightManager extends PureComponent {
       spotlightCount: 0,
       targets: {}
     });
-    _defineProperty(this, "getTargetRef", name => element => {
+    /*
+     * When enabling React Streaming in Confluence, a
+     * "This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering"
+     * error happens.
+     * This is to fix this error by wrapping the state update in startTransition as suggested by React: https://react.dev/errors/421?invariant=421
+     */
+    _defineProperty(this, "getTargetRef", fg('platform_fix_component_state_update_for_suspense') ? name => element => {
+      startTransition(() => {
+        this.setState(state => ({
+          targets: {
+            ...state.targets,
+            [name]: element || undefined
+          }
+        }));
+      });
+    } : name => element => {
       this.setState(state => ({
         targets: {
           ...state.targets,

package/dist/es2019/styled/modal.js

@@ -4,8 +4,6 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Box } from '@atlaskit/primitives/compiled';
 const modalBodyStyles = null;
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-array-arguments -- Ignored via go/DSP-18766
 const modalHeadingStyles = null;
 const modalImageStyles = null;
 const modalActionContainerStyles = null;

package/dist/es2019/styled/target.js

@@ -77,7 +77,6 @@ export const TargetOverlay = ({
   onClick: onClick
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props, {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   style: {
     cursor: onClick ? 'pointer' : 'auto'
   },

package/dist/es2019/utils/use-element-observer.js

@@ -71,10 +71,7 @@ function callWhenIdle(callback, opts = {}) {
   const {
     timeout = 100
   } = opts;
-
-  // eslint-disable-next-line compat/compat
   if (typeof window.requestIdleCallback === 'function') {
-    // eslint-disable-next-line compat/compat
     const idleHandle = window.requestIdleCallback(callback, {
       timeout
     });

package/dist/esm/components/clone.js

@@ -52,7 +52,6 @@ var Clone = function Clone(props) {
     ,
     style: style
   }, /*#__PURE__*/React.createElement("div", {
-    // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
       __html: contentHTML
     }

package/dist/esm/components/modal.js

@@ -95,20 +95,25 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
           id: titleId
         }, heading);
       };
-      return /*#__PURE__*/React.createElement(Modal, _extends({
-        autoFocus: true,
-        shouldCloseOnEscapePress: false,
-        shouldCloseOnOverlayClick: false,
-        shouldScrollInViewport: true
-        // @ts-ignore All of the following props were in the rest props, so I'm
-        // making them explicit here even though the Modal doesn't accept them.
-        ,
-        experimental_shouldShowPrimaryButtonOnRight: experimental_shouldShowPrimaryButtonOnRight,
-        footer: footer,
-        header: header,
-        heading: heading,
-        image: image
-      }, rest), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Body, null, heading && /*#__PURE__*/React.createElement(CustomHeader, null), children)), /*#__PURE__*/React.createElement(Footer, null));
+      return (
+        /*#__PURE__*/
+        // TODO: This is a problem that needs solving: https://product-fabric.atlassian.net/browse/DSP-22238
+        // eslint-disable-next-line @atlaskit/design-system/use-modal-dialog-close-button
+        React.createElement(Modal, _extends({
+          autoFocus: true,
+          shouldCloseOnEscapePress: false,
+          shouldCloseOnOverlayClick: false,
+          shouldScrollInViewport: true
+          // @ts-ignore All of the following props were in the rest props, so I'm
+          // making them explicit here even though the Modal doesn't accept them.
+          ,
+          experimental_shouldShowPrimaryButtonOnRight: experimental_shouldShowPrimaryButtonOnRight,
+          footer: footer,
+          header: header,
+          heading: heading,
+          image: image
+        }, rest), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Body, null, heading && /*#__PURE__*/React.createElement(CustomHeader, null), children)), /*#__PURE__*/React.createElement(Footer, null))
+      );
     }
   }]);
 }(Component);

package/dist/esm/components/spotlight-manager.js

@@ -8,9 +8,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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, { createContext, PureComponent } from 'react';
+import React, { createContext, PureComponent, startTransition } from 'react';
 import memoizeOne from 'memoize-one';
 import noop from '@atlaskit/ds-lib/noop';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import Blanket from '../styled/blanket';
 import { Fade } from './animation';
@@ -54,7 +55,23 @@ var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
       spotlightCount: 0,
       targets: {}
     });
-    _defineProperty(_this, "getTargetRef", function (name) {
+    /*
+     * When enabling React Streaming in Confluence, a
+     * "This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering"
+     * error happens.
+     * This is to fix this error by wrapping the state update in startTransition as suggested by React: https://react.dev/errors/421?invariant=421
+     */
+    _defineProperty(_this, "getTargetRef", fg('platform_fix_component_state_update_for_suspense') ? function (name) {
+      return function (element) {
+        startTransition(function () {
+          _this.setState(function (state) {
+            return {
+              targets: _objectSpread(_objectSpread({}, state.targets), {}, _defineProperty({}, name, element || undefined))
+            };
+          });
+        });
+      };
+    } : function (name) {
       return function (element) {
         _this.setState(function (state) {
           return {

package/dist/esm/styled/modal.js

@@ -4,8 +4,6 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Box } from '@atlaskit/primitives/compiled';
 var modalBodyStyles = null;
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-array-arguments -- Ignored via go/DSP-18766
 var modalHeadingStyles = null;
 var modalImageStyles = null;
 var modalActionContainerStyles = null;

package/dist/esm/styled/target.js

@@ -84,7 +84,6 @@ export var TargetOverlay = function TargetOverlay(_ref3) {
     onClick: onClick
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props, {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: {
       cursor: onClick ? 'pointer' : 'auto'
     },

package/dist/esm/utils/use-element-observer.js

@@ -77,10 +77,7 @@ function callWhenIdle(callback) {
   var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var _opts$timeout = opts.timeout,
     timeout = _opts$timeout === void 0 ? 100 : _opts$timeout;
-
-  // eslint-disable-next-line compat/compat
   if (typeof window.requestIdleCallback === 'function') {
-    // eslint-disable-next-line compat/compat
     var idleHandle = window.requestIdleCallback(callback, {
       timeout: timeout
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "14.0.1",
+	"version": "14.0.2",
 	"description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,15 +41,15 @@
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/heading": "^5.1.0",
+		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/layering": "^2.1.0",
 		"@atlaskit/modal-dialog": "^14.1.0",
 		"@atlaskit/motion": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/portal": "^5.1.0",
-		"@atlaskit/primitives": "^14.2.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/primitives": "^14.4.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"bind-event-listener": "^3.0.0",
@@ -101,6 +101,9 @@
 		"platform_design_system_team_transition_group_r18": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform_fix_component_state_update_for_suspense": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {