@atlaskit/modal-dialog 15.1.2 → 15.2.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/modal-dialog
 
+## 15.2.0
+
+### Minor Changes
+
+- [`8e9ab10567283`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e9ab10567283) -
+  When `platform-dst-top-layer` is enabled, the open layer observer registration now happens inside
+  the `Dialog` and `Popover` primitives directly, so `popup`, `modal-dialog`, and `tooltip` no
+  longer register with the open layer observer separately (avoiding double-counting).
+  - `Dialog` registers as `type: 'modal'`, with a no-op `onClose`, as there is no current use case
+    for programmatic close of modals via the open layer observer.
+  - `Popover` registers as `type: 'popup'` for interactive overlay roles (`dialog`, `alertdialog`,
+    `menu`, `listbox`, `tree`, `grid`) and omits `type` for other roles (e.g. `tooltip`).
+  - A new `programmatic` value has been added to `TPopoverCloseReason` to distinguish programmatic
+    closes, such as those from the open layer observer's `closeLayers()` calls.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.1.2
 
 ### Patch Changes

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

@@ -43,6 +43,8 @@ var dialogWidth = exports.dialogWidth = function dialogWidth(input) {
   }
   return typeof input === 'number' ? "".concat(input, "px") : input;
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var dialogHeight = exports.dialogHeight = function dialogHeight(input) {
   if (!input) {
     return 'auto';
@@ -185,5 +187,5 @@ var ModalDialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }))));
 });
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
+// eslint-disable-next-line @repo/internal/react/require-jsdoc, @atlaskit/volt-strict-mode/no-multiple-exports
 var _default = exports.default = ModalDialog;

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

@@ -113,7 +113,7 @@ var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "15.1.3"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -138,13 +138,20 @@ var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     // eslint-disable-next-line react-hooks/rules-of-hooks
     (0, _usePreventProgrammaticScroll.default)();
   }
-  (0, _openLayerObserver.useNotifyOpenLayerObserver)({
-    type: 'modal',
-    // Always open — modal is conditionally rendered when visible.
-    isOpen: true,
-    // No-op: no current use case for programmatic close via OpenLayerObserver.
-    onClose: _noop.default
-  });
+
+  // On the top-layer path, the Dialog primitive registers with the observer
+  // directly, so we skip registration here to avoid double-counting.
+  // Safe conditional hook: feature flags are resolved once at startup.
+  if (!(0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _openLayerObserver.useNotifyOpenLayerObserver)({
+      type: 'modal',
+      // Always open — modal is conditionally rendered when visible.
+      isOpen: true,
+      // No-op: no current use case for programmatic close via OpenLayerObserver.
+      onClose: _noop.default
+    });
+  }
 
   /**
    * Top-layer path (platform-dst-top-layer).

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

@@ -32,6 +32,8 @@ export const dialogWidth = input => {
   }
   return typeof input === 'number' ? `${input}px` : input;
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const dialogHeight = input => {
   if (!input) {
     return 'auto';
@@ -166,5 +168,5 @@ const ModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
   }), children)))));
 });
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
+// eslint-disable-next-line @repo/internal/react/require-jsdoc, @atlaskit/volt-strict-mode/no-multiple-exports
 export default ModalDialog;

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

@@ -99,7 +99,7 @@ const InternalModalWrapper = /*#__PURE__*/forwardRef((props, ref) => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "15.1.3"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {
@@ -123,13 +123,20 @@ const InternalModalWrapper = /*#__PURE__*/forwardRef((props, ref) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     usePreventProgrammaticScroll();
   }
-  useNotifyOpenLayerObserver({
-    type: 'modal',
-    // Always open — modal is conditionally rendered when visible.
-    isOpen: true,
-    // No-op: no current use case for programmatic close via OpenLayerObserver.
-    onClose: noop
-  });
+
+  // On the top-layer path, the Dialog primitive registers with the observer
+  // directly, so we skip registration here to avoid double-counting.
+  // Safe conditional hook: feature flags are resolved once at startup.
+  if (!fg('platform-dst-top-layer')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useNotifyOpenLayerObserver({
+      type: 'modal',
+      // Always open — modal is conditionally rendered when visible.
+      isOpen: true,
+      // No-op: no current use case for programmatic close via OpenLayerObserver.
+      onClose: noop
+    });
+  }
 
   /**
    * Top-layer path (platform-dst-top-layer).

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

@@ -34,6 +34,8 @@ export var dialogWidth = function dialogWidth(input) {
   }
   return typeof input === 'number' ? "".concat(input, "px") : input;
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export var dialogHeight = function dialogHeight(input) {
   if (!input) {
     return 'auto';
@@ -176,5 +178,5 @@ var ModalDialog = /*#__PURE__*/forwardRef(function (props, ref) {
   }))));
 });
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
+// eslint-disable-next-line @repo/internal/react/require-jsdoc, @atlaskit/volt-strict-mode/no-multiple-exports
 export default ModalDialog;

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

