@atlaskit/spotlight 0.3.3 → 0.3.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/spotlight
 
+## 0.3.4
+
+### Patch Changes
+
+- [`cc92031710191`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cc92031710191) -
+  `SpotlightDismissControl` now applies `autofocus` when it is mounted.
+
 ## 0.3.3
 
 ### Patch Changes

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

@@ -1,10 +1,11 @@
 ._1bsbo7ao{width:15px}
-._1eint94y{border-end-end-radius:1px}
 ._1pby1fw0{z-index:700}
-._1s1gt94y{border-start-start-radius:1px}
 ._1yxnt94y{border-end-start-radius:1px}
 ._4t3io7ao{height:15px}
-._5fbct94y{border-start-end-radius:1px}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._kqswh2mm{position:relative}
+._mkrzmhja{clip-path:polygon(0 0,100% 100%,0 100%)}
+._t9ec1hke{transform:rotate(135deg)}
+._t9ec71a3{transform:rotate(315deg)}
+._t9ecebzf{transform:rotate(225deg)}
 ._t9ecjyd4{transform:rotate(45deg)}

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

@@ -13,17 +13,17 @@ var _runtime = require("@compiled/react/runtime");
 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: "_kqswh2mm _1pby1fw0 _1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
-  'top-start': "_1eint94y",
-  'top-center': "_1eint94y",
-  'top-end': "_1eint94y",
-  'bottom-start': "_1s1gt94y",
-  'bottom-center': "_1s1gt94y",
-  'bottom-end': "_1s1gt94y",
-  'right-start': "_1yxnt94y",
-  'right-end': "_1yxnt94y",
-  'left-start': "_5fbct94y",
-  'left-end': "_5fbct94y"
+  root: "_bfhkcdhy _1yxnt94y _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
+  'top-start': "_t9ec71a3",
+  'top-center': "_t9ec71a3",
+  'top-end': "_t9ec71a3",
+  'bottom-start': "_t9ec1hke",
+  'bottom-center': "_t9ec1hke",
+  'bottom-end': "_t9ec1hke",
+  'right-start': "_t9ecjyd4",
+  'right-end': "_t9ecjyd4",
+  'left-start': "_t9ecebzf",
+  'left-end': "_t9ecebzf"
 };
 /**
  * __Caret__

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

@@ -24,14 +24,19 @@ var styles = {
  *
  */
 var SpotlightDismissControl = exports.SpotlightDismissControl = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var onClick = _ref.onClick,
+  var _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+    onClick = _ref.onClick,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement(_compiled.Pressable, {
-    "aria-label": "Dismiss",
-    xcss: styles.root,
+  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.
+  , {
+    autoFocus: autoFocus,
     onClick: onClick,
     ref: ref,
-    testId: testId
+    testId: testId,
+    xcss: styles.root,
+    "aria-label": "Dismiss"
   }, /*#__PURE__*/React.createElement(_cross.default, {
     label: "Close"
   }));

package/dist/cjs/ui/popover-content/index.compiled.css

@@ -1,5 +1 @@
-._1pby1fw0{z-index:700}
-._3um015vq{visibility:hidden}
-._3um0ewfl{visibility:visible}
-._lcxv1wug{pointer-events:auto}
-._lcxvglyw{pointer-events:none}
+._1pby1fw0{z-index:700}

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

@@ -16,10 +16,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var styles = {
   root: "_1pby1fw0"
 };
-var visibilityStyles = {
-  visible: "_lcxv1wug _3um0ewfl",
-  hidden: "_lcxvglyw _3um015vq"
-};
 
 /**
  * The `transform: rotate(45deg);` styles used to rotate the `Caret` component result in the corners of
@@ -63,7 +59,6 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),
     setPlacement = _useContext.setPlacement,
     heading = _useContext.heading;
-  var visibility = isVisible ? 'visible' : 'hidden';
   (0, _react.useEffect)(function () {
     setPlacement(placement);
   }, [placement, setPlacement]);
@@ -73,6 +68,9 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
   }, function (_ref2) {
     var ref = _ref2.ref,
       style = _ref2.style;
+    if (!isVisible) {
+      return;
+    }
     return /*#__PURE__*/React.createElement("div", {
       role: "dialog",
       "data-testid": testId,
@@ -81,7 +79,7 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: style,
-      className: (0, _runtime.ax)([styles.root, visibilityStyles[visibility]])
+      className: (0, _runtime.ax)([styles.root])
     }, children);
   });
 };

