@atlaskit/popup 4.16.6 → 4.18.0

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

@@ -0,0 +1,21 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type ContentProps, type PopupProps } from '../types';
+/**
+ * Top-layer implementation of the compositional PopupContent.
+ *
+ * Reads isOpen, id, triggerRef from the legacy compositional Popup context,
+ * then renders via @atlaskit/top-layer's Popup compound.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag.
+ */
+export declare function PopupContentTopLayer({ xcss, children, offset: offsetProp, onClose, testId, placement, fallbackPlacements: _fallbackPlacements, popupComponent: PopupContainer, autoFocus, shouldFitContainer, shouldFitViewport, role, label, titleId, isOpen, id: providedId, zIndex: _zIndex, shouldRenderToParent: _shouldRenderToParent, strategy: _strategy, boundary: _boundary, rootBoundary: _rootBoundary, shouldUseCaptureOnOutsideClick: _shouldUseCaptureOnOutsideClick, shouldDisableFocusLock: _shouldDisableFocusLock, shouldFlip: _shouldFlip, appearance: _appearance, shouldDisableGpuAcceleration: _shouldDisableGpuAcceleration, }: Omit<PopupProps, 'content' | 'trigger'> & {
+    children: (props: ContentProps) => ReactNode;
+    shouldDisableGpuAcceleration?: boolean;
+    isOpen: boolean;
+    id: string | undefined;
+    triggerRef: HTMLElement | null;
+}): ReactNode;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ContentProps, type PopupProps as LegacyPopupProps } from '../types';
-type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'titleId'> & {
+type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'label' | 'titleId'> & {
     children: (props: ContentProps) => React.ReactNode;
     /**
      * ___Use with caution___
@@ -31,5 +31,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, label, titleId, }: PopupContentProps) => React.JSX.Element | null;
 export {};

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

@@ -0,0 +1,2 @@
+export { PopupContent } from '../compositional/popup-content';
+export type { PopupContentProps } from '../compositional/popup-content';

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

@@ -0,0 +1,2 @@
+export { PopupTrigger } from '../compositional/popup-trigger';
+export type { PopupTriggerProps } from '../compositional/popup-trigger';

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

@@ -0,0 +1,2 @@
+export { Popup } from '../compositional/popup';
+export type { PopupProps } from '../compositional/popup';

package/dist/types-ts4.5/entry-points/popup.d.ts

@@ -0,0 +1 @@
+export { Popup } from '../popup';

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

@@ -0,0 +1 @@
+export type { ContentProps, PopupComponentProps, PopupProps, TriggerProps } from '../types';

package/dist/types-ts4.5/internal/top-layer-bridge.d.ts

@@ -0,0 +1,29 @@
+type TRestrictedDialogRole = 'dialog' | 'alertdialog' | 'menu';
+type TWcagSupplementalRole = 'tooltip' | 'listbox' | 'tree' | 'grid' | 'note' | 'status' | 'alert' | 'log';
+/**
+ * Props shape passed from legacy `role` / `label` / `titleId` into `@atlaskit/top-layer` `Popup.Content`.
+ */
+export type TUseRolePropsResult = {
+    role: TRestrictedDialogRole;
+    labelledBy: string;
+} | {
+    role: TRestrictedDialogRole;
+    label: string;
+} | {
+    role: TWcagSupplementalRole;
+    label: string | undefined;
+};
+/**
+ * Maps legacy popup role/label/titleId props to the discriminated union
+ * that `Popup.Content` expects.
+ *
+ * `Popup.Content` enforces at the type level that dialog/alertdialog/menu
+ * roles must have `label` or `labelledBy`. This hook bridges the legacy
+ * flat-prop API (`role`, `label`, `titleId`) to that shape.
+ */
+export declare function useRoleProps({ role, label, titleId, }: {
+    role: string | undefined;
+    label: string | undefined;
+    titleId: string | undefined;
+}): TUseRolePropsResult;
+export {};

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

@@ -1,3 +1,3 @@
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ xcss, isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, shouldFitViewport, appearance, }: PopperWrapperProps): JSX.Element;
+declare function PopperWrapper({ xcss, isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, shouldFitViewport, appearance, zIndex, }: PopperWrapperProps): JSX.Element;
 export default PopperWrapper;

package/dist/types-ts4.5/popup-top-layer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type FC } from 'react';
+import { type PopupProps } from './types';
+/**
+ * Top-layer implementation of Popup.
+ *
+ * Replaces the legacy @atlaskit/popup rendering pipeline
+ * (Popper.js + Portal + focus-trap + @atlaskit/layering)
+ * with the native Popover API + CSS Anchor Positioning via @atlaskit/top-layer.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag.
+ */
+export declare const PopupTopLayer: FC<PopupProps>;

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