@@ -104,7 +104,7 @@ var InternalModalWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "15.1.3"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -129,13 +129,20 @@ var InternalModalWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     usePreventProgrammaticScroll();
   }
-  useNotifyOpenLayerObserver({
-    type: 'modal',
-    // Always open — modal is conditionally rendered when visible.
-    isOpen: true,
-    // No-op: no current use case for programmatic close via OpenLayerObserver.
-    onClose: noop
-  });
+
+  // On the top-layer path, the Dialog primitive registers with the observer
+  // directly, so we skip registration here to avoid double-counting.
+  // Safe conditional hook: feature flags are resolved once at startup.
+  if (!fg('platform-dst-top-layer')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useNotifyOpenLayerObserver({
+      type: 'modal',
+      // Always open — modal is conditionally rendered when visible.
+      isOpen: true,
+      // No-op: no current use case for programmatic close via OpenLayerObserver.
+      onClose: noop
+    });
+  }
 
   /**
    * Top-layer path (platform-dst-top-layer).

package/modal-dialog.docs.tsx

@@ -1,226 +1,228 @@
 import path from 'path';
 
-import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
 
-const documentation: ComponentStructuredContentSource[] = [
-	{
-		name: 'Modal',
-		description: 'A modal dialog component for important content.',
-		status: 'general-availability',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'Modal',
-			package: '@atlaskit/modal-dialog',
-			type: 'default',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use for immediate task or critical/warning requiring a response; blocking until closed',
-			'Use sparingly—modals are invasive',
-			'One task per modal; limit interactions; no nested modals (inaccessible)',
-			'Anatomy: header (h1 title), close button, body, footer with primary + cancel/close',
-			'Footer: primary button on the right of secondary; multiple dismissal methods (close button, Esc, blanket click, Cancel/Close)',
-			'Use Popup for smaller info + controls; Spotlight for onboarding; Inline message for alert/action',
-		],
-		contentGuidelines: [
-			'Use clear, descriptive titles',
-			'Primary button label should reflect the modal title',
-			'Use action verbs in button labels',
-			'Keep content focused on a single task or message',
-			'Use sentence case for all text',
-		],
-		accessibilityGuidelines: [
-			'Modal must have a title: use title component, or titleId from useModal, or label (avoid if no visual title)',
-			'Close button is required (except rare cases—consult a11y team)',
-			'Do not rely on color alone for severity; provide accessible label for icons',
-			'Focus order: 1) close (or title or container), 2) first focusable, 3) secondary button, 4) primary, 5) return focus to trigger on close',
-			'Dismiss via: close button, Esc, click blanket, Cancel/Close in footer',
-			'Ensure modal content is announced by screen readers',
-			'Ensure keyboard navigation and escape key support',
-			'Maintain focus within modal when open',
-		],
-		examples: [
-			{
-				name: 'Default',
-				description: 'The default form of a modal dialog.',
-				source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
+			description: 'A modal dialog component for important content.',
+			status: 'general-availability',
+			import: {
+				name: 'Modal',
+				package: '@atlaskit/modal-dialog',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['modal', 'dialog', 'popup', 'overlay', 'focused', 'interaction', 'layer'],
-		categories: ['overlay'],
-	},
-	{
-		name: 'ModalHeader',
-		description:
-			'The header section of a modal dialog, typically containing the title and optional close button.',
-		status: 'general-availability',
-		import: {
-			name: 'ModalHeader',
-			package: '@atlaskit/modal-dialog',
-			type: 'named',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
+			usageGuidelines: [
+				'Use for immediate task or critical/warning requiring a response; blocking until closed',
+				'Use sparingly—modals are invasive',
+				'One task per modal; limit interactions; no nested modals (inaccessible)',
+				'Anatomy: header (h1 title), close button, body, footer with primary + cancel/close',
+				'Footer: primary button on the right of secondary; multiple dismissal methods (close button, Esc, blanket click, Cancel/Close)',
+				'Use Popup for smaller info + controls; Spotlight for onboarding; Inline message for alert/action',
+			],
+			contentGuidelines: [
+				'Use clear, descriptive titles',
+				'Primary button label should reflect the modal title',
+				'Use action verbs in button labels',
+				'Keep content focused on a single task or message',
+				'Use sentence case for all text',
+			],
+			accessibilityGuidelines: [
+				'Modal must have a title: use title component, or titleId from useModal, or label (avoid if no visual title)',
+				'Close button is required (except rare cases—consult a11y team)',
+				'Do not rely on color alone for severity; provide accessible label for icons',
+				'Focus order: 1) close (or title or container), 2) first focusable, 3) secondary button, 4) primary, 5) return focus to trigger on close',
+				'Dismiss via: close button, Esc, click blanket, Cancel/Close in footer',
+				'Ensure modal content is announced by screen readers',
+				'Ensure keyboard navigation and escape key support',
+				'Maintain focus within modal when open',
+			],
+			examples: [
+				{
+					name: 'Default',
+					description: 'The default form of a modal dialog.',
+					source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
+				},
+			],
+			keywords: ['modal', 'dialog', 'popup', 'overlay', 'focused', 'interaction', 'layer'],
+			categories: ['overlay'],
 		},
-		usageGuidelines: [
-			'Use as the first child of Modal',
-			'Use hasCloseButton prop for standard close affordance',
-			'Ensure header contains ModalTitle or equivalent for accessibility',
-			'For custom headers, use CloseButton as first element in DOM',
-		],
-		contentGuidelines: ['Use clear, descriptive titles', 'Keep header content focused'],
-		examples: [
-			{
-				name: 'Modal Header',
-				description: 'ModalHeader example',
-				source: path.resolve(__dirname, './examples/constellation/modal-header-default.tsx'),
+		{
+			name: 'ModalHeader',
+			description:
+				'The header section of a modal dialog, typically containing the title and optional close button.',
+			status: 'general-availability',
+			import: {
+				name: 'ModalHeader',
+				package: '@atlaskit/modal-dialog',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['modal', 'header', 'title', 'close'],
-		categories: ['overlay'],
-	},
-	{
-		name: 'ModalTitle',
-		description: 'The title element for a modal dialog. Renders as h1 for accessibility.',
-		status: 'general-availability',
-		import: {
-			name: 'ModalTitle',
-			package: '@atlaskit/modal-dialog',
-			type: 'named',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
+			usageGuidelines: [
+				'Use as the first child of Modal',
+				'Use hasCloseButton prop for standard close affordance',
+				'Ensure header contains ModalTitle or equivalent for accessibility',
+				'For custom headers, use CloseButton as first element in DOM',
+			],
+			contentGuidelines: ['Use clear, descriptive titles', 'Keep header content focused'],
+			examples: [
+				{
+					name: 'Modal Header',
+					description: 'ModalHeader example',
+					source: path.resolve(__dirname, './examples/constellation/modal-header-default.tsx'),
+				},
+			],
+			keywords: ['modal', 'header', 'title', 'close'],
+			categories: ['overlay'],
 		},
-		usageGuidelines: [
-			'Use inside ModalHeader for the modal title',
-			'Modal must have a title for accessibility',
-			'Supports any valid React element as children',
-		],
-		contentGuidelines: ['Use clear, descriptive titles', 'Use sentence case'],
-		examples: [
-			{
-				name: 'Modal Title',
-				description: 'ModalTitle example',
-				source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
+		{
+			name: 'ModalTitle',
+			description: 'The title element for a modal dialog. Renders as h1 for accessibility.',
+			status: 'general-availability',
+			import: {
+				name: 'ModalTitle',
+				package: '@atlaskit/modal-dialog',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['modal', 'title', 'heading'],
-		categories: ['overlay'],
-	},
-	{
-		name: 'ModalBody',
-		description: 'The main content area of a modal dialog.',
-		status: 'general-availability',
-		import: {
-			name: 'ModalBody',
-			package: '@atlaskit/modal-dialog',
-			type: 'named',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
+			usageGuidelines: [
+				'Use inside ModalHeader for the modal title',
+				'Modal must have a title for accessibility',
+				'Supports any valid React element as children',
+			],
+			contentGuidelines: ['Use clear, descriptive titles', 'Use sentence case'],
+			examples: [
+				{
+					name: 'Modal Title',
+					description: 'ModalTitle example',
+					source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
+				},
+			],
+			keywords: ['modal', 'title', 'heading'],
+			categories: ['overlay'],
 		},
-		usageGuidelines: [
-			'Use for the primary content between header and footer',
-			'Accepts any valid React element as children',
-			'Handles overflow and scrolling when content exceeds viewport',
-		],
-		contentGuidelines: ['Keep content focused on a single task', 'Use clear, readable content'],
-		examples: [
-			{
-				name: 'Modal Body',
-				description: 'ModalBody example',
-				source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
+		{
+			name: 'ModalBody',
+			description: 'The main content area of a modal dialog.',
+			status: 'general-availability',
+			import: {
+				name: 'ModalBody',
+				package: '@atlaskit/modal-dialog',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['modal', 'body', 'content'],
-		categories: ['overlay'],
-	},
-	{
-		name: 'ModalFooter',
-		description: 'The footer section of a modal dialog, typically containing action buttons.',
-		status: 'general-availability',
-		import: {
-			name: 'ModalFooter',
-			package: '@atlaskit/modal-dialog',
-			type: 'named',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
+			usageGuidelines: [
+				'Use for the primary content between header and footer',
+				'Accepts any valid React element as children',
+				'Handles overflow and scrolling when content exceeds viewport',
+			],
+			contentGuidelines: ['Keep content focused on a single task', 'Use clear, readable content'],
+			examples: [
+				{
+					name: 'Modal Body',
+					description: 'ModalBody example',
+					source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
+				},
+			],
+			keywords: ['modal', 'body', 'content'],
+			categories: ['overlay'],
 		},
-		usageGuidelines: [
-			'Use for primary and secondary actions',
-			'Primary button on the right of secondary',
-			'Include Cancel/Close for dismissal',
-			'Accepts any valid React element for custom layouts',
-		],
-		contentGuidelines: [
-			'Primary button label should reflect the modal title',
-			'Use action verbs in button labels',
-		],
-		examples: [
-			{
-				name: 'Modal Footer',
-				description: 'ModalFooter example',
-				source: path.resolve(__dirname, './examples/constellation/modal-footer-default.tsx'),
+		{
+			name: 'ModalFooter',
+			description: 'The footer section of a modal dialog, typically containing action buttons.',
+			status: 'general-availability',
+			import: {
+				name: 'ModalFooter',
+				package: '@atlaskit/modal-dialog',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['modal', 'footer', 'actions', 'buttons'],
-		categories: ['overlay'],
-	},
-	{
-		name: 'ModalTransition',
-		description: 'A wrapper that provides enter/exit transitions for modal content.',
-		status: 'general-availability',
-		import: {
-			name: 'ModalTransition',
-			package: '@atlaskit/modal-dialog',
-			type: 'named',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
+			usageGuidelines: [
+				'Use for primary and secondary actions',
+				'Primary button on the right of secondary',
+				'Include Cancel/Close for dismissal',
+				'Accepts any valid React element for custom layouts',
+			],
+			contentGuidelines: [
+				'Primary button label should reflect the modal title',
+				'Use action verbs in button labels',
+			],
+			examples: [
+				{
+					name: 'Modal Footer',
+					description: 'ModalFooter example',
+					source: path.resolve(__dirname, './examples/constellation/modal-footer-default.tsx'),
+				},
+			],
+			keywords: ['modal', 'footer', 'actions', 'buttons'],
+			categories: ['overlay'],
 		},
-		usageGuidelines: [
-			'Wrap Modal with ModalTransition for animated open/close',
-			'Use when modal visibility is controlled by state',
-			'Children mount when visible and unmount when closed',
-		],
-		examples: [
-			{
-				name: 'Modal Transition',
-				description: 'ModalTransition example',
-				source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
+		{
+			name: 'ModalTransition',
+			description: 'A wrapper that provides enter/exit transitions for modal content.',
+			status: 'general-availability',
+			import: {
+				name: 'ModalTransition',
+				package: '@atlaskit/modal-dialog',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['modal', 'transition', 'animation'],
-		categories: ['overlay'],
-	},
-	{
-		name: 'CloseButton',
-		description:
-			'An accessible close button for use in custom modal headers. Ensures users have an obvious way to close the modal.',
-		status: 'general-availability',
-		import: {
-			name: 'CloseButton',
-			package: '@atlaskit/modal-dialog',
-			type: 'named',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
+			usageGuidelines: [
+				'Wrap Modal with ModalTransition for animated open/close',
+				'Use when modal visibility is controlled by state',
+				'Children mount when visible and unmount when closed',
+			],
+			examples: [
+				{
+					name: 'Modal Transition',
+					description: 'ModalTransition example',
+					source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
+				},
+			],
+			keywords: ['modal', 'transition', 'animation'],
+			categories: ['overlay'],
 		},
-		usageGuidelines: [
-			'Use when customizing ModalHeader without hasCloseButton',
-			'Render CloseButton first in DOM for proper focus order',
-			'Use Flex with row-reverse if close should appear on the right',
-			'Provide label prop for custom accessible name',
-		],
-		accessibilityGuidelines: [
-			'Close button is required for modals (consult a11y team for rare exceptions)',
-			'Ensure close button is keyboard accessible',
-		],
-		examples: [
-			{
-				name: 'Close Button',
-				description: 'CloseButton example',
-				source: path.resolve(__dirname, './examples/constellation/modal-header-custom.tsx'),
+		{
+			name: 'CloseButton',
+			description:
+				'An accessible close button for use in custom modal headers. Ensures users have an obvious way to close the modal.',
+			status: 'general-availability',
+			import: {
+				name: 'CloseButton',
+				package: '@atlaskit/modal-dialog',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['modal', 'close', 'button', 'dismiss'],
-		categories: ['overlay'],
-	},
-];
+			usageGuidelines: [
+				'Use when customizing ModalHeader without hasCloseButton',
+				'Render CloseButton first in DOM for proper focus order',
+				'Use Flex with row-reverse if close should appear on the right',
+				'Provide label prop for custom accessible name',
+			],
+			accessibilityGuidelines: [
+				'Close button is required for modals (consult a11y team for rare exceptions)',
+				'Ensure close button is keyboard accessible',
+			],
+			examples: [
+				{
+					name: 'Close Button',
+					description: 'CloseButton example',
+					source: path.resolve(__dirname, './examples/constellation/modal-header-custom.tsx'),
+				},
+			],
+			keywords: ['modal', 'close', 'button', 'dismiss'],
+			categories: ['overlay'],
+		},
+	],
+};
 
 export default documentation;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "15.1.2",
+	"version": "15.2.0",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,9 +46,9 @@
 		"@atlaskit/portal": "^5.5.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/theme": "^23.2.0",
+		"@atlaskit/theme": "^24.0.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/top-layer": "^0.8.0",
+		"@atlaskit/top-layer": "^0.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -63,7 +63,7 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/avatar": "^25.14.0",
+		"@atlaskit/avatar": "^25.15.0",
 		"@atlaskit/avatar-group": "^12.10.0",
 		"@atlaskit/banner": "^14.1.0",
 		"@atlaskit/breadcrumbs": "^16.1.0",
@@ -76,13 +76,13 @@
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/popup": "^4.20.0",
+		"@atlaskit/popup": "^4.21.0",
 		"@atlaskit/radio": "^8.6.0",
-		"@atlaskit/section-message": "^8.12.0",
+		"@atlaskit/section-message": "^8.13.0",
 		"@atlaskit/select": "^21.12.0",
 		"@atlaskit/spotlight": "^0.14.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tooltip": "^22.2.0",
+		"@atlaskit/tooltip": "^22.3.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
@@ -93,6 +93,7 @@
 		"@testing-library/user-event": "^14.4.3",
 		"@types/raf-schd": "^4.0.1",
 		"jscodeshift": "^17.0.0",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-lorem-component": "^0.13.0",
 		"react-sweet-state": "^2.6.5",