@atlaskit/inline-dialog 13.4.9 → 13.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/inline-dialog
 
+## 13.5.0
+
+### Minor Changes
+
+- [`c0dd48dfb67`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c0dd48dfb67) - [ux] Adds keyboard support of using escape to close inline dialog.
+
 ## 13.4.9
 
 ### Patch Changes

package/dist/cjs/InlineDialog/index.js

@@ -19,7 +19,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /** @jsx jsx */
 
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "13.4.9";
+var packageVersion = "13.5.0";
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
     return false;
@@ -46,12 +46,12 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
     children = _ref.children;
   var containerRef = (0, _react.useRef)(null);
   var triggerRef = (0, _react.useRef)(null);
-  // we put this into a ref to avoid handleClickOutside having this as a dependency
+  // we put this into a ref to avoid handleCloseRequest having this as a dependency
   var onCloseRef = (0, _react.useRef)(onClose);
   (0, _react.useEffect)(function () {
     onCloseRef.current = onClose;
   });
-  var handleClickOutside = (0, _react.useCallback)(function (event) {
+  var handleCloseRequest = (0, _react.useCallback)(function (event) {
     var target = event.target;
 
     // checks for when target is not HTMLElement
@@ -66,11 +66,6 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
       return;
     }
 
-    // exit if we click outside but on the trigger — it can handle the clicks itself
-    if (triggerRef.current && triggerRef.current.contains(target)) {
-      return;
-    }
-
     // handles the case where inline dialog opens portalled elements such as modal
     if (checkIsChildOfPortal(target)) {
       return;
@@ -85,19 +80,44 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
       });
     }
   }, []);
+  var handleClick = (0, _react.useCallback)(function (event) {
+    // exit if we click outside but on the trigger — it can handle the clicks itself
+    if (triggerRef.current && triggerRef.current.contains(event.target)) {
+      return;
+    }
+    handleCloseRequest(event);
+  }, [handleCloseRequest]);
   (0, _react.useEffect)(function () {
     if (!isOpen) {
       return;
     }
     var unbind = (0, _bindEventListener.bind)(window, {
       type: 'click',
-      listener: handleClickOutside,
+      listener: handleClick,
+      options: {
+        capture: true
+      }
+    });
+    return unbind;
+  }, [isOpen, handleClick]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Escape') {
+      handleCloseRequest(event);
+    }
+  }, [handleCloseRequest]);
+  (0, _react.useEffect)(function () {
+    if (!isOpen) {
+      return;
+    }
+    var unbind = (0, _bindEventListener.bind)(window, {
+      type: 'keydown',
+      listener: handleKeyDown,
       options: {
         capture: true
       }
     });
     return unbind;
-  }, [isOpen, handleClickOutside]);
+  }, [isOpen, handleKeyDown]);
   var popper = isOpen ? (0, _react2.jsx)(_popper.Popper, {
     placement: placement,
     strategy: strategy

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.4.9",
+	"version": "13.5.0",
 	"sideEffects": false
 }

package/dist/es2019/InlineDialog/index.js

@@ -8,7 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { Container } from './styled/container';
 const packageName = "@atlaskit/inline-dialog";
-const packageVersion = "13.4.9";
+const packageVersion = "13.5.0";
 const checkIsChildOfPortal = node => {
   if (!node) {
     return false;
@@ -29,12 +29,12 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
 }) {
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
-  // we put this into a ref to avoid handleClickOutside having this as a dependency
+  // we put this into a ref to avoid handleCloseRequest having this as a dependency
   const onCloseRef = useRef(onClose);
   useEffect(() => {
     onCloseRef.current = onClose;
   });
-  const handleClickOutside = useCallback(event => {
+  const handleCloseRequest = useCallback(event => {
     const {
       target
     } = event;
@@ -51,11 +51,6 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
       return;
     }
 
-    // exit if we click outside but on the trigger — it can handle the clicks itself
-    if (triggerRef.current && triggerRef.current.contains(target)) {
-      return;
-    }
-
     // handles the case where inline dialog opens portalled elements such as modal
     if (checkIsChildOfPortal(target)) {
       return;
@@ -66,23 +61,48 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
       var _onCloseRef$current;
       (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
         isOpen: false,
-        event: event
+        event
       });
     }
   }, []);
+  const handleClick = useCallback(event => {
+    // exit if we click outside but on the trigger — it can handle the clicks itself
+    if (triggerRef.current && triggerRef.current.contains(event.target)) {
+      return;
+    }
+    handleCloseRequest(event);
+  }, [handleCloseRequest]);
   useEffect(() => {
     if (!isOpen) {
       return;
     }
     const unbind = bind(window, {
       type: 'click',
-      listener: handleClickOutside,
+      listener: handleClick,
+      options: {
+        capture: true
+      }
+    });
+    return unbind;
+  }, [isOpen, handleClick]);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Escape') {
+      handleCloseRequest(event);
+    }
+  }, [handleCloseRequest]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const unbind = bind(window, {
+      type: 'keydown',
+      listener: handleKeyDown,
       options: {
         capture: true
       }
     });
     return unbind;