@@ -139,6 +139,11 @@ interface BaseProps {
      * The distance the popup should be offset from the reference in the format of [along, away] (units in px).
      * The default is `[0, 8]`, which means the popup will be `8px` away from the edge of the reference specified
      * by the `placement` prop.
+     *
+     * @private
+     * Note: when `platform-dst-top-layer` is enabled, both the `along` and `away`
+     * values are passed through to the top-layer placement (via `fromLegacyPlacement`),
+     * matching the legacy popper-js behaviour.
      */
     offset?: [
         number,
@@ -154,22 +159,38 @@ interface BaseProps {
      * When the preferred placement doesn't have enough space,
      * the modifier will test the ones provided in the list, and use the first suitable one.
      * If no fallback placements are suitable, it reverts back to the original placement.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — CSS Anchor Positioning
+     * generates fallbacks automatically via `position-try-fallbacks`.
      */
     fallbackPlacements?: Placement[];
     /**
      * The boundary element that the popup will check for overflow.
      * The default is `"clippingParents"` which are parent scroll containers,
      * but can be set to any element.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — the viewport
+     * is the natural boundary for top-layer elements.
      */
     boundary?: 'clippingParents' | HTMLElement;
     /**
      * The root boundary that the popup will check for overflow.
      * The default is `"viewport"` but it can be set to `"document"`.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — the viewport
+     * is the natural boundary for top-layer elements.
      */
     rootBoundary?: 'viewport' | 'document';
     /**
      * Allows the popup to be placed on the opposite side of its trigger if it doesn't fit in the viewport.
      * The default is `true`.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — CSS Anchor Positioning
+     * handles flipping natively via `position-try-fallbacks`.
      */
     shouldFlip?: boolean;
     /**
@@ -213,6 +234,10 @@ interface BaseProps {
     /**
      * The root element where the popup should be rendered.
      * Defaults to `false`.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — content always
+     * renders in the browser's top layer.
      */
     shouldRenderToParent?: boolean;
     /**
@@ -225,6 +250,10 @@ interface BaseProps {
     /**
      * This makes the popup close on Tab key press. It will only work when `shouldRenderToParent` is `true`.
      * The default is `false`.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — focus trapping
+     * is role-based in the top-layer path.
      */
     shouldDisableFocusLock?: boolean;
     /**
@@ -235,6 +264,10 @@ interface BaseProps {
     /**
      * This controls the positioning strategy to use. Can vary between `absolute` and `fixed`.
      * The default is `fixed`.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — CSS Anchor Positioning
+     * replaces Popper's positioning strategy.
      */
     strategy?: 'absolute' | 'fixed';
     /**
@@ -275,6 +308,10 @@ interface InternalPopupProps extends BaseProps {
      * Z-index that the popup should be displayed in.
      * This is passed to the portal component.
      * The default is 400.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — the browser's
+     * top layer manages stacking without z-index.
      */
     zIndex?: number;
 }
@@ -288,6 +325,7 @@ type ShouldFitContainerPopupProps = InternalPopupProps & {
 };
 export type PopupProps = StandardPopupProps | ShouldFitContainerPopupProps;
 export interface PopperWrapperProps extends BaseProps {
+    zIndex?: number;
     triggerRef: TriggerRef;
 }
 export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.16.6",
+	"version": "4.18.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,12 +42,13 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
 		"@atlaskit/layering": "^3.7.0",
-		"@atlaskit/motion": "^6.0.0",
+		"@atlaskit/motion": "^6.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.2.0",
-		"@atlaskit/portal": "^5.4.0",
+		"@atlaskit/portal": "^5.5.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/top-layer": "^0.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -64,20 +65,21 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/code": "^17.4.0",
+		"@atlaskit/code": "^17.5.0",
 		"@atlaskit/docs": "^11.8.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^34.3.0",
+		"@atlaskit/icon": "^34.5.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/modal-dialog": "^14.18.0",
+		"@atlaskit/modal-dialog": "^15.0.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlaskit/toggle": "^15.6.0",
-		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
+		"@atlassian/testing-library": "^0.5.0",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"ast-types": "^0.13.3",
@@ -111,6 +113,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform-dst-top-layer": {
+			"type": "boolean"
+		},
 		"platform_dst_popup-disable-focuslock": {
 			"type": "boolean"
 		},
@@ -132,7 +137,7 @@
 		"platform_dst_nested_escape": {
 			"type": "boolean"
 		},
-		"platform-dst-motion-uplift": {
+		"platform-dst-motion-uplift-popup": {
 			"type": "boolean"
 		}
 	},

package/popup/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/popup/popup",
+  "main": "../dist/cjs/entry-points/popup.js",
+  "module": "../dist/esm/entry-points/popup.js",
+  "module:es2019": "../dist/es2019/entry-points/popup.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/popup.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/popup.d.ts"
+      ]
+    }
+  }
+}

package/types/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@atlaskit/popup/types",
-  "main": "../dist/cjs/types.js",
-  "module": "../dist/esm/types.js",
-  "module:es2019": "../dist/es2019/types.js",
+  "main": "../dist/cjs/entry-points/types.js",
+  "module": "../dist/esm/entry-points/types.js",
+  "module:es2019": "../dist/es2019/entry-points/types.js",
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/types.d.ts",
+  "types": "../dist/types/entry-points/types.d.ts",
   "typesVersions": {
     ">=4.5 <5.9": {
       "*": [
-        "../dist/types-ts4.5/types.d.ts"
+        "../dist/types-ts4.5/entry-points/types.d.ts"
       ]
     }
   }

package/offerings.json

@@ -1,34 +0,0 @@
-[
-	{
-		"name": "Popup",
-		"package": "@atlaskit/popup",
-		"import": {
-			"name": "Popup",
-			"package": "@atlaskit/popup",
-			"type": "default"
-		},
-		"keywords": ["popup", "overlay", "floating", "content", "trigger"],
-		"categories": ["overlay"],
-		"shortDescription": "A component for displaying popup content relative to a trigger element.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Provide appropriate focus management",
-			"Use clear trigger labels",
-			"Ensure keyboard navigation support",
-			"Provide escape key dismissal"
-		],
-		"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"
-		],
-		"examples": ["./examples/ai/popup.tsx"]
-	}
-]