@atlaskit/popup 4.20.1 → 4.21.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @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
+
+- [`cc4a66306965d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cc4a66306965d) -
+  Cleanup feature gate `platform_dst_nav4_flyout_menu_slots_close_button`. Flyout menu slot
+  subcomponents (header, body, footer) and close button are now permanently enabled.
+
 ## 4.20.1
 
 ### 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/compositional/popup-trigger.js

@@ -40,7 +40,7 @@ var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref) {
   var triggerRef = (0, _react.useCallback)(function (node) {
     triggerRefObject.current = node;
   }, [triggerRefObject]);
-  var ariaHasPopup = role === 'dialog' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true;
+  var ariaHasPopup = role === 'dialog' ? 'dialog' : true;
 
   // When the top-layer flag is on, bypass Popper's <Reference> entirely.
   // We only need to set triggerRefObject.current — no Popper ref merging needed.

package/dist/cjs/popper-wrapper.compiled.css

@@ -15,7 +15,6 @@
 ._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
 ._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
 ._c71l1kw7{max-height:inherit}
-._c71ldtre{max-height:50vh}
 ._kqsw1n9t{position:fixed}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._vchhusvi{box-sizing:border-box}

package/dist/cjs/popper-wrapper.js

@@ -38,7 +38,6 @@ var wrapperStyles = {
 var scrollableStyles = null;
 var blanketStyles = null;
 var modalStyles = null;
-var newModalStyles = null;
 var focusRingStyles = {
   root: "_mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
 };
@@ -103,7 +102,7 @@ var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     htmlAttributes = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: (0, _runtime.ax)([wrapperStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
+    className: (0, _runtime.ax)([wrapperStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
     ref: !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') ? ref : undefined
   }), children);

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/compositional/popup-trigger.js

@@ -33,7 +33,7 @@ export const PopupTrigger = ({
   const triggerRef = useCallback(node => {
     triggerRefObject.current = node;
   }, [triggerRefObject]);
-  const ariaHasPopup = role === 'dialog' && fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true;
+  const ariaHasPopup = role === 'dialog' ? 'dialog' : true;
 
   // When the top-layer flag is on, bypass Popper's <Reference> entirely.
   // We only need to set triggerRefObject.current — no Popper ref merging needed.

package/dist/es2019/popper-wrapper.compiled.css

@@ -15,7 +15,6 @@
 ._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
 ._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
 ._c71l1kw7{max-height:inherit}
-._c71ldtre{max-height:50vh}
 ._kqsw1n9t{position:fixed}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._vchhusvi{box-sizing:border-box}

package/dist/es2019/popper-wrapper.js

@@ -22,7 +22,6 @@ const wrapperStyles = {
 const scrollableStyles = null;
 const blanketStyles = null;
 const modalStyles = null;
-const newModalStyles = null;
 const focusRingStyles = {
   root: "_mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
 };
@@ -89,7 +88,7 @@ const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
+    className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
     ref: !fg('platform-dst-motion-uplift-popup') ? ref : undefined
   }), children);

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/compositional/popup-trigger.js

@@ -32,7 +32,7 @@ export var PopupTrigger = function PopupTrigger(_ref) {
   var triggerRef = useCallback(function (node) {
     triggerRefObject.current = node;
   }, [triggerRefObject]);
-  var ariaHasPopup = role === 'dialog' && fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true;
+  var ariaHasPopup = role === 'dialog' ? 'dialog' : true;
 
   // When the top-layer flag is on, bypass Popper's <Reference> entirely.
   // We only need to set triggerRefObject.current — no Popper ref merging needed.

package/dist/esm/popper-wrapper.compiled.css

@@ -15,7 +15,6 @@
 ._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
 ._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
 ._c71l1kw7{max-height:inherit}
-._c71ldtre{max-height:50vh}
 ._kqsw1n9t{position:fixed}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._vchhusvi{box-sizing:border-box}

package/dist/esm/popper-wrapper.js

@@ -29,7 +29,6 @@ var wrapperStyles = {
 var scrollableStyles = null;
 var blanketStyles = null;
 var modalStyles = null;
-var newModalStyles = null;
 var focusRingStyles = {
   root: "_mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
 };
@@ -94,7 +93,7 @@ var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     htmlAttributes = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
+    className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
     ref: !fg('platform-dst-motion-uplift-popup') ? ref : undefined
   }), children);

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

@@ -94,8 +94,7 @@ export interface PopupComponentProps {
     /**
      * The "default" appearance is used for standard popups.
      * The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
-     * When the feature gate `platform_dst_nav4_flyout_menu_slots_close_button` is enabled, the appearance should only
-     * be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
+     * The appearance should only be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
      */
     appearance?: 'default' | 'UNSAFE_modal-below-sm';
     /**

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

@@ -94,8 +94,7 @@ export interface PopupComponentProps {
     /**
      * The "default" appearance is used for standard popups.
      * The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
-     * When the feature gate `platform_dst_nav4_flyout_menu_slots_close_button` is enabled, the appearance should only
-     * be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
+     * The appearance should only be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
      */
     appearance?: 'default' | 'UNSAFE_modal-below-sm';
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.20.1",
+	"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,8 +71,8 @@
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/icon": "^35.0.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/modal-dialog": "^15.1.0",
-		"@atlaskit/section-message": "^8.12.0",
+		"@atlaskit/modal-dialog": "^15.2.0",
+		"@atlaskit/section-message": "^8.13.0",
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlaskit/toggle": "^15.6.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
@@ -85,6 +85,7 @@
 		"ast-types": "^0.13.3",
 		"jscodeshift": "^17.0.0",
 		"raf-stub": "^2.0.1",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"keywords": [
@@ -131,9 +132,6 @@
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_flyout_menu_slots_close_button": {
-			"type": "boolean"
-		},
 		"platform_dst_nested_escape": {
 			"type": "boolean"
 		},

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;