@atlaskit/onboarding 10.3.10 → 10.4.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/onboarding
 
+## 10.4.1
+
+### Patch Changes
+
+- [`e4b612d1c48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4b612d1c48) - Internal migration to bind-event-listener for safer DOM Event cleanup
+
+## 10.4.0
+
+### Minor Changes
+
+- [`3124aa6ae24`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3124aa6ae24) - The onboarding package now exports a `ModalTransition` component for use with the benefits modal. This resolves an issue that can occur when using `ModalTransition` from a different version of `@atlaskit/modal-dialog` than the one that Onboarding is bringing in.
+
+### Patch Changes
+
+- [`e7ad64befa5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ad64befa5) - [ux] Updated input tokens within `@atlaskit/onboarding`.
+
+## 10.3.11
+
+### Patch Changes
+
+- [`efa50ac72ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efa50ac72ba) - Adjusts jsdoc strings to improve prop documentation
+
 ## 10.3.10
 
 ### Patch Changes

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

@@ -54,7 +54,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.3.10";
+var packageVersion = "10.4.1";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);

package/dist/cjs/components/theme.js

@@ -31,12 +31,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var spotlightTheme = {
   default: {
     background: {
-      default: "var(--ds-background-neutral, ".concat(colors.P400, ")"),
-      hover: "var(--ds-background-neutral-hovered, ".concat(colors.P200, ")"),
-      active: "var(--ds-background-neutral-pressed, ".concat(colors.P500, ")"),
+      default: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")"),
+      hover: "var(--ds-background-inverse-subtle-hovered, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.P500, ")"),
       disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
-      selected: "var(--ds-background-neutral-pressed, ".concat(colors.R500, ")"),
-      focus: "var(--ds-background-neutral, ".concat(colors.P400, ")")
+      selected: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.R500, ")"),
+      focus: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")")
     },
     boxShadow: {
       focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))

package/dist/cjs/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,6 +11,12 @@ Object.defineProperty(exports, "Modal", {
     return _components.Modal;
   }
 });
+Object.defineProperty(exports, "ModalTransition", {
+  enumerable: true,
+  get: function get() {
+    return _modalTransition.default;
+  }
+});
 Object.defineProperty(exports, "Spotlight", {
   enumerable: true,
   get: function get() {
@@ -64,6 +72,8 @@ Object.defineProperty(exports, "useSpotlight", {
   }
 });
 
+var _modalTransition = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-transition"));
+
 var _components = require("./components");
 
 var _target = require("./styled/target");

package/dist/cjs/styled/target.js

@@ -33,7 +33,7 @@ var baseShadow = "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(_color
 var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 var pulseKeyframes = (0, _core.keyframes)({
   '0%, 33%': {
-    boxShadow: "".concat(baseShadow, ", 0 0 0 ").concat("var(--ds-border-discovery, rgba(101, 84, 192, 1))")
+    boxShadow: "".concat(baseShadow, ", 0 0 0 ", "var(--ds-border-discovery, rgba(101, 84, 192, 1))")
   },
   '66%, 100%': {
     boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")

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

@@ -11,6 +11,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
+var _bindEventListener = require("bind-event-listener");
+
 var getElementRect = function getElementRect(element) {
   var _element$getBoundingC = element.getBoundingClientRect(),
       height = _element$getBoundingC.height,
@@ -53,10 +55,10 @@ var useElementBox = function useElementBox(element) {
       });
     };
 
-    window.addEventListener('resize', onResize);
-    return function () {
-      window.removeEventListener('resize', onResize);
-    };
+    return (0, _bindEventListener.bind)(window, {
+      type: 'resize',
+      listener: onResize
+    });
   }, [element]);
   return box;
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.3.10",
+	"version": "10.4.1",
 	"sideEffects": false
 }

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

package/dist/es2019/components/theme.js

@@ -2,12 +2,12 @@ import * as colors from '@atlaskit/theme/colors';
 const spotlightTheme = {
   default: {
     background: {
-      default: `var(--ds-background-neutral, ${colors.P400})`,
-      hover: `var(--ds-background-neutral-hovered, ${colors.P200})`,
-      active: `var(--ds-background-neutral-pressed, ${colors.P500})`,
+      default: `var(--ds-background-inverse-subtle, ${colors.P400})`,
+      hover: `var(--ds-background-inverse-subtle-hovered, ${colors.P200})`,
+      active: `var(--ds-background-inverse-subtle-pressed, ${colors.P500})`,
       disabled: `var(--ds-background-disabled, ${colors.P400})`,
-      selected: `var(--ds-background-neutral-pressed, ${colors.R500})`,
-      focus: `var(--ds-background-neutral, ${colors.P400})`
+      selected: `var(--ds-background-inverse-subtle-pressed, ${colors.R500})`,
+      focus: `var(--ds-background-inverse-subtle, ${colors.P400})`
     },
     boxShadow: {
       focus: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`

package/dist/es2019/index.js

@@ -1,2 +1,14 @@
+/**
+ * We re-export this because products may have multiple versions of
+ * `@atlaskit/modal-dialog`.
+ *
+ * If a consumer uses the onboarding `Modal` with the `ModalTransition` from an
+ * incompatible version of `@atlaskit/modal-dialog`, then the modal can get
+ * stuck in an open state.
+ *
+ * See https://product-fabric.atlassian.net/browse/DSP-796 for more details
+ * and a reproduction.
+ */
+export { default as ModalTransition } from '@atlaskit/modal-dialog/modal-transition';
 export { Modal, Spotlight, SpotlightCard, SpotlightManager, SpotlightTarget, SpotlightTransition, modalButtonTheme, spotlightButtonTheme, useSpotlight } from './components';
 export { Pulse as SpotlightPulse } from './styled/target';

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

@@ -1,4 +1,5 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
 
 const getElementRect = element => {
   const {
@@ -38,10 +39,10 @@ export const useElementBox = element => {
       });
     };
 
-    window.addEventListener('resize', onResize);
-    return () => {
-      window.removeEventListener('resize', onResize);
-    };
+    return bind(window, {
+      type: 'resize',
+      listener: onResize
+    });
   }, [element]);
   return box;
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.3.10",
+	"version": "10.4.1",
 	"sideEffects": false
 }

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

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

