@atlaskit/spotlight 0.7.2 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/spotlight
 
+## 0.8.0
+
+### Minor Changes
+
+- [`2a1e06ea7c3d7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2a1e06ea7c3d7) -
+  Expose `offset` prop on `PopoverContent`. `PopoverContent` can now be manually positioned anywhere
+  within the viewport.
+
 ## 0.7.2
 
 ### Patch Changes

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

@@ -34,9 +34,7 @@ var SpotlightDismissControl = exports.SpotlightDismissControl = /*#__PURE__*/(0,
   var dismiss = function dismiss(event) {
     popoverContent.dismiss.current(event);
   };
-  return /*#__PURE__*/React.createElement(_compiled.Pressable
-  // eslint-disable-next-line @atlassian/a11y/no-autofocus -- VERIFIED: autoFocus moving to first focusable element on non-modal modal dialog.
-  , {
+  return /*#__PURE__*/React.createElement(_compiled.Pressable, {
     autoFocus: autoFocus,
     onClick: onClick || dismiss,
     ref: ref,

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

@@ -22,6 +22,10 @@ var styles = {
   root: "_1pby1fw0"
 };
 
+/**
+ * Taken from `@atlaskit/popper`
+ */
+
 /**
  * The `transform: rotate(45deg);` styles used to rotate the `Caret` component result in the corners of
  * the caret extending beyond the bounding box (by roughly 2px). So, apply an offset to ensure
@@ -30,7 +34,7 @@ var styles = {
  * Note: `@atlaskit/popper` maps the offset to the placement, so we only need to define `[0, 2]` and
  * the offset will get correctly rotated depending on the placement.
  */
-var offset = [0, 2];
+var defaultOffset = [0, 2];
 /**
  * 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
@@ -64,7 +68,9 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(props) {
     shouldDismissOnClickOutside = _props$shouldDismissO === void 0 ? true : _props$shouldDismissO,
     dismiss = props.dismiss,
     back = props.back,
-    testId = props.testId;
+    testId = props.testId,
+    _props$offset = props.offset,
+    offset = _props$offset === void 0 ? defaultOffset : _props$offset;
 
   /**
    * A user should only be able to pass a `done` or a `next`. Not both.

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

@@ -26,9 +26,7 @@ export const SpotlightDismissControl = /*#__PURE__*/forwardRef(({
   const dismiss = event => {
     popoverContent.dismiss.current(event);
   };
-  return /*#__PURE__*/React.createElement(Pressable
-  // eslint-disable-next-line @atlassian/a11y/no-autofocus -- VERIFIED: autoFocus moving to first focusable element on non-modal modal dialog.
-  , {
+  return /*#__PURE__*/React.createElement(Pressable, {
     autoFocus: autoFocus,
     onClick: onClick || dismiss,
     ref: ref,

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

@@ -13,6 +13,10 @@ const styles = {
   root: "_1pby1fw0"
 };
 
+/**
+ * Taken from `@atlaskit/popper`
+ */
+
 /**
  * The `transform: rotate(45deg);` styles used to rotate the `Caret` component result in the corners of
  * the caret extending beyond the bounding box (by roughly 2px). So, apply an offset to ensure
@@ -21,7 +25,7 @@ const styles = {
  * Note: `@atlaskit/popper` maps the offset to the placement, so we only need to define `[0, 2]` and
  * the offset will get correctly rotated depending on the placement.
  */
-const offset = [0, 2];
+const defaultOffset = [0, 2];
 /**
  * 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
@@ -54,7 +58,8 @@ export const PopoverContent = props => {
     shouldDismissOnClickOutside = true,
     dismiss,
     back,
-    testId
+    testId,
+    offset = defaultOffset
   } = props;
 
   /**

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

@@ -25,9 +25,7 @@ export var SpotlightDismissControl = /*#__PURE__*/forwardRef(function (_ref, ref
   var dismiss = function dismiss(event) {
     popoverContent.dismiss.current(event);
   };
-  return /*#__PURE__*/React.createElement(Pressable
-  // eslint-disable-next-line @atlassian/a11y/no-autofocus -- VERIFIED: autoFocus moving to first focusable element on non-modal modal dialog.
-  , {
+  return /*#__PURE__*/React.createElement(Pressable, {
     autoFocus: autoFocus,
     onClick: onClick || dismiss,
     ref: ref,

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

@@ -13,6 +13,10 @@ var styles = {
   root: "_1pby1fw0"
 };
 
+/**
+ * Taken from `@atlaskit/popper`
+ */
+
 /**
  * The `transform: rotate(45deg);` styles used to rotate the `Caret` component result in the corners of
  * the caret extending beyond the bounding box (by roughly 2px). So, apply an offset to ensure
@@ -21,7 +25,7 @@ var styles = {
  * Note: `@atlaskit/popper` maps the offset to the placement, so we only need to define `[0, 2]` and
  * the offset will get correctly rotated depending on the placement.
  */
-var offset = [0, 2];
+var defaultOffset = [0, 2];
 /**
  * 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
@@ -55,7 +59,9 @@ export var PopoverContent = function PopoverContent(props) {
     shouldDismissOnClickOutside = _props$shouldDismissO === void 0 ? true : _props$shouldDismissO,
     dismiss = props.dismiss,
     back = props.back,
-    testId = props.testId;
+    testId = props.testId,
+    _props$offset = props.offset,
+    offset = _props$offset === void 0 ? defaultOffset : _props$offset;
 
   /**
    * A user should only be able to pass a `done` or a `next`. Not both.

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

@@ -4,6 +4,10 @@
  */
 import { type ReactNode } from 'react';
 import type { BackEvent, DismissEvent, DoneEvent, NextEvent, Placement } from '../../types';
+/**
+ * Taken from `@atlaskit/popper`
+ */
+type Offset = [number | null | undefined, number | null | undefined];
 interface BasePopoverContentProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
@@ -38,6 +42,12 @@ interface BasePopoverContentProps {
      * then that takes precedence, and `back` will be ignored.
      */
     back?: (event: BackEvent) => void;
+    /**
+     * Distance the spotlight should be offset from the target in the format of [along, away] (units in px).
+     * Defaults to [0, 2] - which means the spotlight will be 2px away from the edge of the target specified
+     * by the `placement` prop.
+     */
+    offset?: Offset;
     /**
      * The content to be rendered in `PopoverContent`. This is intended to be a `SpotlightCard`.
      */

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

@@ -4,6 +4,13 @@
  */
 import { type ReactNode } from 'react';
 import type { BackEvent, DismissEvent, DoneEvent, NextEvent, Placement } from '../../types';
+/**
+ * Taken from `@atlaskit/popper`
+ */
+type Offset = [
+    number | null | undefined,
+    number | null | undefined
+];
 interface BasePopoverContentProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
@@ -38,6 +45,12 @@ interface BasePopoverContentProps {
      * then that takes precedence, and `back` will be ignored.
      */
     back?: (event: BackEvent) => void;
+    /**
+     * Distance the spotlight should be offset from the target in the format of [along, away] (units in px).
+     * Defaults to [0, 2] - which means the spotlight will be 2px away from the edge of the target specified
+     * by the `placement` prop.
+     */
+    offset?: Offset;
     /**
      * The content to be rendered in `PopoverContent`. This is intended to be a `SpotlightCard`.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.7.2",
+	"version": "0.8.0",
 	"description": "A spotlight introduces users to points of interest, from focused messages to multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,13 +35,13 @@
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/css": "^0.15.0",
-		"@atlaskit/ds-lib": "^5.1.0",
+		"@atlaskit/ds-lib": "^5.2.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/tokens": "^7.1.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",