@atlaskit/onboarding 11.8.1 → 11.9.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/onboarding
 
+## 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
+
+- Updated dependencies
+
 ## 11.8.1
 
 ### 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.1";
+var packageVersion = "11.9.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/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.1";
+const packageVersion = "11.9.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/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.1";
+var packageVersion = "11.9.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/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.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/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.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/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.1",
+	"version": "11.9.0",
 	"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 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/button": "^18.0.0",
+		"@atlaskit/button": "^18.1.0",
 		"@atlaskit/ds-lib": "^2.3.0",
 		"@atlaskit/heading": "^2.4.0",
 		"@atlaskit/modal-dialog": "^12.14.0",
 		"@atlaskit/motion": "^1.7.0",
-		"@atlaskit/platform-feature-flags": "^0.2.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.1.0",
 		"@atlaskit/portal": "^4.6.0",
-		"@atlaskit/primitives": "^9.0.0",
+		"@atlaskit/primitives": "^10.0.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/tokens": "^1.53.0",
 		"@babel/runtime": "^7.0.0",