package/dist/esm/components/theme.js

@@ -12,12 +12,12 @@ import * as colors from '@atlaskit/theme/colors';
 var spotlightTheme = {
   default: {
     background: {
-      default: "var(--ds-background-neutral, ".concat(colors.P400, ")"),
-      hover: "var(--ds-background-neutral-hovered, ".concat(colors.P200, ")"),
-      active: "var(--ds-background-neutral-pressed, ".concat(colors.P500, ")"),
+      default: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")"),
+      hover: "var(--ds-background-inverse-subtle-hovered, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.P500, ")"),
       disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
-      selected: "var(--ds-background-neutral-pressed, ".concat(colors.R500, ")"),
-      focus: "var(--ds-background-neutral, ".concat(colors.P400, ")")
+      selected: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.R500, ")"),
+      focus: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")")
     },
     boxShadow: {
       focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))

package/dist/esm/index.js

@@ -1,2 +1,14 @@
+/**
+ * We re-export this because products may have multiple versions of
+ * `@atlaskit/modal-dialog`.
+ *
+ * If a consumer uses the onboarding `Modal` with the `ModalTransition` from an
+ * incompatible version of `@atlaskit/modal-dialog`, then the modal can get
+ * stuck in an open state.
+ *
+ * See https://product-fabric.atlassian.net/browse/DSP-796 for more details
+ * and a reproduction.
+ */
+export { default as ModalTransition } from '@atlaskit/modal-dialog/modal-transition';
 export { Modal, Spotlight, SpotlightCard, SpotlightManager, SpotlightTarget, SpotlightTransition, modalButtonTheme, spotlightButtonTheme, useSpotlight } from './components';
 export { Pulse as SpotlightPulse } from './styled/target';

