@atlaskit/popup 4.20.2 → 4.21.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/popup
 
+## 4.21.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
+
 ## 4.20.2
 
 ### Patch Changes

package/dist/cjs/compositional/popup-content.js

@@ -80,11 +80,18 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref) {
   var handleOpenLayerObserverCloseSignal = (0, _react.useCallback)(function () {
     onClose === null || onClose === void 0 || onClose(null);
   }, [onClose]);
-  (0, _openLayerObserver.useNotifyOpenLayerObserver)({
-    isOpen: isOpen,
-    onClose: handleOpenLayerObserverCloseSignal,
-    type: 'popup'
-  });
+
+  // On the top-layer path, the Popover 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)({
+      isOpen: isOpen,
+      onClose: handleOpenLayerObserverCloseSignal,
+      type: 'popup'
+    });
+  }
 
   // Top-layer rendering path: native Popover API via @atlaskit/top-layer.
   // Mirrors the FF branch in the legacy `Popup` component (popup.tsx).

package/dist/cjs/popup.js

@@ -88,11 +88,18 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (props) {
   var handleOpenLayerObserverCloseSignal = (0, _react.useCallback)(function () {
     onClose === null || onClose === void 0 || onClose(null);
   }, [onClose]);
-  (0, _openLayerObserver.useNotifyOpenLayerObserver)({
-    isOpen: isOpen,
-    onClose: handleOpenLayerObserverCloseSignal,
-    type: 'popup'
-  });
+
+  // On the top-layer path, the Popover 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)({
+      isOpen: isOpen,
+      onClose: handleOpenLayerObserverCloseSignal,
+      type: 'popup'
+    });
+  }
 
   // Top-layer rendering path: native Popover API via @atlaskit/top-layer
   if ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {

package/dist/es2019/compositional/popup-content.js

@@ -64,11 +64,18 @@ export const PopupContent = ({
   const handleOpenLayerObserverCloseSignal = useCallback(() => {
     onClose === null || onClose === void 0 ? void 0 : onClose(null);
   }, [onClose]);
-  useNotifyOpenLayerObserver({
-    isOpen,
-    onClose: handleOpenLayerObserverCloseSignal,
-    type: 'popup'
-  });
+
+  // On the top-layer path, the Popover 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({
+      isOpen,
+      onClose: handleOpenLayerObserverCloseSignal,
+      type: 'popup'
+    });
+  }
 
   // Top-layer rendering path: native Popover API via @atlaskit/top-layer.
   // Mirrors the FF branch in the legacy `Popup` component (popup.tsx).

package/dist/es2019/popup.js

@@ -67,11 +67,18 @@ export const Popup = /*#__PURE__*/memo(props => {
   const handleOpenLayerObserverCloseSignal = useCallback(() => {
     onClose === null || onClose === void 0 ? void 0 : onClose(null);
   }, [onClose]);
-  useNotifyOpenLayerObserver({
-    isOpen,
-    onClose: handleOpenLayerObserverCloseSignal,
-    type: 'popup'
-  });
+
+  // On the top-layer path, the Popover 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({
+      isOpen,
+      onClose: handleOpenLayerObserverCloseSignal,
+      type: 'popup'
+    });
+  }
 
   // Top-layer rendering path: native Popover API via @atlaskit/top-layer
   if (fg('platform-dst-top-layer')) {

package/dist/esm/compositional/popup-content.js

@@ -71,11 +71,18 @@ export var PopupContent = function PopupContent(_ref) {
   var handleOpenLayerObserverCloseSignal = useCallback(function () {
     onClose === null || onClose === void 0 || onClose(null);
   }, [onClose]);
-  useNotifyOpenLayerObserver({
-    isOpen: isOpen,
-    onClose: handleOpenLayerObserverCloseSignal,
-    type: 'popup'
-  });
+
+  // On the top-layer path, the Popover 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({
+      isOpen: isOpen,
+      onClose: handleOpenLayerObserverCloseSignal,
+      type: 'popup'
+    });
+  }
 
   // Top-layer rendering path: native Popover API via @atlaskit/top-layer.
   // Mirrors the FF branch in the legacy `Popup` component (popup.tsx).

package/dist/esm/popup.js

@@ -80,11 +80,18 @@ export var Popup = /*#__PURE__*/memo(function (props) {
   var handleOpenLayerObserverCloseSignal = useCallback(function () {
     onClose === null || onClose === void 0 || onClose(null);
   }, [onClose]);
-  useNotifyOpenLayerObserver({
-    isOpen: isOpen,
-    onClose: handleOpenLayerObserverCloseSignal,
-    type: 'popup'
-  });
+
+  // On the top-layer path, the Popover 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({
+      isOpen: isOpen,
+      onClose: handleOpenLayerObserverCloseSignal,
+      type: 'popup'
+    });
+  }
 
   // Top-layer rendering path: native Popover API via @atlaskit/top-layer
   if (fg('platform-dst-top-layer')) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.20.2",
+	"version": "4.21.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
 		"@atlaskit/portal": "^5.5.0",
 		"@atlaskit/primitives": "^19.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",
@@ -71,7 +71,7 @@
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/icon": "^35.0.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/modal-dialog": "^15.1.0",
+		"@atlaskit/modal-dialog": "^15.2.0",
 		"@atlaskit/section-message": "^8.13.0",
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlaskit/toggle": "^15.6.0",

package/popup.docs.tsx

@@ -1,47 +1,49 @@
 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: 'Popup',
-		description: 'A component for displaying popup content relative to a trigger element.',
-		status: 'general-availability',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'Popup',
-			package: '@atlaskit/popup',
-			type: 'default',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use for contextual content that appears on demand',
-			'Position appropriately relative to trigger',
-			'Consider dismissal behavior',
-			'Use appropriate content sizing',
-		],
-		contentGuidelines: [
-			'Keep popup content focused and relevant',
-			'Use clear, concise content',
-			'Provide appropriate actions when needed',
-			'Consider content hierarchy',
-		],
-		accessibilityGuidelines: [
-			'Provide appropriate focus management',
-			'Use clear trigger labels',
-			'Ensure keyboard navigation support',
-			'Provide escape key dismissal',
-		],
-		examples: [
-			{
+			description: 'A component for displaying popup content relative to a trigger element.',
+			status: 'general-availability',
+			import: {
 				name: 'Popup',
-				description: 'Popup example',
-				source: path.resolve(__dirname, './examples/ai/popup.tsx'),
+				package: '@atlaskit/popup',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['popup', 'overlay', 'floating', 'content', 'trigger'],
-		categories: ['overlay'],
-	},
-];
+			usageGuidelines: [
+				'Use for contextual content that appears on demand',
+				'Position appropriately relative to trigger',
+				'Consider dismissal behavior',
+				'Use appropriate content sizing',
+			],
+			contentGuidelines: [
+				'Keep popup content focused and relevant',
+				'Use clear, concise content',
+				'Provide appropriate actions when needed',
+				'Consider content hierarchy',
+			],
+			accessibilityGuidelines: [
+				'Provide appropriate focus management',
+				'Use clear trigger labels',
+				'Ensure keyboard navigation support',
+				'Provide escape key dismissal',
+			],
+			examples: [
+				{
+					name: 'Popup',
+					description: 'Popup example',
+					source: path.resolve(__dirname, './examples/ai/popup.tsx'),
+				},
+			],
+			keywords: ['popup', 'overlay', 'floating', 'content', 'trigger'],
+			categories: ['overlay'],
+		},
+	],
+};
 
 export default documentation;