@atlaskit/modal-dialog 12.13.5 → 12.14.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/modal-dialog
 
+## 12.14.0
+
+### Minor Changes
+
+- [#110670](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110670)
+  [`c733254a2dd6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c733254a2dd6e) -
+  Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
+  is implicitly set to automatic.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.13.5
 
 ### Patch Changes
@@ -42,7 +55,7 @@
 
 - [#93686](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93686)
   [`acf6d58fc241`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/acf6d58fc241) -
-  Add support for React 18.
+  Add support for React 18 in non-strict mode.
 
 ### Patch Changes
 

package/README.md

@@ -10,4 +10,5 @@ yarn add @atlaskit/modal-dialog
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlassian.design/components/modal-dialog/).
+Detailed docs and example usage can be found
+[here](https://atlassian.design/components/modal-dialog/).

package/__perf__/default.tsx

@@ -2,43 +2,37 @@ import React, { useState } from 'react';
 
 import Button from '@atlaskit/button/new';
 
-import Modal, {
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalTitle,
-  ModalTransition,
-} from '../src';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '../src';
 
 export default function Example() {
-  const [isOpen, setIsOpen] = useState(false);
-  const close = () => setIsOpen(false);
-  const open = () => setIsOpen(true);
+	const [isOpen, setIsOpen] = useState(false);
+	const close = () => setIsOpen(false);
+	const open = () => setIsOpen(true);
 
-  return (
-    <>
-      <button onClick={open} type="button">
-        open modal
-      </button>
+	return (
+		<>
+			<button onClick={open} type="button">
+				open modal
+			</button>
 
-      <ModalTransition>
-        {isOpen && (
-          <Modal onClose={close}>
-            <ModalHeader>
-              <ModalTitle>Modal title</ModalTitle>
-            </ModalHeader>
-            <ModalBody>A simple Modal</ModalBody>
-            <ModalFooter>
-              <Button testId="primary" appearance="primary" onClick={close}>
-                Close
-              </Button>
-              <Button testId="secondary" appearance="subtle">
-                Secondary Action
-              </Button>
-            </ModalFooter>
-          </Modal>
-        )}
-      </ModalTransition>
-    </>
-  );
+			<ModalTransition>
+				{isOpen && (
+					<Modal onClose={close}>
+						<ModalHeader>
+							<ModalTitle>Modal title</ModalTitle>
+						</ModalHeader>
+						<ModalBody>A simple Modal</ModalBody>
+						<ModalFooter>
+							<Button testId="primary" appearance="primary" onClick={close}>
+								Close
+							</Button>
+							<Button testId="secondary" appearance="subtle">
+								Secondary Action
+							</Button>
+						</ModalFooter>
+					</Modal>
+				)}
+			</ModalTransition>
+		</>
+	);
 }

package/__perf__/interactions.tsx

@@ -1,136 +1,115 @@
 import React, { useCallback, useState } from 'react';
 
 import { findByText, fireEvent } from '@testing-library/dom';
-import {
-  type InteractionTaskArgs,
-  type PublicInteractionTask,
-} from 'storybook-addon-performance';
+import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance';
 
 import Button from '@atlaskit/button/new';
 
-import Modal, {
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalTitle,
-  ModalTransition,
-} from '../src';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '../src';
 
 const modalText = (index: number) => `Hello, world (${index})`;
 const closeText = (index: number) => `Close (${index})`;
 const openText = (index: number) => `Open (${index})`;
 
 const InteractionPerformance = ({ index = 0 }: { index?: number }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const open = useCallback(() => setIsOpen(true), []);
-  const close = useCallback(() => setIsOpen(false), []);
+	const [isOpen, setIsOpen] = useState(false);
+	const open = useCallback(() => setIsOpen(true), []);
+	const close = useCallback(() => setIsOpen(false), []);
 
-  return (
-    <>
-      <button data-testid="open-button" onClick={open} type="button">
-        {openText(index)}
-      </button>
+	return (
+		<>
+			<button data-testid="open-button" onClick={open} type="button">
+				{openText(index)}
+			</button>
 
-      <ModalTransition>
-        {isOpen && (
-          <Modal onClose={close}>
-            <ModalHeader>
-              <ModalTitle>Modal dialog</ModalTitle>
-            </ModalHeader>
-            <ModalBody>
-              {modalText(index)}
-              <InteractionPerformance index={index + 1} />
-            </ModalBody>
-            <ModalFooter>
-              <Button testId="primary" appearance="primary" onClick={close}>
-                {closeText(index)}
-              </Button>
-            </ModalFooter>
-          </Modal>
-        )}
-      </ModalTransition>
-    </>
-  );
+			<ModalTransition>
+				{isOpen && (
+					<Modal onClose={close}>
+						<ModalHeader>
+							<ModalTitle>Modal dialog</ModalTitle>
+						</ModalHeader>
+						<ModalBody>
+							{modalText(index)}
+							<InteractionPerformance index={index + 1} />
+						</ModalBody>
+						<ModalFooter>
+							<Button testId="primary" appearance="primary" onClick={close}>
+								{closeText(index)}
+							</Button>
+						</ModalFooter>
+					</Modal>
+				)}
+			</ModalTransition>
+		</>
+	);
 };
 
 const interactionTasks: PublicInteractionTask[] = [
-  {
-    name: 'Open first',
-    description: 'Opens the modal dialog',
-    run: async ({
-      container,
-      controls,
-    }: InteractionTaskArgs): Promise<void> => {
-      const openButton = await findByText(container, openText(0));
+	{
+		name: 'Open first',
+		description: 'Opens the modal dialog',
+		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
+			const openButton = await findByText(container, openText(0));
 
-      await controls.time(async () => {
-        fireEvent.click(openButton);
-        await findByText(document.body, modalText(0));
-      });
-    },
-  },
-  {
-    name: 'Close first',
-    description: 'Closes the modal dialog',
-    run: async ({
-      container,
-      controls,
-    }: InteractionTaskArgs): Promise<void> => {
-      const openButton = await findByText(container, openText(0));
-      fireEvent.click(openButton);
+			await controls.time(async () => {
+				fireEvent.click(openButton);
+				await findByText(document.body, modalText(0));
+			});
+		},
+	},
+	{
+		name: 'Close first',
+		description: 'Closes the modal dialog',
+		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
+			const openButton = await findByText(container, openText(0));
+			fireEvent.click(openButton);
 
-      await controls.time(async () => {
-        const closeButton = await findByText(document.body, closeText(0));
-        fireEvent.click(closeButton);
-      });
-    },
-  },
-  {
-    name: 'Open second',
-    description: 'Opens the a second modal',
-    run: async ({
-      container,
-      controls,
-    }: InteractionTaskArgs): Promise<void> => {
-      const openButton = await findByText(container, openText(0));
-      fireEvent.click(openButton);
-      await findByText(document.body, modalText(0));
-      const secondOpenButton = await findByText(document.body, openText(1));
+			await controls.time(async () => {
+				const closeButton = await findByText(document.body, closeText(0));
+				fireEvent.click(closeButton);
+			});
+		},
+	},
+	{
+		name: 'Open second',
+		description: 'Opens the a second modal',
+		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
+			const openButton = await findByText(container, openText(0));
+			fireEvent.click(openButton);
+			await findByText(document.body, modalText(0));
+			const secondOpenButton = await findByText(document.body, openText(1));
 
-      await controls.time(async () => {
-        fireEvent.click(secondOpenButton);
-        await findByText(document.body, modalText(1));
-      });
-    },
-  },
-  {
-    name: 'Close second',
-    description: 'Closes the a second modal',
-    run: async ({
-      container,
-      controls,
-    }: InteractionTaskArgs): Promise<void> => {
-      const openButton = await findByText(container, openText(0));
-      fireEvent.click(openButton);
-      await findByText(document.body, modalText(0));
-      const secondOpenButton = await findByText(document.body, openText(1));
-      fireEvent.click(secondOpenButton);
-      await findByText(document.body, modalText(1));
+			await controls.time(async () => {
+				fireEvent.click(secondOpenButton);
+				await findByText(document.body, modalText(1));
+			});
+		},
+	},
+	{
+		name: 'Close second',
+		description: 'Closes the a second modal',
+		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
+			const openButton = await findByText(container, openText(0));
+			fireEvent.click(openButton);
+			await findByText(document.body, modalText(0));
+			const secondOpenButton = await findByText(document.body, openText(1));
+			fireEvent.click(secondOpenButton);
+			await findByText(document.body, modalText(1));
 
-      await controls.time(async () => {
-        const closeButton = await findByText(document.body, closeText(1));
-        fireEvent.click(closeButton);
-      });
-    },
-  },
+			await controls.time(async () => {
+				const closeButton = await findByText(document.body, closeText(1));
+				fireEvent.click(closeButton);
+			});
+		},
+	},
 ];
 
 InteractionPerformance.story = {
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default InteractionPerformance;

package/__perf__/scroll.tsx

@@ -2,97 +2,80 @@ import React, { useCallback, useRef, useState } from 'react';
 
 import { findByTestId, findByText, fireEvent } from '@testing-library/dom';
 import Lorem from 'react-lorem-component';
-import {
-  type InteractionTaskArgs,
-  type PublicInteractionTask,
-} from 'storybook-addon-performance';
+import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance';
 
 import Button from '@atlaskit/button/new';
 
-import Modal, {
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalTitle,
-  ModalTransition,
-} from '../src';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '../src';
 
 const openText = 'Open modal';
 const closeText = 'Close';
 const scrollToBottomText = 'Scroll to bottom';
 
 const ScrollPerformance = () => {
-  const [isOpen, setIsOpen] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
 
-  const bottomRef = useRef<HTMLDivElement>(null);
+	const bottomRef = useRef<HTMLDivElement>(null);
 
-  const open = useCallback(() => setIsOpen(true), []);
-  const close = useCallback(() => setIsOpen(false), []);
+	const open = useCallback(() => setIsOpen(true), []);
+	const close = useCallback(() => setIsOpen(false), []);
 
-  const scrollToBottom = () =>
-    bottomRef.current && bottomRef.current.scrollIntoView(true);
+	const scrollToBottom = () => bottomRef.current && bottomRef.current.scrollIntoView(true);
 
-  return (
-    <>
-      <button data-testid="open" onClick={open} type="button">
-        {openText}
-      </button>
+	return (
+		<>
+			<button data-testid="open" onClick={open} type="button">
+				{openText}
+			</button>
 
-      <ModalTransition>
-        {isOpen && (
-          <Modal onClose={close} testId="modal">
-            <ModalHeader>
-              <ModalTitle>Modal dialog</ModalTitle>
-            </ModalHeader>
-            <ModalBody>
-              <Lorem count={10} />
-              <div ref={bottomRef} />
-            </ModalBody>
-            <ModalFooter>
-              <Button testId="close" appearance="primary" onClick={close}>
-                {closeText}
-              </Button>
-              <Button
-                testId="scroll-to-bottom"
-                appearance="subtle"
-                onClick={scrollToBottom}
-              >
-                {scrollToBottomText}
-              </Button>
-            </ModalFooter>
-          </Modal>
-        )}
-      </ModalTransition>
-    </>
-  );
+			<ModalTransition>
+				{isOpen && (
+					<Modal onClose={close} testId="modal">
+						<ModalHeader>
+							<ModalTitle>Modal dialog</ModalTitle>
+						</ModalHeader>
+						<ModalBody>
+							<Lorem count={10} />
+							<div ref={bottomRef} />
+						</ModalBody>
+						<ModalFooter>
+							<Button testId="close" appearance="primary" onClick={close}>
+								{closeText}
+							</Button>
+							<Button testId="scroll-to-bottom" appearance="subtle" onClick={scrollToBottom}>
+								{scrollToBottomText}
+							</Button>
+						</ModalFooter>
+					</Modal>
+				)}
+			</ModalTransition>
+		</>
+	);
 };
 
 const interactionTasks: PublicInteractionTask[] = [
-  {
-    name: 'Scroll to bottom',
-    description: 'Opens the modal dialog',
-    run: async ({
-      container,
-      controls,
-    }: InteractionTaskArgs): Promise<void> => {
-      const openButton = await findByText(container, openText);
-      fireEvent.click(openButton);
+	{
+		name: 'Scroll to bottom',
+		description: 'Opens the modal dialog',
+		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
+			const openButton = await findByText(container, openText);
+			fireEvent.click(openButton);
 
-      const content = await findByTestId(document.body, 'modal--scrollable');
+			const content = await findByTestId(document.body, 'modal--scrollable');
 
-      await controls.time(async () => {
-        content.scrollTo(0, content.scrollHeight);
-      });
-    },
-  },
+			await controls.time(async () => {
+				content.scrollTo(0, content.scrollHeight);
+			});
+		},
+	},
 ];
 
 ScrollPerformance.story = {
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default ScrollPerformance;

package/codemods/12.0.0-lite-mode.tsx

@@ -1,10 +1,7 @@
 import { type JSCodeshift } from 'jscodeshift';
 import { type Collection } from 'jscodeshift/src/Collection';
 
-import {
-  createTransformer,
-  hasImportDeclaration,
-} from '@atlaskit/codemod-utils';
+import { createTransformer, hasImportDeclaration } from '@atlaskit/codemod-utils';
 
 import { handlePropSpread } from './migrations/handle-prop-spread';
 import { inlineWidthNamesDeclaration } from './migrations/inline-width-names-declaration';
@@ -28,24 +25,24 @@ import { renameScrollBehaviorToShouldScrollInViewport } from './migrations/renam
  * after the other migrations.
  */
 const transformer = createTransformer(
-  [
-    mapBodyFromProps,
-    mapHeaderFromProps,
-    mapFooterFromProps,
-    renameScrollBehaviorToShouldScrollInViewport,
-    renameAppearanceType,
-    renameInnerComponentPropTypes,
-    inlineWidthNamesDeclaration,
-    mapHeadingPropToModalTitle,
-    mapActionsProp,
-    mapContainerFromProps,
-    removeComponentOverrideProps,
-    removeAppearanceProp,
-    removeIsChromeless,
-    handlePropSpread,
-  ],
-  (j: JSCodeshift, source: Collection<Node>) =>
-    hasImportDeclaration(j, source, '@atlaskit/modal-dialog'),
+	[
+		mapBodyFromProps,
+		mapHeaderFromProps,
+		mapFooterFromProps,
+		renameScrollBehaviorToShouldScrollInViewport,
+		renameAppearanceType,
+		renameInnerComponentPropTypes,
+		inlineWidthNamesDeclaration,
+		mapHeadingPropToModalTitle,
+		mapActionsProp,
+		mapContainerFromProps,
+		removeComponentOverrideProps,
+		removeAppearanceProp,
+		removeIsChromeless,
+		handlePropSpread,
+	],
+	(j: JSCodeshift, source: Collection<Node>) =>
+		hasImportDeclaration(j, source, '@atlaskit/modal-dialog'),
 );
 
 export default transformer;