@atlaskit/onboarding 11.9.0 → 11.10.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/onboarding
 
+## 11.10.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.10.0
+
+### Minor Changes
+
+- [#117762](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117762)
+  [`e7423e403d743`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e7423e403d743) -
+  [ux] Add `onBlanketClicked` prop to `SpotlightManager`.
+
 ## 11.9.0
 
 ### Minor Changes

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

@@ -27,7 +27,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.9.0";
+var packageVersion = "11.10.1";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

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

@@ -113,7 +113,8 @@ var SpotlightManager = exports.default = /*#__PURE__*/function (_PureComponent)
       var _this$props = this.props,
         blanketIsTinted = _this$props.blanketIsTinted,
         children = _this$props.children,
-        Tag = _this$props.component;
+        Tag = _this$props.component,
+        onBlanketClicked = _this$props.onBlanketClicked;
       return /*#__PURE__*/_react.default.createElement(SpotlightStateProvider, {
         value: this.getStateProviderValue(this.state.targets)
       }, /*#__PURE__*/_react.default.createElement(TargetProvider, {
@@ -125,9 +126,11 @@ var SpotlightManager = exports.default = /*#__PURE__*/function (_PureComponent)
       }, function (animationStyles) {
         return /*#__PURE__*/_react.default.createElement(_portal.default, {
           zIndex: _constants.layers.spotlight()
-        }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
+        }, /*#__PURE__*/_react.default.createElement(_blanket.default
+        /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */, {
           style: animationStyles,
-          isTinted: blanketIsTinted
+          isTinted: blanketIsTinted,
+          onBlanketClicked: onBlanketClicked
         }));
       }), children)));
     }

package/dist/cjs/styled/blanket.js

@@ -33,13 +33,16 @@ var blanketStyles = (0, _react.css)({
  * @internal
  */
 var Blanket = function Blanket(props) {
+  var onBlanketClicked = props.onBlanketClicked;
   return (0, _react.jsx)("div", {
+    role: "presentation",
     css: blanketStyles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: _objectSpread(_objectSpread({}, props.style), {}, {
       backgroundColor: props.isTinted ? "var(--ds-blanket, ".concat(_colors.N100A, ")") : 'transparent'
-    })
+    }),
+    onClick: onBlanketClicked
   });
 };
 var _default = exports.default = Blanket;

package/dist/cjs/styled/target.js

@@ -34,7 +34,7 @@ var pulseKeyframes = (0, _react.keyframes)({
   }
 });
 // This is needed for unit tests
-// eslint-disable-next-line @atlaskit/design-system/no-exported-keyframes, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var pulseKeyframesName = exports.pulseKeyframesName = pulseKeyframes.name;
 var animationStyles = (0, _react.css)({
   animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite"),

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

@@ -7,7 +7,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "11.9.0";
+const packageVersion = "11.10.1";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);

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

@@ -78,7 +78,8 @@ export default class SpotlightManager extends PureComponent {
     const {
       blanketIsTinted,
       children,
-      component: Tag
+      component: Tag,
+      onBlanketClicked
     } = this.props;
     return /*#__PURE__*/React.createElement(SpotlightStateProvider, {
       value: this.getStateProviderValue(this.state.targets)
@@ -90,9 +91,11 @@ export default class SpotlightManager extends PureComponent {
       hasEntered: this.state.spotlightCount > 0
     }, animationStyles => /*#__PURE__*/React.createElement(Portal, {
       zIndex: layers.spotlight()
-    }, /*#__PURE__*/React.createElement(Blanket, {
+    }, /*#__PURE__*/React.createElement(Blanket
+    /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */, {
       style: animationStyles,
-      isTinted: blanketIsTinted
+      isTinted: blanketIsTinted,
+      onBlanketClicked: onBlanketClicked
     }))), children)));
   }
 }

package/dist/es2019/styled/blanket.js

@@ -26,14 +26,19 @@ const blanketStyles = css({
  * @internal
  */
 const Blanket = props => {
+  const {
+    onBlanketClicked
+  } = props;
   return jsx("div", {
+    role: "presentation",
     css: blanketStyles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: {
       ...props.style,
       backgroundColor: props.isTinted ? `var(--ds-blanket, ${N100A})` : 'transparent'
-    }
+    },
+    onClick: onBlanketClicked
   });
 };
 export default Blanket;

package/dist/es2019/styled/target.js

@@ -21,7 +21,7 @@ const pulseKeyframes = keyframes({
   }
 });
 // This is needed for unit tests
