@atlaskit/page-layout 1.2.4 → 1.2.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/page-layout
 
+## 1.2.5
+
+### Patch Changes
+
+- [`e4b612d1c48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4b612d1c48) - Internal migration to bind-event-listener for safer DOM Event cleanup
+
 ## 1.2.4
 
 ### Patch Changes

package/dist/cjs/components/resize-control/index.js

@@ -17,6 +17,8 @@ var _react = require("react");
 
 var _core = require("@emotion/core");
 
+var _bindEventListener = require("bind-event-listener");
+
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 
 var _constants = require("../../common/constants");
@@ -75,6 +77,8 @@ var ResizeControl = function ResizeControl(_ref) {
       isGrabAreaFocused = _useState2[0],
       setIsGrabAreaFocused = _useState2[1];
 
+  var unbindEvents = (0, _react.useRef)(null);
+
   var toggleSideBar = function toggleSideBar(e) {
     if (isResizing) {
       return;
@@ -101,8 +105,13 @@ var ResizeControl = function ResizeControl(_ref) {
     }
 
     offset.current = event.clientX - leftSidebarState[_constants.VAR_LEFT_SIDEBAR_WIDTH] - (0, _utils.getLeftPanelWidth)();
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
+    unbindEvents.current = (0, _bindEventListener.bindAll)(document, [{
+      type: 'mousemove',
+      listener: onMouseMove
+    }, {
+      type: 'mouseup',
+      listener: onMouseUp
+    }]);
     document.documentElement.setAttribute(_constants.IS_SIDEBAR_DRAGGING, 'true');
 
     var newLeftbarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, {
@@ -114,9 +123,11 @@ var ResizeControl = function ResizeControl(_ref) {
   };
 
   var cancelDrag = function cancelDrag(shouldCollapse) {
+    var _unbindEvents$current;
+
     onMouseMove.cancel();
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
+    (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
+    unbindEvents.current = null;
     document.documentElement.removeAttribute(_constants.IS_SIDEBAR_DRAGGING);
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
@@ -139,10 +150,12 @@ var ResizeControl = function ResizeControl(_ref) {
   });
 
   var cleanupAfterResize = function cleanupAfterResize() {
+    var _unbindEvents$current2;
+
     x.current = 0;
     offset.current = 0;
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
+    (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
+    unbindEvents.current = null;
   };
 
   var updatedLeftSidebarState = {};

package/dist/cjs/controllers/sidebar-resize-controller.js

@@ -60,6 +60,7 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
       var $leftSidebarResizeController = document.querySelector("[".concat(_constants.GRAB_AREA_SELECTOR, "]"));
       var isCollapsed = !!$leftSidebarResizeController && $leftSidebarResizeController.hasAttribute('disabled');
       handleDataAttributesAndCb(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState); // Make sure multiple event handlers do not get attached
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
 
       document.querySelector(leftSidebarSelector).removeEventListener('transitionend', transitionEventHandler);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -69,6 +70,7 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
     var $leftSidebar = document.querySelector(leftSidebarSelector);
 
     if ($leftSidebar && !(0, _motion.isReducedMotion)()) {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       $leftSidebar.addEventListener('transitionend', transitionEventHandler);
     }
   }, [isLeftSidebarCollapsed, leftSidebarSelector, leftSidebarState, onCollapse, onExpand, transitionEventHandler]);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.2.4",
+	"version": "1.2.5",
 	"sideEffects": false
 }

package/dist/es2019/components/resize-control/index.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/core';
+import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getLeftPanelWidth, getLeftSidebarPercentage } from '../../common/utils';
@@ -49,6 +50,7 @@ const ResizeControl = ({
   const offset = useRef(0);
   const keyboardEventTimeout = useRef();
   const [isGrabAreaFocused, setIsGrabAreaFocused] = useState(false);
+  const unbindEvents = useRef(null);
 
   const toggleSideBar = e => {
     if (isResizing) {
@@ -75,8 +77,13 @@ const ResizeControl = ({
     }
 
     offset.current = event.clientX - leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH] - getLeftPanelWidth();
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
+    unbindEvents.current = bindAll(document, [{
+      type: 'mousemove',
+      listener: onMouseMove
+    }, {
+      type: 'mouseup',
+      listener: onMouseUp
+    }]);
     document.documentElement.setAttribute(IS_SIDEBAR_DRAGGING, 'true');
     const newLeftbarState = { ...leftSidebarState,
       isResizing: true
@@ -86,9 +93,11 @@ const ResizeControl = ({
   };
 
   const cancelDrag = shouldCollapse => {
+    var _unbindEvents$current;
+
     onMouseMove.cancel();
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
+    (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
+    unbindEvents.current = null;
     document.documentElement.removeAttribute(IS_SIDEBAR_DRAGGING);
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
@@ -113,10 +122,12 @@ const ResizeControl = ({
   });
 
   const cleanupAfterResize = () => {
+    var _unbindEvents$current2;
+
     x.current = 0;
     offset.current = 0;
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
+    (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
+    unbindEvents.current = null;
   };
 
   let updatedLeftSidebarState = {};

package/dist/es2019/components/skip-links/skip-link-components.js

@@ -1,3 +1,5 @@
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';

package/dist/es2019/components/slots/left-sidebar.js

@@ -1,3 +1,5 @@
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+
 /** @jsx jsx */
 import { useContext, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/core';

package/dist/es2019/controllers/sidebar-resize-controller.js

@@ -34,6 +34,7 @@ export const SidebarResizeController = ({
       const $leftSidebarResizeController = document.querySelector(`[${GRAB_AREA_SELECTOR}]`);
       const isCollapsed = !!$leftSidebarResizeController && $leftSidebarResizeController.hasAttribute('disabled');
       handleDataAttributesAndCb(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState); // Make sure multiple event handlers do not get attached
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
 
       document.querySelector(leftSidebarSelector).removeEventListener('transitionend', transitionEventHandler);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -43,6 +44,7 @@ export const SidebarResizeController = ({
     const $leftSidebar = document.querySelector(leftSidebarSelector);
 
     if ($leftSidebar && !isReducedMotion()) {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       $leftSidebar.addEventListener('transitionend', transitionEventHandler);
     }
   }, [isLeftSidebarCollapsed, leftSidebarSelector, leftSidebarState, onCollapse, onExpand, transitionEventHandler]);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.2.4",
+	"version": "1.2.5",
 	"sideEffects": false
 }

package/dist/esm/components/resize-control/index.js

@@ -9,6 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsx jsx */
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/core';
+import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getLeftPanelWidth, getLeftSidebarPercentage } from '../../common/utils';
@@ -60,6 +61,8 @@ var ResizeControl = function ResizeControl(_ref) {
       isGrabAreaFocused = _useState2[0],
       setIsGrabAreaFocused = _useState2[1];
 
+  var unbindEvents = useRef(null);
+
   var toggleSideBar = function toggleSideBar(e) {
     if (isResizing) {
       return;
@@ -86,8 +89,13 @@ var ResizeControl = function ResizeControl(_ref) {
     }
 
     offset.current = event.clientX - leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH] - getLeftPanelWidth();
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
+    unbindEvents.current = bindAll(document, [{
+      type: 'mousemove',
+      listener: onMouseMove
+    }, {
+      type: 'mouseup',
+      listener: onMouseUp
+    }]);
     document.documentElement.setAttribute(IS_SIDEBAR_DRAGGING, 'true');
 
     var newLeftbarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, {
@@ -99,9 +107,11 @@ var ResizeControl = function ResizeControl(_ref) {
   };
 
   var cancelDrag = function cancelDrag(shouldCollapse) {
+    var _unbindEvents$current;
+
     onMouseMove.cancel();
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
+    (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
+    unbindEvents.current = null;
     document.documentElement.removeAttribute(IS_SIDEBAR_DRAGGING);
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
@@ -124,10 +134,12 @@ var ResizeControl = function ResizeControl(_ref) {
   });
 
   var cleanupAfterResize = function cleanupAfterResize() {
+    var _unbindEvents$current2;
+
     x.current = 0;
     offset.current = 0;
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
+    (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
+    unbindEvents.current = null;
   };
 
   var updatedLeftSidebarState = {};

package/dist/esm/components/skip-links/skip-link-components.js

@@ -5,6 +5,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';

package/dist/esm/components/slots/left-sidebar.js

@@ -4,6 +4,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+
 /** @jsx jsx */
 import { useContext, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/core';

package/dist/esm/controllers/sidebar-resize-controller.js

@@ -40,6 +40,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       var $leftSidebarResizeController = document.querySelector("[".concat(GRAB_AREA_SELECTOR, "]"));
       var isCollapsed = !!$leftSidebarResizeController && $leftSidebarResizeController.hasAttribute('disabled');
       handleDataAttributesAndCb(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState); // Make sure multiple event handlers do not get attached
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
 
       document.querySelector(leftSidebarSelector).removeEventListener('transitionend', transitionEventHandler);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -49,6 +50,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     var $leftSidebar = document.querySelector(leftSidebarSelector);
 
     if ($leftSidebar && !isReducedMotion()) {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       $leftSidebar.addEventListener('transitionend', transitionEventHandler);
     }
   }, [isLeftSidebarCollapsed, leftSidebarSelector, leftSidebarState, onCollapse, onExpand, transitionEventHandler]);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.2.4",
+	"version": "1.2.5",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -19,7 +19,8 @@
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Page layout"
+      "name": "Page layout",
+      "category": "Components"
     }
   },
   "homepage": "https://atlassian.design/components/page-layout/",
@@ -30,6 +31,7 @@
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
+    "bind-event-listener": "^2.1.0",
     "raf-schd": "^4.0.3"
   },
   "peerDependencies": {
@@ -75,6 +77,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "ui-components": [
         "lite-mode"
       ],