@atlaskit/onboarding 10.6.7 → 10.6.8

package/dist/cjs/styled/blanket.js

@@ -1,32 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _components = require("@atlaskit/theme/components");
-
 var _constants = require("@atlaskit/theme/constants");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var backgroundColor = (0, _components.themed)({
   light: "var(--ds-blanket, ".concat(_colors.N100A, ")"),
   dark: "var(--ds-blanket, ".concat(_colors.DN90A, ")")
-}); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
-// to body instead of nearest stacking context (Portal in our case).
+});
 
+// IE11 and Edge: z-index needed because fixed position calculates z-index relative
+// to body instead of nearest stacking context (Portal in our case).
 var blanketStyles = (0, _react.css)({
   position: 'fixed',
   zIndex: _constants.layers.spotlight(),
@@ -36,7 +28,6 @@ var blanketStyles = (0, _react.css)({
   left: 0,
   transition: 'opacity 220ms'
 });
-
 /**
  * __Blanket__
  *
@@ -59,6 +50,5 @@ var Blanket = function Blanket(props) {
     })
   });
 };
-
 var _default = Blanket;
 exports.default = _default;

package/dist/cjs/styled/dialog.js

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogImage = exports.DialogActionItemContainer = exports.DialogActionItem = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("@emotion/react");
-
 var _excluded = ["alt"];
 var imageStyles = (0, _react.css)({
   maxWidth: '100%',
@@ -20,15 +15,15 @@ var imageStyles = (0, _react.css)({
 });
 var actionItemContainerStyles = (0, _react.css)({
   display: 'flex',
-  margin: "var(--ds-scale-0, 0px)".concat(" -4px"),
-
+  margin: "var(--ds-space-0, 0px)".concat(" -4px"),
   /* When there is more than one action, place primary action visually on the
   right, but keep it's position as the first focusable element in the DOM */
   flexDirection: 'row-reverse'
 });
 var actionItemStyles = (0, _react.css)({
-  margin: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)")
+  margin: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)")
 });
+
 /**
  * __Dialog image__
  *
@@ -36,15 +31,15 @@ var actionItemStyles = (0, _react.css)({
  *
  * @internal
  */
-
 var DialogImage = function DialogImage(_ref) {
   var alt = _ref.alt,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)("img", (0, _extends2.default)({
     css: imageStyles,
     alt: alt
   }, props));
 };
+
 /**
  * __Dialog action item container__
  *
@@ -52,16 +47,14 @@ var DialogImage = function DialogImage(_ref) {
  *
  * @internal
  */
-
-
 exports.DialogImage = DialogImage;
-
 var DialogActionItemContainer = function DialogActionItemContainer(_ref2) {
   var children = _ref2.children;
   return (0, _react.jsx)("div", {
     css: actionItemContainerStyles
   }, children);
 };
+
 /**
  * __Dialog action item__
  *
@@ -69,15 +62,11 @@ var DialogActionItemContainer = function DialogActionItemContainer(_ref2) {
  *
  * @internal
  */
-
-
 exports.DialogActionItemContainer = DialogActionItemContainer;
-
 var DialogActionItem = function DialogActionItem(_ref3) {
   var children = _ref3.children;
   return (0, _react.jsx)("div", {
     css: actionItemStyles
   }, children);
 };
-
 exports.DialogActionItem = DialogActionItem;

package/dist/cjs/styled/modal.js

@@ -4,37 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ModalImage = exports.ModalHeading = exports.ModalBody = exports.ModalActionItem = exports.ModalActionContainer = void 0;
-
 var _react = require("@emotion/react");
-
 var _components = require("@atlaskit/theme/components");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _typography = require("@atlaskit/theme/typography");
-
 /** @jsx jsx */
