@atlaskit/onboarding 11.8.2 → 11.10.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/onboarding
 
+## 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
+
+- [`393f732d5423f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/393f732d5423f) -
+  [ux] Adding an optional prop to Spotlight, so it can used for scrollIntoView 'block' parameter.
+  This is to fix the unnecessary scroll of the non-portalled popup targets.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.8.2
 
 ### Patch 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.8.2";
+var packageVersion = "11.10.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

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

@@ -68,7 +68,8 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps) {
       if (prevProps.targetNode !== this.props.targetNode) {
         (0, _scrollIntoViewIfNeeded.default)(this.props.targetNode, {
-          scrollMode: 'if-needed'
+          scrollMode: 'if-needed',
+          block: this.props.scrollPositionBlock
         });
       }
     }
@@ -76,7 +77,8 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       (0, _scrollIntoViewIfNeeded.default)(this.props.targetNode, {
-        scrollMode: 'if-needed'
+        scrollMode: 'if-needed',
+        block: this.props.scrollPositionBlock
       });
       this.props.onOpened();
     }

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.8.2";
+const packageVersion = "11.10.0";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);

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

@@ -42,13 +42,15 @@ class SpotlightInner extends React.Component {
   componentDidUpdate(prevProps) {
     if (prevProps.targetNode !== this.props.targetNode) {
       scrollIntoView(this.props.targetNode, {
-        scrollMode: 'if-needed'
+        scrollMode: 'if-needed',
+        block: this.props.scrollPositionBlock
       });
     }
   }
   componentDidMount() {
     scrollIntoView(this.props.targetNode, {
-      scrollMode: 'if-needed'
+      scrollMode: 'if-needed',
+      block: this.props.scrollPositionBlock
     });
     this.props.onOpened();
   }

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.8.2";
+var packageVersion = "11.10.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

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

@@ -61,7 +61,8 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps) {
       if (prevProps.targetNode !== this.props.targetNode) {
         scrollIntoView(this.props.targetNode, {
-          scrollMode: 'if-needed'
+          scrollMode: 'if-needed',
+          block: this.props.scrollPositionBlock
         });
       }
     }
@@ -69,7 +70,8 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       scrollIntoView(this.props.targetNode, {
-        scrollMode: 'if-needed'
+        scrollMode: 'if-needed',
+        block: this.props.scrollPositionBlock
       });
       this.props.onOpened();
     }

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-inner.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type ScrollLogicalPosition } from '../types';
 import { type ElementBoundingBox } from '../utils/use-element-box';
 import { type SpotlightProps } from './spotlight';
 export interface SpotlightInnerProps extends SpotlightProps {
@@ -26,6 +27,10 @@ export interface SpotlightInnerProps extends SpotlightProps {
      * Same as `SpotlightProps` but required instead of optional.
      */
     dialogWidth: number;
+    /**
+     * passed to scrollIntoView as the block option, which determines the vertical alignment of the target node in the closest scrollable ancestor.
+     */
+    scrollPositionBlock?: ScrollLogicalPosition;
 }
 interface State {
     replacementElement: HTMLElement | null;

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/components/spotlight.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type MouseEvent, type ReactNode } from 'react';
-import { type Actions } from '../types';
+import { type Actions, type ScrollLogicalPosition } from '../types';
 export interface SpotlightProps {
     /**
      * Buttons to render in the footer.
@@ -82,6 +82,10 @@ export interface SpotlightProps {
     Defaults to `"spotlight"`.
    */
     testId?: string;
+    /**
+     * Used set the 'block' attribute on scrollIntoView, which determines the vertical alignment of the target node to the nearest scrollable ancestor.
+     */
+    scrollPositionBlock?: ScrollLogicalPosition;
 }
 /**
  * __Spotlight__

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/types.d.ts

@@ -5,4 +5,4 @@ interface Action extends Omit<CustomThemeButtonProps, 'children'> {
     text?: ReactNode;
 }
 export type Actions = Action[];
-export {};
+export type { ScrollLogicalPosition } from 'scroll-into-view-if-needed/typings/types';

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type ScrollLogicalPosition } from '../types';
 import { type ElementBoundingBox } from '../utils/use-element-box';
 import { type SpotlightProps } from './spotlight';
 export interface SpotlightInnerProps extends SpotlightProps {
@@ -26,6 +27,10 @@ export interface SpotlightInnerProps extends SpotlightProps {
      * Same as `SpotlightProps` but required instead of optional.
      */
     dialogWidth: number;
+    /**
+     * passed to scrollIntoView as the block option, which determines the vertical alignment of the target node in the closest scrollable ancestor.
+     */
+    scrollPositionBlock?: ScrollLogicalPosition;
 }
 interface State {
     replacementElement: HTMLElement | null;

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/components/spotlight.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type MouseEvent, type ReactNode } from 'react';
-import { type Actions } from '../types';
+import { type Actions, type ScrollLogicalPosition } from '../types';
 export interface SpotlightProps {
     /**
      * Buttons to render in the footer.
@@ -82,6 +82,10 @@ export interface SpotlightProps {
     Defaults to `"spotlight"`.
    */
     testId?: string;
+    /**
+     * Used set the 'block' attribute on scrollIntoView, which determines the vertical alignment of the target node to the nearest scrollable ancestor.
+     */
+    scrollPositionBlock?: ScrollLogicalPosition;
 }
 /**
  * __Spotlight__

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/dist/types-ts4.5/types.d.ts

@@ -5,4 +5,4 @@ interface Action extends Omit<CustomThemeButtonProps, 'children'> {
     text?: ReactNode;
 }
 export type Actions = Action[];
-export {};
+export type { ScrollLogicalPosition } from 'scroll-into-view-if-needed/typings/types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "11.8.2",
+	"version": "11.10.0",
 	"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.0.0",
+		"@atlaskit/button": "^18.2.0",
 		"@atlaskit/ds-lib": "^2.3.0",
 		"@atlaskit/heading": "^2.4.0",
 		"@atlaskit/modal-dialog": "^12.14.0",