@atlaskit/spotlight 0.6.1 → 0.6.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/spotlight
 
+## 0.6.3
+
+### Patch Changes
+
+- [`1b4bf57dec49e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1b4bf57dec49e) -
+  Make 'click-outside-to-dismiss' functionality optional.
+- Updated dependencies
+
+## 0.6.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.6.1
 
 ### Patch Changes

package/dist/cjs/controllers/context.js

@@ -53,13 +53,13 @@ var SpotlightContext = exports.SpotlightContext = /*#__PURE__*/(0, _react.create
         });
       };
     },
-    dismiss: function dismiss() {
-      return undefined;
+    dismiss: {
+      current: function current() {
+        return undefined;
+      }
     },
     setDismiss: function setDismiss() {
-      return function () {
-        return undefined;
-      };
+      return undefined;
     }
   }
 });
@@ -100,12 +100,12 @@ var SpotlightContextProvider = exports.SpotlightContextProvider = function Spotl
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
     cardRef = _useState0[0],
     setCardRef = _useState0[1];
-  var _useState1 = (0, _react.useState)(function () {
-      return undefined;
-    }),
-    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
-    dismiss = _useState10[0],
-    setDismiss = _useState10[1];
+  var dismissRef = (0, _react.useRef)(function () {
+    return undefined;
+  });
+  var setDismiss = function setDismiss(dismissFn) {
+    dismissRef.current = dismissFn;
+  };
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       card: {
@@ -123,7 +123,7 @@ var SpotlightContextProvider = exports.SpotlightContextProvider = function Spotl
         setRef: setPopoverRef,
         update: update,
         setUpdate: setUpdate,
-        dismiss: dismiss,
+        dismiss: dismissRef,
         setDismiss: setDismiss
       }
     }

package/dist/cjs/ui/dismiss-control/index.js

@@ -13,6 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
 var _compiled = require("@atlaskit/primitives/compiled");
+var _context = require("../../controllers/context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
@@ -28,11 +29,16 @@ var SpotlightDismissControl = exports.SpotlightDismissControl = /*#__PURE__*/(0,
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
     onClick = _ref.onClick,
     testId = _ref.testId;
+  var _useContext = (0, _react.useContext)(_context.SpotlightContext),
+    popoverContent = _useContext.popoverContent;
+  var dismiss = function dismiss(event) {
+    popoverContent.dismiss.current(event);
+  };
   return /*#__PURE__*/React.createElement(_compiled.Pressable
-  // eslint-disable-next-line jsx-a11y/no-autofocus -- VERIFIED: autoFocus moving to first focusable element on non-modal modal dialog.
+  // eslint-disable-next-line @atlassian/a11y/no-autofocus -- VERIFIED: autoFocus moving to first focusable element on non-modal modal dialog.
   , {
     autoFocus: autoFocus,
-    onClick: onClick,
+    onClick: onClick || dismiss,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/cjs/ui/popover-content/index.js

@@ -60,6 +60,8 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
     placement = _ref.placement,
     _ref$isVisible = _ref.isVisible,
     isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    _ref$shouldDismissOnC = _ref.shouldDismissOnClickOutside,
+    shouldDismissOnClickOutside = _ref$shouldDismissOnC === void 0 ? true : _ref$shouldDismissOnC,
     dismiss = _ref.dismiss,
     testId = _ref.testId;
   var updateRef = (0, _react.useRef)(function () {
@@ -76,6 +78,9 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
   (0, _react.useEffect)(function () {
     popoverContent.setRef(ref);
   }, [ref, popoverContent]);
+  (0, _react.useEffect)(function () {
+    popoverContent.setDismiss(dismiss);
+  }, [dismiss, popoverContent]);
   (0, _react.useEffect)(function () {
     card.setPlacement(placement);
   }, [placement, card]);
@@ -90,10 +95,13 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
     if (!focusWithin) {
       return;
     }
-    dismiss(event);
+    popoverContent.dismiss.current(event);
   });
   (0, _useOnClickOutside.useOnClickOutside)(function (event) {
-    dismiss(event);
+    if (!shouldDismissOnClickOutside) {
+      return;
+    }
+    popoverContent.dismiss.current(event);
   });
   return /*#__PURE__*/React.createElement(_popper.Popper, {
     offset: offset,

package/dist/cjs/utils/use-on-click-outside/index.js

@@ -17,8 +17,8 @@ var useOnClickOutside = exports.useOnClickOutside = function useOnClickOutside(o
     if (!doc) {
       return;
     }
-    var unbindMouseDown = (0, _bindEventListener.bind)(doc, {
-      type: 'mousedown',
+    var unbindMouseUp = (0, _bindEventListener.bind)(doc, {
+      type: 'mouseup',
       listener: function listener(event) {
         if (!ref || !ref.current) {
           return;
@@ -31,7 +31,7 @@ var useOnClickOutside = exports.useOnClickOutside = function useOnClickOutside(o
       }
     });
     return function () {
-      unbindMouseDown();
+      unbindMouseUp();
     };
   }, [onClickOutside, ref]);
 };

package/dist/es2019/controllers/context.js

@@ -1,7 +1,7 @@
 /* context.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { createContext, useId, useState } from 'react';
+import { createContext, useId, useRef, useState } from 'react';
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -22,8 +22,10 @@ export const SpotlightContext = /*#__PURE__*/createContext({
     setRef: () => undefined,
     update: () => () => new Promise(() => null),
     setUpdate: () => () => new Promise(() => null),
-    dismiss: () => undefined,
-    setDismiss: () => () => undefined
+    dismiss: {
+      current: () => undefined
+    },
+    setDismiss: () => undefined
   }
 });
 
@@ -37,7 +39,10 @@ export const SpotlightContextProvider = ({
   const [update, setUpdate] = useState(() => async () => undefined);
   const [popoverRef, setPopoverRef] = useState();
   const [cardRef, setCardRef] = useState(null);
-  const [dismiss, setDismiss] = useState(() => undefined);
+  const dismissRef = useRef(() => undefined);
+  const setDismiss = dismissFn => {
+    dismissRef.current = dismissFn;
+  };
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       card: {
@@ -55,7 +60,7 @@ export const SpotlightContextProvider = ({
         setRef: setPopoverRef,
         update,
         setUpdate,
-        dismiss,
+        dismiss: dismissRef,
         setDismiss
       }
     }

package/dist/es2019/ui/dismiss-control/index.js

@@ -2,9 +2,10 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import CrossIcon from '@atlaskit/icon/core/cross';
 import { Pressable } from '@atlaskit/primitives/compiled';
+import { SpotlightContext } from '../../controllers/context';
 const styles = {
   root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
 };
@@ -19,11 +20,17 @@ export const SpotlightDismissControl = /*#__PURE__*/forwardRef(({
   onClick,
   testId
 }, ref) => {
+  const {
+    popoverContent
+  } = useContext(SpotlightContext);
+  const dismiss = event => {
+    popoverContent.dismiss.current(event);
+  };
   return /*#__PURE__*/React.createElement(Pressable
-  // eslint-disable-next-line jsx-a11y/no-autofocus -- VERIFIED: autoFocus moving to first focusable element on non-modal modal dialog.
+  // eslint-disable-next-line @atlassian/a11y/no-autofocus -- VERIFIED: autoFocus moving to first focusable element on non-modal modal dialog.
   , {
     autoFocus: autoFocus,
-    onClick: onClick,
+    onClick: onClick || dismiss,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/es2019/ui/popover-content/index.js

@@ -50,6 +50,7 @@ export const PopoverContent = ({
   children,
   placement,
   isVisible = true,
+  shouldDismissOnClickOutside = true,
   dismiss,
   testId
 }) => {
@@ -64,6 +65,9 @@ export const PopoverContent = ({
   useEffect(() => {
     popoverContent.setRef(ref);
   }, [ref, popoverContent]);
+  useEffect(() => {
+    popoverContent.setDismiss(dismiss);
+  }, [dismiss, popoverContent]);
   useEffect(() => {
     card.setPlacement(placement);
   }, [placement, card]);
@@ -76,10 +80,13 @@ export const PopoverContent = ({
     if (!focusWithin) {
       return;
     }
-    dismiss(event);
+    popoverContent.dismiss.current(event);
   });
   useOnClickOutside(event => {
-    dismiss(event);
+    if (!shouldDismissOnClickOutside) {
+      return;
+    }
+    popoverContent.dismiss.current(event);
   });
   return /*#__PURE__*/React.createElement(Popper, {
     offset: offset,

package/dist/es2019/utils/use-on-click-outside/index.js

@@ -12,8 +12,8 @@ export const useOnClickOutside = onClickOutside => {
     if (!doc) {
       return;
     }
-    const unbindMouseDown = bind(doc, {
-      type: 'mousedown',
+    const unbindMouseUp = bind(doc, {
+      type: 'mouseup',
       listener: event => {
         if (!ref || !ref.current) {
           return;
@@ -26,7 +26,7 @@ export const useOnClickOutside = onClickOutside => {
       }
     });
     return () => {
-      unbindMouseDown();
+      unbindMouseUp();
     };
   }, [onClickOutside, ref]);
 };

package/dist/esm/controllers/context.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { createContext, useId, useState } from 'react';
+import { createContext, useId, useRef, useState } from 'react';
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -45,13 +45,13 @@ export var SpotlightContext = /*#__PURE__*/createContext({
         });
       };
     },
-    dismiss: function dismiss() {
-      return undefined;
+    dismiss: {
+      current: function current() {
+        return undefined;
+      }
     },
     setDismiss: function setDismiss() {
-      return function () {
-        return undefined;
-      };
+      return undefined;
     }
   }
 });
@@ -92,12 +92,12 @@ export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
     _useState0 = _slicedToArray(_useState9, 2),
     cardRef = _useState0[0],
     setCardRef = _useState0[1];
-  var _useState1 = useState(function () {
-      return undefined;
-    }),
-    _useState10 = _slicedToArray(_useState1, 2),
-    dismiss = _useState10[0],
-    setDismiss = _useState10[1];
+  var dismissRef = useRef(function () {
+    return undefined;
+  });
+  var setDismiss = function setDismiss(dismissFn) {
+    dismissRef.current = dismissFn;
+  };
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       card: {
@@ -115,7 +115,7 @@ export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
         setRef: setPopoverRef,
         update: update,
         setUpdate: setUpdate,
-        dismiss: dismiss,
+        dismiss: dismissRef,
         setDismiss: setDismiss
       }
     }

package/dist/esm/ui/dismiss-control/index.js

@@ -2,9 +2,10 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import CrossIcon from '@atlaskit/icon/core/cross';
 import { Pressable } from '@atlaskit/primitives/compiled';
+import { SpotlightContext } from '../../controllers/context';
 var styles = {
   root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
 };
@@ -19,11 +20,16 @@ export var SpotlightDismissControl = /*#__PURE__*/forwardRef(function (_ref, ref
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
     onClick = _ref.onClick,
     testId = _ref.testId;
+  var _useContext = useContext(SpotlightContext),
+    popoverContent = _useContext.popoverContent;
+  var dismiss = function dismiss(event) {
+    popoverContent.dismiss.current(event);
+  };
   return /*#__PURE__*/React.createElement(Pressable
-  // eslint-disable-next-line jsx-a11y/no-autofocus -- VERIFIED: autoFocus moving to first focusable element on non-modal modal dialog.
+  // eslint-disable-next-line @atlassian/a11y/no-autofocus -- VERIFIED: autoFocus moving to first focusable element on non-modal modal dialog.
   , {
     autoFocus: autoFocus,
-    onClick: onClick,
+    onClick: onClick || dismiss,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/esm/ui/popover-content/index.js

@@ -51,6 +51,8 @@ export var PopoverContent = function PopoverContent(_ref) {
     placement = _ref.placement,
     _ref$isVisible = _ref.isVisible,
     isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    _ref$shouldDismissOnC = _ref.shouldDismissOnClickOutside,
+    shouldDismissOnClickOutside = _ref$shouldDismissOnC === void 0 ? true : _ref$shouldDismissOnC,
     dismiss = _ref.dismiss,
     testId = _ref.testId;
   var updateRef = useRef(function () {
@@ -67,6 +69,9 @@ export var PopoverContent = function PopoverContent(_ref) {
   useEffect(function () {
     popoverContent.setRef(ref);
   }, [ref, popoverContent]);
+  useEffect(function () {
+    popoverContent.setDismiss(dismiss);
+  }, [dismiss, popoverContent]);
   useEffect(function () {
     card.setPlacement(placement);
   }, [placement, card]);
@@ -81,10 +86,13 @@ export var PopoverContent = function PopoverContent(_ref) {
     if (!focusWithin) {
       return;
     }
-    dismiss(event);
+    popoverContent.dismiss.current(event);
   });
   useOnClickOutside(function (event) {
-    dismiss(event);
+    if (!shouldDismissOnClickOutside) {
+      return;
+    }
+    popoverContent.dismiss.current(event);
   });
   return /*#__PURE__*/React.createElement(Popper, {
     offset: offset,

package/dist/esm/utils/use-on-click-outside/index.js

@@ -11,8 +11,8 @@ export var useOnClickOutside = function useOnClickOutside(onClickOutside) {
     if (!doc) {
       return;
     }
-    var unbindMouseDown = bind(doc, {
-      type: 'mousedown',
+    var unbindMouseUp = bind(doc, {
+      type: 'mouseup',
       listener: function listener(event) {
         if (!ref || !ref.current) {
           return;
@@ -25,7 +25,7 @@ export var useOnClickOutside = function useOnClickOutside(onClickOutside) {
       }
     });
     return function () {
-      unbindMouseDown();
+      unbindMouseUp();
     };
   }, [onClickOutside, ref]);
 };

package/dist/types/controllers/context.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { type Dispatch, type MutableRefObject, type ReactNode, type SetStateAction } from 'react';
-import type { Placement } from '../types';
+import type { DismissEvent, Placement } from '../types';
 export interface SpotlightContextType {
     card: {
         ref: MutableRefObject<HTMLDivElement | null> | null;
@@ -20,8 +20,8 @@ export interface SpotlightContextType {
         setRef: Dispatch<SetStateAction<MutableRefObject<HTMLDivElement | undefined> | undefined>>;
         update: () => () => Promise<any>;
         setUpdate: Dispatch<SetStateAction<() => () => Promise<any>>>;
-        dismiss: () => void;
-        setDismiss: Dispatch<SetStateAction<() => void>>;
+        dismiss: MutableRefObject<(_event: DismissEvent) => void>;
+        setDismiss: (dismissFn: (_event: DismissEvent) => void) => void;
     };
 }
 export declare const SpotlightContext: import("react").Context<SpotlightContextType>;

package/dist/types/index.d.ts

@@ -14,5 +14,5 @@ export { SpotlightMedia, type SpotlightMediaProps } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent, type PopoverContentProps } from './ui/popover-content';
 export { PopoverTarget } from './ui/popover-target';
-export { type Placement } from './types';
+export { type Placement, type DismissEvent } from './types';
 export { UNSAFE_UpdateOnChange } from './ui/UNSAFE_update-on-change';

package/dist/types/types.d.ts

@@ -1 +1,10 @@
 export type Placement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+/**
+ * Spotlights can be dismissed by:
+ * 1. Clicking the `SpotlightDismissControl`
+ * 2. Clicking any DOM element outside the spotlight
+ * 3. Pressing the Escape key
+ *
+ * These events align to the `React.MouseEvent<HTMLButtonElement, MouseEvent>`, `MouseEvent`, and `KeyboardEvent` events respectively.
+ */
+export type DismissEvent = React.MouseEvent<HTMLButtonElement, MouseEvent> | MouseEvent | KeyboardEvent;

package/dist/types/ui/popover-content/index.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-import type { Placement } from '../../types';
+import type { DismissEvent, Placement } from '../../types';
 export interface PopoverContentProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
@@ -13,7 +13,8 @@ export interface PopoverContentProps {
     testId?: string;
     placement: Placement;
     isVisible?: boolean;
-    dismiss: (event: KeyboardEvent | MouseEvent) => void;
+    shouldDismissOnClickOutside?: boolean;
+    dismiss: (event: DismissEvent) => void;
     children: ReactNode;
 }
 /**
@@ -21,4 +22,4 @@ export interface PopoverContentProps {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement, isVisible, dismiss, testId, }: PopoverContentProps) => JSX.Element;
+export declare const PopoverContent: ({ children, placement, isVisible, shouldDismissOnClickOutside, dismiss, testId, }: PopoverContentProps) => JSX.Element;

package/dist/types-ts4.5/controllers/context.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { type Dispatch, type MutableRefObject, type ReactNode, type SetStateAction } from 'react';
-import type { Placement } from '../types';
+import type { DismissEvent, Placement } from '../types';
 export interface SpotlightContextType {
     card: {
         ref: MutableRefObject<HTMLDivElement | null> | null;
@@ -20,8 +20,8 @@ export interface SpotlightContextType {
         setRef: Dispatch<SetStateAction<MutableRefObject<HTMLDivElement | undefined> | undefined>>;
         update: () => () => Promise<any>;
         setUpdate: Dispatch<SetStateAction<() => () => Promise<any>>>;
-        dismiss: () => void;
-        setDismiss: Dispatch<SetStateAction<() => void>>;
+        dismiss: MutableRefObject<(_event: DismissEvent) => void>;
+        setDismiss: (dismissFn: (_event: DismissEvent) => void) => void;
     };
 }
 export declare const SpotlightContext: import("react").Context<SpotlightContextType>;

package/dist/types-ts4.5/index.d.ts

@@ -14,5 +14,5 @@ export { SpotlightMedia, type SpotlightMediaProps } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent, type PopoverContentProps } from './ui/popover-content';
 export { PopoverTarget } from './ui/popover-target';
-export { type Placement } from './types';
+export { type Placement, type DismissEvent } from './types';
 export { UNSAFE_UpdateOnChange } from './ui/UNSAFE_update-on-change';

package/dist/types-ts4.5/types.d.ts

@@ -1 +1,10 @@
 export type Placement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+/**
+ * Spotlights can be dismissed by:
+ * 1. Clicking the `SpotlightDismissControl`
+ * 2. Clicking any DOM element outside the spotlight
+ * 3. Pressing the Escape key
+ *
+ * These events align to the `React.MouseEvent<HTMLButtonElement, MouseEvent>`, `MouseEvent`, and `KeyboardEvent` events respectively.
+ */
+export type DismissEvent = React.MouseEvent<HTMLButtonElement, MouseEvent> | MouseEvent | KeyboardEvent;

package/dist/types-ts4.5/ui/popover-content/index.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-import type { Placement } from '../../types';
+import type { DismissEvent, Placement } from '../../types';
 export interface PopoverContentProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
@@ -13,7 +13,8 @@ export interface PopoverContentProps {
     testId?: string;
     placement: Placement;
     isVisible?: boolean;
-    dismiss: (event: KeyboardEvent | MouseEvent) => void;
+    shouldDismissOnClickOutside?: boolean;
+    dismiss: (event: DismissEvent) => void;
     children: ReactNode;
 }
 /**
@@ -21,4 +22,4 @@ export interface PopoverContentProps {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement, isVisible, dismiss, testId, }: PopoverContentProps) => JSX.Element;
+export declare const PopoverContent: ({ children, placement, isVisible, shouldDismissOnClickOutside, dismiss, testId, }: PopoverContentProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.6.1",
+	"version": "0.6.3",
 	"description": "A spotlight introduces users to various points of interest across Atlassian through focused messages or multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,17 +28,17 @@
 	"dependencies": {
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/button": "^23.5.0",
-		"@atlaskit/css": "^0.14.0",
+		"@atlaskit/css": "^0.15.0",
 		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/primitives": "^14.15.0",
-		"@atlaskit/tokens": "^6.4.0",
+		"@atlaskit/primitives": "^15.0.0",
+		"@atlaskit/tokens": "^7.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.3",
+		"@compiled/react": "^0.18.6",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {