@atlaskit/onboarding 10.6.7 → 10.6.8

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

@@ -10,37 +10,31 @@ import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
 const bodyStyles = css({
   display: 'flex',
-  padding: `${"var(--ds-scale-200, 16px)"} ${"var(--ds-scale-250, 20px)"}`,
+  padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-250, 20px)"}`,
   flexDirection: 'column'
 });
 const defaultHeaderStyles = css({
   display: 'flex',
-  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
-  paddingBottom: "var(--ds-scale-100, 8px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
   alignItems: 'baseline',
   justifyContent: 'space-between'
 });
-
 const DefaultHeader = ({
   children
 }) => jsx("div", {
   css: defaultHeaderStyles
 }, children);
-
 const defaultFooterStyles = css({
   display: 'flex',
-  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
-  paddingTop: "var(--ds-scale-100, 8px)",
+  paddingTop: "var(--ds-space-100, 8px)",
   alignItems: 'center',
   justifyContent: 'space-between'
 });
-
 const DefaultFooter = ({
   children
 }) => jsx("div", {
   css: defaultFooterStyles
 }, children);
-
 const containerStyles = css({
   height: 'fit-content',
   zIndex: layers.spotlight() + 1,
@@ -52,13 +46,14 @@ const containerStyles = css({
 const containerShadowStyles = css({
   boxShadow: `var(--ds-shadow-raised, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`
 });
+
 /**
  * @deprecated
  */
-
 const Theme = createTheme(() => ({
   container: {}
 }));
+
 /**
  * @deprecated
  */
@@ -99,7 +94,8 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
     container
   }) => {
     return jsx("div", {
-      css: [containerStyles, !isFlat && containerShadowStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      css: [containerStyles, !isFlat && containerShadowStyles,
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       container],
       style: {
         width: `${Math.min(Math.max(width, 160), 600)}px`

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

@@ -7,17 +7,14 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "10.6.7";
-
+const packageVersion = "10.6.8";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       focusLockDisabled: true
     });
   }
-
   componentDidMount() {
     this.focusLockTimeoutId = window.setTimeout(() => {
       // we delay the enabling of the focus lock to avoid the scroll position
@@ -27,11 +24,9 @@ class SpotlightDialog extends Component {
       });
     }, 200);
   }
-
   componentWillUnmount() {
     window.clearTimeout(this.focusLockTimeoutId);
   }
-
   render() {
     const {
       actions,
@@ -64,10 +59,11 @@ class SpotlightDialog extends Component {
       'left top': 'left-start',
       'left middle': 'left',
       'left bottom': 'left-end'
-    }[dialogPlacement] : undefined; // If there's no room on either side of the popper, it will extend off-screen.
+    }[dialogPlacement] : undefined;
+
+    // If there's no room on either side of the popper, it will extend off-screen.
     //  This looks buggy when scroll-lock and focus is placed on the dialog, so we
     //  customise popper so it overflows the spotlight instead with altAxis=true.
-
     const modifiers = [{
       name: 'preventOverflow',
       options: {
@@ -94,7 +90,8 @@ class SpotlightDialog extends Component {
       autoFocus: true
     }, /*#__PURE__*/React.createElement("div", {
       ref: ref,
-      style: { ...style,
+      style: {
+        ...style,
         ...animationStyles
       }
     }, /*#__PURE__*/React.createElement(SpotlightCard, {
@@ -114,9 +111,7 @@ class SpotlightDialog extends Component {
       headingAfterElement: headingAfterElement
     }, children)))));
   }
-
 }
-
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({
   componentName: 'spotlight',

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

@@ -12,7 +12,6 @@ import { Fade } from './animation';
 import Clone from './clone';
 import SpotlightDialog from './spotlight-dialog';
 import { SpotlightTransitionConsumer } from './spotlight-transition';
-
 /**
  * __Spotlight inner__
  *
@@ -23,7 +22,6 @@ import { SpotlightTransitionConsumer } from './spotlight-transition';
 class SpotlightInner extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       // This is only used when targetReplacement is specified.
       // In this case, we have to render the targetReplacement component,
@@ -31,18 +29,16 @@ class SpotlightInner extends React.Component {
       // that reference into SpotlightDialog (Popper).
       replacementElement: null
     });
-
     _defineProperty(this, "getTargetNodeStyle", box => {
       if (!canUseDOM) {
         return {};
       }
-
-      return { ...box,
+      return {
+        ...box,
         position: 'fixed'
       };
     });
   }
-
   componentDidUpdate(prevProps) {
     if (prevProps.targetNode !== this.props.targetNode) {
       scrollIntoView(this.props.targetNode, {
@@ -50,18 +46,15 @@ class SpotlightInner extends React.Component {
       });
     }
   }
-
   componentDidMount() {
     scrollIntoView(this.props.targetNode, {
       scrollMode: 'if-needed'
     });
     this.props.onOpened();
   }
-
   componentWillUnmount() {
     this.props.onClosed();
   }
-
   render() {
     const {
       pulse,
@@ -119,12 +112,9 @@ class SpotlightInner extends React.Component {
       animationStyles: animationStyles
     })), /*#__PURE__*/React.createElement(ScrollLock, null)));
   }
-
 }
-
 _defineProperty(SpotlightInner, "defaultProps", {
   dialogWidth: 400,
   pulse: true
 });
-
 export default SpotlightInner;

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

@@ -21,11 +21,11 @@ const {
 } = SpotlightContext;
 export { TargetConsumer };
 export { SpotlightContext, SpotlightStateConsumer as SpotlightConsumer };
-
 const Container = ({
   component: Wrapper,
   children
 }) => /*#__PURE__*/React.createElement(Wrapper, null, children);
+
 /**
  * __Spotlight manager__
  *
@@ -35,44 +35,37 @@ const Container = ({
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-
-
 export default class SpotlightManager extends PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       spotlightCount: 0,
       targets: {}
     });
-
     _defineProperty(this, "targetRef", name => element => {
       this.setState(state => ({
-        targets: { ...state.targets,
+        targets: {
+          ...state.targets,
           [name]: element || undefined
         }
       }));
     });
-
     _defineProperty(this, "spotlightOpen", () => {
       this.setState(state => ({
         spotlightCount: state.spotlightCount + 1
       }));
     });
-
     _defineProperty(this, "spotlightClose", () => {
       this.setState(state => ({
         spotlightCount: state.spotlightCount - 1
       }));
     });
-
     _defineProperty(this, "getStateProviderValue", memoizeOne(targets => ({
       opened: this.spotlightOpen,
       closed: this.spotlightClose,
       targets
     })));
   }
-
   componentDidMount() {
     if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
       if (this.props.component) {
@@ -81,7 +74,6 @@ export default class SpotlightManager extends PureComponent {
       }
     }
   }
-
   render() {
     const {
       blanketIsTinted,
@@ -103,9 +95,7 @@ export default class SpotlightManager extends PureComponent {
       isTinted: blanketIsTinted
     }))), children)));
   }
-
 }
-
 _defineProperty(SpotlightManager, "defaultProps", {
   blanketIsTinted: true
 });

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import NodeResolver from 'react-node-resolver';
 import { TargetConsumer } from './spotlight-manager';
-
 /**
  * __Spotlight target__
  *
@@ -17,5 +16,4 @@ const SpotlightTarget = ({
 }) => /*#__PURE__*/React.createElement(TargetConsumer, null, targetRef => targetRef ? /*#__PURE__*/React.createElement(NodeResolver, {
   innerRef: targetRef(name)
 }, children) : children);
-
 export default SpotlightTarget;

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

@@ -4,9 +4,11 @@ import noop from '@atlaskit/ds-lib/noop';
 const SpotlightTransitionContext = /*#__PURE__*/createContext({
   isOpen: true,
   onExited: noop
-}); // checks if children exist and are truthy
+});
 
