@atlaskit/modal-dialog 14.10.4 → 14.11.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/modal-dialog
 
+## 14.11.0
+
+### Minor Changes
+
+- [`ef58c5c05a8fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef58c5c05a8fe) -
+  Clean up flag to ensure `autoFocus` is never off in preparation for removing the boolean
+  `autoFocus` option.
+
+## 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/codemods/utils.tsx

@@ -61,7 +61,11 @@ export function getJSXAttributesByName(
 		});
 }
 
-export function hasImportDeclaration(j: core.JSCodeshift, source: any, importPath: string): boolean {
+export function hasImportDeclaration(
+	j: core.JSCodeshift,
+	source: any,
+	importPath: string,
+): boolean {
 	const imports = source
 		.find(j.ImportDeclaration)
 		.filter(
@@ -223,7 +227,12 @@ export function addToImport({
 		});
 }
 
-export const createRenameFuncFor: (component: string, importName: string, from: string, to: string) => (j: core.JSCodeshift, source: Collection<Node>) => void =
+export const createRenameFuncFor: (
+	component: string,
+	importName: string,
+	from: string,
+	to: string,
+) => (j: core.JSCodeshift, source: Collection<Node>) => void =
 	(component: string, importName: string, from: string, to: string) =>
 	(j: core.JSCodeshift, source: Collection<Node>) => {
 		const specifier = getNamedSpecifier(j, source, component, importName);
@@ -253,7 +262,12 @@ export const createRenameFuncFor: (component: string, importName: string, from:
 		}
 	};
 
-export const createRemoveFuncIfBooleanFor: (component: string, importName: string, prop: string, comment?: string) => (j: core.JSCodeshift, source: Collection<Node>) => void =
+export const createRemoveFuncIfBooleanFor: (
+	component: string,
+	importName: string,
+	prop: string,
+	comment?: string,
+) => (j: core.JSCodeshift, source: Collection<Node>) => void =
 	(component: string, importName: string, prop: string, comment?: string) =>
 	(j: core.JSCodeshift, source: Collection<Node>) => {
 		const specifier =
@@ -280,11 +294,16 @@ export const createRemoveFuncIfBooleanFor: (component: string, importName: strin
 		});
 	};
 
-export const createRenameImportFor: ({ componentName, newComponentName, oldPackagePath, newPackagePath, }: {
-    componentName: string;
-    newComponentName?: string;
-    oldPackagePath: string;
-    newPackagePath: string;
+export const createRenameImportFor: ({
+	componentName,
+	newComponentName,
+	oldPackagePath,
+	newPackagePath,
+}: {
+	componentName: string;
+	newComponentName?: string;
+	oldPackagePath: string;
+	newPackagePath: string;
 }) => (j: core.JSCodeshift, source: Collection<Node>) => void =
 	({
 		componentName,
@@ -366,10 +385,14 @@ export const createRenameImportFor: ({ componentName, newComponentName, oldPacka
 			.remove();
 	};
 
-export const createRemoveImportsFor: ({ importsToRemove, packagePath, comment, }: {
-    importsToRemove: string[];
-    packagePath: string;
-    comment: string;
+export const createRemoveImportsFor: ({
+	importsToRemove,
+	packagePath,
+	comment,
+}: {
+	importsToRemove: string[];
+	packagePath: string;
+	comment: string;
 }) => (j: core.JSCodeshift, source: Collection<Node>) => void =
 	({
 		importsToRemove,
@@ -440,9 +463,12 @@ export const createRemoveImportsFor: ({ importsToRemove, packagePath, comment, }
 		}
 	};
 
-export const createTransformer: (component: string, migrates: {
-	(j: core.JSCodeshift, source: Collection<Node>): void;
-}[]) => (fileInfo: FileInfo, api: API, options: Options) => string =
+export const createTransformer: (
+	component: string,
+	migrates: {
+		(j: core.JSCodeshift, source: Collection<Node>): void;
+	}[],
+) => (fileInfo: FileInfo, api: API, options: Options) => string =
 	(component: string, migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[]) =>
 	(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
 		const source: Collection<Node> = j(fileInfo.source);

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

@@ -60,7 +60,8 @@ var ModalDialog = function ModalDialog(props) {
   var defaultTestId = testId || 'modal-dialog';
   // https://product-fabric.atlassian.net/browse/DSP-24307
   // If flag and falsy, use true instead.
-  var autoFocus = !providedAutoFocus && (0, _platformFeatureFlags.fg)('platform_dst_autofocus-never-false') ? true : providedAutoFocus;
+  // When we remove boolean `autoFocus`, we won't have to worry about this
+  var autoFocus = !providedAutoFocus ? true : providedAutoFocus;
   (0, _react.useEffect)(function () {
     // Modal dialogs can appear on top of iframe elements that are on another domain.
     // There is a Chrome bug where drag and drop in an element on top of a cross domain

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-dialog.js

@@ -48,7 +48,8 @@ const ModalDialog = props => {
   const defaultTestId = testId || 'modal-dialog';
   // https://product-fabric.atlassian.net/browse/DSP-24307
   // If flag and falsy, use true instead.
-  const autoFocus = !providedAutoFocus && fg('platform_dst_autofocus-never-false') ? true : providedAutoFocus;
+  // When we remove boolean `autoFocus`, we won't have to worry about this
+  const autoFocus = !providedAutoFocus ? true : providedAutoFocus;
   useEffect(() => {
     // Modal dialogs can appear on top of iframe elements that are on another domain.
     // There is a Chrome bug where drag and drop in an element on top of a cross domain

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-dialog.js

@@ -51,7 +51,8 @@ var ModalDialog = function ModalDialog(props) {
   var defaultTestId = testId || 'modal-dialog';
   // https://product-fabric.atlassian.net/browse/DSP-24307
   // If flag and falsy, use true instead.
-  var autoFocus = !providedAutoFocus && fg('platform_dst_autofocus-never-false') ? true : providedAutoFocus;
+  // When we remove boolean `autoFocus`, we won't have to worry about this
+  var autoFocus = !providedAutoFocus ? true : providedAutoFocus;
   useEffect(function () {
     // Modal dialogs can appear on top of iframe elements that are on another domain.
     // There is a Chrome bug where drag and drop in an element on top of a cross domain

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.11.0",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/avatar": "^25.7.0",
+		"@atlaskit/avatar": "^25.8.0",
 		"@atlaskit/avatar-group": "^12.4.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
@@ -124,9 +124,6 @@
 		"platform_modal-dialog-heading-icon-a11y-fix": {
 			"type": "boolean"
 		},
-		"platform_dst_autofocus-never-false": {
-			"type": "boolean"
-		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
 		}