@atlaskit/popup 4.13.3 → 4.14.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/popup
 
+## 4.14.0
+
+### Minor Changes
+
+- [`12424cd3197be`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/12424cd3197be) -
+  Cleans up the `platform_dst_nav4_flyoutmenuitem_render_to_parent` feature gate. Flyout menu item
+  popups now always use `shouldRenderToParent` and are not rendered in a portal.
+
+## 4.13.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.13.3
 
 ### Patch Changes

package/dist/cjs/popper-wrapper.js

@@ -1,4 +1,4 @@
-/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -47,7 +47,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 && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_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' && !(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])
   }, htmlAttributes, {
     ref: ref
   }), children);

package/dist/cjs/popup.js

@@ -1,4 +1,4 @@
-/* popup.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* popup.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/es2019/popper-wrapper.js

@@ -1,4 +1,4 @@
-/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./popper-wrapper.compiled.css";
 import * as React from 'react';
@@ -36,7 +36,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 && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
+    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])
   }, htmlAttributes, {
     ref: ref
   }), children);

package/dist/es2019/popup.js

@@ -1,4 +1,4 @@
-/* popup.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* popup.tsx generated by @compiled/babel-plugin v0.39.1 */
 /* eslint-disable @repo/internal/react/require-jsdoc */
 import "./popup.compiled.css";
 import * as React from 'react';

package/dist/esm/popper-wrapper.js

@@ -1,4 +1,4 @@
-/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
@@ -38,7 +38,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 && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
+    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])
   }, htmlAttributes, {
     ref: ref
   }), children);

package/dist/esm/popup.js

@@ -1,4 +1,4 @@
-/* popup.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* popup.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./popup.compiled.css";
 import * as React from 'react';

package/dist/types/compositional/popup.d.ts

@@ -25,7 +25,7 @@ export type PopupProps = {
  * </Popup>
  * ```
  */
-export declare const Popup: ({ children, id: providedId, isOpen, role }: PopupProps) => React.JSX.Element;
+export declare const Popup: ({ children, id: providedId, isOpen, role, }: PopupProps) => React.JSX.Element;
 export type PopupTriggerProps = {
     children: (props: TriggerProps) => React.ReactNode;
 };
@@ -68,5 +68,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId }: PopupContentProps) => React.JSX.Element | null;
+export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId, }: PopupContentProps) => React.JSX.Element | null;
 export {};

package/dist/types/use-appearance.d.ts

@@ -10,6 +10,6 @@ export declare function usePopupAppearance({ appearance: _appearance, shouldRend
     appearance: 'default' | 'UNSAFE_modal-below-sm';
     shouldRenderToParent?: boolean;
 }): {
-    appearance: "default" | "UNSAFE_modal-below-sm";
+    appearance: 'default' | 'UNSAFE_modal-below-sm';
     shouldRenderToParent: boolean | undefined;
 };

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

@@ -25,7 +25,7 @@ export type PopupProps = {
  * </Popup>
  * ```
  */
-export declare const Popup: ({ children, id: providedId, isOpen, role }: PopupProps) => React.JSX.Element;
+export declare const Popup: ({ children, id: providedId, isOpen, role, }: PopupProps) => React.JSX.Element;
 export type PopupTriggerProps = {
     children: (props: TriggerProps) => React.ReactNode;
 };
@@ -68,5 +68,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId }: PopupContentProps) => React.JSX.Element | null;
+export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId, }: PopupContentProps) => React.JSX.Element | null;
 export {};

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

@@ -10,6 +10,6 @@ export declare function usePopupAppearance({ appearance: _appearance, shouldRend
     appearance: 'default' | 'UNSAFE_modal-below-sm';
     shouldRenderToParent?: boolean;
 }): {
-    appearance: "default" | "UNSAFE_modal-below-sm";
+    appearance: 'default' | 'UNSAFE_modal-below-sm';
     shouldRenderToParent: boolean | undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.13.3",
+	"version": "4.14.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,15 +33,15 @@
 	},
 	"dependencies": {
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/ds-lib": "^5.3.0",
+		"@atlaskit/ds-lib": "^6.0.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/portal": "^5.2.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/tokens": "^11.1.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6",
+		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
 		"focus-trap": "^2.4.5",
 		"memoize-one": "^6.0.0",
@@ -55,19 +55,20 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.9.0",
+		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/code": "^17.4.0",
-		"@atlaskit/docs": "^11.3.0",
-		"@atlaskit/form": "^15.3.0",
+		"@atlaskit/docs": "^11.7.0",
+		"@atlaskit/form": "^15.4.0",
 		"@atlaskit/heading": "^5.3.0",
-		"@atlaskit/icon": "^30.0.0",
+		"@atlaskit/icon": "^33.0.0",
 		"@atlaskit/link": "^3.3.0",
-		"@atlaskit/modal-dialog": "^14.10.0",
+		"@atlaskit/modal-dialog": "^14.11.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/toggle": "^15.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ssr-tests": "workspace:^",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"ast-types": "^0.13.3",
@@ -119,9 +120,6 @@
 		"platform_dst_nav4_flyout_menu_slots_close_button": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_flyoutmenuitem_render_to_parent": {
-			"type": "boolean"
-		},
 		"platform_dst_nested_escape": {
 			"type": "boolean"
 		}

package/popup.docs.tsx

@@ -0,0 +1,47 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'Popup',
+		description: 'A component for displaying popup content relative to a trigger element.',
+		status: 'general-availability',
+		import: {
+			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: [
+			{
+				name: 'Popup',
+				description: 'Popup example',
+				source: path.resolve(__dirname, './examples/ai/popup.tsx'),
+			},
+		],
+		keywords: ['popup', 'overlay', 'floating', 'content', 'trigger'],
+		categories: ['overlay'],
+	},
+];
+
+export default documentation;