@atlaskit/spotlight 0.5.1 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/spotlight
 
+## 0.6.1
+
+### Patch Changes
+
+- [`598872f9c6e06`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/598872f9c6e06) -
+  Spotlight now dismisses on user click-outside.
+
+## 0.6.0
+
+### Minor Changes
+
+- [`c43cbdde6f08c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c43cbdde6f08c) -
+  `PopoverContent` `dismiss` prop is now required.
+
 ## 0.5.1
 
 ### Patch Changes

package/dist/cjs/controllers/context.js

@@ -19,6 +19,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var SpotlightContext = exports.SpotlightContext = /*#__PURE__*/(0, _react.createContext)({
   card: {
+    ref: null,
+    setRef: function setRef() {
+      return undefined;
+    },
     placement: 'bottom-end',
     setPlacement: function setPlacement() {
       return undefined;
@@ -90,17 +94,23 @@ var SpotlightContextProvider = exports.SpotlightContextProvider = function Spotl
     setUpdate = _useState6[1];
   var _useState7 = (0, _react.useState)(),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    ref = _useState8[0],
-    setRef = _useState8[1];
-  var _useState9 = (0, _react.useState)(function () {
+    popoverRef = _useState8[0],
+    setPopoverRef = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    cardRef = _useState0[0],
+    setCardRef = _useState0[1];
+  var _useState1 = (0, _react.useState)(function () {
       return undefined;
     }),
-    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    dismiss = _useState0[0],
-    setDismiss = _useState0[1];
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    dismiss = _useState10[0],
+    setDismiss = _useState10[1];
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       card: {
+        ref: cardRef,
+        setRef: setCardRef,
         placement: placement,
         setPlacement: setPlacement
       },
@@ -109,8 +119,8 @@ var SpotlightContextProvider = exports.SpotlightContextProvider = function Spotl
         setId: setHeadingId
       },
       popoverContent: {
-        ref: ref,
-        setRef: setRef,
+        ref: popoverRef,
+        setRef: setPopoverRef,
         update: update,
         setUpdate: setUpdate,
         dismiss: dismiss,

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

@@ -42,11 +42,16 @@ var SpotlightCard = exports.SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(
     testId = _ref.testId;
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),
     card = _useContext.card;
+  var cardRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    card.setRef(cardRef);
+  }, [card]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     ref: ref,
     className: (0, _runtime.ax)([styles.root])
   }, /*#__PURE__*/React.createElement(_caret.Caret, null), /*#__PURE__*/React.createElement(_compiled.Box, {
+    ref: cardRef,
     backgroundColor: "color.background.neutral.bold",
     xcss: (0, _css.cx)(styles.card, placementStyles[card.placement])
   }, children));

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

@@ -15,6 +15,7 @@ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _popper = require("@atlaskit/popper");
 var _context = require("../../controllers/context");
 var _useFocusWithin = require("../../utils/use-focus-within");
+var _useOnClickOutside = require("../../utils/use-on-click-outside");
 var _useOnEscape = require("../../utils/use-on-escape");
 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 = {
@@ -89,9 +90,9 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
     if (!focusWithin) {
       return;
     }
-    if (!dismiss) {
-      return;
-    }
+    dismiss(event);
+  });
+  (0, _useOnClickOutside.useOnClickOutside)(function (event) {
     dismiss(event);
   });
   return /*#__PURE__*/React.createElement(_popper.Popper, {

package/dist/cjs/utils/use-on-click-outside/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnClickOutside = void 0;
+var _react = require("react");
+var _bindEventListener = require("bind-event-listener");
+var _browserApis = require("@atlaskit/browser-apis");
+var _context = require("../../controllers/context");
+var useOnClickOutside = exports.useOnClickOutside = function useOnClickOutside(onClickOutside) {
+  var _useContext = (0, _react.useContext)(_context.SpotlightContext),
+    card = _useContext.card;
+  var ref = card.ref;
+  (0, _react.useEffect)(function () {
+    var doc = (0, _browserApis.getDocument)();
+    if (!doc) {
+      return;
+    }
+    var unbindMouseDown = (0, _bindEventListener.bind)(doc, {
+      type: 'mousedown',
+      listener: function listener(event) {
+        if (!ref || !ref.current) {
+          return;
+        }
+        var target = event.target instanceof Node ? event.target : null;
+        if (ref.current.contains(target)) {
+          return;
+        }
+        onClickOutside(event);
+      }
+    });
+    return function () {
+      unbindMouseDown();
+    };
+  }, [onClickOutside, ref]);
+};

package/dist/es2019/controllers/context.js

@@ -8,6 +8,8 @@ import { createContext, useId, useState } from 'react';
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const SpotlightContext = /*#__PURE__*/createContext({
   card: {
+    ref: null,
+    setRef: () => undefined,
     placement: 'bottom-end',
     setPlacement: () => undefined
   },
@@ -33,11 +35,14 @@ export const SpotlightContextProvider = ({
   const [placement, setPlacement] = useState('bottom-end');
   const [headingId, setHeadingId] = useState(`${id}-heading`);
   const [update, setUpdate] = useState(() => async () => undefined);
-  const [ref, setRef] = useState();
+  const [popoverRef, setPopoverRef] = useState();
+  const [cardRef, setCardRef] = useState(null);
   const [dismiss, setDismiss] = useState(() => undefined);
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       card: {
+        ref: cardRef,
+        setRef: setCardRef,
         placement,
         setPlacement
       },
@@ -46,8 +51,8 @@ export const SpotlightContextProvider = ({
         setId: setHeadingId
       },
       popoverContent: {
-        ref,
-        setRef,
+        ref: popoverRef,
+        setRef: setPopoverRef,
         update,
         setUpdate,
         dismiss,

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

@@ -2,7 +2,7 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef, useContext } from 'react';
+import { forwardRef, useContext, useEffect, useRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 import { SpotlightContext } from '../../controllers/context';
@@ -36,11 +36,16 @@ export const SpotlightCard = /*#__PURE__*/forwardRef(({
   const {
     card
   } = useContext(SpotlightContext);
+  const cardRef = useRef(null);
+  useEffect(() => {
+    card.setRef(cardRef);
+  }, [card]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     ref: ref,
     className: ax([styles.root])
   }, /*#__PURE__*/React.createElement(Caret, null), /*#__PURE__*/React.createElement(Box, {
+    ref: cardRef,
     backgroundColor: "color.background.neutral.bold",
     xcss: cx(styles.card, placementStyles[card.placement])
   }, children));

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

@@ -7,6 +7,7 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { Popper } from '@atlaskit/popper';
 import { SpotlightContext } from '../../controllers/context';
 import { useFocusWithin } from '../../utils/use-focus-within';
+import { useOnClickOutside } from '../../utils/use-on-click-outside';
 import { useOnEscape } from '../../utils/use-on-escape';
 const styles = {
   root: "_1pby1fw0"
@@ -75,9 +76,9 @@ export const PopoverContent = ({
     if (!focusWithin) {
       return;
     }
-    if (!dismiss) {
-      return;
-    }
+    dismiss(event);
+  });
+  useOnClickOutside(event => {
     dismiss(event);
   });
   return /*#__PURE__*/React.createElement(Popper, {

package/dist/es2019/utils/use-on-click-outside/index.js

@@ -0,0 +1,32 @@
+import { useContext, useEffect } from 'react';
+import { bind } from 'bind-event-listener';
+import { getDocument } from '@atlaskit/browser-apis';
+import { SpotlightContext } from '../../controllers/context';
+export const useOnClickOutside = onClickOutside => {
+  const {
+    card
+  } = useContext(SpotlightContext);
+  const ref = card.ref;
+  useEffect(() => {
+    const doc = getDocument();
+    if (!doc) {
+      return;
+    }
+    const unbindMouseDown = bind(doc, {
+      type: 'mousedown',
+      listener: event => {
+        if (!ref || !ref.current) {
+          return;
+        }
+        const target = event.target instanceof Node ? event.target : null;
+        if (ref.current.contains(target)) {
+          return;
+        }
+        onClickOutside(event);
+      }
+    });
+    return () => {
+      unbindMouseDown();
+    };
+  }, [onClickOutside, ref]);
+};

package/dist/esm/controllers/context.js

@@ -11,6 +11,10 @@ import { createContext, useId, useState } from 'react';
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var SpotlightContext = /*#__PURE__*/createContext({
   card: {
+    ref: null,
+    setRef: function setRef() {
+      return undefined;
+    },
     placement: 'bottom-end',
     setPlacement: function setPlacement() {
       return undefined;
@@ -82,17 +86,23 @@ export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
     setUpdate = _useState6[1];
   var _useState7 = useState(),
     _useState8 = _slicedToArray(_useState7, 2),
-    ref = _useState8[0],
-    setRef = _useState8[1];
-  var _useState9 = useState(function () {
+    popoverRef = _useState8[0],
+    setPopoverRef = _useState8[1];
+  var _useState9 = useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    cardRef = _useState0[0],
+    setCardRef = _useState0[1];
+  var _useState1 = useState(function () {
       return undefined;
     }),
-    _useState0 = _slicedToArray(_useState9, 2),
-    dismiss = _useState0[0],
-    setDismiss = _useState0[1];
+    _useState10 = _slicedToArray(_useState1, 2),
+    dismiss = _useState10[0],
+    setDismiss = _useState10[1];
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       card: {
+        ref: cardRef,
+        setRef: setCardRef,
         placement: placement,
         setPlacement: setPlacement
       },
@@ -101,8 +111,8 @@ export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
         setId: setHeadingId
       },
       popoverContent: {
-        ref: ref,
-        setRef: setRef,
+        ref: popoverRef,
+        setRef: setPopoverRef,
         update: update,
         setUpdate: setUpdate,
         dismiss: dismiss,

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

@@ -2,7 +2,7 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef, useContext } from 'react';
+import { forwardRef, useContext, useEffect, useRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 import { SpotlightContext } from '../../controllers/context';
@@ -34,11 +34,16 @@ export var SpotlightCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId;
   var _useContext = useContext(SpotlightContext),
     card = _useContext.card;
+  var cardRef = useRef(null);
+  useEffect(function () {
+    card.setRef(cardRef);
+  }, [card]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     ref: ref,
     className: ax([styles.root])
   }, /*#__PURE__*/React.createElement(Caret, null), /*#__PURE__*/React.createElement(Box, {
+    ref: cardRef,
     backgroundColor: "color.background.neutral.bold",
     xcss: cx(styles.card, placementStyles[card.placement])
   }, children));

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

@@ -7,6 +7,7 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { Popper } from '@atlaskit/popper';
 import { SpotlightContext } from '../../controllers/context';
 import { useFocusWithin } from '../../utils/use-focus-within';
+import { useOnClickOutside } from '../../utils/use-on-click-outside';
 import { useOnEscape } from '../../utils/use-on-escape';
 var styles = {
   root: "_1pby1fw0"
@@ -80,9 +81,9 @@ export var PopoverContent = function PopoverContent(_ref) {
     if (!focusWithin) {
       return;
     }
-    if (!dismiss) {
-      return;
-    }
+    dismiss(event);
+  });
+  useOnClickOutside(function (event) {
     dismiss(event);
   });
   return /*#__PURE__*/React.createElement(Popper, {

package/dist/esm/utils/use-on-click-outside/index.js

@@ -0,0 +1,31 @@
+import { useContext, useEffect } from 'react';
+import { bind } from 'bind-event-listener';
+import { getDocument } from '@atlaskit/browser-apis';
+import { SpotlightContext } from '../../controllers/context';
+export var useOnClickOutside = function useOnClickOutside(onClickOutside) {
+  var _useContext = useContext(SpotlightContext),
+    card = _useContext.card;
+  var ref = card.ref;
+  useEffect(function () {
+    var doc = getDocument();
+    if (!doc) {
+      return;
+    }
+    var unbindMouseDown = bind(doc, {
+      type: 'mousedown',
+      listener: function listener(event) {
+        if (!ref || !ref.current) {
+          return;
+        }
+        var target = event.target instanceof Node ? event.target : null;
+        if (ref.current.contains(target)) {
+          return;
+        }
+        onClickOutside(event);
+      }
+    });
+    return function () {
+      unbindMouseDown();
+    };
+  }, [onClickOutside, ref]);
+};

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

@@ -6,6 +6,8 @@ import { type Dispatch, type MutableRefObject, type ReactNode, type SetStateActi
 import type { Placement } from '../types';
 export interface SpotlightContextType {
     card: {
+        ref: MutableRefObject<HTMLDivElement | null> | null;
+        setRef: Dispatch<SetStateAction<MutableRefObject<HTMLDivElement | null> | null>>;
         placement: Placement;
         setPlacement: Dispatch<SetStateAction<Placement>>;
     };

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

@@ -13,7 +13,7 @@ export interface PopoverContentProps {
     testId?: string;
     placement: Placement;
     isVisible?: boolean;
-    dismiss?: (event: KeyboardEvent) => void;
+    dismiss: (event: KeyboardEvent | MouseEvent) => void;
     children: ReactNode;
 }
 /**

package/dist/types/utils/use-on-click-outside/index.d.ts

@@ -0,0 +1 @@
+export declare const useOnClickOutside: (onClickOutside: (event: MouseEvent) => void) => void;

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

@@ -6,6 +6,8 @@ import { type Dispatch, type MutableRefObject, type ReactNode, type SetStateActi
 import type { Placement } from '../types';
 export interface SpotlightContextType {
     card: {
+        ref: MutableRefObject<HTMLDivElement | null> | null;
+        setRef: Dispatch<SetStateAction<MutableRefObject<HTMLDivElement | null> | null>>;
         placement: Placement;
         setPlacement: Dispatch<SetStateAction<Placement>>;
     };

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

@@ -13,7 +13,7 @@ export interface PopoverContentProps {
     testId?: string;
     placement: Placement;
     isVisible?: boolean;
-    dismiss?: (event: KeyboardEvent) => void;
+    dismiss: (event: KeyboardEvent | MouseEvent) => void;
     children: ReactNode;
 }
 /**

package/dist/types-ts4.5/utils/use-on-click-outside/index.d.ts

@@ -0,0 +1 @@
+export declare const useOnClickOutside: (onClickOutside: (event: MouseEvent) => void) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.5.1",
+	"version": "0.6.1",
 	"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",