@atlaskit/onboarding 11.15.1 → 11.15.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/onboarding
 
+## 11.15.2
+
+### Patch Changes
+
+- [#146525](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146525)
+  [`2ec1031034a2b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2ec1031034a2b) -
+  Integrate layering into spotlight
+
 ## 11.15.1
 
 ### Patch Changes

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

@@ -17,6 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 var _exenv = require("exenv");
 var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
 var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
+var _layering = require("@atlaskit/layering");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
@@ -139,7 +140,9 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
           hasEntered: isOpen,
           onExited: onExited
         }, function (animationStyles) {
-          return /*#__PURE__*/_react.default.createElement(_spotlightDialog.default, {
+          return /*#__PURE__*/_react.default.createElement(_layering.UNSAFE_LAYERING, {
+            isDisabled: (0, _platformFeatureFlags.fg)('platform_design_system_team_spotlight_layering') ? false : true
+          }, /*#__PURE__*/_react.default.createElement(_spotlightDialog.default, {
             testId: "".concat(testId, "--dialog"),
             actions: _this2.props.actions,
             actionsBeforeElement: _this2.props.actionsBeforeElement,
@@ -153,7 +156,7 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
             image: _this2.props.image,
             targetNode: replacementElement || targetNode,
             animationStyles: animationStyles
-          });
+          }));
         }), /*#__PURE__*/_react.default.createElement(_reactScrolllock.default, null));
       });
     }

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

@@ -4,6 +4,7 @@ import React from 'react';
 import { canUseDOM } from 'exenv';
 import ScrollLock from 'react-scrolllock';
 import scrollIntoView from 'scroll-into-view-if-needed';
+import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -102,7 +103,9 @@ class SpotlightInner extends React.Component {
     })), TargetReplacement && !replacementElement ? null : /*#__PURE__*/React.createElement(Fade, {
       hasEntered: isOpen,
       onExited: onExited
-    }, animationStyles => /*#__PURE__*/React.createElement(SpotlightDialog, {
+    }, animationStyles => /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
+      isDisabled: fg('platform_design_system_team_spotlight_layering') ? false : true
+    }, /*#__PURE__*/React.createElement(SpotlightDialog, {
       testId: `${testId}--dialog`,
       actions: this.props.actions,
       actionsBeforeElement: this.props.actionsBeforeElement,
@@ -116,7 +119,7 @@ class SpotlightInner extends React.Component {
       image: this.props.image,
       targetNode: replacementElement || targetNode,
       animationStyles: animationStyles
-    })), /*#__PURE__*/React.createElement(ScrollLock, null)));
+    }))), /*#__PURE__*/React.createElement(ScrollLock, null)));
   }
 }
 _defineProperty(SpotlightInner, "defaultProps", {

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

@@ -14,6 +14,7 @@ import React from 'react';
 import { canUseDOM } from 'exenv';
 import ScrollLock from 'react-scrolllock';
 import scrollIntoView from 'scroll-into-view-if-needed';
+import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -132,7 +133,9 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
           hasEntered: isOpen,
           onExited: onExited
         }, function (animationStyles) {
-          return /*#__PURE__*/React.createElement(SpotlightDialog, {
+          return /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
+            isDisabled: fg('platform_design_system_team_spotlight_layering') ? false : true
+          }, /*#__PURE__*/React.createElement(SpotlightDialog, {
             testId: "".concat(testId, "--dialog"),
             actions: _this2.props.actions,
             actionsBeforeElement: _this2.props.actionsBeforeElement,
@@ -146,7 +149,7 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
             image: _this2.props.image,
             targetNode: replacementElement || targetNode,
             animationStyles: animationStyles
-          });
+          }));
         }), /*#__PURE__*/React.createElement(ScrollLock, null));
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "11.15.1",
+	"version": "11.15.2",
 	"description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -90,6 +90,9 @@
 		},
 		"platform-design-system-dsp-20687-transition-group": {
 			"type": "boolean"
+		},
+		"platform_design_system_team_spotlight_layering": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {