@atlaskit/top-layer 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/top-layer
 
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.1.1
+
+### Patch Changes
+
+- [`02483200273ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02483200273ec) -
+  Enrol all Design System UI packages into the React Compiler with platform gating via
+  isReactCompilerActivePlatform.
+- Updated dependencies
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -21,14 +21,15 @@ Positioning or JS fallback).
 </Popup>
 ```
 
-For default overlay styling (background, shadow, border-radius), see `PopupSurface` in the package examples (not currently a public API; we may expose it in a future release).
+For default overlay styling (background, shadow, border-radius), see `PopupSurface` in the package
+examples (not currently a public API; we may expose it in a future release).
 
 ## Popover
 
 Low-level primitive: a `<div>` with the `popover` attribute and show/hide lifecycle only. No
-placement, no trigger wiring — use it when you need top-layer rendering with **fixed or
-custom positioning** (e.g. Flag uses `Popover mode="manual"`). For anchor-positioned content
-next to a trigger, use **Popup** instead.
+placement, no trigger wiring — use it when you need top-layer rendering with **fixed or custom
+positioning** (e.g. Flag uses `Popover mode="manual"`). For anchor-positioned content next to a
+trigger, use **Popup** instead.
 
 ## Dialog
 
@@ -56,9 +57,9 @@ Compound component for modal dialogs using the native `<dialog>` element with `.
 ## Animations
 
 Both Popup (and the low-level Popover) and Dialog support CSS-based entry/exit animations via the
-`animate` prop. Animations
-use [`@starting-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) for entry
-and [`allow-discrete`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) on
+`animate` prop. Animations use
+[`@starting-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) for entry and
+[`allow-discrete`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) on
 `display`/`overlay` for exit — no JavaScript animation coordination required.
 
 Presets are available from `@atlaskit/top-layer/animations`:
@@ -90,7 +91,8 @@ const animation = slideAndFade();
 </Popup.Content>;
 ```
 
-For overlay styling (background, shadow, border-radius), see the `PopupSurface` usage in the package examples.
+For overlay styling (background, shadow, border-radius), see the `PopupSurface` usage in the package
+examples.
 
 Available popover presets:
 
@@ -130,20 +132,20 @@ Browser tests in `__tests__/playwright/` verify the following WCAG 2.2 success c
 [`notes/audits/accessibility-audit-report.md`](notes/audits/accessibility-audit-report.md) for
 details.
 
-| A11y criterion                        | Browser test |
-| ------------------------------------- | ------------ |
-| 1.3.1 Info and Relationships          | ✓            |
-| 1.3.2 Meaningful Sequence             | ✓            |
-| 2.1.1 Keyboard                        | ✓            |
-| 2.1.2 No Keyboard Trap                | ✓            |
-| 2.4.3 Focus Order                     | ✓            |
-| 2.4.7 Focus Visible                   | ✓            |
+| A11y criterion                       | Browser test |
+| ------------------------------------ | ------------ |
+| 1.3.1 Info and Relationships         | ✓            |
+| 1.3.2 Meaningful Sequence            | ✓            |
+| 2.1.1 Keyboard                       | ✓            |
+| 2.1.2 No Keyboard Trap               | ✓            |
+| 2.4.3 Focus Order                    | ✓            |
+| 2.4.7 Focus Visible                  | ✓            |
 | 2.4.11 Focus Not Obscured            | ✓            |
-| 3.2.1 On Focus                        | ✓            |
+| 3.2.1 On Focus                       | ✓            |
 | 4.1.2 Name, Role, Value              | ✓            |
-| 4.1.3 Status Messages                 | ✓            |
-| Background inertness (modal dialogs)  | ✓            |
-| Close reasons (Dialog)                | ✓            |
+| 4.1.3 Status Messages                | ✓            |
+| Background inertness (modal dialogs) | ✓            |
+| Close reasons (Dialog)               | ✓            |
 
 ## Documentation
 

package/dist/cjs/popover/popover.js

@@ -117,7 +117,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   var mode = modeProp === 'hint' && !supportsPopoverHint() ? 'auto' : modeProp;
 
   // Distinguishes programmatic hidePopover() from browser-initiated dismiss.
-  // When we call hidePopover() ourselves the toggle event fires synchronously —
+  // When we call hidePopover() ourselves the beforetoggle event fires synchronously —
   // this ref prevents the toggle handler from calling onClose redundantly.
   var programmaticCloseRef = (0, _react.useRef)(false);
 
@@ -203,9 +203,14 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     });
   }, [preset, placement]);
 
