@atlaskit/top-layer 6.2.2 → 6.2.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/top-layer
 
+## 6.2.4
+
+### Patch Changes
+
+- [`4247678302a95`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4247678302a95) -
+  Fixed server-side rendering errors and warnings in the top-layer popover, dialog and popper paths
+  (`platform-dst-top-layer`).
+- Updated dependencies
+
+## 6.2.3
+
+### Patch Changes
+
+- [`aaf461aabb51c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aaf461aabb51c) -
+  `Popover` and `Dialog` now use the default text colour (`color.text`). Before, the browser gave
+  them its own default (`CanvasText`). This only affects content that does not set its own text
+  colour. In light and dark mode, that content now looks the same as content rendered in a portal
+  under `<body>`.
+
 ## 6.2.2
 
 ### Patch Changes

package/dist/cjs/dialog/dialog-content.compiled.css

@@ -27,6 +27,7 @@
 ._2hwx1wug{margin-right:auto}
 ._6hkqidpf:defined:defined:defined{inset-block-end:0}
 ._722r1ule[open][open][open]{display:block}
+._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
 ._ao8dglyw:defined:defined:defined{max-height:none}
 ._dbnbze3t:defined:defined:defined{padding-block-end:var(--ds-space-0,0)}
 ._goh41wug:defined:defined:defined{pointer-events:auto}

package/dist/cjs/dialog/dialog-content.js

@@ -14,14 +14,16 @@ var _react2 = require("@compiled/react");
 var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
 var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
 var _useSafariEscapeFix2 = require("../internal/use-safari-escape-fix");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-// Surface reset. KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
+// Surface reset, including `color` (the UA `dialog` rule sets `CanvasText`).
+// KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
 var surfaceResetStyles = {
-  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
 };
 true;
 var dialogStyles = {
@@ -82,7 +84,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var dismissedByRef = (0, _react.useRef)(dismissedBy);
   var onCloseRef = (0, _react.useRef)(onClose);
   // Keep native event handlers stable while ensuring they read the latest committed props.
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     dismissedByRef.current = dismissedBy;
     onCloseRef.current = onClose;
   }, [dismissedBy, onClose]);
@@ -101,7 +103,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   // Ordering is important: bind native lifecycle listeners before the later
   // layout effect calls showModal() or close(), because `beforetoggle` fires
   // synchronously during those calls.
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     if (!isMounted) {
       return;
     }
@@ -160,7 +162,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     // No-op: no current use case for programmatic close via OpenLayerObserver.
     onClose: _noop.default
   });
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     var dialog = ownRef.current;
     if (!dialog) {
       return;

package/dist/cjs/dialog-scroll-lock/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogScrollLock = DialogScrollLock;
-var _react = require("react");
 var _browserApis = require("@atlaskit/browser-apis");
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 /**
  * __DialogScrollLock__
  *
@@ -37,7 +37,7 @@ var _browserApis = require("@atlaskit/browser-apis");
  */
 function DialogScrollLock(_ref) {
   var isOpen = _ref.isOpen;
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     var _getDocument;
     if (!isOpen) {
       return;

package/dist/cjs/internal/use-anchored-popover-at-point.js

@@ -8,6 +8,7 @@ exports.useAnchoredPopoverAtPoint = useAnchoredPopoverAtPoint;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _useAnchoredPopover = require("./use-anchored-popover");
 var _excluded = ["getPoint", "isEnabled"];
 /**
@@ -97,7 +98,7 @@ function useAnchoredPopoverAtPoint(_ref2) {
   // effect must not depend on anything the delegated effect does not: a dependency
   // here alone re-creates the element without that hook writing an `anchor-name`
   // onto it, and positioning silently dies.
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     if (!isEnabled) {
       return;
     }

package/dist/cjs/internal/use-anchored-popover.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAnchoredPopover = useAnchoredPopover;
 var _react = require("react");
 var _useId = require("@atlaskit/ds-lib/use-id");
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _applyAnchorPositioning = require("./anchor-positioning/apply-anchor-positioning");
 var _anchoredPopoverSize = require("./anchored-popover-size");
 var _applyJavascriptFallbackPositioning = require("./javascript-fallback/apply-javascript-fallback-positioning");
@@ -214,7 +215,7 @@ function useAnchoredPopover(_ref3) {
   // element (the point hook remounts its `<div>`).
   var fallbackAnchorName = useNewAnchorName();
   var stablePlacement = useStablePlacement(placement);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     if (!isEnabled) {
       return;
     }

package/dist/cjs/internal/use-animated-visibility.js

@@ -8,6 +8,7 @@ exports.useAnimatedVisibility = useAnimatedVisibility;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _isNativeElementOpen = require("./is-native-element-open");
 var _reducedMotion = require("./reduced-motion");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -208,7 +209,7 @@ function useAnimatedVisibility(_ref4) {
   var onEnterFinishRef = (0, _react.useRef)(onEnterFinish);
   var onExitFinishRef = (0, _react.useRef)(onExitFinish);
   var willAnimateRef = (0, _react.useRef)(willAnimate);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     onEnterFinishRef.current = onEnterFinish;
     onExitFinishRef.current = onExitFinish;
     willAnimateRef.current = willAnimate;
@@ -324,7 +325,7 @@ function useAnimatedVisibility(_ref4) {
       onSettled: settleExit
     });
   }, [elementRef, settleExit]);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     return function () {
       // Prevent a pending animation or microtask from notifying after unmount.
       cancelExitSettlementRef.current();

package/dist/cjs/popover/popover.compiled.css

@@ -25,6 +25,7 @@
 ._1s8uglyw:defined:defined:defined{rotate:none}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._1yd01wug:defined:defined:defined{min-width:auto}
+._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
 ._ao8dglyw:defined:defined:defined{max-height:none}
 ._az2pidpf:defined:defined:defined{padding-top:0}
 ._b2a9idpf:defined:defined:defined{margin-top:0}

package/dist/cjs/popover/popover.js

@@ -14,6 +14,7 @@ var _react2 = require("@compiled/react");
 var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
 var _isNativeElementOpen = require("../internal/is-native-element-open");
 var _resolvePlacement2 = require("../internal/resolve-placement");
@@ -62,14 +63,19 @@ var supportsPopoverHint = (0, _once.default)(function () {
  *
  * The host is still a DOM child of its trigger for inheritance, so it inherits
  * values like `pointer-events: none` or `white-space: nowrap`. Resets them to
- * what `<body>` gave the portal path. `color`, `font` and direction still inherit.
+ * what `<body>` gave the portal path. `font` and direction still inherit.
  * Not `all: initial`: that would also override the UA `[popover]` rules.
  *
+ * `color` is a reset too: the UA `[popover]` rule sets `color: CanvasText`, so
+ * the host never inherits a colour. `color.text` is what `<body>` gave the portal
+ * path. Not `inherit`, which would take the trigger's colour (for example a link).
+ * See `notes/decisions/surface-reset-color.md`.
+ *
  * KEEP IN SYNC with `dialog/dialog-content.tsx` (ADS forbids shared styles).
  * The `satisfies` check below catches drift.
  */
 var surfaceResetStyles = {
-  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
 };
 true;
 var styles = {
@@ -167,7 +173,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // Keep the semantic callback current without rebinding native lifecycle
   // listeners during the same commit that calls showPopover()/hidePopover().
   var onCloseRef = (0, _react.useRef)(onClose);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     onCloseRef.current = onClose;
   }, [onClose]);
 
@@ -290,7 +296,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // first dispatch, dropping the `focusRestorationTargetRef` snapshot
   // and breaking nested-popover focus restoration on close. React runs
   // layout effects in source order on the same commit.
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     var element = ownRef.current;
     if (!element) {
       return;
@@ -339,7 +345,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
   // already in the target state. Try/catch guards `InvalidStateError` on
   // disconnected elements (StrictMode/concurrent/unmount edge cases).
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     var element = ownRef.current;
     if (!element) {
       return;

package/dist/es2019/dialog/dialog-content.compiled.css

@@ -27,6 +27,7 @@
 ._2hwx1wug{margin-right:auto}
 ._6hkqidpf:defined:defined:defined{inset-block-end:0}
 ._722r1ule[open][open][open]{display:block}
+._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
 ._ao8dglyw:defined:defined:defined{max-height:none}
 ._dbnbze3t:defined:defined:defined{padding-block-end:var(--ds-space-0,0)}
 ._goh41wug:defined:defined:defined{pointer-events:auto}

package/dist/es2019/dialog/dialog-content.js

@@ -1,18 +1,20 @@
 /* dialog-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bindAll } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
-// Surface reset. KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
+// Surface reset, including `color` (the UA `dialog` rule sets `CanvasText`).
+// KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
 const surfaceResetStyles = {
-  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
 };
 true;
 const dialogStyles = {

package/dist/es2019/dialog-scroll-lock/index.js

@@ -1,5 +1,5 @@
-import { useLayoutEffect } from 'react';
 import { getDocument } from '@atlaskit/browser-apis';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 /**
  * __DialogScrollLock__
  *

package/dist/es2019/internal/use-anchored-popover-at-point.js

@@ -7,7 +7,8 @@
  * See `notes/decisions/anchored-popover-at-point.md` for why this is a sibling
  * hook instead of an anchor union inside `useAnchoredPopover`.
  */
-import { useLayoutEffect, useRef } from 'react';
+import { useRef } from 'react';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useAnchoredPopover } from './use-anchored-popover';
 
 /**

package/dist/es2019/internal/use-anchored-popover.js

@@ -10,8 +10,9 @@
  * See `notes/architecture/positioning.md` and
  * `notes/decisions/fit-available-space.md`.
  */
-import { useLayoutEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { applyAnchorPositioning } from './anchor-positioning/apply-anchor-positioning';
 import { getAnchoredPopoverSizeDeclarations } from './anchored-popover-size';
 import { applyJavaScriptFallbackPositioning } from './javascript-fallback/apply-javascript-fallback-positioning';

package/dist/es2019/internal/use-animated-visibility.js

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useLayoutEffect, useReducer, useRef } from 'react';
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { isNativeElementOpen } from './is-native-element-open';
 import { prefersReducedMotion } from './reduced-motion';
 function runCancellableSettlement({

package/dist/es2019/popover/popover.compiled.css

@@ -25,6 +25,7 @@
 ._1s8uglyw:defined:defined:defined{rotate:none}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._1yd01wug:defined:defined:defined{min-width:auto}
+._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
 ._ao8dglyw:defined:defined:defined{max-height:none}
 ._az2pidpf:defined:defined:defined{padding-top:0}
 ._b2a9idpf:defined:defined:defined{margin-top:0}

package/dist/es2019/popover/popover.js

@@ -1,11 +1,12 @@
 /* popover.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useMemo, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { isNativeElementOpen } from '../internal/is-native-element-open';
 import { resolvePlacement } from '../internal/resolve-placement';
@@ -56,14 +57,19 @@ const supportsPopoverHint = once(() => {
  *
  * The host is still a DOM child of its trigger for inheritance, so it inherits
  * values like `pointer-events: none` or `white-space: nowrap`. Resets them to
- * what `<body>` gave the portal path. `color`, `font` and direction still inherit.
+ * what `<body>` gave the portal path. `font` and direction still inherit.
  * Not `all: initial`: that would also override the UA `[popover]` rules.
  *
+ * `color` is a reset too: the UA `[popover]` rule sets `color: CanvasText`, so
+ * the host never inherits a colour. `color.text` is what `<body>` gave the portal
+ * path. Not `inherit`, which would take the trigger's colour (for example a link).
+ * See `notes/decisions/surface-reset-color.md`.
+ *
  * KEEP IN SYNC with `dialog/dialog-content.tsx` (ADS forbids shared styles).
  * The `satisfies` check below catches drift.
  */
 const surfaceResetStyles = {
-  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
 };
 true;
 const styles = {

package/dist/esm/dialog/dialog-content.compiled.css

@@ -27,6 +27,7 @@
 ._2hwx1wug{margin-right:auto}
 ._6hkqidpf:defined:defined:defined{inset-block-end:0}
 ._722r1ule[open][open][open]{display:block}
+._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
 ._ao8dglyw:defined:defined:defined{max-height:none}
 ._dbnbze3t:defined:defined:defined{padding-block-end:var(--ds-space-0,0)}
 ._goh41wug:defined:defined:defined{pointer-events:auto}

package/dist/esm/dialog/dialog-content.js

@@ -1,18 +1,20 @@
 /* dialog-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bindAll } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
-// Surface reset. KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
+// Surface reset, including `color` (the UA `dialog` rule sets `CanvasText`).
+// KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
 var surfaceResetStyles = {
-  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
 };
 true;
 var dialogStyles = {

package/dist/esm/dialog-scroll-lock/index.js

@@ -1,5 +1,5 @@
-import { useLayoutEffect } from 'react';
 import { getDocument } from '@atlaskit/browser-apis';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 /**
  * __DialogScrollLock__
  *

package/dist/esm/internal/use-anchored-popover-at-point.js

@@ -12,7 +12,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * See `notes/decisions/anchored-popover-at-point.md` for why this is a sibling
  * hook instead of an anchor union inside `useAnchoredPopover`.
  */
-import { useLayoutEffect, useRef } from 'react';
+import { useRef } from 'react';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useAnchoredPopover } from './use-anchored-popover';
 
 /**

package/dist/esm/internal/use-anchored-popover.js

@@ -10,8 +10,9 @@
  * See `notes/architecture/positioning.md` and
  * `notes/decisions/fit-available-space.md`.
  */
-import { useLayoutEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { applyAnchorPositioning } from './anchor-positioning/apply-anchor-positioning';
 import { getAnchoredPopoverSizeDeclarations } from './anchored-popover-size';
 import { applyJavaScriptFallbackPositioning } from './javascript-fallback/apply-javascript-fallback-positioning';

package/dist/esm/internal/use-animated-visibility.js

@@ -2,7 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { useCallback, useEffect, useLayoutEffect, useReducer, useRef } from 'react';
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { isNativeElementOpen } from './is-native-element-open';
 import { prefersReducedMotion } from './reduced-motion';
 function runCancellableSettlement(_ref) {

package/dist/esm/popover/popover.compiled.css

@@ -25,6 +25,7 @@
 ._1s8uglyw:defined:defined:defined{rotate:none}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._1yd01wug:defined:defined:defined{min-width:auto}
+._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
 ._ao8dglyw:defined:defined:defined{max-height:none}
 ._az2pidpf:defined:defined:defined{padding-top:0}
 ._b2a9idpf:defined:defined:defined{margin-top:0}

package/dist/esm/popover/popover.js

@@ -1,11 +1,12 @@
 /* popover.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useMemo, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { isNativeElementOpen } from '../internal/is-native-element-open';
 import { resolvePlacement } from '../internal/resolve-placement';
@@ -53,14 +54,19 @@ var supportsPopoverHint = once(function () {
  *
  * The host is still a DOM child of its trigger for inheritance, so it inherits
  * values like `pointer-events: none` or `white-space: nowrap`. Resets them to
- * what `<body>` gave the portal path. `color`, `font` and direction still inherit.
+ * what `<body>` gave the portal path. `font` and direction still inherit.
  * Not `all: initial`: that would also override the UA `[popover]` rules.
  *
+ * `color` is a reset too: the UA `[popover]` rule sets `color: CanvasText`, so
+ * the host never inherits a colour. `color.text` is what `<body>` gave the portal
+ * path. Not `inherit`, which would take the trigger's colour (for example a link).
+ * See `notes/decisions/surface-reset-color.md`.
+ *
  * KEEP IN SYNC with `dialog/dialog-content.tsx` (ADS forbids shared styles).
  * The `satisfies` check below catches drift.
  */
 var surfaceResetStyles = {
-  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
 };
 true;
 var styles = {

package/dist/types/internal/surface-reset.d.ts

@@ -7,7 +7,13 @@ type TSurfaceResetDeclarations = {
     textAlign: 'start';
     textIndent: '0';
     textTransform: 'none';
+    color: 'var(--ds-text)';
 };
+/**
+ * `cssMap` widens string literals to `string`, but keeps the literal type that
+ * `token()` returns.
+ */
+type TCompiledValue<TValue> = TValue extends `var(--ds-${string})` ? TValue : string;
 /**
  * The surface reset is duplicated in `popover/popover.tsx` and
  * `dialog/dialog-content.tsx` (ADS forbids shared styles). Each copy checks
@@ -18,7 +24,7 @@ type TSurfaceResetDeclarations = {
  */
 export type TBoostedSurfaceReset<TSelector extends string> = CompiledStyles<{
     [TKey in TSelector]: {
-        [TProperty in keyof TSurfaceResetDeclarations]: string;
+        [TProperty in keyof TSurfaceResetDeclarations]: TCompiledValue<TSurfaceResetDeclarations[TProperty]>;
     };
 }>;
 type TIsIdentical<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => (T extends B ? 1 : 2) ? true : false;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "6.2.2",
+	"version": "6.2.4",
 	"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",
@@ -40,7 +40,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^6.0.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^20.3.0",
+		"@atlaskit/tokens": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",