package/dist/cjs/ui/step-count/index.js

@@ -31,5 +31,5 @@ var SpotlightStepCount = exports.SpotlightStepCount = /*#__PURE__*/(0, _react.fo
   }, /*#__PURE__*/React.createElement(_compiled.Text, {
     ref: ref,
     testId: testId
-  }, children, ' ', /*#__PURE__*/React.createElement(_visuallyHidden.default, null, "steps")));
+  }, children, " ", /*#__PURE__*/React.createElement(_visuallyHidden.default, null, "steps")));
 });

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

@@ -1,10 +1,11 @@
 ._1bsbo7ao{width:15px}
-._1eint94y{border-end-end-radius:1px}
 ._1pby1fw0{z-index:700}
-._1s1gt94y{border-start-start-radius:1px}
 ._1yxnt94y{border-end-start-radius:1px}
 ._4t3io7ao{height:15px}
-._5fbct94y{border-start-end-radius:1px}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._kqswh2mm{position:relative}
+._mkrzmhja{clip-path:polygon(0 0,100% 100%,0 100%)}
+._t9ec1hke{transform:rotate(135deg)}
+._t9ec71a3{transform:rotate(315deg)}
+._t9ecebzf{transform:rotate(225deg)}
 ._t9ecjyd4{transform:rotate(45deg)}

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

@@ -5,17 +5,17 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useContext } from 'react';
 import { SpotlightContext } from '../../../controllers/context';
 const styles = {
-  root: "_kqswh2mm _1pby1fw0 _1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
-  'top-start': "_1eint94y",
-  'top-center': "_1eint94y",
-  'top-end': "_1eint94y",
-  'bottom-start': "_1s1gt94y",
-  'bottom-center': "_1s1gt94y",
-  'bottom-end': "_1s1gt94y",
-  'right-start': "_1yxnt94y",
-  'right-end': "_1yxnt94y",
-  'left-start': "_5fbct94y",
-  'left-end': "_5fbct94y"
+  root: "_bfhkcdhy _1yxnt94y _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
+  'top-start': "_t9ec71a3",
+  'top-center': "_t9ec71a3",
+  'top-end': "_t9ec71a3",
+  'bottom-start': "_t9ec1hke",
+  'bottom-center': "_t9ec1hke",
+  'bottom-end': "_t9ec1hke",
+  'right-start': "_t9ecjyd4",
+  'right-end': "_t9ecjyd4",
+  'left-start': "_t9ecebzf",
+  'left-end': "_t9ecebzf"
 };
 /**
  * __Caret__

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

@@ -15,15 +15,19 @@ const styles = {
  *
  */
 export const SpotlightDismissControl = /*#__PURE__*/forwardRef(({
+  autoFocus = true,
   onClick,
   testId
 }, ref) => {
-  return /*#__PURE__*/React.createElement(Pressable, {
-    "aria-label": "Dismiss",
-    xcss: styles.root,
+  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.
+  , {
+    autoFocus: autoFocus,
     onClick: onClick,
     ref: ref,
-    testId: testId
+    testId: testId,
+    xcss: styles.root,
+    "aria-label": "Dismiss"
   }, /*#__PURE__*/React.createElement(CrossIcon, {
     label: "Close"
   }));

package/dist/es2019/ui/popover-content/index.compiled.css

@@ -1,5 +1 @@
-._1pby1fw0{z-index:700}
-._3um015vq{visibility:hidden}
-._3um0ewfl{visibility:visible}
-._lcxv1wug{pointer-events:auto}
-._lcxvglyw{pointer-events:none}
+._1pby1fw0{z-index:700}

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

@@ -8,10 +8,6 @@ import { SpotlightContext } from '../../controllers/context';
 const styles = {
   root: "_1pby1fw0"
 };
-const visibilityStyles = {
-  visible: "_lcxv1wug _3um0ewfl",
-  hidden: "_lcxvglyw _3um015vq"
-};
 
 /**
  * The `transform: rotate(45deg);` styles used to rotate the `Caret` component result in the corners of
@@ -56,7 +52,6 @@ export const PopoverContent = ({
     setPlacement,
     heading
   } = useContext(SpotlightContext);
-  const visibility = isVisible ? 'visible' : 'hidden';
   useEffect(() => {
     setPlacement(placement);
   }, [placement, setPlacement]);
@@ -66,14 +61,19 @@ export const PopoverContent = ({
   }, ({
     ref,
     style
-  }) => /*#__PURE__*/React.createElement("div", {
-    role: "dialog",
-    "data-testid": testId,
-    "aria-labelledby": heading.id,
-    ref: ref
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: style,
-    className: ax([styles.root, visibilityStyles[visibility]])
-  }, children));
+  }) => {
+    if (!isVisible) {
+      return;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      role: "dialog",
+      "data-testid": testId,
+      "aria-labelledby": heading.id,
+      ref: ref
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: style,
+      className: ax([styles.root])
+    }, children);
+  });
 };