-  // Show/hide based on isOpen. try/catch because show/hide throw if the
-  // element is already in the target state (e.g. browser dismissed via
-  // light-dismiss before our effect ran).
+  // Show/hide based on isOpen.
+  // showPopover() and hidePopover() are no-ops when the popover is already
+  // in the target state (e.g. browser dismissed via light-dismiss before our
+  // effect ran).
+  // Defensive try/catch: these APIs throw InvalidStateError if the element
+  // is disconnected or missing the popover attribute. While we don't expect
+  // that to happen in normal usage, it can occur in edge cases (e.g. React
+  // concurrent mode, StrictMode double-effects, or unmount races).
   (0, _react.useLayoutEffect)(function () {
     var el = ownRef.current;
     if (!el) {
@@ -213,26 +218,23 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     }
     if (isOpen) {
       programmaticCloseRef.current = false;
+      // Defensive: element may be disconnected or in an unexpected state.
       try {
         el.showPopover();
-      } catch (_unused) {
-        // Already showing or unsupported — DOM matches intent.
-      }
+      } catch (_unused) {}
       return function () {
         programmaticCloseRef.current = true;
+        // Defensive: element may be disconnected or in an unexpected state.
         try {
           el.hidePopover();
-        } catch (_unused2) {
-          // Already hidden — DOM matches intent.
-        }
+        } catch (_unused2) {}
       };
     }
     programmaticCloseRef.current = true;
+    // Defensive: element may be disconnected or in an unexpected state.
     try {
       el.hidePopover();
-    } catch (_unused3) {
-      // Already hidden — DOM matches intent.
-    }
+    } catch (_unused3) {}
   }, [isOpen]);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     ref: combinedRef,

package/dist/cjs/popup/popup-trigger-function.js

@@ -54,7 +54,10 @@ function PopupTriggerFunction(_ref) {
   var toggle = (0, _react.useCallback)(function () {
     var popoverEl = popoverRef.current;
     if (popoverEl) {
-      popoverEl.togglePopover();
+      // Defensive: element may be disconnected or in an unexpected state.
+      try {
+        popoverEl.togglePopover();
+      } catch (_unused) {}
     }
   }, [popoverRef]);
   var ariaAttributes = (0, _react.useMemo)(function () {

package/dist/cjs/popup/popup-trigger.js

@@ -59,11 +59,10 @@ function PopupTrigger(_ref) {
       // - If React thinks it was closed → the user wants to open.
       //   Call showPopover().
       if (!isOpenRef.current) {
+        // Defensive: element may be disconnected or in an unexpected state.
         try {
           popoverEl.showPopover();
-        } catch (_unused) {
-          // Already showing — safe to ignore.
-        }
+        } catch (_unused) {}
       }
       // When isOpenRef.current is true, the browser's light-dismiss
       // already closed the popover and fired the toggle event, which

package/dist/es2019/popover/popover.js

@@ -107,7 +107,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   const mode = modeProp === 'hint' && !supportsPopoverHint() ? 'auto' : modeProp;
 
   // Distinguishes programmatic hidePopover() from browser-initiated dismiss.
-  // When we call hidePopover() ourselves the toggle event fires synchronously —
+  // When we call hidePopover() ourselves the beforetoggle event fires synchronously —
   // this ref prevents the toggle handler from calling onClose redundantly.
   const programmaticCloseRef = useRef(false);
 
@@ -190,9 +190,14 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     });
   }, [preset, placement]);
 
-  // Show/hide based on isOpen. try/catch because show/hide throw if the
-  // element is already in the target state (e.g. browser dismissed via
-  // light-dismiss before our effect ran).
+  // Show/hide based on isOpen.
+  // showPopover() and hidePopover() are no-ops when the popover is already
+  // in the target state (e.g. browser dismissed via light-dismiss before our
+  // effect ran).
+  // Defensive try/catch: these APIs throw InvalidStateError if the element
+  // is disconnected or missing the popover attribute. While we don't expect
+  // that to happen in normal usage, it can occur in edge cases (e.g. React
+  // concurrent mode, StrictMode double-effects, or unmount races).
   useLayoutEffect(() => {
     const el = ownRef.current;
     if (!el) {
@@ -200,26 +205,23 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     }
     if (isOpen) {
       programmaticCloseRef.current = false;
+      // Defensive: element may be disconnected or in an unexpected state.
       try {
         el.showPopover();
-      } catch {
-        // Already showing or unsupported — DOM matches intent.
-      }
+      } catch {}
       return () => {
         programmaticCloseRef.current = true;
+        // Defensive: element may be disconnected or in an unexpected state.
         try {
           el.hidePopover();
-        } catch {
-          // Already hidden — DOM matches intent.
-        }
+        } catch {}
       };
     }
     programmaticCloseRef.current = true;
+    // Defensive: element may be disconnected or in an unexpected state.
     try {
       el.hidePopover();
-    } catch {
-      // Already hidden — DOM matches intent.
-    }
+    } catch {}
   }, [isOpen]);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: combinedRef,

package/dist/es2019/popup/popup-trigger-function.js

@@ -51,7 +51,10 @@ export function PopupTriggerFunction({
   const toggle = useCallback(() => {
     const popoverEl = popoverRef.current;
     if (popoverEl) {
-      popoverEl.togglePopover();
+      // Defensive: element may be disconnected or in an unexpected state.
+      try {
+        popoverEl.togglePopover();
+      } catch {}
     }
   }, [popoverRef]);
   const ariaAttributes = useMemo(() => ({

package/dist/es2019/popup/popup-trigger.js

@@ -53,11 +53,10 @@ export function PopupTrigger({
       // - If React thinks it was closed → the user wants to open.
       //   Call showPopover().
       if (!isOpenRef.current) {
+        // Defensive: element may be disconnected or in an unexpected state.
         try {
           popoverEl.showPopover();
-        } catch {
-          // Already showing — safe to ignore.
-        }
+        } catch {}
       }
       // When isOpenRef.current is true, the browser's light-dismiss
       // already closed the popover and fired the toggle event, which

package/dist/esm/popover/popover.js

@@ -108,7 +108,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   var mode = modeProp === 'hint' && !supportsPopoverHint() ? 'auto' : modeProp;
 
   // Distinguishes programmatic hidePopover() from browser-initiated dismiss.
-  // When we call hidePopover() ourselves the toggle event fires synchronously —
+  // When we call hidePopover() ourselves the beforetoggle event fires synchronously —
   // this ref prevents the toggle handler from calling onClose redundantly.
   var programmaticCloseRef = useRef(false);
 
@@ -194,9 +194,14 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     });
   }, [preset, placement]);
 
-  // Show/hide based on isOpen. try/catch because show/hide throw if the
-  // element is already in the target state (e.g. browser dismissed via
-  // light-dismiss before our effect ran).
+  // Show/hide based on isOpen.
+  // showPopover() and hidePopover() are no-ops when the popover is already
+  // in the target state (e.g. browser dismissed via light-dismiss before our
+  // effect ran).
+  // Defensive try/catch: these APIs throw InvalidStateError if the element
+  // is disconnected or missing the popover attribute. While we don't expect
+  // that to happen in normal usage, it can occur in edge cases (e.g. React
+  // concurrent mode, StrictMode double-effects, or unmount races).
   useLayoutEffect(function () {
     var el = ownRef.current;
     if (!el) {
@@ -204,26 +209,23 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     }
     if (isOpen) {
       programmaticCloseRef.current = false;
+      // Defensive: element may be disconnected or in an unexpected state.
       try {
         el.showPopover();
-      } catch (_unused) {
-        // Already showing or unsupported — DOM matches intent.
-      }
+      } catch (_unused) {}
       return function () {
         programmaticCloseRef.current = true;
+        // Defensive: element may be disconnected or in an unexpected state.
         try {
           el.hidePopover();
-        } catch (_unused2) {
-          // Already hidden — DOM matches intent.
-        }
+        } catch (_unused2) {}
       };
     }
     programmaticCloseRef.current = true;
+    // Defensive: element may be disconnected or in an unexpected state.
     try {
       el.hidePopover();
-    } catch (_unused3) {
-      // Already hidden — DOM matches intent.
-    }
+    } catch (_unused3) {}
   }, [isOpen]);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: combinedRef,

package/dist/esm/popup/popup-trigger-function.js

@@ -49,7 +49,10 @@ export function PopupTriggerFunction(_ref) {
   var toggle = useCallback(function () {
     var popoverEl = popoverRef.current;
     if (popoverEl) {
-      popoverEl.togglePopover();
+      // Defensive: element may be disconnected or in an unexpected state.
+      try {
+        popoverEl.togglePopover();
+      } catch (_unused) {}
     }
   }, [popoverRef]);
   var ariaAttributes = useMemo(function () {

package/dist/esm/popup/popup-trigger.js

@@ -51,11 +51,10 @@ export function PopupTrigger(_ref) {
       // - If React thinks it was closed → the user wants to open.
       //   Call showPopover().
       if (!isOpenRef.current) {
+        // Defensive: element may be disconnected or in an unexpected state.
         try {
           popoverEl.showPopover();
-        } catch (_unused) {
-          // Already showing — safe to ignore.
-        }
+        } catch (_unused) {}
       }
       // When isOpenRef.current is true, the browser's light-dismiss
       // already closed the popover and fired the toggle event, which

package/dist/types/animations/types.d.ts

@@ -1,4 +1,4 @@
-import { type TPlacementOptions } from '../popup/types';
+import type { TPlacementOptions } from '../popup/types';
 /**
  * A self-contained animation preset for top-layer elements (popovers and dialogs).
  *

package/dist/types/arrow/types.d.ts

@@ -1,4 +1,4 @@
-import { type TPlacementOptions } from '../popup/types';
+import type { TPlacementOptions } from '../popup/types';
 /**
  * A self-contained arrow preset for PopoverContent.
  *

package/dist/types/dialog/create-close-event.d.ts

@@ -1,4 +1,4 @@
-import { type TDialogCloseReason } from './types';
+import type { TDialogCloseReason } from './types';
 /**
  * Creates a synthetic DOM event from a `TDialogCloseReason`.
  *

package/dist/types/popover/create-close-event.d.ts

@@ -1,4 +1,4 @@
-import { type TPopoverCloseReason } from './types';
+import type { TPopoverCloseReason } from './types';
 /**
  * Creates a synthetic DOM event from a `TPopoverCloseReason`.
  *

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

@@ -1,4 +1,4 @@
-import { type TPlacementOptions } from '../popup/types';
+import type { TPlacementOptions } from '../popup/types';
 /**
  * A self-contained animation preset for top-layer elements (popovers and dialogs).
  *

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

@@ -1,4 +1,4 @@
-import { type TPlacementOptions } from '../popup/types';
+import type { TPlacementOptions } from '../popup/types';
 /**
  * A self-contained arrow preset for PopoverContent.
  *

package/dist/types-ts4.5/dialog/create-close-event.d.ts

@@ -1,4 +1,4 @@
-import { type TDialogCloseReason } from './types';
+import type { TDialogCloseReason } from './types';
 /**
  * Creates a synthetic DOM event from a `TDialogCloseReason`.
  *

package/dist/types-ts4.5/popover/create-close-event.d.ts

@@ -1,4 +1,4 @@
-import { type TPopoverCloseReason } from './types';
+import type { TPopoverCloseReason } from './types';
 /**
  * Creates a synthetic DOM event from a `TPopoverCloseReason`.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.1.0",
+	"version": "0.1.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",
@@ -15,6 +15,13 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
+		"react-compiler": {
+			"enabled": true,
+			"gating": {
+				"source": "@atlassian/react-compiler-gating",
+				"importSpecifierName": "isReactCompilerActivePlatform"
+			}
+		},
 		"team": "Design System Team",
 		"website": {
 			"name": "Top Layer",
@@ -29,8 +36,8 @@
 	"dependencies": {
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/ds-lib": "^6.0.0",
-		"@atlaskit/tokens": "^11.1.0",
+		"@atlaskit/ds-lib": "^7.0.0",
+		"@atlaskit/tokens": "^12.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -43,13 +50,15 @@
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.10.0",
-		"@atlaskit/heading": "^5.3.0",
+		"@atlaskit/button": "^23.11.0",
+		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/lozenge": "^13.5.0",
-		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlaskit/textfield": "^8.2.0",
-		"@atlassian/testing-library": "^0.4.0",
+		"@atlaskit/textfield": "^8.3.0",
+		"@atlassian/react-compiler-gating": "workspace:^",
+		"@atlassian/ssr-tests": "workspace:^",
+		"@atlassian/testing-library": "^0.5.0",
 		"@testing-library/react": "^16.3.0",
 		"@types/raf-schd": "^4.0.1",
 		"tiny-invariant": "^1.2.0"