package/dist/esm/styled/target.js

@@ -19,7 +19,7 @@ var baseShadow = "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(P300,
 var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 var pulseKeyframes = keyframes({
   '0%, 33%': {
-    boxShadow: "".concat(baseShadow, ", 0 0 0 ").concat("var(--ds-border-discovery, rgba(101, 84, 192, 1))")
+    boxShadow: "".concat(baseShadow, ", 0 0 0 ", "var(--ds-border-discovery, rgba(101, 84, 192, 1))")
   },
   '66%, 100%': {
     boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")

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

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useLayoutEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
 
 var getElementRect = function getElementRect(element) {
   var _element$getBoundingC = element.getBoundingClientRect(),
@@ -43,10 +44,10 @@ export var useElementBox = function useElementBox(element) {
       });
     };
 
-    window.addEventListener('resize', onResize);
-    return function () {
-      window.removeEventListener('resize', onResize);
-    };
+    return bind(window, {
+      type: 'resize',
+      listener: onResize
+    });
   }, [element]);
   return box;
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.3.10",
+	"version": "10.4.1",
 	"sideEffects": false
 }

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

@@ -73,13 +73,13 @@ export interface SpotlightProps {
      */
     targetReplacement?: ComponentType<any>;
     /**
-     * This prop is a unique string that appears as an attribute `data-testid` in the rendered HTML output serving as a hook for automated tests.
-     * As this component is composed of multiple components we use this `testId` as a prefix:
-     *
-     * - `"${testId}--dialog"` to identify the spotlight dialog
-     * - `"${testId}--target"` to identify the spotlight target clone
-     *
-     * Defaults to `"spotlight"`.
+      This prop is a unique string that appears as an attribute `data-testid` in the rendered HTML output serving as a hook for automated tests.
+      As this component is composed of multiple components we use this `testId` as a prefix:
+  
+      - `"${testId}--dialog"` to identify the spotlight dialog
+      - `"${testId}--target"` to identify the spotlight target clone
+  
+      Defaults to `"spotlight"`.
      */
     testId?: string;
 }

package/dist/types/index.d.ts

@@ -1,2 +1,14 @@
+/**
+ * We re-export this because products may have multiple versions of
+ * `@atlaskit/modal-dialog`.
+ *
+ * If a consumer uses the onboarding `Modal` with the `ModalTransition` from an
+ * incompatible version of `@atlaskit/modal-dialog`, then the modal can get
+ * stuck in an open state.
+ *
+ * See https://product-fabric.atlassian.net/browse/DSP-796 for more details
+ * and a reproduction.
+ */
+export { default as ModalTransition } from '@atlaskit/modal-dialog/modal-transition';
 export { Modal, Spotlight, SpotlightCard, SpotlightManager, SpotlightTarget, SpotlightTransition, modalButtonTheme, spotlightButtonTheme, useSpotlight, } from './components';
 export { Pulse as SpotlightPulse } from './styled/target';

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.3.10",
+  "version": "10.4.1",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -20,7 +20,8 @@
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Onboarding (spotlight)"
+      "name": "Onboarding (spotlight)",
+      "category": "Components"
     }
   },
   "dependencies": {
@@ -33,6 +34,7 @@
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
+    "bind-event-listener": "^2.1.0",
     "exenv": "^1.2.2",
     "memoize-one": "^6.0.0",
     "react-focus-lock": "^2.5.2",
@@ -46,11 +48,11 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^20.5.0",
+    "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/progress-indicator": "^9.2.0",
-    "@atlaskit/select": "^15.2.2",
+    "@atlaskit/select": "^15.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -67,6 +69,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "analytics": "analytics-next",
       "theming": "tokens",
       "styling": [