+// checks if children exist and are truthy
 const hasChildren = children => React.Children.count(children) > 0 && React.Children.map(children, child => !!child).filter(Boolean).length > 0;
+
 /**
  * __Spotlight transition__
  *
@@ -16,23 +18,18 @@ const hasChildren = children => React.Children.count(children) > 0 && React.Chil
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-
-
 class SpotlightTransition extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       currentChildren: undefined
     });
-
     _defineProperty(this, "onExited", () => {
       this.setState({
         currentChildren: this.props.children
       });
     });
   }
-
   static getDerivedStateFromProps(props, state) {
     const {
       currentChildren: previousChildren
@@ -42,7 +39,6 @@ class SpotlightTransition extends React.Component {
       currentChildren: exiting ? previousChildren : props.children
     };
   }
-
   render() {
     return /*#__PURE__*/React.createElement(SpotlightTransitionContext.Provider, {
       value: {
@@ -51,8 +47,8 @@ class SpotlightTransition extends React.Component {
       }
     }, this.state.currentChildren);
   }
-
 }
+
 /**
  * __Spotlight transition consumer__
  *
@@ -60,7 +56,5 @@ class SpotlightTransition extends React.Component {
  *
  * @internal
  */
-
-
 export const SpotlightTransitionConsumer = SpotlightTransitionContext.Consumer;
 export default SpotlightTransition;

