@atlaskit/spotlight 0.0.6 → 0.0.8

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/spotlight
 
+## 0.0.8
+
+### Patch Changes
+
+- [`9d9570259070a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d9570259070a) -
+  Create PopoverProvider, PopoverTarget, PopoverContent components.
+- [`9d9570259070a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d9570259070a) -
+  Create Caret component. Positions the Spotlight UI card in relation to the Caret component, and
+  positions the Caret component in relation to the PopoverTarget element.
+
+## 0.0.7
+
+### Patch Changes
+
+- [#197821](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197821)
+  [`f9dbe2c16f7e0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f9dbe2c16f7e0) -
+  Create PopoverProvider, PopoverTarget, PopoverContent components.
+
 ## 0.0.6
 
 ### Patch Changes

package/dist/cjs/controllers/context.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpotlightContextProvider = exports.SpotlightContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+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); }
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var SpotlightContext = exports.SpotlightContext = /*#__PURE__*/(0, _react.createContext)({
+  placement: 'bottom-end',
+  setPlacement: function setPlacement() {
+    return undefined;
+  }
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var SpotlightContextProvider = exports.SpotlightContextProvider = function SpotlightContextProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)('bottom-end'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    placement = _useState2[0],
+    setPlacement = _useState2[1];
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/react-in-jsx-scope
+    _react.default.createElement(SpotlightContext.Provider, {
+      value: {
+        placement: placement,
+        setPlacement: setPlacement
+      }
+    }, children)
+  );
+};

package/dist/cjs/index.js

@@ -3,6 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "PopoverContent", {
+  enumerable: true,
+  get: function get() {
+    return _popoverContent.PopoverContent;
+  }
+});
+Object.defineProperty(exports, "PopoverProvider", {
+  enumerable: true,
+  get: function get() {
+    return _popoverProvider.PopoverProvider;
+  }
+});
+Object.defineProperty(exports, "PopoverTarget", {
+  enumerable: true,
+  get: function get() {
+    return _popoverTarget.PopoverTarget;
+  }
+});
 Object.defineProperty(exports, "Spotlight", {
   enumerable: true,
   get: function get() {
@@ -65,4 +83,7 @@ var _actions = require("./ui/actions");
 var _primaryAction = require("./ui/primary-action");
 var _secondaryAction = require("./ui/secondary-action");
 var _controls = require("./ui/controls");
-var _dismissControl = require("./ui/dismiss-control");
+var _dismissControl = require("./ui/dismiss-control");
+var _popoverProvider = require("./ui/popover-provider");
+var _popoverContent = require("./ui/popover-content");
+var _popoverTarget = require("./ui/popover-target");

package/dist/cjs/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/ui/headline/index.js

@@ -21,6 +21,7 @@ var SpotlightHeadline = exports.SpotlightHeadline = /*#__PURE__*/(0, _react.forw
   return /*#__PURE__*/_react.default.createElement(_heading.default, {
     ref: ref,
     testId: testId,
+    color: "color.text.inverse",
     size: "xsmall"
   }, children);
 });

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopoverContent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _popper = require("@atlaskit/popper");
+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); }
+/**
+ * The Spotlight card can be positioned in many different configurations, but the caret should always point to
+ * the center of the target element. `@atlaskit/popper` uses `'top' | 'right' | 'bottom' | 'left'` values for
+ * this center alignment along the respective face. So we translate between the Spotlight position, and the
+ * Popper position using this map.
+ */
+var popperPlacementMap = {
+  'top-start': 'top',
+  'top-end': 'top',
+  'bottom-start': 'bottom',
+  'bottom-end': 'bottom',
+  'right-start': 'right',
+  'right-end': 'right',
+  'left-start': 'left',
+  'left-end': 'left'
+};
+
+/**
+ * __PopoverContent__
+ *
+ * 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;
+  var _useContext = (0, _react.useContext)(_context.SpotlightContext),
+    setPlacement = _useContext.setPlacement;
+  setPlacement(placement);
+  return /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+    offset: [0, 0],
+    placement: popperPlacementMap[placement]
+  }, function (_ref2) {
+    var ref = _ref2.ref,
+      style = _ref2.style;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      _react.default.createElement("div", {
+        ref: ref,
+        style: style
+      }, children)
+    );
+  });
+};

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopoverProvider = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _popper = require("@atlaskit/popper");
+var _context = require("../../controllers/context");
+/**
+ * __Popover provider__
+ *
+ * A popover provider provides necesary context for the `PopoverContent` and `PopoverTarget` components.
+ *
+ */
+var PopoverProvider = exports.PopoverProvider = function PopoverProvider(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_context.SpotlightContextProvider, null, /*#__PURE__*/_react.default.createElement(_popper.Manager, null, children));
+};

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopoverTarget = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _popper = require("@atlaskit/popper");
+/**
+ * __Target__
+ *
+ * A target is the element that the popover content will be positioned in relation to.
+ */
+var PopoverTarget = exports.PopoverTarget = function PopoverTarget(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref2) {
+    var ref = _ref2.ref;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref
+    }, children);
+  });
+};

package/dist/cjs/ui/spotlight/caret/index.compiled.css

@@ -0,0 +1,4 @@
+._1bsb7vkz{width:1pc}
+._4t3i7vkz{height:1pc}
+._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._t9ecjyd4{transform:rotate(45deg)}

package/dist/cjs/ui/spotlight/caret/index.js

@@ -0,0 +1,30 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Caret = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+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: "_1bsb7vkz _4t3i7vkz _t9ecjyd4 _bfhkcdhy"
+};
+/**
+ * __Caret__
+ *
+ * A `Caret` is a purely visual pointer displayed on the edge of a spotlight, which points to the target element.
+ *
+ */
+var Caret = exports.Caret = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var testId = _ref.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    ref: ref,
+    className: (0, _runtime.ax)([styles.root])
+  });
+});

package/dist/cjs/ui/spotlight/index.compiled.css

@@ -1,3 +1,13 @@
 
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._1bsbaq3k{width:295px}
-._kqswh2mm{position:relative}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._154imgjw{top:var(--ds-space-negative-200,-1pc)}
+._154iu2gc{top:var(--ds-space-100,8px)}
+._1bsbaq3k{width:295px}
+._1ltvmgjw{left:var(--ds-space-negative-200,-1pc)}
+._1ltvu2gc{left:var(--ds-space-100,8px)}
+._1xi2mgjw{right:var(--ds-space-negative-200,-1pc)}
+._1xi2u2gc{right:var(--ds-space-100,8px)}
+._94n5mgjw{bottom:var(--ds-space-negative-200,-1pc)}
+._94n5u2gc{bottom:var(--ds-space-100,8px)}
+._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}

package/dist/cjs/ui/spotlight/index.js

@@ -10,10 +10,22 @@ require("./index.compiled.css");
 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");
+var _caret = require("./caret");
 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: "_2rkopd34 _kqswh2mm _1bsbaq3k"
+  root: "_kqswh2mm",
+  card: "_2rkopd34 _kqswstnw _1bsbaq3k _bfhkcdhy"
+};
+var placementStyles = {
+  'top-start': "_94n5u2gc _1xi2mgjw",
+  'top-end': "_94n5u2gc _1ltvmgjw",
+  'right-start': "_1ltvu2gc _94n5mgjw",
+  'right-end': "_1ltvu2gc _154imgjw",
+  'bottom-start': "_154iu2gc _1xi2mgjw",
+  'bottom-end': "_154iu2gc _1ltvmgjw",
+  'left-start': "_1xi2u2gc _94n5mgjw",
+  'left-end': "_1xi2u2gc _154imgjw"
 };
 /**
  * __Spotlight__
@@ -24,10 +36,13 @@ var styles = {
 var Spotlight = exports.Spotlight = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement(_compiled.Box, {
+  var _useContext = (0, _react.useContext)(_context.SpotlightContext),
+    placement = _useContext.placement;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.root])
+  }, /*#__PURE__*/React.createElement(_caret.Caret, null), /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    xcss: styles.root,
-    backgroundColor: "color.background.neutral.bold",
-    testId: testId
-  }, children);
+    "data-testid": testId,
+    className: (0, _runtime.ax)([styles.card, placementStyles[placement]])
+  }, children));
 });

package/dist/es2019/controllers/context.js

@@ -0,0 +1,26 @@
+import React, { createContext, useState } from 'react';
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const SpotlightContext = /*#__PURE__*/createContext({
+  placement: 'bottom-end',
+  setPlacement: () => undefined
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const SpotlightContextProvider = ({
+  children
+}) => {
+  const [placement, setPlacement] = useState('bottom-end');
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/react-in-jsx-scope
+    React.createElement(SpotlightContext.Provider, {
+      value: {
+        placement,
+        setPlacement
+      }
+    }, children)
+  );
+};

package/dist/es2019/index.js

@@ -6,4 +6,7 @@ export { SpotlightActions } from './ui/actions';
 export { SpotlightPrimaryAction } from './ui/primary-action';
 export { SpotlightSecondaryAction } from './ui/secondary-action';
 export { SpotlightControls } from './ui/controls';
-export { SpotlightDismissControl } from './ui/dismiss-control';
+export { SpotlightDismissControl } from './ui/dismiss-control';
+export { PopoverProvider } from './ui/popover-provider';
+export { PopoverContent } from './ui/popover-content';
+export { PopoverTarget } from './ui/popover-target';

package/dist/es2019/ui/controls/index.js

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
-import { Flex } from "@atlaskit/primitives/compiled";
+import React, { forwardRef } from 'react';
+import { Flex } from '@atlaskit/primitives/compiled';
 /**
  * __Spotlight controls__
  *

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

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef } from 'react';
 import { IconButton } from '@atlaskit/button/new';
 import CrossIcon from '@atlaskit/icon/core/cross';
 /**

package/dist/es2019/ui/headline/index.js

@@ -13,6 +13,7 @@ export const SpotlightHeadline = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement(Heading, {
     ref: ref,
     testId: testId,
+    color: "color.text.inverse",
     size: "xsmall"
   }, children);
 });

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

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import { Popper } from '@atlaskit/popper';
+import { SpotlightContext } from '../../controllers/context';
+/**
+ * The Spotlight card can be positioned in many different configurations, but the caret should always point to
+ * the center of the target element. `@atlaskit/popper` uses `'top' | 'right' | 'bottom' | 'left'` values for
+ * this center alignment along the respective face. So we translate between the Spotlight position, and the
+ * Popper position using this map.
+ */
+const popperPlacementMap = {
+  'top-start': 'top',
+  'top-end': 'top',
+  'bottom-start': 'bottom',
+  'bottom-end': 'bottom',
+  'right-start': 'right',
+  'right-end': 'right',
+  'left-start': 'left',
+  'left-end': 'left'
+};
+
+/**
+ * __PopoverContent__
+ *
+ * A `PopoverContent` is the element that is shown as a popover.
+ */
+export const PopoverContent = ({
+  children,
+  placement
+}) => {
+  const {
+    setPlacement
+  } = useContext(SpotlightContext);
+  setPlacement(placement);
+  return /*#__PURE__*/React.createElement(Popper, {
+    offset: [0, 0],
+    placement: popperPlacementMap[placement]
+  }, ({
+    ref,
+    style
+  }) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+  React.createElement("div", {
+    ref: ref,
+    style: style
+  }, children));
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Manager } from '@atlaskit/popper';
+import { SpotlightContextProvider } from '../../controllers/context';
+
+/**
+ * __Popover provider__
+ *
+ * A popover provider provides necesary context for the `PopoverContent` and `PopoverTarget` components.
+ *
+ */
+export const PopoverProvider = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(SpotlightContextProvider, null, /*#__PURE__*/React.createElement(Manager, null, children));
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Reference } from '@atlaskit/popper';
+
+/**
+ * __Target__
+ *
+ * A target is the element that the popover content will be positioned in relation to.
+ */
+export const PopoverTarget = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Reference, null, ({
+    ref
+  }) => /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, children));
+};

package/dist/es2019/ui/spotlight/caret/index.compiled.css

@@ -0,0 +1,4 @@
+._1bsb7vkz{width:1pc}
+._4t3i7vkz{height:1pc}
+._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._t9ecjyd4{transform:rotate(45deg)}

package/dist/es2019/ui/spotlight/caret/index.js

@@ -0,0 +1,23 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+const styles = {
+  root: "_1bsb7vkz _4t3i7vkz _t9ecjyd4 _bfhkcdhy"
+};
+/**
+ * __Caret__
+ *
+ * A `Caret` is a purely visual pointer displayed on the edge of a spotlight, which points to the target element.
+ *
+ */
+export const Caret = /*#__PURE__*/forwardRef(({
+  testId
+}, ref) => {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    ref: ref,
+    className: ax([styles.root])
+  });
+});

package/dist/es2019/ui/spotlight/index.compiled.css

@@ -1,3 +1,13 @@
 
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._1bsbaq3k{width:295px}
-._kqswh2mm{position:relative}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._154imgjw{top:var(--ds-space-negative-200,-1pc)}
+._154iu2gc{top:var(--ds-space-100,8px)}
+._1bsbaq3k{width:295px}
+._1ltvmgjw{left:var(--ds-space-negative-200,-1pc)}
+._1ltvu2gc{left:var(--ds-space-100,8px)}
+._1xi2mgjw{right:var(--ds-space-negative-200,-1pc)}
+._1xi2u2gc{right:var(--ds-space-100,8px)}
+._94n5mgjw{bottom:var(--ds-space-negative-200,-1pc)}
+._94n5u2gc{bottom:var(--ds-space-100,8px)}
+._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}

package/dist/es2019/ui/spotlight/index.js

@@ -2,10 +2,22 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
-import { Box } from '@atlaskit/primitives/compiled';
+import { forwardRef, useContext } from 'react';
+import { SpotlightContext } from '../../controllers/context';
+import { Caret } from './caret';
 const styles = {
-  root: "_2rkopd34 _kqswh2mm _1bsbaq3k"
+  root: "_kqswh2mm",
+  card: "_2rkopd34 _kqswstnw _1bsbaq3k _bfhkcdhy"
+};
+const placementStyles = {
+  'top-start': "_94n5u2gc _1xi2mgjw",
+  'top-end': "_94n5u2gc _1ltvmgjw",
+  'right-start': "_1ltvu2gc _94n5mgjw",
+  'right-end': "_1ltvu2gc _154imgjw",
+  'bottom-start': "_154iu2gc _1xi2mgjw",
+  'bottom-end': "_154iu2gc _1ltvmgjw",
+  'left-start': "_1xi2u2gc _94n5mgjw",
+  'left-end': "_1xi2u2gc _154imgjw"
 };
 /**
  * __Spotlight__
@@ -17,10 +29,14 @@ export const Spotlight = /*#__PURE__*/forwardRef(({
   children,
   testId
 }, ref) => {
-  return /*#__PURE__*/React.createElement(Box, {
+  const {
+    placement
+  } = useContext(SpotlightContext);
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.root])
+  }, /*#__PURE__*/React.createElement(Caret, null), /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    xcss: styles.root,
-    backgroundColor: "color.background.neutral.bold",
-    testId: testId
-  }, children);
+    "data-testid": testId,
+    className: ax([styles.card, placementStyles[placement]])
+  }, children));
 });

package/dist/esm/controllers/context.js

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useState } from 'react';
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var SpotlightContext = /*#__PURE__*/createContext({
+  placement: 'bottom-end',
+  setPlacement: function setPlacement() {
+    return undefined;
+  }
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState('bottom-end'),
+    _useState2 = _slicedToArray(_useState, 2),
+    placement = _useState2[0],
+    setPlacement = _useState2[1];
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/react-in-jsx-scope
+    React.createElement(SpotlightContext.Provider, {
+      value: {
+        placement: placement,
+        setPlacement: setPlacement
+      }
+    }, children)
+  );
+};

package/dist/esm/index.js

@@ -6,4 +6,7 @@ export { SpotlightActions } from './ui/actions';
 export { SpotlightPrimaryAction } from './ui/primary-action';
 export { SpotlightSecondaryAction } from './ui/secondary-action';
 export { SpotlightControls } from './ui/controls';
-export { SpotlightDismissControl } from './ui/dismiss-control';
+export { SpotlightDismissControl } from './ui/dismiss-control';
+export { PopoverProvider } from './ui/popover-provider';
+export { PopoverContent } from './ui/popover-content';
+export { PopoverTarget } from './ui/popover-target';

package/dist/esm/ui/controls/index.js

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
-import { Flex } from "@atlaskit/primitives/compiled";
+import React, { forwardRef } from 'react';
+import { Flex } from '@atlaskit/primitives/compiled';
 /**
  * __Spotlight controls__
  *

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

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef } from 'react';
 import { IconButton } from '@atlaskit/button/new';
 import CrossIcon from '@atlaskit/icon/core/cross';
 /**

package/dist/esm/ui/headline/index.js

@@ -12,6 +12,7 @@ export var SpotlightHeadline = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(Heading, {
     ref: ref,
     testId: testId,
+    color: "color.text.inverse",
     size: "xsmall"
   }, children);
 });

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

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import { Popper } from '@atlaskit/popper';
+import { SpotlightContext } from '../../controllers/context';
+/**
+ * The Spotlight card can be positioned in many different configurations, but the caret should always point to
+ * the center of the target element. `@atlaskit/popper` uses `'top' | 'right' | 'bottom' | 'left'` values for
+ * this center alignment along the respective face. So we translate between the Spotlight position, and the
+ * Popper position using this map.
+ */
+var popperPlacementMap = {
+  'top-start': 'top',
+  'top-end': 'top',
+  'bottom-start': 'bottom',
+  'bottom-end': 'bottom',
+  'right-start': 'right',
+  'right-end': 'right',
+  'left-start': 'left',
+  'left-end': 'left'
+};
+
+/**
+ * __PopoverContent__
+ *
+ * A `PopoverContent` is the element that is shown as a popover.
+ */
+export var PopoverContent = function PopoverContent(_ref) {
+  var children = _ref.children,
+    placement = _ref.placement;
+  var _useContext = useContext(SpotlightContext),
+    setPlacement = _useContext.setPlacement;
+  setPlacement(placement);
+  return /*#__PURE__*/React.createElement(Popper, {
+    offset: [0, 0],
+    placement: popperPlacementMap[placement]
+  }, function (_ref2) {
+    var ref = _ref2.ref,
+      style = _ref2.style;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      React.createElement("div", {
+        ref: ref,
+        style: style
+      }, children)
+    );
+  });
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Manager } from '@atlaskit/popper';
+import { SpotlightContextProvider } from '../../controllers/context';
+
+/**
+ * __Popover provider__
+ *
+ * A popover provider provides necesary context for the `PopoverContent` and `PopoverTarget` components.
+ *
+ */
+export var PopoverProvider = function PopoverProvider(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(SpotlightContextProvider, null, /*#__PURE__*/React.createElement(Manager, null, children));
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Reference } from '@atlaskit/popper';
+
+/**
+ * __Target__
+ *
+ * A target is the element that the popover content will be positioned in relation to.
+ */
+export var PopoverTarget = function PopoverTarget(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(Reference, null, function (_ref2) {
+    var ref = _ref2.ref;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, children);
+  });
+};

package/dist/esm/ui/spotlight/caret/index.compiled.css

@@ -0,0 +1,4 @@
+._1bsb7vkz{width:1pc}
+._4t3i7vkz{height:1pc}
+._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._t9ecjyd4{transform:rotate(45deg)}

package/dist/esm/ui/spotlight/caret/index.js

@@ -0,0 +1,22 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+var styles = {
+  root: "_1bsb7vkz _4t3i7vkz _t9ecjyd4 _bfhkcdhy"
+};
+/**
+ * __Caret__
+ *
+ * A `Caret` is a purely visual pointer displayed on the edge of a spotlight, which points to the target element.
+ *
+ */
+export var Caret = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var testId = _ref.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    ref: ref,
+    className: ax([styles.root])
+  });
+});

package/dist/esm/ui/spotlight/index.compiled.css

@@ -1,3 +1,13 @@
 
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._1bsbaq3k{width:295px}
-._kqswh2mm{position:relative}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._154imgjw{top:var(--ds-space-negative-200,-1pc)}
+._154iu2gc{top:var(--ds-space-100,8px)}
+._1bsbaq3k{width:295px}
+._1ltvmgjw{left:var(--ds-space-negative-200,-1pc)}
+._1ltvu2gc{left:var(--ds-space-100,8px)}
+._1xi2mgjw{right:var(--ds-space-negative-200,-1pc)}
+._1xi2u2gc{right:var(--ds-space-100,8px)}
+._94n5mgjw{bottom:var(--ds-space-negative-200,-1pc)}
+._94n5u2gc{bottom:var(--ds-space-100,8px)}
+._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}

package/dist/esm/ui/spotlight/index.js

@@ -2,10 +2,22 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
-import { Box } from '@atlaskit/primitives/compiled';
+import { forwardRef, useContext } from 'react';
+import { SpotlightContext } from '../../controllers/context';
+import { Caret } from './caret';
 var styles = {
-  root: "_2rkopd34 _kqswh2mm _1bsbaq3k"
+  root: "_kqswh2mm",
+  card: "_2rkopd34 _kqswstnw _1bsbaq3k _bfhkcdhy"
+};
+var placementStyles = {
+  'top-start': "_94n5u2gc _1xi2mgjw",
+  'top-end': "_94n5u2gc _1ltvmgjw",
+  'right-start': "_1ltvu2gc _94n5mgjw",
+  'right-end': "_1ltvu2gc _154imgjw",
+  'bottom-start': "_154iu2gc _1xi2mgjw",
+  'bottom-end': "_154iu2gc _1ltvmgjw",
+  'left-start': "_1xi2u2gc _94n5mgjw",
+  'left-end': "_1xi2u2gc _154imgjw"
 };
 /**
  * __Spotlight__
@@ -16,10 +28,13 @@ var styles = {
 export var Spotlight = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement(Box, {
+  var _useContext = useContext(SpotlightContext),
+    placement = _useContext.placement;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.root])
+  }, /*#__PURE__*/React.createElement(Caret, null), /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    xcss: styles.root,
-    backgroundColor: "color.background.neutral.bold",
-    testId: testId
-  }, children);
+    "data-testid": testId,
+    className: ax([styles.card, placementStyles[placement]])
+  }, children));
 });

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

@@ -0,0 +1,11 @@
+import React, { type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import type { Placement } from '../types';
+interface SpotlightContextType {
+    placement: Placement;
+    setPlacement: Dispatch<SetStateAction<Placement>>;
+}
+export declare const SpotlightContext: React.Context<SpotlightContextType>;
+export declare const SpotlightContextProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+export {};

package/dist/types/index.d.ts

@@ -4,6 +4,9 @@ export { SpotlightHeadline, type SpotlightHeadlineProps } from './ui/headline';
 export { SpotlightFooter, type SpotlightFooterProps } from './ui/footer';
 export { SpotlightActions, type SpotlightActionsProps } from './ui/actions';
 export { SpotlightPrimaryAction, type SpotlightPrimaryActionProps } from './ui/primary-action';
-export { SpotlightSecondaryAction, type SpotlightSecondaryActionProps } from './ui/secondary-action';
+export { SpotlightSecondaryAction, type SpotlightSecondaryActionProps, } from './ui/secondary-action';
 export { SpotlightControls, type SpotlightControlsProps } from './ui/controls';
 export { SpotlightDismissControl, type SpotlightDismissControlProps } from './ui/dismiss-control';
+export { PopoverProvider } from './ui/popover-provider';
+export { PopoverContent } from './ui/popover-content';
+export { PopoverTarget } from './ui/popover-target';

package/dist/types/types.d.ts

@@ -0,0 +1 @@
+export type Placement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';

package/dist/types/ui/controls/index.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from "react";
+import React, { type ReactNode } from 'react';
 export interface SpotlightControlsProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique

package/dist/types/ui/dismiss-control/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 export interface SpotlightDismissControlProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique

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

@@ -0,0 +1,11 @@
+import React, { type ReactNode } from 'react';
+import type { Placement } from '../../types';
+/**
+ * __PopoverContent__
+ *
+ * A `PopoverContent` is the element that is shown as a popover.
+ */
+export declare const PopoverContent: ({ children, placement, }: {
+    children: ReactNode;
+    placement: Placement;
+}) => React.JSX.Element;

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

@@ -0,0 +1,10 @@
+import React, { type ReactNode } from 'react';
+/**
+ * __Popover provider__
+ *
+ * A popover provider provides necesary context for the `PopoverContent` and `PopoverTarget` components.
+ *
+ */
+export declare const PopoverProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

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

@@ -0,0 +1,9 @@
+import React, { type ReactNode } from 'react';
+/**
+ * __Target__
+ *
+ * A target is the element that the popover content will be positioned in relation to.
+ */
+export declare const PopoverTarget: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

package/dist/types/ui/spotlight/caret/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/// <reference types="react" />
+export interface CaretProps {
+    /**
+     * 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,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+}
+/**
+ * __Caret__
+ *
+ * A `Caret` is a purely visual pointer displayed on the edge of a spotlight, which points to the target element.
+ *
+ */
+export declare const Caret: import("react").ForwardRefExoticComponent<CaretProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+import React, { type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import type { Placement } from '../types';
+interface SpotlightContextType {
+    placement: Placement;
+    setPlacement: Dispatch<SetStateAction<Placement>>;
+}
+export declare const SpotlightContext: React.Context<SpotlightContextType>;
+export declare const SpotlightContextProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+export {};

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

@@ -4,6 +4,9 @@ export { SpotlightHeadline, type SpotlightHeadlineProps } from './ui/headline';
 export { SpotlightFooter, type SpotlightFooterProps } from './ui/footer';
 export { SpotlightActions, type SpotlightActionsProps } from './ui/actions';
 export { SpotlightPrimaryAction, type SpotlightPrimaryActionProps } from './ui/primary-action';
-export { SpotlightSecondaryAction, type SpotlightSecondaryActionProps } from './ui/secondary-action';
+export { SpotlightSecondaryAction, type SpotlightSecondaryActionProps, } from './ui/secondary-action';
 export { SpotlightControls, type SpotlightControlsProps } from './ui/controls';
 export { SpotlightDismissControl, type SpotlightDismissControlProps } from './ui/dismiss-control';
+export { PopoverProvider } from './ui/popover-provider';
+export { PopoverContent } from './ui/popover-content';
+export { PopoverTarget } from './ui/popover-target';

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

@@ -0,0 +1 @@
+export type Placement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';

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

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from "react";
+import React, { type ReactNode } from 'react';
 export interface SpotlightControlsProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique

package/dist/types-ts4.5/ui/dismiss-control/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 export interface SpotlightDismissControlProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique

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

@@ -0,0 +1,11 @@
+import React, { type ReactNode } from 'react';
+import type { Placement } from '../../types';
+/**
+ * __PopoverContent__
+ *
+ * A `PopoverContent` is the element that is shown as a popover.
+ */
+export declare const PopoverContent: ({ children, placement, }: {
+    children: ReactNode;
+    placement: Placement;
+}) => React.JSX.Element;

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

@@ -0,0 +1,10 @@
+import React, { type ReactNode } from 'react';
+/**
+ * __Popover provider__
+ *
+ * A popover provider provides necesary context for the `PopoverContent` and `PopoverTarget` components.
+ *
+ */
+export declare const PopoverProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

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

@@ -0,0 +1,9 @@
+import React, { type ReactNode } from 'react';
+/**
+ * __Target__
+ *
+ * A target is the element that the popover content will be positioned in relation to.
+ */
+export declare const PopoverTarget: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

package/dist/types-ts4.5/ui/spotlight/caret/index.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+export interface CaretProps {
+    /**
+     * 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,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+}
+/**
+ * __Caret__
+ *
+ * A `Caret` is a purely visual pointer displayed on the edge of a spotlight, which points to the target element.
+ *
+ */
+export declare const Caret: import("react").ForwardRefExoticComponent<CaretProps & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.0.6",
+	"version": "0.0.8",
 	"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",
@@ -32,7 +32,8 @@
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^27.9.0",
+		"@atlaskit/icon": "^27.10.0",
+		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",