@atlaskit/top-layer 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -1,5 +1,115 @@
 # @atlaskit/top-layer
 
+## 0.6.2
+
+### Patch Changes
+
+- [`9d77f6602f870`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d77f6602f870) -
+  Fix two CSS anchor positioning bugs for aligned placements (align-start/align-end):
+  1. Popups at viewport corners now correctly fall back to the diagonally opposite corner when their
+     preferred placement has no space, rather than remaining partially off-screen.
+
+  2. Popups near a single viewport edge now correctly trigger position fallbacks when their content
+     is wider than the available space, rather than wrapping content into a narrow column.
+
+## 0.6.1
+
+### Patch Changes
+
+- [`2bed6255731de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2bed6255731de) -
+  Top-layer adoption work behind the `platform-dst-top-layer` feature flag. Public adopter APIs are
+  intentionally kept narrow while the top-layer API surface settles, with one exception called out
+  below.
+
+  Highlights:
+  - Pass the full `[along, away]` legacy popper offset through to the new top-layer
+    `placement.offset` API (via `fromLegacyPlacement`). Previously only the `away` axis was
+    forwarded, which dropped the `along` offset for consumers of `Popup`, `PopupSelect`,
+    `Spotlight`, and `Tooltip` when `platform-dst-top-layer` is enabled.
+  - Fix broken import of `dialogHeight` and `dialogWidth` from the removed utils module in
+    `@atlaskit/modal-dialog`.
+
+  Public API:
+  - **`@atlaskit/tooltip`** (`minor`): add an optional `testId?: string` field to `TriggerProps`.
+    This is additive (no existing prop changes shape). Required because `@atlaskit/button/new` (and
+    other `Pressable`-backed primitives) overwrite `data-testid` from spread, so the legacy
+    `(triggerProps as any)['data-testid']` workaround is silently absorbed by those consumers. A
+    typed `testId` field flows through their own `testId` destructure instead, restoring
+    `data-testid` propagation onto the rendered trigger element.
+  - **`@atlaskit/popup`**, **`@atlaskit/dropdown-menu`** (`patch`): no public type changes. Wider
+    `aria-haspopup` unions that the FF-on path produces are bridged at the package boundary into
+    `@atlaskit/top-layer` with localised `FUDGE(top-layer-api)` casts, documented in
+    `packages/design-system/top-layer/notes/decisions/migration-roadmap.md` ("Open API decisions
+    deferred to a follow-up PR"). They will be widened in a follow-up `minor` PR once the top-layer
+    API is committed.
+  - **`@atlaskit/modal-dialog`**, **`@atlaskit/select`**, **`@atlaskit/spotlight`**
+    (`patch`/`minor`): no public type changes; bug fixes only.
+
+  Merge-readiness fixes (FF-on test wiring + adopter behavior):
+  - **`@atlaskit/popup`** (`minor`): wire the compositional `PopupContent` to delegate to
+    `PopupContentTopLayer` when `platform-dst-top-layer` is enabled. Previously only the legacy
+    `Popup` component had the FF branch, leaving consumers of the compositional API on the legacy
+    popper path.
+  - **`@atlaskit/select`** (`minor`): add an `onClick` handler to the `PopupSelect` top-layer
+    trigger so clicks open/close the menu (mirrors the legacy global click handler in
+    `popup-select.tsx`). Add explicit Escape handling on the menu's `onKeyDown` so the menu closes
+    and focus returns to the trigger.
+  - **`@atlaskit/top-layer`** (`patch`): the `<dialog>` rendered by the Dialog primitive now sets
+    `aria-modal="true"` explicitly. Modern browsers infer modal semantics from `.showModal()` but
+    some assistive tech still keys off the explicit attribute.
+  - **`@atlaskit/top-layer`** (`patch`): guard `use-anchor-positioning` against environments where
+    `ResizeObserver` is not defined (e.g. jest's `node` environment, used by the post-office test
+    suite). The observer is used to wait for the popover's first valid layout before measuring;
+    consumers in non-DOM jest environments now get a no-op observer and the scroll/resize listeners
+    still apply if the host environment polyfills `showPopover`. Real browsers always have
+    `ResizeObserver`.
+  - **`@atlaskit/modal-dialog`** (`patch`): on the FF-on path, drop the `tabIndex={-1}` (and unused
+    `:focus-visible` outline) from the modal content wrapper. The native `<dialog>.showModal()`
+    focus-delegate algorithm picks the first focusable descendant (including `tabindex=-1`), and the
+    wrapper was hijacking initial focus from the close button. Also honor `shouldReturnFocus={ref}`
+    on the FF-on path (an unmount-cleanup focuses the ref after `dialog.close()` so it overrides the
+    browser's automatic return-to-trigger). Boolean `shouldReturnFocus={false}` is not yet honored
+    on the FF-on path — see `top-layer/notes/merge-blockers.md`.
+  - **`@atlaskit/datetime-picker`** (`patch`): on the FF-on path, set `mode="manual"` on the
+    `Popup.Content` rendered by both `internal/menu-top-layer.tsx` (date-picker calendar) and
+    `internal/fixed-layer-menu-top-layer.tsx` (time-picker menu). With the default `mode="auto"`,
+    the same click event that opens the menu (which targets the react-select combobox input —
+    outside the popover element) bubbles to the browser's native popover light-dismiss handler and
+    immediately closes the menu. react-select / DateTimePicker already own outside-click and Esc
+    dismissal via their own state, so opting out of the native auto-dismiss is the correct
+    integration. Also extend the existing Esc → trigger-focus restoration in
+    `components/date-picker.tsx` to the FF-on path (manual mode disables the browser's built-in
+    focus return, and the legacy code path was already handling this for itself behind an FF
+    negation).
+  - **`@atlaskit/popup`** (no public API change): no source changes — only FF-on Playwright
+    spec/example fixes drove the suite from 21/3/2 to 27/0/0. Notable: the two `test.fixme`'d
+    nested-popover cases were not browser limitations; `popover="auto"` chains correctly via DOM
+    ancestry (the original fixmes had the wrong testId selector). Added `testId` props to two
+    examples (`16-popup-with-a11y-props`, `18-should-fit-container`) so default-shape tests can
+    reach the trigger.
+  - Test alignment for FF-on Playwright suites across `popup`, `select`, `datetime-picker`,
+    `inline-dialog`, `inline-message`, and `modal-dialog`: selector updates to match the new
+    top-layer testId convention (`${testId}--content`, `[role="dialog"][aria-label="calendar"]`),
+    per-spec `skipAxeCheck()` for example-level color-contrast violations unrelated to the
+    migration, and focus assertions adjusted to match native `<dialog>` / `Popup.Content` auto-focus
+    semantics (focus lands on the first focusable child, not the dialog container itself).
+  - **`@atlassian/capacity-planning-capacity-graph`**, **`@atlaskit/color-picker`**,
+    **`@atlassian/timeline-table`**, **`@atlassian/global-side-navigation`** (`patch`): scope `fg`
+    mocks in unit tests so `platform-dst-top-layer` returns `false`. JSDOM does not implement the
+    native Popover API (`showPopover`/`hidePopover`/`toggle` events), so leaving the gate ON in unit
+    tests caused popover content to remain in the DOM after close and broke close-behaviour
+    assertions. Browser coverage for the FF-on path is provided by the Playwright suites listed
+    above.
+  - **`@atlaskit/dropdown-menu`** (no public API change): test/example-only fixes for the FF-on
+    Playwright suite. Added `role="menuitem"` to the nested-trigger `ButtonItem` in
+    `examples/93-testing-nested-keyboard-navigation-top-layer.tsx` to satisfy axe's
+    `aria-required-children` rule on the parent menu. Added a `test.beforeEach(skipAxeCheck)` to
+    `dropdown-menu.spec.tsx` (FF-on suite) for example-level `color-contrast` violations on the
+    pre-existing `color.text.selected`/`color.background.selected` token pair (3.91:1). Replaced a
+    deadlocking `await expect(moveItem).not.toBeFocused()` pre-open assertion (Playwright's
+    auto-wait blocks 5s on the absent element) with `await expect(moveItem).not.toBeVisible()`.
+    Suite result: 22/22 passing.
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/cjs/internal/use-anchor-position.js

@@ -91,6 +91,20 @@ function placementToPositionArea(_ref) {
  * For aligned placements (start/end), includes the same-edge centered
  * position as fallbacks so the browser can try centering when the aligned
  * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally — it flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
  */
 function placementToTryFallbacks(_ref2) {
   var placement = _ref2.placement;
@@ -106,9 +120,10 @@ function placementToTryFallbacks(_ref2) {
     var _sameEdge = "".concat(axis, "-").concat(edge);
     var _oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
     var _flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
+    var flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
+    // Try same-edge shifts first; two flip entries cover single-edge then corner overflow.
     // Legacy Popper fallbacks for e.g. bottom-start: [bottom, bottom-end, top-start, top, top-end, auto].
-    // Include same-edge centered so the browser can try center when start/end would overflow.
-    return ["".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _sameEdge, "".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end'), _flipKeyword, "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _oppositeEdge, "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end')].join(', ');
+    return ["".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _sameEdge, "".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end'), _flipKeyword, "".concat(_flipKeyword, " ").concat(flipCrossKeyword), "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _oppositeEdge, "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end')].join(', ');
   }
   var sameEdge = "".concat(axis, "-").concat(edge);
   var oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
@@ -313,6 +328,12 @@ function useAnchorPosition(_ref5) {
         property: 'inset',
         value: 'auto'
       },
+      // Ensures the popup's margin box overflows the viewport when its span region is too
+      // narrow, triggering position-try-fallbacks correctly rather than wrapping content.
+      {
+        property: 'min-inline-size',
+        value: 'max-content'
+      },
       // Main-axis gap between the popover and its trigger
       {
         property: gap.property,

package/dist/es2019/internal/use-anchor-position.js

@@ -79,6 +79,20 @@ export function placementToPositionArea({
  * For aligned placements (start/end), includes the same-edge centered
  * position as fallbacks so the browser can try centering when the aligned
  * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally — it flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
  */
 export function placementToTryFallbacks({
   placement
@@ -96,9 +110,10 @@ export function placementToTryFallbacks({
     const sameEdge = `${axis}-${edge}`;
     const oppositeEdge = `${axis}-${flippedEdge}`;
     const flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
+    const flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
+    // Try same-edge shifts first; two flip entries cover single-edge then corner overflow.
     // Legacy Popper fallbacks for e.g. bottom-start: [bottom, bottom-end, top-start, top, top-end, auto].
-    // Include same-edge centered so the browser can try center when start/end would overflow.
-    return [`${sameEdge} span-${crossAxis}-${align === 'start' ? 'end' : 'start'}`, sameEdge, `${sameEdge} span-${crossAxis}-${align === 'start' ? 'start' : 'end'}`, flipKeyword, `${oppositeEdge} span-${crossAxis}-${align === 'start' ? 'end' : 'start'}`, oppositeEdge, `${oppositeEdge} span-${crossAxis}-${align === 'start' ? 'start' : 'end'}`].join(', ');
+    return [`${sameEdge} span-${crossAxis}-${align === 'start' ? 'end' : 'start'}`, sameEdge, `${sameEdge} span-${crossAxis}-${align === 'start' ? 'start' : 'end'}`, flipKeyword, `${flipKeyword} ${flipCrossKeyword}`, `${oppositeEdge} span-${crossAxis}-${align === 'start' ? 'end' : 'start'}`, oppositeEdge, `${oppositeEdge} span-${crossAxis}-${align === 'start' ? 'start' : 'end'}`].join(', ');
   }
   const sameEdge = `${axis}-${edge}`;
   const oppositeEdge = `${axis}-${flippedEdge}`;
@@ -308,6 +323,12 @@ export function useAnchorPosition({
         property: 'inset',
         value: 'auto'
       },
+      // Ensures the popup's margin box overflows the viewport when its span region is too
+      // narrow, triggering position-try-fallbacks correctly rather than wrapping content.
+      {
+        property: 'min-inline-size',
+        value: 'max-content'
+      },
       // Main-axis gap between the popover and its trigger
       {
         property: gap.property,

package/dist/esm/internal/use-anchor-position.js

@@ -77,6 +77,20 @@ export function placementToPositionArea(_ref) {
  * For aligned placements (start/end), includes the same-edge centered
  * position as fallbacks so the browser can try centering when the aligned
  * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally — it flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
  */
 export function placementToTryFallbacks(_ref2) {
   var placement = _ref2.placement;
@@ -92,9 +106,10 @@ export function placementToTryFallbacks(_ref2) {
     var _sameEdge = "".concat(axis, "-").concat(edge);
     var _oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
     var _flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
+    var flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
+    // Try same-edge shifts first; two flip entries cover single-edge then corner overflow.
     // Legacy Popper fallbacks for e.g. bottom-start: [bottom, bottom-end, top-start, top, top-end, auto].
-    // Include same-edge centered so the browser can try center when start/end would overflow.
-    return ["".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _sameEdge, "".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end'), _flipKeyword, "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _oppositeEdge, "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end')].join(', ');
+    return ["".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _sameEdge, "".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end'), _flipKeyword, "".concat(_flipKeyword, " ").concat(flipCrossKeyword), "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _oppositeEdge, "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end')].join(', ');
   }
   var sameEdge = "".concat(axis, "-").concat(edge);
   var oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
@@ -299,6 +314,12 @@ export function useAnchorPosition(_ref5) {
         property: 'inset',
         value: 'auto'
       },
+      // Ensures the popup's margin box overflows the viewport when its span region is too
+      // narrow, triggering position-try-fallbacks correctly rather than wrapping content.
+      {
+        property: 'min-inline-size',
+        value: 'max-content'
+      },
       // Main-axis gap between the popover and its trigger
       {
         property: gap.property,

package/dist/types/internal/use-anchor-position.d.ts

@@ -53,6 +53,20 @@ export declare function placementToPositionArea({ placement }: {
  * For aligned placements (start/end), includes the same-edge centered
  * position as fallbacks so the browser can try centering when the aligned
  * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally — it flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
  */
 export declare function placementToTryFallbacks({ placement }: {
     placement: TPlacementOptions;

package/dist/types-ts4.5/internal/use-anchor-position.d.ts

@@ -53,6 +53,20 @@ export declare function placementToPositionArea({ placement }: {
  * For aligned placements (start/end), includes the same-edge centered
  * position as fallbacks so the browser can try centering when the aligned
  * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally — it flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
  */
 export declare function placementToTryFallbacks({ placement }: {
     placement: TPlacementOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.6.0",
+	"version": "0.6.2",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",