@atlaskit/modal-dialog 12.2.7 → 12.2.10

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/modal-dialog
 
+## 12.2.10
+
+### Patch Changes
+
+- [`e4b612d1c48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4b612d1c48) - Internal migration to bind-event-listener for safer DOM Event cleanup
+- [`347fd703ce0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/347fd703ce0) - Internally shifting to using bind-event-listener for events added in effects
+- [`07ab2748b62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07ab2748b62) - [ux] - Changes the position of icon in ModalTitle having an appearance prop to be top aligned instead of center. This only affects titles that where the title wraps into multiple lines.
+- Updated dependencies
+
+## 12.2.9
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.2.8
+
+### Patch Changes
+
+- [`0d1c80fe00d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d1c80fe00d) - [ux] The width of the modal dialog now respect the custom value of the `width` prop.
+
 ## 12.2.7
 
 ### Patch Changes

package/dist/cjs/internal/components/positioner.js

@@ -28,7 +28,6 @@ var positionerStyles = (0, _core.css)({
   left: 0
 });
 var viewportScrollStyles = (0, _core.css)({
-  width: 'max-content',
   height: 'auto',
   position: 'relative',
   '@media (min-width: 480px)': {
@@ -37,7 +36,6 @@ var viewportScrollStyles = (0, _core.css)({
 });
 var bodyScrollStyles = (0, _core.css)({
   '@media (min-width: 480px)': {
-    width: 'max-content',
     maxWidth: maxWidthDimensions,
     maxHeight: maxHeightDimensions,
     marginRight: 'auto',

package/dist/cjs/internal/components/scroll-container.js

@@ -15,10 +15,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
+var _bindEventListener = require("bind-event-listener");
+
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
 var _useLazyCallback = _interopRequireDefault(require("@atlaskit/ds-lib/use-lazy-callback"));
 
 var _useStateRef3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-state-ref"));
@@ -110,8 +114,14 @@ var ScrollContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }));
   (0, _react.useEffect)(function () {
     var target = scrollableRef.current;
-    window.addEventListener('resize', setLazyKeylines, false);
-    target === null || target === void 0 ? void 0 : target.addEventListener('scroll', setLazyKeylines, false);
+    var unbindWindowEvent = (0, _bindEventListener.bind)(window, {
+      type: 'resize',
+      listener: setLazyKeylines
+    });
+    var unbindTargetEvent = target ? (0, _bindEventListener.bind)(target, {
+      type: 'scroll',
+      listener: setLazyKeylines
+    }) : _noop.default;
     setLazyContentFocus();
     setLazyKeylines();
     setLazySiblings({
@@ -119,8 +129,8 @@ var ScrollContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       next: Boolean(target === null || target === void 0 ? void 0 : target.nextElementSibling)
     });
     return function () {
-      window.removeEventListener('resize', setLazyKeylines, false);
-      target === null || target === void 0 ? void 0 : target.removeEventListener('scroll', setLazyKeylines, false);
+      unbindWindowEvent();
+      unbindTargetEvent();
     };
   }, [setLazyContentFocus, setLazyKeylines, setLazySiblings]);
   return (0, _core.jsx)(_focusRing.default, {

package/dist/cjs/internal/hooks/use-prevent-programmatic-scroll.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-var _useWindowEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-window-event"));
+var _bindEventListener = require("bind-event-listener");
 
 /**
  * Returns how far the body is scrolled from the top of the viewport.
@@ -50,6 +50,11 @@ function usePreventProgrammaticScroll() {
       window.scrollTo(window.pageXOffset, scrollTopOffset);
     }
   }, [scrollTopOffset]);
-  (0, _useWindowEvent.default)('scroll', onWindowScroll);
+  (0, _react.useEffect)(function () {
+    return (0, _bindEventListener.bind)(window, {
+      type: 'scroll',
+      listener: onWindowScroll
+    });
+  }, [onWindowScroll]);
   return scrollTopOffset;
 }

package/dist/cjs/modal-title.js

@@ -44,9 +44,8 @@ var textStyles = (0, _core.css)({
 });
 var iconStyles = (0, _core.css)({
   marginRight: "".concat(_constants.titleIconMargin, "px"),
-
-  /* Keeps the size of the icon the same, in case the text element grows in width. */
-  flex: '0 0 auto'
+  flex: '0 0 auto',
+  alignSelf: 'start'
 });
 /**
  * When the title is truncated (not multi-line), we adjust the

package/dist/cjs/modal-wrapper.js

@@ -86,7 +86,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.2.7"
+    packageVersion: "12.2.10"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.2.7",
+	"version": "12.2.10",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/positioner.js

@@ -16,7 +16,6 @@ const positionerStyles = css({
   left: 0
 });
 const viewportScrollStyles = css({
-  width: 'max-content',
   height: 'auto',
   position: 'relative',
   '@media (min-width: 480px)': {
@@ -25,7 +24,6 @@ const viewportScrollStyles = css({
 });
 const bodyScrollStyles = css({
   '@media (min-width: 480px)': {
-    width: 'max-content',
     maxWidth: maxWidthDimensions,
     maxHeight: maxHeightDimensions,
     marginRight: 'auto',

package/dist/es2019/internal/components/scroll-container.js

@@ -1,8 +1,10 @@
 /** @jsx jsx */
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/core';
+import { bind } from 'bind-event-listener';
 import rafSchedule from 'raf-schd';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import noop from '@atlaskit/ds-lib/noop';
 import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';
 import useStateRef from '@atlaskit/ds-lib/use-state-ref';
 import FocusRing from '@atlaskit/focus-ring';
@@ -70,8 +72,14 @@ const ScrollContainer = /*#__PURE__*/forwardRef((props, ref) => {
   }));
   useEffect(() => {
     const target = scrollableRef.current;
-    window.addEventListener('resize', setLazyKeylines, false);
-    target === null || target === void 0 ? void 0 : target.addEventListener('scroll', setLazyKeylines, false);
+    const unbindWindowEvent = bind(window, {
+      type: 'resize',
+      listener: setLazyKeylines
+    });
+    const unbindTargetEvent = target ? bind(target, {
+      type: 'scroll',
+      listener: setLazyKeylines
+    }) : noop;
     setLazyContentFocus();
     setLazyKeylines();
     setLazySiblings({
@@ -79,8 +87,8 @@ const ScrollContainer = /*#__PURE__*/forwardRef((props, ref) => {
       next: Boolean(target === null || target === void 0 ? void 0 : target.nextElementSibling)
     });
     return () => {
-      window.removeEventListener('resize', setLazyKeylines, false);
-      target === null || target === void 0 ? void 0 : target.removeEventListener('scroll', setLazyKeylines, false);
+      unbindWindowEvent();
+      unbindTargetEvent();
     };
   }, [setLazyContentFocus, setLazyKeylines, setLazySiblings]);
   return jsx(FocusRing, {

package/dist/es2019/internal/hooks/use-prevent-programmatic-scroll.js

@@ -1,5 +1,5 @@
-import { useCallback, useLayoutEffect, useState } from 'react';
-import useWindowEvent from '@atlaskit/ds-lib/use-window-event';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
 /**
  * Returns how far the body is scrolled from the top of the viewport.
  *
@@ -34,6 +34,11 @@ export default function usePreventProgrammaticScroll() {
       window.scrollTo(window.pageXOffset, scrollTopOffset);
     }
   }, [scrollTopOffset]);
-  useWindowEvent('scroll', onWindowScroll);
+  useEffect(() => {
+    return bind(window, {
+      type: 'scroll',
+      listener: onWindowScroll
+    });
+  }, [onWindowScroll]);
   return scrollTopOffset;
 }

package/dist/es2019/modal-title.js

@@ -30,9 +30,8 @@ const textStyles = css({
 });
 const iconStyles = css({
   marginRight: `${titleIconMargin}px`,
-
-  /* Keeps the size of the icon the same, in case the text element grows in width. */
-  flex: '0 0 auto'
+  flex: '0 0 auto',
+  alignSelf: 'start'
 });
 /**
  * When the title is truncated (not multi-line), we adjust the

package/dist/es2019/modal-wrapper.js

@@ -50,7 +50,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.2.7"
+    packageVersion: "12.2.10"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.2.7",
+	"version": "12.2.10",
 	"sideEffects": false
 }

package/dist/esm/internal/components/positioner.js

@@ -16,7 +16,6 @@ var positionerStyles = css({
   left: 0
 });
 var viewportScrollStyles = css({
-  width: 'max-content',
   height: 'auto',
   position: 'relative',
   '@media (min-width: 480px)': {
@@ -25,7 +24,6 @@ var viewportScrollStyles = css({
 });
 var bodyScrollStyles = css({
   '@media (min-width: 480px)': {
-    width: 'max-content',
     maxWidth: maxWidthDimensions,
     maxHeight: maxHeightDimensions,
     marginRight: 'auto',

package/dist/esm/internal/components/scroll-container.js

@@ -3,8 +3,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/core';
+import { bind } from 'bind-event-listener';
 import rafSchedule from 'raf-schd';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import noop from '@atlaskit/ds-lib/noop';
 import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';
 import useStateRef from '@atlaskit/ds-lib/use-state-ref';
 import FocusRing from '@atlaskit/focus-ring';
@@ -87,8 +89,14 @@ var ScrollContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
   useEffect(function () {
     var target = scrollableRef.current;
-    window.addEventListener('resize', setLazyKeylines, false);
-    target === null || target === void 0 ? void 0 : target.addEventListener('scroll', setLazyKeylines, false);
+    var unbindWindowEvent = bind(window, {
+      type: 'resize',
+      listener: setLazyKeylines
+    });
+    var unbindTargetEvent = target ? bind(target, {
+      type: 'scroll',
+      listener: setLazyKeylines
+    }) : noop;
     setLazyContentFocus();
     setLazyKeylines();
     setLazySiblings({
@@ -96,8 +104,8 @@ var ScrollContainer = /*#__PURE__*/forwardRef(function (props, ref) {
       next: Boolean(target === null || target === void 0 ? void 0 : target.nextElementSibling)
     });
     return function () {
-      window.removeEventListener('resize', setLazyKeylines, false);
-      target === null || target === void 0 ? void 0 : target.removeEventListener('scroll', setLazyKeylines, false);
+      unbindWindowEvent();
+      unbindTargetEvent();
     };
   }, [setLazyContentFocus, setLazyKeylines, setLazySiblings]);
   return jsx(FocusRing, {

package/dist/esm/internal/hooks/use-prevent-programmatic-scroll.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useCallback, useLayoutEffect, useState } from 'react';
-import useWindowEvent from '@atlaskit/ds-lib/use-window-event';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
 /**
  * Returns how far the body is scrolled from the top of the viewport.
  *
@@ -39,6 +39,11 @@ export default function usePreventProgrammaticScroll() {
       window.scrollTo(window.pageXOffset, scrollTopOffset);
     }
   }, [scrollTopOffset]);
-  useWindowEvent('scroll', onWindowScroll);
+  useEffect(function () {
+    return bind(window, {
+      type: 'scroll',
+      listener: onWindowScroll
+    });
+  }, [onWindowScroll]);
   return scrollTopOffset;
 }

package/dist/esm/modal-title.js

@@ -30,9 +30,8 @@ var textStyles = css({
 });
 var iconStyles = css({
   marginRight: "".concat(titleIconMargin, "px"),
-
-  /* Keeps the size of the icon the same, in case the text element grows in width. */
-  flex: '0 0 auto'
+  flex: '0 0 auto',
+  alignSelf: 'start'
 });
 /**
  * When the title is truncated (not multi-line), we adjust the

package/dist/esm/modal-wrapper.js

@@ -57,7 +57,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.2.7"
+    packageVersion: "12.2.10"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.2.7",
+	"version": "12.2.10",
 	"sideEffects": false
 }

package/hooks/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/hooks.js",
   "module": "../dist/esm/hooks.js",
   "module:es2019": "../dist/es2019/hooks.js",
+  "sideEffects": false,
   "types": "../dist/types/hooks.d.ts"
 }

package/modal-body/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/modal-body.js",
   "module": "../dist/esm/modal-body.js",
   "module:es2019": "../dist/es2019/modal-body.js",
+  "sideEffects": false,
   "types": "../dist/types/modal-body.d.ts"
 }

package/modal-dialog/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/modal-wrapper.js",
   "module": "../dist/esm/modal-wrapper.js",
   "module:es2019": "../dist/es2019/modal-wrapper.js",
+  "sideEffects": false,
   "types": "../dist/types/modal-wrapper.d.ts"
 }

package/modal-footer/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/modal-footer.js",
   "module": "../dist/esm/modal-footer.js",
   "module:es2019": "../dist/es2019/modal-footer.js",
+  "sideEffects": false,
   "types": "../dist/types/modal-footer.d.ts"
 }

package/modal-header/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/modal-header.js",
   "module": "../dist/esm/modal-header.js",
   "module:es2019": "../dist/es2019/modal-header.js",
+  "sideEffects": false,
   "types": "../dist/types/modal-header.d.ts"
 }

package/modal-title/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/modal-title.js",
   "module": "../dist/esm/modal-title.js",
   "module:es2019": "../dist/es2019/modal-title.js",
+  "sideEffects": false,
   "types": "../dist/types/modal-title.d.ts"
 }

package/modal-transition/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/modal-transition.js",
   "module": "../dist/esm/modal-transition.js",
   "module:es2019": "../dist/es2019/modal-transition.js",
+  "sideEffects": false,
   "types": "../dist/types/modal-transition.d.ts"
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.2.7",
+  "version": "12.2.10",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -29,7 +29,8 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Modal dialog"
+      "name": "Modal dialog",
+      "category": "Components"
     }
   },
   "scripts": {
@@ -38,16 +39,17 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/blanket": "^12.2.0",
-    "@atlaskit/codemod-utils": "^4.0.0",
-    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/codemod-utils": "^4.1.0",
+    "@atlaskit/ds-lib": "^2.0.0",
     "@atlaskit/focus-ring": "^1.0.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/motion": "^1.0.0",
+    "@atlaskit/motion": "^1.1.0",
     "@atlaskit/portal": "^4.1.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@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",
     "react-focus-lock": "^2.5.2",
     "react-scrolllock": "^5.0.1",
@@ -101,6 +103,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",

package/types/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/types.js",
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
+  "sideEffects": false,
   "types": "../dist/types/types.d.ts"
 }