package/dist/es2019/components/spotlight.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import SpotlightInner from './spotlight-inner';
 import { SpotlightConsumer } from './spotlight-manager';
-
 /**
  * __Spotlight__
  *
@@ -36,5 +35,4 @@ const Spotlight = ({
     pulse: pulse
   })) : null;
 });
-
 export default Spotlight;

package/dist/es2019/components/theme.js

@@ -107,7 +107,6 @@ const modalTheme = {
     }
   }
 };
-
 function extract(newTheme, {
   mode,
   appearance,
@@ -116,7 +115,6 @@ function extract(newTheme, {
   if (!newTheme[appearance]) {
     return undefined;
   }
-
   const root = newTheme[appearance];
   return Object.keys(root).reduce((acc, val) => {
     let node = root;
@@ -124,48 +122,47 @@ function extract(newTheme, {
       if (!node[item]) {
         return undefined;
       }
-
       if (typeof node[item] !== 'object') {
         acc[val] = node[item];
         return undefined;
       }
-
       node = node[item];
       return undefined;
     });
     return acc;
   }, {});
 }
+
 /**
  * @deprecated
  * Custom button themes are deprecated and will be removed in the future.
  */
-
-
 export const spotlightButtonTheme = (current, themeProps) => {
   const {
     buttonStyles,
     ...rest
   } = current(themeProps);
   return {
-    buttonStyles: { ...buttonStyles,
+    buttonStyles: {
+      ...buttonStyles,
       ...extract(spotlightTheme, themeProps)
     },
     ...rest
   };
 };
+
 /**
  * @deprecated
  * Custom button themes are deprecated and will be removed in the future.
  */
-
 export const modalButtonTheme = (current, themeProps) => {
   const {
     buttonStyles,
     ...rest
   } = current(themeProps);
   return {
-    buttonStyles: { ...buttonStyles,
+    buttonStyles: {
+      ...buttonStyles,
       ...extract(modalTheme, themeProps)
     },
     ...rest

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

@@ -1,9 +1,9 @@
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { SpotlightContext } from './spotlight-manager';
+
 /**
  * Use spotlight hook returns information about available spotlight targets.
  */
-
 export default function useSpotlight() {
   const {
     targets

package/dist/es2019/components/value-changed.js

@@ -9,9 +9,7 @@ export default class ValueChanged extends React.Component {
       this.props.onChange();
     }
   }
-
   render() {
     return this.props.children;
   }
-
 }

package/dist/es2019/styled/blanket.js

@@ -6,9 +6,10 @@ import { layers } from '@atlaskit/theme/constants';
 const backgroundColor = themed({
   light: `var(--ds-blanket, ${N100A})`,
   dark: `var(--ds-blanket, ${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).
 const blanketStyles = css({
   position: 'fixed',
   zIndex: layers.spotlight(),
@@ -18,7 +19,6 @@ const blanketStyles = css({
   left: 0,
   transition: 'opacity 220ms'
 });
-
 /**
  * __Blanket__
  *
@@ -34,12 +34,12 @@ const Blanket = props => {
   const theme = useGlobalTheme();
   return jsx("div", {
     css: blanketStyles,
-    style: { ...props.style,
+    style: {
+      ...props.style,
       backgroundColor: props.isTinted ? backgroundColor({
         theme
       }) : 'transparent'
     }
   });
 };
-
 export default Blanket;

package/dist/es2019/styled/dialog.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 const imageStyles = css({
@@ -8,15 +7,15 @@ const imageStyles = css({
 });
 const actionItemContainerStyles = css({
   display: 'flex',
-  margin: `${"var(--ds-scale-0, 0px)"} -4px`,
-
+  margin: `${"var(--ds-space-0, 0px)"} -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'
 });
 const actionItemStyles = css({
-  margin: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"}`
+  margin: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`
 });
+
 /**
  * __Dialog image__
  *
@@ -24,7 +23,6 @@ const actionItemStyles = css({
  *
  * @internal
  */
-
 export const DialogImage = ({
   alt,
   ...props
@@ -32,6 +30,7 @@ export const DialogImage = ({
   css: imageStyles,
   alt: alt
 }, props));
+
 /**
  * __Dialog action item container__
  *
@@ -39,12 +38,12 @@ export const DialogImage = ({
  *
  * @internal
  */
-
 export const DialogActionItemContainer = ({
   children
 }) => jsx("div", {
   css: actionItemContainerStyles
 }, children);
+
 /**
  * __Dialog action item__
  *
@@ -52,7 +51,6 @@ export const DialogActionItemContainer = ({
  *
  * @internal
  */
-
 export const DialogActionItem = ({
   children
 }) => jsx("div", {

package/dist/es2019/styled/modal.js

@@ -3,27 +3,28 @@ import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius as getBorderRadius } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';
-const borderRadius = getBorderRadius(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const borderRadius = getBorderRadius();
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const lightH600Styles = css(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
 const darkH600Styles = css(h600({
   theme: {
     mode: 'dark'
   }
 }));
 const modalBodyStyles = css({
-  padding: `${"var(--ds-scale-500, 40px)"} ${"var(--ds-scale-250, 20px)"}`,
+  padding: `${"var(--ds-space-500, 40px)"} ${"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
 const modalHeadingStyles = 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'
 });
 const modalImageStyles = css({
@@ -37,7 +38,7 @@ const modalImageStyles = css({
 });
 const modalActionContainerStyles = css({
   display: 'flex',
-  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-500, 40px)"} 36px`,
+  padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-500, 40px)"} 36px`,
   justifyContent: 'center',
   flexDirection: 'row',
   flexFlow: 'wrap'
@@ -46,25 +47,25 @@ const modalActionContainerReversedStyles = css({
   flexDirection: 'row-reverse'
 });
 const modalActionItemStyles = css({
-  margin: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"} ${"var(--ds-scale-050, 4px)"}`
+  margin: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"}`
 });
+
 /**
  * __Modal body__
  *
  * @internal
  */
-
 export const ModalBody = ({
   children
 }) => jsx("div", {
   css: modalBodyStyles
 }, children);
+
 /**
  * __Modal heading__
  *
  * @internal
  */
-
 export const ModalHeading = ({
   children
 }) => {
@@ -75,12 +76,12 @@ export const ModalHeading = ({
     css: [mode === 'light' ? lightH600Styles : darkH600Styles, modalHeadingStyles]
   }, children);
 };
+
 /**
  * __Modal image__
  *
  * @internal
  */
-
 export const ModalImage = ({
   alt,
   src
@@ -89,24 +90,24 @@ export const ModalImage = ({
   alt: alt,
   src: src
 });
+
 /**
  * __Modal action container__
  *
  * @internal
  */
-
 export const ModalActionContainer = ({
   children,
   shouldReverseButtonOrder
 }) => jsx("div", {
   css: [modalActionContainerStyles, shouldReverseButtonOrder && modalActionContainerReversedStyles]
 }, children);
+
 /**
  * __Modal action item__
  *
  * @internal
  */
-
 export const ModalActionItem = ({
   children
 }) => jsx("div", {