@atlaskit/modal-dialog 14.10.4 → 14.10.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/modal-dialog
 
+## 14.10.5
+
+### Patch Changes
+
+- [`54274768b5a88`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54274768b5a88) -
+  Fixed an issue where the modal title could overflow the width of the modal instead of truncating
+  when `isMultiline` is set to false
+
 ## 14.10.4
 
 ### Patch Changes

package/dist/cjs/internal/components/modal-wrapper.js

@@ -88,7 +88,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "14.10.4"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/cjs/modal-header.compiled.css

@@ -1,7 +1,10 @@
 ._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
 ._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
 ._1q511ejb{padding-block-start:var(--ds-space-300,24px)}
+._1ul9idpf{min-width:0}
+._2lx21sbv{flex-direction:row-reverse}
 ._4cvr1h6o{align-items:center}
 ._6rth1i6y{margin-block-end:var(--ds-space-negative-025,-2px)}
 ._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}

package/dist/cjs/modal-header.js

@@ -9,15 +9,14 @@ exports.default = void 0;
 require("./modal-header.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _closeButton = require("./close-button");
 var _hooks = require("./hooks");
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-var headerStyles = null;
-var flexStyles = (0, _primitives.xcss)({
-  flexDirection: 'row-reverse',
-  width: '100%'
-});
+var styles = {
+  header: "_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1i6y _85i5pxbi _1q511ejb",
+  flex: "_2lx21sbv _1bsb1osq",
+  titleContainer: "_1ul9idpf"
+};
 /**
  * __Modal header__
  *
@@ -42,25 +41,20 @@ var ModalHeader = function ModalHeader(props) {
   var shouldShowCloseButton = hasCloseButton && hasProvidedOnClose && onClose;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": testId,
-    className: (0, _runtime.ax)(["_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1i6y _85i5pxbi _1q511ejb"])
-  }, shouldShowCloseButton ?
-  /*#__PURE__*/
-  // The reason we are putting the close button first in the DOM and then
-  // reordering them is to ensure that users of assistive technology get
-  // all the context of a modal when initial focus is placed on the close
-  // button, since it's the first interactive element.
-  _react.default.createElement(_primitives.Flex, {
+    className: (0, _runtime.ax)([styles.header])
+  }, shouldShowCloseButton ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     gap: "space.200",
     justifyContent: "space-between",
-    xcss: flexStyles
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: styles.flex
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     justifyContent: "end"
   }, /*#__PURE__*/_react.default.createElement(_closeButton.CloseButton, {
     onClick: onClose,
     testId: modalTestId
-  })), /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     justifyContent: "start",
-    alignItems: "center"
+    alignItems: "center",
+    xcss: styles.titleContainer
   }, children)) : children);
 };
 var _default = exports.default = ModalHeader;

package/dist/es2019/internal/components/modal-wrapper.js

@@ -75,7 +75,7 @@ const InternalModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "14.10.4"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/modal-header.compiled.css

@@ -1,7 +1,10 @@
 ._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
 ._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
 ._1q511ejb{padding-block-start:var(--ds-space-300,24px)}
+._1ul9idpf{min-width:0}
+._2lx21sbv{flex-direction:row-reverse}
 ._4cvr1h6o{align-items:center}
 ._6rth1i6y{margin-block-end:var(--ds-space-negative-025,-2px)}
 ._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}

package/dist/es2019/modal-header.js

@@ -2,15 +2,14 @@
 import "./modal-header.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Flex, xcss } from '@atlaskit/primitives';
+import { Flex } from '@atlaskit/primitives/compiled';
 import { CloseButton } from './close-button';
 import { useModal } from './hooks';