-  }, [isOpen, handleClickOutside]);
+  }, [isOpen, handleKeyDown]);
   const popper = isOpen ? jsx(Popper, {
     placement: placement,
     strategy: strategy

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.4.9",
+	"version": "13.5.0",
 	"sideEffects": false
 }

package/dist/esm/InlineDialog/index.js

@@ -8,7 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { Container } from './styled/container';
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "13.4.9";
+var packageVersion = "13.5.0";
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
     return false;
@@ -35,12 +35,12 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
     children = _ref.children;
   var containerRef = useRef(null);
   var triggerRef = useRef(null);
-  // we put this into a ref to avoid handleClickOutside having this as a dependency
+  // we put this into a ref to avoid handleCloseRequest having this as a dependency
   var onCloseRef = useRef(onClose);
   useEffect(function () {
     onCloseRef.current = onClose;
   });
-  var handleClickOutside = useCallback(function (event) {
+  var handleCloseRequest = useCallback(function (event) {
     var target = event.target;
 
     // checks for when target is not HTMLElement
@@ -55,11 +55,6 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
       return;
     }
 
-    // exit if we click outside but on the trigger — it can handle the clicks itself
-    if (triggerRef.current && triggerRef.current.contains(target)) {
-      return;
-    }
-
     // handles the case where inline dialog opens portalled elements such as modal
     if (checkIsChildOfPortal(target)) {
       return;
@@ -74,19 +69,44 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
       });
     }
   }, []);
+  var handleClick = useCallback(function (event) {
+    // exit if we click outside but on the trigger — it can handle the clicks itself
+    if (triggerRef.current && triggerRef.current.contains(event.target)) {
+      return;
+    }
+    handleCloseRequest(event);
+  }, [handleCloseRequest]);
   useEffect(function () {
     if (!isOpen) {
       return;
     }
     var unbind = bind(window, {
       type: 'click',
-      listener: handleClickOutside,
+      listener: handleClick,
+      options: {
+        capture: true
+      }
+    });
+    return unbind;
+  }, [isOpen, handleClick]);
+  var handleKeyDown = useCallback(function (event) {
+    if (event.key === 'Escape') {
+      handleCloseRequest(event);
+    }
+  }, [handleCloseRequest]);
+  useEffect(function () {
+    if (!isOpen) {
+      return;
+    }
+    var unbind = bind(window, {
+      type: 'keydown',
+      listener: handleKeyDown,
       options: {
         capture: true
       }
     });
     return unbind;
-  }, [isOpen, handleClickOutside]);
+  }, [isOpen, handleKeyDown]);
   var popper = isOpen ? jsx(Popper, {
     placement: placement,
     strategy: strategy

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.4.9",
+	"version": "13.5.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-dialog",
-  "version": "13.4.9",
+  "version": "13.5.0",
   "description": "An inline dialog is a pop-up container for small amounts of information. It can also contain controls.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/datetime-picker": "^12.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.11.0",