-var borderRadius = (0, _constants.borderRadius)(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
+var borderRadius = (0, _constants.borderRadius)();
+
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var lightH600Styles = (0, _react.css)((0, _typography.h600)({
   theme: {
     mode: 'light'
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
+}));
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var darkH600Styles = (0, _react.css)((0, _typography.h600)({
   theme: {
     mode: 'dark'
   }
 }));
 var modalBodyStyles = (0, _react.css)({
-  padding: "var(--ds-scale-500, 40px)".concat(" ", "var(--ds-scale-250, 20px)"),
+  padding: "var(--ds-space-500, 40px)".concat(" ", "var(--ds-space-250, 20px)"),
   textAlign: 'center'
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var modalHeadingStyles = (0, _react.css)({
-  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
-  marginBottom: "var(--ds-scale-100, 8px)",
+  marginBottom: "var(--ds-space-100, 8px)",
   color: 'inherit'
 });
 var modalImageStyles = (0, _react.css)({
@@ -48,7 +45,7 @@ var modalImageStyles = (0, _react.css)({
 });
 var modalActionContainerStyles = (0, _react.css)({
   display: 'flex',
-  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-500, 40px)", " 36px"),
+  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-500, 40px)", " 36px"),
   justifyContent: 'center',
   flexDirection: 'row',
   flexFlow: 'wrap'
@@ -57,87 +54,76 @@ var modalActionContainerReversedStyles = (0, _react.css)({
   flexDirection: 'row-reverse'
 });
 var modalActionItemStyles = (0, _react.css)({
-  margin: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)", " ", "var(--ds-scale-050, 4px)")
+  margin: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)")
 });
+
 /**
  * __Modal body__
  *
  * @internal
  */
-
 var ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
   return (0, _react.jsx)("div", {
     css: modalBodyStyles
   }, children);
 };
+
 /**
  * __Modal heading__
  *
  * @internal
  */
-
-
 exports.ModalBody = ModalBody;
-
 var ModalHeading = function ModalHeading(_ref2) {
   var children = _ref2.children;
-
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return (0, _react.jsx)("h4", {
     css: [mode === 'light' ? lightH600Styles : darkH600Styles, modalHeadingStyles]
   }, children);
 };
+
 /**
  * __Modal image__
  *
  * @internal
  */
-
-
 exports.ModalHeading = ModalHeading;
-
 var ModalImage = function ModalImage(_ref3) {
   var alt = _ref3.alt,
-      src = _ref3.src;
+    src = _ref3.src;
   return (0, _react.jsx)("img", {
     css: modalImageStyles,
     alt: alt,
     src: src
   });
 };
+
 /**
  * __Modal action container__
  *
  * @internal
  */
-
-
 exports.ModalImage = ModalImage;
-
 var ModalActionContainer = function ModalActionContainer(_ref4) {
   var children = _ref4.children,
-      shouldReverseButtonOrder = _ref4.shouldReverseButtonOrder;
+    shouldReverseButtonOrder = _ref4.shouldReverseButtonOrder;
   return (0, _react.jsx)("div", {
     css: [modalActionContainerStyles, shouldReverseButtonOrder && modalActionContainerReversedStyles]
   }, children);
 };
+
 /**
  * __Modal action item__
  *
  * @internal
  */
-
-
 exports.ModalActionContainer = ModalActionContainer;
-
 var ModalActionItem = function ModalActionItem(_ref5) {
   var children = _ref5.children;
   return (0, _react.jsx)("div", {
     css: modalActionItemStyles
   }, children);
 };
-
 exports.ModalActionItem = ModalActionItem;

package/dist/cjs/styled/target.js

@@ -1,32 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pulseKeyframesName = exports.TargetOverlay = exports.TargetInner = exports.Pulse = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _excluded = ["children", "bgColor", "radius", "style", "testId"],
-    _excluded2 = ["children", "pulse"],
-    _excluded3 = ["children", "pulse", "testId"];
-
+  _excluded2 = ["children", "pulse"],
+  _excluded3 = ["children", "pulse", "testId"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 // NOTE:
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
 var baseShadow = "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(_colors.P300, ")"));
@@ -38,36 +27,37 @@ var pulseKeyframes = (0, _react.keyframes)({
   '66%, 100%': {
     boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")
   }
-}); // This is needed for unit tests
-
+});
+// This is needed for unit tests
 var pulseKeyframesName = pulseKeyframes.name;
 exports.pulseKeyframesName = pulseKeyframesName;
 var animationStyles = (0, _react.css)({
   animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite")
-}); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
-// to body instead of nearest stacking context (Portal in our case).
+});
 