package/dist/es2019/ui/step-count/index.js

@@ -23,5 +23,5 @@ export const SpotlightStepCount = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement(Text, {
     ref: ref,
     testId: testId
-  }, children, ' ', /*#__PURE__*/React.createElement(VisuallyHidden, null, "steps")));
+  }, children, " ", /*#__PURE__*/React.createElement(VisuallyHidden, null, "steps")));
 });

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

@@ -1,10 +1,11 @@
 ._1bsbo7ao{width:15px}
-._1eint94y{border-end-end-radius:1px}
 ._1pby1fw0{z-index:700}
-._1s1gt94y{border-start-start-radius:1px}
 ._1yxnt94y{border-end-start-radius:1px}
 ._4t3io7ao{height:15px}
-._5fbct94y{border-start-end-radius:1px}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._kqswh2mm{position:relative}
+._mkrzmhja{clip-path:polygon(0 0,100% 100%,0 100%)}
+._t9ec1hke{transform:rotate(135deg)}
+._t9ec71a3{transform:rotate(315deg)}
+._t9ecebzf{transform:rotate(225deg)}
 ._t9ecjyd4{transform:rotate(45deg)}

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

@@ -5,17 +5,17 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useContext } from 'react';
 import { SpotlightContext } from '../../../controllers/context';
 var styles = {
-  root: "_kqswh2mm _1pby1fw0 _1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
-  'top-start': "_1eint94y",
-  'top-center': "_1eint94y",
-  'top-end': "_1eint94y",
-  'bottom-start': "_1s1gt94y",
-  'bottom-center': "_1s1gt94y",
-  'bottom-end': "_1s1gt94y",
-  'right-start': "_1yxnt94y",
-  'right-end': "_1yxnt94y",
-  'left-start': "_5fbct94y",
-  'left-end': "_5fbct94y"
+  root: "_bfhkcdhy _1yxnt94y _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
+  'top-start': "_t9ec71a3",
+  'top-center': "_t9ec71a3",
+  'top-end': "_t9ec71a3",
+  'bottom-start': "_t9ec1hke",
+  'bottom-center': "_t9ec1hke",
+  'bottom-end': "_t9ec1hke",
+  'right-start': "_t9ecjyd4",
+  'right-end': "_t9ecjyd4",
+  'left-start': "_t9ecebzf",
+  'left-end': "_t9ecebzf"
 };
 /**
  * __Caret__

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

@@ -15,14 +15,19 @@ var styles = {
  *
  */
 export var SpotlightDismissControl = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var onClick = _ref.onClick,