-// eslint-disable-next-line @atlaskit/design-system/no-exported-keyframes, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const pulseKeyframesName = pulseKeyframes.name;
 const animationStyles = css({
   animation: `${pulseKeyframes} 3000ms ${easing} infinite`,

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

@@ -17,7 +17,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.9.0";
+var packageVersion = "11.10.1";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

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

@@ -105,7 +105,8 @@ var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
         blanketIsTinted = _this$props.blanketIsTinted,
         children = _this$props.children,
-        Tag = _this$props.component;
+        Tag = _this$props.component,
+        onBlanketClicked = _this$props.onBlanketClicked;
       return /*#__PURE__*/React.createElement(SpotlightStateProvider, {
         value: this.getStateProviderValue(this.state.targets)
       }, /*#__PURE__*/React.createElement(TargetProvider, {
@@ -117,9 +118,11 @@ var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
       }, function (animationStyles) {
         return /*#__PURE__*/React.createElement(Portal, {
           zIndex: layers.spotlight()
-        }, /*#__PURE__*/React.createElement(Blanket, {
+        }, /*#__PURE__*/React.createElement(Blanket
+        /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */, {
           style: animationStyles,
-          isTinted: blanketIsTinted
+          isTinted: blanketIsTinted,
+          onBlanketClicked: onBlanketClicked
         }));
       }), children)));
     }

package/dist/esm/styled/blanket.js

@@ -29,13 +29,16 @@ var blanketStyles = css({
  * @internal
  */
 var Blanket = function Blanket(props) {
+  var onBlanketClicked = props.onBlanketClicked;
   return jsx("div", {
+    role: "presentation",
     css: blanketStyles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: _objectSpread(_objectSpread({}, props.style), {}, {
       backgroundColor: props.isTinted ? "var(--ds-blanket, ".concat(N100A, ")") : 'transparent'
-    })
+    }),
+    onClick: onBlanketClicked
   });
 };
 export default Blanket;

package/dist/esm/styled/target.js

@@ -28,7 +28,7 @@ var pulseKeyframes = keyframes({
   }
 });
 // This is needed for unit tests
-// eslint-disable-next-line @atlaskit/design-system/no-exported-keyframes, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var pulseKeyframesName = pulseKeyframes.name;
 var animationStyles = css({
   animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite"),

package/dist/types/components/spotlight-manager.d.ts

@@ -30,6 +30,10 @@ interface SpotlightManagerProps {
      * Component is deprecated and will be removed in the future.
      */
     component?: ElementType;
+    /**
+     * Handler function to be called when the blanket is clicked.
+     */
+    onBlanketClicked?: () => void;
 }
 /**
  * __Spotlight manager__

package/dist/types/styled/blanket.d.ts

@@ -7,6 +7,7 @@ import { jsx } from '@emotion/react';
 type BlanketProps = {
     isTinted?: boolean;
     style?: React.CSSProperties;
+    onBlanketClicked?: () => void;
 };
 /**
  * __Blanket__

package/dist/types-ts4.5/components/spotlight-manager.d.ts

@@ -30,6 +30,10 @@ interface SpotlightManagerProps {
      * Component is deprecated and will be removed in the future.
      */
     component?: ElementType;
+    /**
+     * Handler function to be called when the blanket is clicked.
+     */
+    onBlanketClicked?: () => void;
 }
 /**
  * __Spotlight manager__

package/dist/types-ts4.5/styled/blanket.d.ts

@@ -7,6 +7,7 @@ import { jsx } from '@emotion/react';
 type BlanketProps = {
     isTinted?: boolean;
     style?: React.CSSProperties;
+    onBlanketClicked?: () => void;
 };
 /**
  * __Blanket__

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "11.9.0",
+	"version": "11.10.1",
 	"description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/button": "^18.1.0",
+		"@atlaskit/button": "^18.3.0",
 		"@atlaskit/ds-lib": "^2.3.0",
 		"@atlaskit/heading": "^2.4.0",
 		"@atlaskit/modal-dialog": "^12.14.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.1.0",
 		"@atlaskit/portal": "^4.6.0",
-		"@atlaskit/primitives": "^10.0.0",
+		"@atlaskit/primitives": "^11.0.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/tokens": "^1.53.0",
 		"@babel/runtime": "^7.0.0",