@atlaskit/modal-dialog 14.10.3 → 14.10.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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
+
+- Updated dependencies
+
 ## 14.10.3
 
 ### Patch Changes

package/codemods/__tests__/not-yet-boolean-autofocus-removal.tsx

@@ -0,0 +1,155 @@
+jest.autoMockOff();
+
+import transformer from '../not-yet-boolean-autofocus-removal';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Remove autoFocus prop', () => {
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+      import React from 'react';
+      import ModalDialog from '@atlaskit/modal-dialog';
+
+      const SimpleModalDialog = () => {
+        return <ModalDialog autoFocus />;
+      }
+    `,
+		`
+      import React from 'react';
+      import ModalDialog from '@atlaskit/modal-dialog';
+
+      const SimpleModalDialog = () => {
+        return <ModalDialog />;
+      }
+    `,
+		'should remove "true" boolean autoFocus prop from default import',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+      import React from 'react';
+      import ModalDialog from '@atlaskit/modal-dialog';
+
+      const SimpleModalDialog = () => {
+        return <ModalDialog autoFocus={true} />;
+      }
+    `,
+		`
+      import React from 'react';
+      import ModalDialog from '@atlaskit/modal-dialog';
+
+      const SimpleModalDialog = () => {
+        return <ModalDialog />;
+      }
+    `,
+		'should remove boolean true autoFocus prop from default import',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+      import React from 'react';
+      import ModalDialog from '@atlaskit/modal-dialog';
+
+      const SimpleModalDialog = () => {
+        return <ModalDialog autoFocus={false} />;
+      }
+    `,
+		`
+      import React from 'react';
+      import ModalDialog from '@atlaskit/modal-dialog';
+
+      const SimpleModalDialog = () => {
+        return <ModalDialog />;
+      }
+    `,
+		'should remove boolean false autoFocus prop from default import',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+      import React from 'react';
+      import ModalDialog from '@atlaskit/modal-dialog';
+
+      const SimpleModalDialog = () => {
+        return <ModalDialog autoFocus={ref} />;
+      }
+    `,
+		`
+      import React from 'react';
+      import ModalDialog from '@atlaskit/modal-dialog';
+
+      const SimpleModalDialog = () => {
+        return <ModalDialog autoFocus={ref} />;
+      }
+    `,
+		'should not remove non-boolean autoFocus prop from default import',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+      import React from 'react';
+      import { ModalDialog } from '@atlaskit/modal-dialog';
+
+      const SimpleModalDialog = () => {
+        return <ModalDialog autoFocus={false} />;
+      }
+    `,
+		`
+      import React from 'react';
+      import { ModalDialog } from '@atlaskit/modal-dialog';
+
+      const SimpleModalDialog = () => {
+        return <ModalDialog />;
+      }
+    `,
+		'should remove autoFocus prop from named import',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+      import React from 'react';
+      import { ModalDialog } from '@foo/bar';
+
+      const SimpleModalDialog = () => {
+        return <ModalDialog autoFocus={false} />;
+      }
+    `,
+		`
+      import React from 'react';
+      import { ModalDialog } from '@foo/bar';
+
+      const SimpleModalDialog = () => {
+        return <ModalDialog autoFocus={false} />;
+      }
+    `,
+		'should do nothing if not correct import',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+      import React from 'react';
+      import { ModalDialog as AkModalDialog } from '@atlaskit/modal-dialog';
+
+      const SimpleModalDialog = () => {
+        return <AkModalDialog autoFocus={false} />;
+      }
+    `,
+		`
+      import React from 'react';
+      import { ModalDialog as AkModalDialog } from '@atlaskit/modal-dialog';
+
+      const SimpleModalDialog = () => {
+        return <AkModalDialog />;
+      }
+    `,
+		'should remove autoFocus prop with aliased import',
+	);
+});

package/codemods/migrations/remove-props.tsx

@@ -0,0 +1,6 @@
+import { createRemoveFuncIfBooleanFor } from '../utils';
+
+export const removeAutoFocus: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncIfBooleanFor('@atlaskit/modal-dialog', 'ModalDialog', 'autoFocus');

package/codemods/not-yet-boolean-autofocus-removal.tsx

@@ -0,0 +1,9 @@
+import type { API, FileInfo, Options } from 'jscodeshift';
+
+import { removeAutoFocus } from './migrations/remove-props';
+import { createTransformer } from './utils';
+
+const transformer: (fileInfo: FileInfo, { jscodeshift }: API, options: Options) => string =
+	createTransformer('@atlaskit/modal-dialog', [removeAutoFocus]);
+
+export default transformer;

package/codemods/utils.tsx

@@ -0,0 +1,457 @@
+import type {
+	API,
+	ASTPath,
+	default as core,
+	FileInfo,
+	ImportDeclaration,
+	ImportDefaultSpecifier,
+	ImportSpecifier,
+	JSXAttribute,
+	Options,
+	Program,
+	VariableDeclaration,
+} from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export type Nullable<T> = T | null;
+
+export function getNamedSpecifier(
+	j: core.JSCodeshift,
+	source: any,
+	specifier: string,
+	importName: string,
+): any {
+	const specifiers = source
+		.find(j.ImportDeclaration)
+		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+		.find(j.ImportSpecifier)
+		.filter((path: ASTPath<ImportSpecifier>) => path.node.imported.name === importName);
+
+	if (!specifiers.length) {
+		return null;
+	}
+	return specifiers.nodes()[0]!.local!.name;
+}
+
+function getDefaultSpecifier(j: core.JSCodeshift, source: ReturnType<typeof j>, specifier: string) {
+	const specifiers = source
+		.find(j.ImportDeclaration)
+		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+		.find(j.ImportDefaultSpecifier);
+
+	if (!specifiers.length) {
+		return null;
+	}
+	return specifiers.nodes()[0]!.local!.name;
+}
+
+export function getJSXAttributesByName(
+	j: core.JSCodeshift,
+	element: ASTPath<any>,
+	attributeName: string,
+): Collection<JSXAttribute> {
+	return j(element)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXAttribute)
+		.filter((attribute) => {
+			const matches = j(attribute)
+				.find(j.JSXIdentifier)
+				.filter((identifier) => identifier.value.name === attributeName);
+			return Boolean(matches.length);
+		});
+}
+
+export function hasImportDeclaration(j: core.JSCodeshift, source: any, importPath: string): boolean {
+	const imports = source
+		.find(j.ImportDeclaration)
+		.filter(
+			(path: ASTPath<ImportDeclaration>) =>
+				typeof path.node.source.value === 'string' && path.node.source.value.startsWith(importPath),
+		);
+
+	return Boolean(imports.length);
+}
+
+export function findIdentifierAndReplaceAttribute(
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	identifierName: string,
+	searchAttr: string,
+	replaceWithAttr: string,
+): void {
+	source
+		.find(j.JSXElement)
+		.find(j.JSXOpeningElement)
+		.filter((path) => {
+			return !!j(path.node)
+				.find(j.JSXIdentifier)
+				.filter((identifier) => identifier.value.name === identifierName);
+		})
+		.forEach((element) => {
+			j(element)
+				.find(j.JSXAttribute)
+				.find(j.JSXIdentifier)
+				.filter((attr) => attr.node.name === searchAttr)
+				.forEach((attribute) => {
+					j(attribute).replaceWith(j.jsxIdentifier(replaceWithAttr));
+				});
+		});
+}
+
+export function hasVariableAssignment(
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	identifierName: string,
+): Collection<VariableDeclaration> | boolean {
+	const occurance = source.find(j.VariableDeclaration).filter((path) => {
+		return !!j(path.node)
+			.find(j.VariableDeclarator)
+			.find(j.Identifier)
+			.filter((identifier) => {
+				return identifier.node.name === identifierName;
+			}).length;
+	});
+	return !!occurance.length ? occurance : false;
+}
+
+// not replacing newlines (which \s does)
+const spacesAndTabs: RegExp = /[ \t]{2,}/g;
+const lineStartWithSpaces: RegExp = /^[ \t]*/gm;
+
+function clean(value: string): string {
+	return (
+		value
+			.replace(spacesAndTabs, ' ')
+			.replace(lineStartWithSpaces, '')
+			// using .trim() to clear the any newlines before the first text and after last text
+			.trim()
+	);
+}
+
+export function addCommentToStartOfFile({
+	j,
+	base,
+	message,
+}: {
+	j: core.JSCodeshift;
+	base: Collection<Node>;
+	message: string;
+}): void {
+	addCommentBefore({
+		j,
+		target: base.find(j.Program),
+		message,
+	});
+}
+
+export function addCommentBefore({
+	j,
+	target,
+	message,
+}: {
+	j: core.JSCodeshift;
+	target: Collection<Program> | Collection<ImportDeclaration>;
+	message: string;
+}): void {
+	const content: string = ` TODO: (from codemod) ${clean(message)} `;
+	target.forEach((path: ASTPath<Program | ImportDeclaration>) => {
+		path.value.comments = path.value.comments || [];
+
+		const exists = path.value.comments.find((comment) => comment.value === content);
+
+		// avoiding duplicates of the same comment
+		if (exists) {
+			return;
+		}
+
+		path.value.comments.push(j.commentBlock(content));
+	});
+}
+
+export function tryCreateImport({
+	j,
+	base,
+	relativeToPackage,
+	packageName,
+}: {
+	j: core.JSCodeshift;
+	base: Collection<any>;
+	relativeToPackage: string;
+	packageName: string;
+}): void {
+	const exists: boolean =
+		base.find(j.ImportDeclaration).filter((path) => path.value.source.value === packageName)
+			.length > 0;
+
+	if (exists) {
+		return;
+	}
+
+	base
+		.find(j.ImportDeclaration)
+		.filter((path) => path.value.source.value === relativeToPackage)
+		.insertBefore(j.importDeclaration([], j.literal(packageName)));
+}
+
+export function addToImport({
+	j,
+	base,
+	importSpecifier,
+	packageName,
+}: {
+	j: core.JSCodeshift;
+	base: Collection<any>;
+	importSpecifier: ImportSpecifier | ImportDefaultSpecifier;
+	packageName: string;
+}): void {
+	base
+		.find(j.ImportDeclaration)
+		.filter((path) => path.value.source.value === packageName)
+		.replaceWith((declaration) => {
+			return j.importDeclaration(
+				[
+					// we are appending to the existing specifiers
+					// We are doing a filter hear because sometimes specifiers can be removed
+					// but they hand around in the declaration
+					...(declaration.value.specifiers || []).filter(
+						(item) => item.type === 'ImportSpecifier' && item.imported != null,
+					),
+					importSpecifier,
+				],
+				j.literal(packageName),
+			);
+		});
+}
+
+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);
+
+		if (!specifier) {
+			return;
+		}
+
+		source.findJSXElements(specifier).forEach((element) => {
+			getJSXAttributesByName(j, element, from).forEach((attribute) => {
+				j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(to), attribute.node.value));
+			});
+		});
+
+		let variable = hasVariableAssignment(j, source, specifier);
+		if (variable) {
+			(variable as Collection<VariableDeclaration>)
+				.find(j.VariableDeclarator)
+				.forEach((declarator) => {
+					j(declarator)
+						.find(j.Identifier)
+						.filter((identifier) => identifier.name === 'id')
+						.forEach((ids) => {
+							findIdentifierAndReplaceAttribute(j, source, ids.node.name, from, to);
+						});
+				});
+		}
+	};
+
+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 =
+			getNamedSpecifier(j, source, component, importName) ||
+			getDefaultSpecifier(j, source, component);
+
+		if (!specifier) {
+			return;
+		}
+
+		source.findJSXElements(specifier).forEach((element) => {
+			getJSXAttributesByName(j, element, prop).forEach((attribute) => {
+				if (
+					attribute.value.value === null ||
+					(attribute.value.value?.type === 'JSXExpressionContainer' &&
+						attribute.value.value.expression.type === 'BooleanLiteral')
+				) {
+					j(attribute).remove();
+					if (comment) {
+						addCommentToStartOfFile({ j, base: source, message: comment });
+					}
+				}
+			});
+		});
+	};
+
+export const createRenameImportFor: ({ componentName, newComponentName, oldPackagePath, newPackagePath, }: {
+    componentName: string;
+    newComponentName?: string;
+    oldPackagePath: string;
+    newPackagePath: string;
+}) => (j: core.JSCodeshift, source: Collection<Node>) => void =
+	({
+		componentName,
+		newComponentName,
+		oldPackagePath,
+		newPackagePath,
+	}: {
+		componentName: string;
+		newComponentName?: string;
+		oldPackagePath: string;
+		newPackagePath: string;
+	}) =>
+	(j: core.JSCodeshift, source: Collection<Node>) => {
+		const isUsingName: boolean =
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === oldPackagePath)
+				.find(j.ImportSpecifier)
+				.nodes()
+				.filter((specifier) => specifier.imported && specifier.imported.name === componentName)
+				.length > 0;
+		if (!isUsingName) {
+			return;
+		}
+
+		const existingAlias: Nullable<string> =
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === oldPackagePath)
+				.find(j.ImportSpecifier)
+				.nodes()
+				.map((specifier): Nullable<string> => {
+					if (specifier.imported && specifier.imported.name !== componentName) {
+						return null;
+					}
+					// If aliased: return the alias
+					if (specifier.local && specifier.local.name !== componentName) {
+						return specifier.local.name;
+					}
+
+					return null;
+				})
+				.filter(Boolean)[0] || null;
+
+		// Check to see if need to create new package path
+		// Try create an import declaration just before the old import
+		tryCreateImport({
+			j,
+			base: source,
+			relativeToPackage: oldPackagePath,
+			packageName: newPackagePath,
+		});
+
+		const newSpecifier: ImportSpecifier | ImportDefaultSpecifier = (() => {
+			// If there's a new name use that
+			if (newComponentName) {
+				return j.importSpecifier(j.identifier(newComponentName), j.identifier(newComponentName));
+			}
+
+			if (existingAlias) {
+				return j.importSpecifier(j.identifier(componentName), j.identifier(existingAlias));
+			}
+
+			// Add specifier
+			return j.importSpecifier(j.identifier(componentName), j.identifier(componentName));
+		})();
+
+		addToImport({
+			j,
+			base: source,
+			importSpecifier: newSpecifier,
+			packageName: newPackagePath,
+		});
+
+		// Remove old path
+		source
+			.find(j.ImportDeclaration)
+			.filter((path) => path.node.source.value === oldPackagePath)
+			.remove();
+	};
+
+export const createRemoveImportsFor: ({ importsToRemove, packagePath, comment, }: {
+    importsToRemove: string[];
+    packagePath: string;
+    comment: string;
+}) => (j: core.JSCodeshift, source: Collection<Node>) => void =
+	({
+		importsToRemove,
+		packagePath,
+		comment,
+	}: {
+		importsToRemove: string[];
+		packagePath: string;
+		comment: string;
+	}) =>
+	(j: core.JSCodeshift, source: Collection<Node>) => {
+		const isUsingName: boolean =
+			source.find(j.ImportDeclaration).filter((path) => path.node.source.value === packagePath)
+				.length > 0;
+		if (!isUsingName) {
+			return;
+		}
+
+		const existingAlias: Nullable<string> =
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === packagePath)
+				.find(j.ImportSpecifier)
+				.nodes()
+				.map((specifier): Nullable<string> => {
+					if (!importsToRemove.includes(specifier.imported.name)) {
+						return null;
+					}
+					// If aliased: return the alias
+					if (specifier.local && !importsToRemove.includes(specifier.local.name)) {
+						return specifier.local.name;
+					}
+
+					return null;
+				})
+				.filter(Boolean)[0] || null;
+
+		// Remove imports
+		source
+			.find(j.ImportDeclaration)
+			.filter((path) => path.node.source.value === packagePath)
+			.find(j.ImportSpecifier)
+			.find(j.Identifier)
+			.filter((identifier) => {
+				if (
+					importsToRemove.includes(identifier.value.name) ||
+					identifier.value.name === existingAlias
+				) {
+					addCommentToStartOfFile({ j, base: source, message: comment });
+					return true;
+				}
+				return false;
+			})
+			.remove();
+
+		// Remove entire import if it is empty
+		const isEmptyImport =
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === packagePath)
+				.find(j.ImportSpecifier)
+				.find(j.Identifier).length === 0;
+		if (isEmptyImport) {
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === packagePath)
+				.remove();
+		}
+	};
+
+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);
+
+		if (!hasImportDeclaration(j, source, component)) {
+			return fileInfo.source;
+		}
+
+		migrates.forEach((tf) => tf(j, source));
+
+		return source.toSource(options.printOptions || { quote: 'single' });
+	};

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/dist/types/hooks.d.ts

@@ -1 +1,2 @@
-export declare const useModal: () => import("./internal/context").ModalAttributes;
+import { type ModalAttributes } from './internal/context';
+export declare const useModal: () => ModalAttributes;

package/dist/types/internal/context.d.ts

@@ -1,3 +1,4 @@
+import { type Context } from 'react';
 import { type ModalDialogProps, type OnCloseHandler } from '../types';
 export type ModalAttributes = {
     /**
@@ -25,5 +26,5 @@ export type ModalAttributes = {
      */
     isFullScreen: boolean;
 };
-export declare const ModalContext: import("react").Context<ModalAttributes | null>;
-export declare const ScrollContext: import("react").Context<boolean | null>;
+export declare const ModalContext: Context<ModalAttributes | null>;
+export declare const ScrollContext: Context<boolean | null>;

package/dist/types-ts4.5/hooks.d.ts

@@ -1 +1,2 @@
-export declare const useModal: () => import("./internal/context").ModalAttributes;
+import { type ModalAttributes } from './internal/context';
+export declare const useModal: () => ModalAttributes;

package/dist/types-ts4.5/internal/context.d.ts

@@ -1,3 +1,4 @@
+import { type Context } from 'react';
 import { type ModalDialogProps, type OnCloseHandler } from '../types';
 export type ModalAttributes = {
     /**
@@ -25,5 +26,5 @@ export type ModalAttributes = {
      */
     isFullScreen: boolean;
 };
-export declare const ModalContext: import("react").Context<ModalAttributes | null>;
-export declare const ScrollContext: import("react").Context<boolean | null>;
+export declare const ModalContext: Context<ModalAttributes | null>;
+export declare const ScrollContext: Context<boolean | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "14.10.3",
+	"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/"
@@ -32,7 +32,7 @@
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
-		"@atlaskit/icon": "^30.0.0",
+		"@atlaskit/icon": "^31.0.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/motion": "^5.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -61,12 +61,12 @@
 		"@atlaskit/breadcrumbs": "^15.3.0",
 		"@atlaskit/checkbox": "^17.3.0",
 		"@atlaskit/code": "^17.4.0",
-		"@atlaskit/datetime-picker": "^17.4.0",
+		"@atlaskit/datetime-picker": "^17.5.0",
 		"@atlaskit/docs": "^11.3.0",
 		"@atlaskit/dropdown-menu": "^16.4.0",
 		"@atlaskit/flag": "^17.8.0",
 		"@atlaskit/form": "^15.3.0",
-		"@atlaskit/heading": "^5.2.0",
+		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/popup": "^4.13.0",
 		"@atlaskit/radio": "^8.4.0",
@@ -80,6 +80,7 @@
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/raf-schd": "^4.0.1",
+		"jscodeshift": "^17.0.0",
 		"react-dom": "^18.2.0",
 		"react-lorem-component": "^0.13.0",
 		"react-sweet-state": "^2.6.5",