+  var _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+    onClick = _ref.onClick,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement(Pressable, {
-    "aria-label": "Dismiss",
-    xcss: styles.root,
+  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.
+  , {
+    autoFocus: autoFocus,
     onClick: onClick,
     ref: ref,
-    testId: testId
+    testId: testId,
+    xcss: styles.root,
+    "aria-label": "Dismiss"
   }, /*#__PURE__*/React.createElement(CrossIcon, {
     label: "Close"
   }));

package/dist/esm/ui/popover-content/index.compiled.css

@@ -1,5 +1 @@
-._1pby1fw0{z-index:700}
-._3um015vq{visibility:hidden}
-._3um0ewfl{visibility:visible}
-._lcxv1wug{pointer-events:auto}
-._lcxvglyw{pointer-events:none}
+._1pby1fw0{z-index:700}

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

@@ -8,10 +8,6 @@ import { SpotlightContext } from '../../controllers/context';
 var styles = {
   root: "_1pby1fw0"
 };
-var visibilityStyles = {
-  visible: "_lcxv1wug _3um0ewfl",
-  hidden: "_lcxvglyw _3um015vq"
-};
 
 /**
  * The `transform: rotate(45deg);` styles used to rotate the `Caret` component result in the corners of
@@ -55,7 +51,6 @@ export var PopoverContent = function PopoverContent(_ref) {
   var _useContext = useContext(SpotlightContext),
     setPlacement = _useContext.setPlacement,
     heading = _useContext.heading;
-  var visibility = isVisible ? 'visible' : 'hidden';
   useEffect(function () {
     setPlacement(placement);
   }, [placement, setPlacement]);
@@ -65,6 +60,9 @@ export var PopoverContent = function PopoverContent(_ref) {
   }, function (_ref2) {
     var ref = _ref2.ref,
       style = _ref2.style;
+    if (!isVisible) {
+      return;
+    }
     return /*#__PURE__*/React.createElement("div", {
       role: "dialog",
       "data-testid": testId,
@@ -73,7 +71,7 @@ export var PopoverContent = function PopoverContent(_ref) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: style,
-      className: ax([styles.root, visibilityStyles[visibility]])
+      className: ax([styles.root])
     }, children);
   });
 };

package/dist/esm/ui/step-count/index.js

@@ -22,5 +22,5 @@ export var SpotlightStepCount = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(Text, {
     ref: ref,
     testId: testId
-  }, children, ' ', /*#__PURE__*/React.createElement(VisuallyHidden, null, "steps")));
+  }, children, " ", /*#__PURE__*/React.createElement(VisuallyHidden, null, "steps")));
 });

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

@@ -10,6 +10,14 @@ export interface SpotlightDismissControlProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * @default true
+     *
+     * Specifies whether the dismiss button should be focused when the spotlight is rendered.
+     * For spotlights that are triggered by user-action, this should be `true`. In the event that
+     * a spotlight is rendered on pageload, without explicit user interaction, this should be `false`.
+     */
+    autoFocus?: boolean;
 }
 /**
  * __SpotlightDismissControl__

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

@@ -20,5 +20,5 @@ interface PopoverContentProps {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement, isVisible, testId }: PopoverContentProps) => JSX.Element;
+export declare const PopoverContent: ({ children, placement, isVisible, testId, }: PopoverContentProps) => JSX.Element;
 export {};

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

@@ -10,6 +10,14 @@ export interface SpotlightDismissControlProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * @default true
+     *
+     * Specifies whether the dismiss button should be focused when the spotlight is rendered.
+     * For spotlights that are triggered by user-action, this should be `true`. In the event that
+     * a spotlight is rendered on pageload, without explicit user interaction, this should be `false`.
+     */
+    autoFocus?: boolean;
 }
 /**
  * __SpotlightDismissControl__

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

@@ -20,5 +20,5 @@ interface PopoverContentProps {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement, isVisible, testId }: PopoverContentProps) => JSX.Element;
+export declare const PopoverContent: ({ children, placement, isVisible, testId, }: PopoverContentProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.3.3",
+	"version": "0.3.4",
 	"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",
@@ -29,7 +29,7 @@
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^28.2.0",
+		"@atlaskit/icon": "^28.3.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/primitives": "^14.15.0",