@atlaskit/spotlight 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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
+
+- [`ccbe07df5c620`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ccbe07df5c620) -
+  Update documentation to include motion example.
+
 ## 0.7.1
 
 ### Patch Changes

package/constellation/index/examples.mdx

@@ -7,6 +7,7 @@ import SingleStepExample from '../../examples/constellation/single-step';
 import MultipleStepsExample from '../../examples/constellation/multiple-steps';
 import MediaExample from '../../examples/constellation/media';
 import ControlsExample from '../../examples/constellation/controls';
+import MotionExample from '../../examples/constellation/motion';
 
 ## Single step
 
@@ -20,16 +21,16 @@ To show/hide the `SpotlightCard`, simply use a `useState` to control the `isVisi
 `PopoverContent`. To position the `SpotlightCard`, use `PopoverProvider`, `PopoverTarget` and
 `PopoverContent` and set the `placement` prop.
 
-<Example Component={SingleStepExample} packageName="@atlaskit/spinner" />
+<Example Component={SingleStepExample} packageName="@atlaskit/spotlight" />
 
 ## Multi-step tour
 
-Multiple steps should be avoided if possible. If multiple steps are required, preference managing
-the tour with a `useState`. If `useState` is not feasible, then a React context may be used.
-However, these contexts will often need to be wrapping the entire `App` and therefore will cause the
-entire `App` to re-render every time a new spotlight step is shown, which is not performant.
+Multiple steps should be avoided if possible, but if they are required, manage the tour with a
+`useState`. If `useState` is not feasible, then a React context may be used. However, these contexts
+will often need to be wrapping the entire `App` and therefore will cause the entire `App` to
+re-render every time a new spotlight step is shown.
 
-<Example Component={MultipleStepsExample} packageName="@atlaskit/spinner" />
+<Example Component={MultipleStepsExample} packageName="@atlaskit/spotlight" />
 
 ## Placements
 
@@ -37,7 +38,7 @@ Spotlight placements are static. They do not change as the user scrolls, or if t
 overflows out of the viewport. Make sure to choose a placement that ensures the `SpotlightCard` is
 displayed in full.
 
-<Example Component={PlacementsExample} packageName="@atlaskit/spinner" />
+<Example Component={PlacementsExample} packageName="@atlaskit/spotlight" />
 
 ## Media
 
@@ -46,9 +47,16 @@ correct reflow on smaller viewports, media must be 295px width X 135px height.
 
 Media can be an image, gif, or video that helps communicate spotlight intent.
 
-<Example Component={MediaExample} packageName="@atlaskit/spinner" />
+<Example Component={MediaExample} packageName="@atlaskit/spotlight" />
 
 ## Controls
 
 `SpotlightDismissControl` is required for all `SpotlightCard` components. It **must** be the first
 focusable element on the `SpotlightCard` card to provide an accessible experience.
+
+## Motion
+
+`@atlaskit/spotlight` can be composed with `@atlaskit/motion` or other CSS animation packages to
+create smooth 'enter' or 'exit' transitions.
+
+<Example Component={MotionExample} packageName="@atlaskit/spotlight" />

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
@@ -24,20 +28,26 @@ interface BasePopoverContentProps {
      */
     shouldDismissOnClickOutside?: boolean;
     /**
-        * Spotlights can be dismissed by:
-        * - Clicking the `SpotlightDismissControl`
-        * - Clicking any DOM element outside the spotlight (if `shouldDismissOnClickOutside === true`)
-        * - Pressing the Escape key
-        *
-        * These events align to the React.MouseEvent<HTMLButtonElement, MouseEvent>, MouseEvent, and KeyboardEvent events respectively.
-        * Defaults to `true`.
+     * Spotlights can be dismissed by:
+     * - Clicking the `SpotlightDismissControl`
+     * - Clicking any DOM element outside the spotlight (if `shouldDismissOnClickOutside === true`)
+     * - Pressing the Escape key
+     *
+     * These events align to the React.MouseEvent<HTMLButtonElement, MouseEvent>, MouseEvent, and KeyboardEvent events respectively.
+     * Defaults to `true`.
      */
     dismiss: (event: DismissEvent) => void;
     /**
      * Invoked when the user clicks `SpotlightSecondaryAction`. If an `onClick` handler is provided to `SpotlightSecondaryAction`
      * 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
@@ -24,20 +31,26 @@ interface BasePopoverContentProps {
      */
     shouldDismissOnClickOutside?: boolean;
     /**
-        * Spotlights can be dismissed by:
-        * - Clicking the `SpotlightDismissControl`
-        * - Clicking any DOM element outside the spotlight (if `shouldDismissOnClickOutside === true`)
-        * - Pressing the Escape key
-        *
-        * These events align to the React.MouseEvent<HTMLButtonElement, MouseEvent>, MouseEvent, and KeyboardEvent events respectively.
-        * Defaults to `true`.
+     * Spotlights can be dismissed by:
+     * - Clicking the `SpotlightDismissControl`
+     * - Clicking any DOM element outside the spotlight (if `shouldDismissOnClickOutside === true`)
+     * - Pressing the Escape key
+     *
+     * These events align to the React.MouseEvent<HTMLButtonElement, MouseEvent>, MouseEvent, and KeyboardEvent events respectively.
+     * Defaults to `true`.
      */
     dismiss: (event: DismissEvent) => void;
     /**
      * Invoked when the user clicks `SpotlightSecondaryAction`. If an `onClick` handler is provided to `SpotlightSecondaryAction`
      * 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.1",
+	"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.0.0",
-		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/primitives": "^16.1.0",
+		"@atlaskit/tokens": "^7.1.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",