-const headerStyles = null;
-const flexStyles = xcss({
-  flexDirection: 'row-reverse',
-  width: '100%'
-});
+const styles = {
+  header: "_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1i6y _85i5pxbi _1q511ejb",
+  flex: "_2lx21sbv _1bsb1osq",
+  titleContainer: "_1ul9idpf"
+};
 /**
  * __Modal header__
  *
@@ -37,17 +36,11 @@ const ModalHeader = props => {
   const shouldShowCloseButton = hasCloseButton && hasProvidedOnClose && onClose;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax(["_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1i6y _85i5pxbi _1q511ejb"])
-  }, shouldShowCloseButton ?
-  /*#__PURE__*/
-  // The reason we are putting the close button first in the DOM and then
-  // reordering them is to ensure that users of assistive technology get
-  // all the context of a modal when initial focus is placed on the close
-  // button, since it's the first interactive element.
-  React.createElement(Flex, {
+    className: ax([styles.header])
+  }, shouldShowCloseButton ? /*#__PURE__*/React.createElement(Flex, {
     gap: "space.200",
     justifyContent: "space-between",
-    xcss: flexStyles
+    xcss: styles.flex
   }, /*#__PURE__*/React.createElement(Flex, {
     justifyContent: "end"
   }, /*#__PURE__*/React.createElement(CloseButton, {
@@ -55,7 +48,8 @@ const ModalHeader = props => {
     testId: modalTestId
   })), /*#__PURE__*/React.createElement(Flex, {
     justifyContent: "start",
-    alignItems: "center"
+    alignItems: "center",
+    xcss: styles.titleContainer
   }, children)) : children);
 };
 export default ModalHeader;

package/dist/esm/internal/components/modal-wrapper.js

@@ -79,7 +79,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "14.10.4"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/modal-header.compiled.css

@@ -1,7 +1,10 @@
 ._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
 ._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
 ._1q511ejb{padding-block-start:var(--ds-space-300,24px)}
+._1ul9idpf{min-width:0}
+._2lx21sbv{flex-direction:row-reverse}
 ._4cvr1h6o{align-items:center}
 ._6rth1i6y{margin-block-end:var(--ds-space-negative-025,-2px)}
 ._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}

package/dist/esm/modal-header.js

@@ -2,15 +2,14 @@
 import "./modal-header.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Flex, xcss } from '@atlaskit/primitives';
+import { Flex } from '@atlaskit/primitives/compiled';
 import { CloseButton } from './close-button';
 import { useModal } from './hooks';
-var headerStyles = null;
-var flexStyles = xcss({
-  flexDirection: 'row-reverse',
-  width: '100%'
-});
+var styles = {
+  header: "_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1i6y _85i5pxbi _1q511ejb",
+  flex: "_2lx21sbv _1bsb1osq",
+  titleContainer: "_1ul9idpf"
+};
 /**
  * __Modal header__
  *
@@ -35,17 +34,11 @@ var ModalHeader = function ModalHeader(props) {
   var shouldShowCloseButton = hasCloseButton && hasProvidedOnClose && onClose;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax(["_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1i6y _85i5pxbi _1q511ejb"])
-  }, shouldShowCloseButton ?
-  /*#__PURE__*/
-  // The reason we are putting the close button first in the DOM and then
-  // reordering them is to ensure that users of assistive technology get
-  // all the context of a modal when initial focus is placed on the close
-  // button, since it's the first interactive element.
-  React.createElement(Flex, {
+    className: ax([styles.header])
+  }, shouldShowCloseButton ? /*#__PURE__*/React.createElement(Flex, {
     gap: "space.200",
     justifyContent: "space-between",
-    xcss: flexStyles
+    xcss: styles.flex
   }, /*#__PURE__*/React.createElement(Flex, {
     justifyContent: "end"
   }, /*#__PURE__*/React.createElement(CloseButton, {
@@ -53,7 +46,8 @@ var ModalHeader = function ModalHeader(props) {
     testId: modalTestId
   })), /*#__PURE__*/React.createElement(Flex, {
     justifyContent: "start",
-    alignItems: "center"
+    alignItems: "center",
+    xcss: styles.titleContainer
   }, children)) : children);
 };
 export default ModalHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "14.10.4",
+	"version": "14.10.5",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"