@atlaskit/spotlight 0.6.3 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/spotlight
 
+## 0.7.0
+
+### Minor Changes
+
+- [`6e38d616cae8e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6e38d616cae8e) -
+  Allow back, next, done actions to be passed into PopoverContent. These actions will be used if no
+  onClick handler is passed to SpotlightSecondaryAction, SpotlightPrimaryAction. If onClick handlers
+  are provided to the specific components, then they will take preference over what is passed to
+  PopoverContent.
+
+## 0.6.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.6.3
 
 ### Patch Changes

package/dist/cjs/controllers/context.js

@@ -61,6 +61,26 @@ var SpotlightContext = exports.SpotlightContext = /*#__PURE__*/(0, _react.create
     setDismiss: function setDismiss() {
       return undefined;
     }
+  },
+  primaryAction: {
+    action: {
+      current: function current() {
+        return undefined;
+      }
+    },
+    setAction: function setAction() {
+      return undefined;
+    }
+  },
+  secondaryAction: {
+    action: {
+      current: function current() {
+        return undefined;
+      }
+    },
+    setAction: function setAction() {
+      return undefined;
+    }
   }
 });
 
@@ -106,6 +126,18 @@ var SpotlightContextProvider = exports.SpotlightContextProvider = function Spotl
   var setDismiss = function setDismiss(dismissFn) {
     dismissRef.current = dismissFn;
   };
+  var secondaryActionRef = (0, _react.useRef)(function () {
+    return undefined;
+  });
+  var setSecondaryAction = function setSecondaryAction(actionFn) {
+    secondaryActionRef.current = actionFn;
+  };
+  var primaryActionRef = (0, _react.useRef)(function () {
+    return undefined;
+  });
+  var setPrimaryAction = function setPrimaryAction(actionFn) {
+    primaryActionRef.current = actionFn;
+  };
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       card: {
@@ -125,6 +157,14 @@ var SpotlightContextProvider = exports.SpotlightContextProvider = function Spotl
         setUpdate: setUpdate,
         dismiss: dismissRef,
         setDismiss: setDismiss
+      },
+      primaryAction: {
+        action: primaryActionRef,
+        setAction: setPrimaryAction
+      },
+      secondaryAction: {
+        action: secondaryActionRef,
+        setAction: setSecondaryAction
       }
     }
   }, children);

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

@@ -55,15 +55,24 @@ var popperPlacementMap = {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
-  var children = _ref.children,
-    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 PopoverContent = exports.PopoverContent = function PopoverContent(props) {
+  var children = props.children,
+    placement = props.placement,
+    _props$isVisible = props.isVisible,
+    isVisible = _props$isVisible === void 0 ? true : _props$isVisible,
+    _props$shouldDismissO = props.shouldDismissOnClickOutside,
+    shouldDismissOnClickOutside = _props$shouldDismissO === void 0 ? true : _props$shouldDismissO,
+    dismiss = props.dismiss,
+    back = props.back,
+    testId = props.testId;
+
+  /**
+   * A user should only be able to pass a `done` or a `next`. Not both.
+   * The type is set up as a discriminant union. So, we need a typeguard
+   * here to destructure it properly.
+   */
+  var done = 'done' in props ? props.done : undefined;
+  var next = 'next' in props ? props.next : undefined;
   var updateRef = (0, _react.useRef)(function () {
     return new Promise(function () {
       return undefined;
@@ -73,14 +82,34 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),
     heading = _useContext.heading,
     popoverContent = _useContext.popoverContent,
-    card = _useContext.card;
+    card = _useContext.card,
+    primaryAction = _useContext.primaryAction,
+    secondaryAction = _useContext.secondaryAction;
   var focusWithin = (0, _useFocusWithin.useFocusWithin)(popoverContent.ref);
   (0, _react.useEffect)(function () {
     popoverContent.setRef(ref);
   }, [ref, popoverContent]);
+  (0, _react.useEffect)(function () {
+    if (!done && !next) {
+      return;
+    }
+    if (done) {
+      primaryAction.setAction(done);
+      return;
+    } else if (next) {
+      primaryAction.setAction(next);
+      return;
+    }
+  }, [done, next, primaryAction]);
   (0, _react.useEffect)(function () {
     popoverContent.setDismiss(dismiss);
   }, [dismiss, popoverContent]);
+  (0, _react.useEffect)(function () {
+    if (!back) {
+      return;
+    }
+    secondaryAction.setAction(back);
+  }, [back, secondaryAction]);
   (0, _react.useEffect)(function () {
     card.setPlacement(placement);
   }, [placement, card]);
@@ -106,10 +135,10 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
   return /*#__PURE__*/React.createElement(_popper.Popper, {
     offset: offset,
     placement: popperPlacementMap[placement]
-  }, function (_ref2) {
-    var localRef = _ref2.ref,
-      style = _ref2.style,
-      update = _ref2.update;
+  }, function (_ref) {
+    var localRef = _ref.ref,
+      style = _ref.style,
+      update = _ref.update;
     if (!isVisible) {
       return;
     }

package/dist/cjs/ui/primary-action/index.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 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 _1dqonqa1 _189ee4h9 _1h6dz9xs _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
@@ -27,12 +28,17 @@ var SpotlightPrimaryAction = exports.SpotlightPrimaryAction = /*#__PURE__*/(0, _
     onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
+  var _useContext = (0, _react.useContext)(_context.SpotlightContext),
+    primaryAction = _useContext.primaryAction;
+  var done = function done(event) {
+    primaryAction.action.current(event);
+  };
   return /*#__PURE__*/React.createElement(_compiled.Pressable, {
     "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,
-    onClick: onClick
+    onClick: onClick || done
   }, /*#__PURE__*/React.createElement(_compiled.Text, {
     as: "span"
   }, children));

package/dist/cjs/ui/secondary-action/index.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 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 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
@@ -27,12 +28,17 @@ var SpotlightSecondaryAction = exports.SpotlightSecondaryAction = /*#__PURE__*/(
     onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
+  var _useContext = (0, _react.useContext)(_context.SpotlightContext),
+    secondaryAction = _useContext.secondaryAction;
+  var back = function back(event) {
+    secondaryAction.action.current(event);
+  };
   return /*#__PURE__*/React.createElement(_compiled.Pressable, {
     "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,
-    onClick: onClick
+    onClick: onClick || back
   }, /*#__PURE__*/React.createElement(_compiled.Text, {
     as: "span"
   }, children));

package/dist/es2019/controllers/context.js

@@ -26,6 +26,18 @@ export const SpotlightContext = /*#__PURE__*/createContext({
       current: () => undefined
     },
     setDismiss: () => undefined
+  },
+  primaryAction: {
+    action: {
+      current: () => undefined
+    },
+    setAction: () => undefined
+  },
+  secondaryAction: {
+    action: {
+      current: () => undefined
+    },
+    setAction: () => undefined
   }
 });
 
@@ -43,6 +55,14 @@ export const SpotlightContextProvider = ({
   const setDismiss = dismissFn => {
     dismissRef.current = dismissFn;
   };
+  const secondaryActionRef = useRef(() => undefined);
+  const setSecondaryAction = actionFn => {
+    secondaryActionRef.current = actionFn;
+  };
+  const primaryActionRef = useRef(() => undefined);
+  const setPrimaryAction = actionFn => {
+    primaryActionRef.current = actionFn;
+  };
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       card: {
@@ -62,6 +82,14 @@ export const SpotlightContextProvider = ({
         setUpdate,
         dismiss: dismissRef,
         setDismiss
+      },
+      primaryAction: {
+        action: primaryActionRef,
+        setAction: setPrimaryAction
+      },
+      secondaryAction: {
+        action: secondaryActionRef,
+        setAction: setSecondaryAction
       }
     }
   }, children);

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

@@ -46,28 +46,58 @@ const popperPlacementMap = {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export const PopoverContent = ({
-  children,
-  placement,
-  isVisible = true,
-  shouldDismissOnClickOutside = true,
-  dismiss,
-  testId
-}) => {
+export const PopoverContent = props => {
+  const {
+    children,
+    placement,
+    isVisible = true,
+    shouldDismissOnClickOutside = true,
+    dismiss,
+    back,
+    testId
+  } = props;
+
+  /**
+   * A user should only be able to pass a `done` or a `next`. Not both.
+   * The type is set up as a discriminant union. So, we need a typeguard
+   * here to destructure it properly.
+   */
+  const done = 'done' in props ? props.done : undefined;
+  const next = 'next' in props ? props.next : undefined;
   const updateRef = useRef(() => new Promise(() => undefined));
   const ref = useRef();
   const {
     heading,
     popoverContent,
-    card
+    card,
+    primaryAction,
+    secondaryAction
   } = useContext(SpotlightContext);
   const focusWithin = useFocusWithin(popoverContent.ref);
   useEffect(() => {
     popoverContent.setRef(ref);
   }, [ref, popoverContent]);
+  useEffect(() => {
+    if (!done && !next) {
+      return;
+    }
+    if (done) {
+      primaryAction.setAction(done);
+      return;
+    } else if (next) {
+      primaryAction.setAction(next);
+      return;
+    }
+  }, [done, next, primaryAction]);
   useEffect(() => {
     popoverContent.setDismiss(dismiss);
   }, [dismiss, popoverContent]);
+  useEffect(() => {
+    if (!back) {
+      return;
+    }
+    secondaryAction.setAction(back);
+  }, [back, secondaryAction]);
   useEffect(() => {
     card.setPlacement(placement);
   }, [placement, card]);

package/dist/es2019/ui/primary-action/index.js

@@ -2,8 +2,9 @@
 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 { Pressable, Text } from '@atlaskit/primitives/compiled';
+import { SpotlightContext } from '../../controllers/context';
 const styles = {
   root: "_2rko12b0 _1dqonqa1 _189ee4h9 _1h6dz9xs _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
 };
@@ -20,12 +21,18 @@ export const SpotlightPrimaryAction = /*#__PURE__*/forwardRef(({
   children,
   testId
 }, ref) => {
+  const {
+    primaryAction
+  } = useContext(SpotlightContext);
+  const done = event => {
+    primaryAction.action.current(event);
+  };
   return /*#__PURE__*/React.createElement(Pressable, {
     "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,
-    onClick: onClick
+    onClick: onClick || done
   }, /*#__PURE__*/React.createElement(Text, {
     as: "span"
   }, children));

package/dist/es2019/ui/secondary-action/index.js

@@ -2,8 +2,9 @@
 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 { Pressable, Text } from '@atlaskit/primitives/compiled';
+import { SpotlightContext } from '../../controllers/context';
 const styles = {
   root: "_2rko12b0 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
 };
@@ -20,12 +21,18 @@ export const SpotlightSecondaryAction = /*#__PURE__*/forwardRef(({
   children,
   testId
 }, ref) => {
+  const {
+    secondaryAction
+  } = useContext(SpotlightContext);
+  const back = event => {
+    secondaryAction.action.current(event);
+  };
   return /*#__PURE__*/React.createElement(Pressable, {
     "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,
-    onClick: onClick
+    onClick: onClick || back
   }, /*#__PURE__*/React.createElement(Text, {
     as: "span"
   }, children));

package/dist/esm/controllers/context.js

@@ -53,6 +53,26 @@ export var SpotlightContext = /*#__PURE__*/createContext({
     setDismiss: function setDismiss() {
       return undefined;
     }
+  },
+  primaryAction: {
+    action: {
+      current: function current() {
+        return undefined;
+      }
+    },
+    setAction: function setAction() {
+      return undefined;
+    }
+  },
+  secondaryAction: {
+    action: {
+      current: function current() {
+        return undefined;
+      }
+    },
+    setAction: function setAction() {
+      return undefined;
+    }
   }
 });
 
@@ -98,6 +118,18 @@ export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
   var setDismiss = function setDismiss(dismissFn) {
     dismissRef.current = dismissFn;
   };
+  var secondaryActionRef = useRef(function () {
+    return undefined;
+  });
+  var setSecondaryAction = function setSecondaryAction(actionFn) {
+    secondaryActionRef.current = actionFn;
+  };
+  var primaryActionRef = useRef(function () {
+    return undefined;
+  });
+  var setPrimaryAction = function setPrimaryAction(actionFn) {
+    primaryActionRef.current = actionFn;
+  };
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       card: {
@@ -117,6 +149,14 @@ export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
         setUpdate: setUpdate,
         dismiss: dismissRef,
         setDismiss: setDismiss
+      },
+      primaryAction: {
+        action: primaryActionRef,
+        setAction: setPrimaryAction
+      },
+      secondaryAction: {
+        action: secondaryActionRef,
+        setAction: setSecondaryAction
       }
     }
   }, children);

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

@@ -46,15 +46,24 @@ var popperPlacementMap = {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export var PopoverContent = function PopoverContent(_ref) {
-  var children = _ref.children,
-    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;
+export var PopoverContent = function PopoverContent(props) {
+  var children = props.children,
+    placement = props.placement,
+    _props$isVisible = props.isVisible,
+    isVisible = _props$isVisible === void 0 ? true : _props$isVisible,
+    _props$shouldDismissO = props.shouldDismissOnClickOutside,
+    shouldDismissOnClickOutside = _props$shouldDismissO === void 0 ? true : _props$shouldDismissO,
+    dismiss = props.dismiss,
+    back = props.back,
+    testId = props.testId;
+
+  /**
+   * A user should only be able to pass a `done` or a `next`. Not both.
+   * The type is set up as a discriminant union. So, we need a typeguard
+   * here to destructure it properly.
+   */
+  var done = 'done' in props ? props.done : undefined;
+  var next = 'next' in props ? props.next : undefined;
   var updateRef = useRef(function () {
     return new Promise(function () {
       return undefined;
@@ -64,14 +73,34 @@ export var PopoverContent = function PopoverContent(_ref) {
   var _useContext = useContext(SpotlightContext),
     heading = _useContext.heading,
     popoverContent = _useContext.popoverContent,
-    card = _useContext.card;
+    card = _useContext.card,
+    primaryAction = _useContext.primaryAction,
+    secondaryAction = _useContext.secondaryAction;
   var focusWithin = useFocusWithin(popoverContent.ref);
   useEffect(function () {
     popoverContent.setRef(ref);
   }, [ref, popoverContent]);
+  useEffect(function () {
+    if (!done && !next) {
+      return;
+    }
+    if (done) {
+      primaryAction.setAction(done);
+      return;
+    } else if (next) {
+      primaryAction.setAction(next);
+      return;
+    }
+  }, [done, next, primaryAction]);
   useEffect(function () {
     popoverContent.setDismiss(dismiss);
   }, [dismiss, popoverContent]);
+  useEffect(function () {
+    if (!back) {
+      return;
+    }
+    secondaryAction.setAction(back);
+  }, [back, secondaryAction]);
   useEffect(function () {
     card.setPlacement(placement);
   }, [placement, card]);
@@ -97,10 +126,10 @@ export var PopoverContent = function PopoverContent(_ref) {
   return /*#__PURE__*/React.createElement(Popper, {
     offset: offset,
     placement: popperPlacementMap[placement]
-  }, function (_ref2) {
-    var localRef = _ref2.ref,
-      style = _ref2.style,
-      update = _ref2.update;
+  }, function (_ref) {
+    var localRef = _ref.ref,
+      style = _ref.style,
+      update = _ref.update;
     if (!isVisible) {
       return;
     }

package/dist/esm/ui/primary-action/index.js

@@ -2,8 +2,9 @@
 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 { Pressable, Text } from '@atlaskit/primitives/compiled';
+import { SpotlightContext } from '../../controllers/context';
 var styles = {
   root: "_2rko12b0 _1dqonqa1 _189ee4h9 _1h6dz9xs _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
 };
@@ -19,12 +20,17 @@ export var SpotlightPrimaryAction = /*#__PURE__*/forwardRef(function (_ref, ref)
     onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
+  var _useContext = useContext(SpotlightContext),
+    primaryAction = _useContext.primaryAction;
+  var done = function done(event) {
+    primaryAction.action.current(event);
+  };
   return /*#__PURE__*/React.createElement(Pressable, {
     "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,
-    onClick: onClick
+    onClick: onClick || done
   }, /*#__PURE__*/React.createElement(Text, {
     as: "span"
   }, children));

package/dist/esm/ui/secondary-action/index.js

@@ -2,8 +2,9 @@
 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 { Pressable, Text } from '@atlaskit/primitives/compiled';
+import { SpotlightContext } from '../../controllers/context';
 var styles = {
   root: "_2rko12b0 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
 };
@@ -19,12 +20,17 @@ export var SpotlightSecondaryAction = /*#__PURE__*/forwardRef(function (_ref, re
     onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
+  var _useContext = useContext(SpotlightContext),
+    secondaryAction = _useContext.secondaryAction;
+  var back = function back(event) {
+    secondaryAction.action.current(event);
+  };
   return /*#__PURE__*/React.createElement(Pressable, {
     "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,
-    onClick: onClick
+    onClick: onClick || back
   }, /*#__PURE__*/React.createElement(Text, {
     as: "span"
   }, children));

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 { DismissEvent, Placement } from '../types';
+import type { BackEvent, DismissEvent, DoneEvent, Placement } from '../types';
 export interface SpotlightContextType {
     card: {
         ref: MutableRefObject<HTMLDivElement | null> | null;
@@ -23,6 +23,14 @@ export interface SpotlightContextType {
         dismiss: MutableRefObject<(_event: DismissEvent) => void>;
         setDismiss: (dismissFn: (_event: DismissEvent) => void) => void;
     };
+    primaryAction: {
+        action: MutableRefObject<(_event: DoneEvent) => void>;
+        setAction: (doneFn: (_event: DoneEvent) => void) => void;
+    };
+    secondaryAction: {
+        action: MutableRefObject<(_event: BackEvent) => void>;
+        setAction: (backFn: (_event: BackEvent) => void) => void;
+    };
 }
 export declare const SpotlightContext: import("react").Context<SpotlightContextType>;
 export declare const SpotlightContextProvider: ({ children }: {

package/dist/types/types.d.ts

@@ -8,3 +8,6 @@ export type Placement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start'
  * These events align to the `React.MouseEvent<HTMLButtonElement, MouseEvent>`, `MouseEvent`, and `KeyboardEvent` events respectively.
  */
 export type DismissEvent = React.MouseEvent<HTMLButtonElement, MouseEvent> | MouseEvent | KeyboardEvent;
+export type BackEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>;
+export type NextEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>;
+export type DoneEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>;

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

@@ -3,8 +3,8 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-import type { DismissEvent, Placement } from '../../types';
-export interface PopoverContentProps {
+import type { BackEvent, DismissEvent, DoneEvent, NextEvent, Placement } from '../../types';
+interface BasePopoverContentProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
      * string that appears as a data attribute `data-testid` in the rendered code,
@@ -15,11 +15,23 @@ export interface PopoverContentProps {
     isVisible?: boolean;
     shouldDismissOnClickOutside?: boolean;
     dismiss: (event: DismissEvent) => void;
+    back?: (event: BackEvent) => void;
     children: ReactNode;
 }
+export type PopoverContentProps = BasePopoverContentProps & ({
+    next: (event: NextEvent) => void;
+    done?: never;
+} | {
+    done: (event: DoneEvent) => void;
+    next?: never;
+} | {
+    next?: never;
+    done?: never;
+});
 /**
  * __PopoverContent__
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement, isVisible, shouldDismissOnClickOutside, dismiss, testId, }: PopoverContentProps) => JSX.Element;
+export declare const PopoverContent: (props: PopoverContentProps) => JSX.Element;
+export {};

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 { DismissEvent, Placement } from '../types';
+import type { BackEvent, DismissEvent, DoneEvent, Placement } from '../types';
 export interface SpotlightContextType {
     card: {
         ref: MutableRefObject<HTMLDivElement | null> | null;
@@ -23,6 +23,14 @@ export interface SpotlightContextType {
         dismiss: MutableRefObject<(_event: DismissEvent) => void>;
         setDismiss: (dismissFn: (_event: DismissEvent) => void) => void;
     };
+    primaryAction: {
+        action: MutableRefObject<(_event: DoneEvent) => void>;
+        setAction: (doneFn: (_event: DoneEvent) => void) => void;
+    };
+    secondaryAction: {
+        action: MutableRefObject<(_event: BackEvent) => void>;
+        setAction: (backFn: (_event: BackEvent) => void) => void;
+    };
 }
 export declare const SpotlightContext: import("react").Context<SpotlightContextType>;
 export declare const SpotlightContextProvider: ({ children }: {

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

@@ -8,3 +8,6 @@ export type Placement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start'
  * These events align to the `React.MouseEvent<HTMLButtonElement, MouseEvent>`, `MouseEvent`, and `KeyboardEvent` events respectively.
  */
 export type DismissEvent = React.MouseEvent<HTMLButtonElement, MouseEvent> | MouseEvent | KeyboardEvent;
+export type BackEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>;
+export type NextEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>;
+export type DoneEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>;

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

@@ -3,8 +3,8 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-import type { DismissEvent, Placement } from '../../types';
-export interface PopoverContentProps {
+import type { BackEvent, DismissEvent, DoneEvent, NextEvent, Placement } from '../../types';
+interface BasePopoverContentProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
      * string that appears as a data attribute `data-testid` in the rendered code,
@@ -15,11 +15,23 @@ export interface PopoverContentProps {
     isVisible?: boolean;
     shouldDismissOnClickOutside?: boolean;
     dismiss: (event: DismissEvent) => void;
+    back?: (event: BackEvent) => void;
     children: ReactNode;
 }
+export type PopoverContentProps = BasePopoverContentProps & ({
+    next: (event: NextEvent) => void;
+    done?: never;
+} | {
+    done: (event: DoneEvent) => void;
+    next?: never;
+} | {
+    next?: never;
+    done?: never;
+});
 /**
  * __PopoverContent__
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement, isVisible, shouldDismissOnClickOutside, dismiss, testId, }: PopoverContentProps) => JSX.Element;
+export declare const PopoverContent: (props: PopoverContentProps) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.6.3",
+	"version": "0.7.0",
 	"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",
@@ -34,7 +34,7 @@
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/primitives": "^15.0.0",
+		"@atlaskit/primitives": "^16.0.0",
 		"@atlaskit/tokens": "^7.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",