+// IE11 and Edge: z-index needed because fixed position calculates z-index relative
+// to body instead of nearest stacking context (Portal in our case).
 var baseStyles = (0, _react.css)({
   zIndex: _constants.layers.spotlight() + 1
 });
-
 var Base = function Base(_ref) {
   var children = _ref.children,
-      bgColor = _ref.bgColor,
-      radius = _ref.radius,
-      style = _ref.style,
-      testId = _ref.testId,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    bgColor = _ref.bgColor,
+    radius = _ref.radius,
+    style = _ref.style,
+    testId = _ref.testId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)("div", (0, _extends2.default)({
     css: baseStyles,
     "data-testid": testId,
     style: _objectSpread(_objectSpread({}, style), {}, {
       backgroundColor: bgColor,
       borderRadius: radius ? "".concat(radius, "px") : undefined
-    }) // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
+    })
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props), children);
 };
+
 /**
  * __Target inner__
  *
@@ -75,19 +65,17 @@ var Base = function Base(_ref) {
  *
  * @internal
  */
-
-
 var TargetInner = function TargetInner(_ref2) {
   var children = _ref2.children,
-      pulse = _ref2.pulse,
-      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    pulse = _ref2.pulse,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     (0, _react.jsx)(Base, (0, _extends2.default)({}, props, {
       css: [pulse && animationStyles]
     }), children)
   );
 };
-
 exports.TargetInner = TargetInner;
 var targetOverlayStyles = (0, _react.css)({
   width: '100%',
@@ -96,6 +84,7 @@ var targetOverlayStyles = (0, _react.css)({
   top: 0,
   left: 0
 });
+
 /**
  * __Target overlay__
  *
@@ -104,7 +93,6 @@ var targetOverlayStyles = (0, _react.css)({
  *
  * @internal
  */
-
 var TargetOverlay = function TargetOverlay(props) {
   return (0, _react.jsx)("div", (0, _extends2.default)({}, props, {
     css: targetOverlayStyles,
@@ -113,6 +101,7 @@ var TargetOverlay = function TargetOverlay(props) {
     }
   }));
 };
+
 /**
  * __Spotlight pulse__
  *
@@ -122,22 +111,19 @@ var TargetOverlay = function TargetOverlay(props) {
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-
-
 exports.TargetOverlay = TargetOverlay;
-
 var Pulse = function Pulse(_ref3) {
   var children = _ref3.children,
-      _ref3$pulse = _ref3.pulse,
-      pulse = _ref3$pulse === void 0 ? true : _ref3$pulse,
-      testId = _ref3.testId,
-      props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
-  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    _ref3$pulse = _ref3.pulse,
+    pulse = _ref3$pulse === void 0 ? true : _ref3$pulse,
+    testId = _ref3.testId,
+    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     (0, _react.jsx)(Base, (0, _extends2.default)({}, props, {
       css: [pulse && animationStyles],
       testId: testId
     }), children)
   );
 };
-
 exports.Pulse = Pulse;

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

@@ -1,25 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useElementBox = exports.ElementBox = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 var _bindEventListener = require("bind-event-listener");
-
 var getElementRect = function getElementRect(element) {
   var _element$getBoundingC = element.getBoundingClientRect(),
-      height = _element$getBoundingC.height,
-      left = _element$getBoundingC.left,
-      top = _element$getBoundingC.top,
-      width = _element$getBoundingC.width;
-
+    height = _element$getBoundingC.height,
+    left = _element$getBoundingC.left,
+    top = _element$getBoundingC.top,
+    width = _element$getBoundingC.width;
   return {
     height: height,
     left: left,
@@ -27,24 +21,22 @@ var getElementRect = function getElementRect(element) {
     width: width
   };
 };
+
 /**
  * Will listen to the document resizing to see if an element has moved positions.
  * Not using ResizeObserver because of IE11 support.
  * @param element HTMLElement to watch when resizing.
  */
-
-
 var useElementBox = function useElementBox(element) {
   var _useState = (0, _react.useState)({
-    width: 0,
-    height: 0,
-    left: 0,
-    top: 0
-  }),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      box = _useState2[0],
-      setBox = _useState2[1];
-
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    box = _useState2[0],
+    setBox = _useState2[1];
   (0, _react.useLayoutEffect)(function () {
     setBox(getElementRect(element));
   }, [element]);
@@ -54,7 +46,6 @@ var useElementBox = function useElementBox(element) {
         setBox(getElementRect(element));
       });
     };
-
     return (0, _bindEventListener.bind)(window, {
       type: 'resize',
       listener: onResize
@@ -62,6 +53,7 @@ var useElementBox = function useElementBox(element) {
   }, [element]);
   return box;
 };
+
 /**
  * __Element box__
  *
@@ -69,13 +61,9 @@ var useElementBox = function useElementBox(element) {
  *
  * @internal
  */
-
-
 exports.useElementBox = useElementBox;
-
 var ElementBox = function ElementBox(props) {
   var box = useElementBox(props.element);
   return props.children(box);
 };
-
 exports.ElementBox = ElementBox;

package/dist/cjs/version.json

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

package/dist/es2019/components/animation.js

@@ -4,7 +4,6 @@ const duration = {
   enter: 0,
   exit: 100
 };
-
 /**
  * __Fade__
  *
@@ -35,7 +34,8 @@ export const Fade = ({
       opacity: 0
     }
   };
-  const style = { ...base,
+  const style = {
+    ...base,
     ...anim[status]
   };
   return children(style);

package/dist/es2019/components/clone.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import { TargetInner, TargetOverlay } from '../styled/target';
-
 function cloneAndOverrideStyles(node) {
   const shouldCloneChildren = true;
   const clonedNode = node.cloneNode(shouldCloneChildren);
   clonedNode.style.margin = '0';
-  clonedNode.style.position = 'static'; // The target may have other transforms applied. Avoid unintended side effects
+  clonedNode.style.position = 'static';
+  // The target may have other transforms applied. Avoid unintended side effects
   // by zeroing out "translate" rather than applying a value of "none".
-
   clonedNode.style.transform = 'translate(0, 0) translate3d(0, 0, 0)';
   return clonedNode;
 }
+
 /**
  * __Clone__
  *
@@ -19,8 +19,6 @@ function cloneAndOverrideStyles(node) {
  *
  * @internal
  */
-
-
 const Clone = props => {
   const {
     pulse,
@@ -54,5 +52,4 @@ const Clone = props => {
     }) : undefined
   }));
 };
-
 export default Clone;

package/dist/es2019/components/modal.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Modal, { ModalBody } from '@atlaskit/modal-dialog';
 import { ModalBody as Body, ModalHeading as Heading, ModalActionContainer, ModalActionItem, ModalImage } from '../styled/modal';
-import { modalButtonTheme } from './theme'; // TODO: DSP-1250 - use a composable API consistent with normal modal dialog
+import { modalButtonTheme } from './theme';
+
+// TODO: DSP-1250 - use a composable API consistent with normal modal dialog
 
 /**
  * __Benefits modal__
@@ -21,28 +22,23 @@ import { modalButtonTheme } from './theme'; // TODO: DSP-1250 - use a composable
 export default class BenefitsModal extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "headerComponent", props => {
       const {
         header: HeaderElement,
         image: src
       } = props;
-
       const ImageElement = () => jsx(ModalImage, {
         src: src,
         alt: ""
       });
-
       return HeaderElement || ImageElement;
     });
-
     _defineProperty(this, "footerComponent", props => {
       const {
         footer: FooterElement,
         actions: actionList,
         experimental_shouldShowPrimaryButtonOnRight = false
       } = props;
-
       const ActionsElement = () => actionList ? jsx(ButtonTheme.Provider, {
         value: modalButtonTheme
       }, jsx(ModalActionContainer, {
@@ -60,11 +56,9 @@ export default class BenefitsModal extends Component {
           autoFocus: !idx
         }, rest), text));
       }))) : null;
-
       return FooterElement || ActionsElement;
     });
   }
-
   render() {
     const {
       actions,
@@ -81,5 +75,4 @@ export default class BenefitsModal extends Component {
       shouldCloseOnEscapePress: false
     }, props), jsx(Header, null), jsx(ModalBody, null, jsx(Body, null, heading && jsx(Heading, null, heading), children)), jsx(Footer, null));
   }
-
 }