@atlaskit/top-layer 1.8.1 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/top-layer
 
+## 1.10.0
+
+### Minor Changes
+
+- [`c5a6b4e6c8a7c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c5a6b4e6c8a7c) -
+  `PopoverSurface` now sets a default text color so content no longer inherits ambient text color.
+  This restores parity with the legacy popup surface and fixes the top-layer paths of Popup, Select,
+  DateTimePicker, and AvatarGroup, which relied on the surface for their text color.
+
+## 1.9.0
+
+### Minor Changes
+
+- [`690a0ff95cbac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/690a0ff95cbac) -
+  Reset inherited text-layout styles (e.g. `white-space`) on the `Popover` and `Dialog` surfaces.
+
 ## 1.8.1
 
 ### Patch Changes

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

@@ -1,4 +1,3 @@
-
 ._19itglyw{border:none}
 ._1iu47kvq[open]{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
 ._1m5e1op4::-ms-backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
@@ -11,29 +10,35 @@
 ._1fyf1a5r::-ms-backdrop{transition-behavior:allow-discrete}
 ._1fyf1a5r::backdrop{transition-behavior:allow-discrete}
 ._1i0neoah[open]{animation-fill-mode:backwards}
+._1i4q4jg8{overflow-wrap:normal}
 ._1jhdq7pw::-ms-backdrop{animation-fill-mode:forwards}
 ._1jhdq7pw::backdrop{animation-fill-mode:forwards}
 ._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1j28::-ms-backdrop{background-color:transparent}
 ._1ltk1j28::backdrop{background-color:transparent}
+._1nmz4jg8{word-break:normal}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
 ._1oil1d08[open]{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
+._1p1dglyw{text-transform:none}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1rsueoah[open]::-ms-backdrop{animation-fill-mode:backwards}
 ._1rsueoah[open]::backdrop{animation-fill-mode:backwards}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwx1wug{margin-right:auto}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._azhwidpf{text-indent:0}
 ._bfhk1j28{background-color:transparent}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._c71lglyw{max-height:none}
 ._k8m011k7{transition-property:overlay,display}
 ._njwk11k7::-ms-backdrop{-ms-transition-property:overlay,display;transition-property:overlay,display}
 ._njwk11k7::backdrop{transition-property:overlay,display}
+._o5724jg8{white-space:normal}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}
+._y3gnv2br{text-align:start}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
 ._yhpqi9qs::-ms-backdrop{transition-duration:var(--ds-duration-medium,.2s)}
 ._yhpqi9qs::backdrop{transition-duration:var(--ds-duration-medium,.2s)}

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

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v0.40.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -26,6 +26,19 @@ var dialogAnimationStyles = {
   root: "_k8m011k7 _1oeci9qs _1s9z1a5r _1fsl1mzy _1oil1d08",
   motion: "_y44vgeqi _1o51q7pw _1iu47kvq _1i0neoah"
 };
+
+// Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
+// Neutralises inherited text-layout properties (e.g. `white-space: nowrap`) that leak
+// into the top-layer surface. Excludes `color`/`font` (theming) and
+// `direction`/`unicode-bidi` (RTL must inherit). Pure layout reset with no box
+// side-effects, so it does not reintroduce the `margin: auto` centering problem that
+// kept `height: auto` off `Dialog`.
+//
+// KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
+// (ADS forbids sharing styles across files, so it is co-located and duplicated).
+var surfaceResetStyles = {
+  root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+};
 var styles = {
   dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _bl8aglyw _156y147i _10aiglyw _aeld147i"
 };
@@ -199,6 +212,6 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     style: style,
     onCancel: handleCancel,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.dialog, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles.motion, consumerXcss])
+    className: (0, _runtime.ax)([styles.dialog, surfaceResetStyles.root, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles.motion, consumerXcss])
   }, children);
 });

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

@@ -1,4 +1,3 @@
-
 ._15ns179n:popover-open{animation:var(--ds-popover-motion-enter)}
 ._19itglyw{border:none}
 ._1r041wug{inset:auto}
@@ -7,8 +6,11 @@
 ._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}
 ._19pkidpf{margin-top:0}
+._1i4q4jg8{overflow-wrap:normal}
+._1nmz4jg8{word-break:normal}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
+._1p1dglyw{text-transform:none}
 ._1pgl1lbj{animation-timing-function:var(--ds-easing-in-practical,cubic-bezier(.6,0,.8,.6))}
 ._1psg1ign:popover-open{animation-duration:var(--ds-duration-short,.15s)}
 ._1reoewfl{overflow-x:visible}
@@ -16,12 +18,15 @@
 ._2hwxidpf{margin-right:0}
 ._4t3i1wug{height:auto}
 ._5sagdn4k{animation-duration:var(--ds-duration-xshort,.1s)}
+._azhwidpf{text-indent:0}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
 ._k8m011k7{transition-property:overlay,display}
 ._n3tdidpf{padding-bottom:0}
 ._n70peoah:popover-open{animation-fill-mode:backwards}
+._o5724jg8{white-space:normal}
 ._o8i7indk:popover-open{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
 ._otyridpf{margin-bottom:0}
 ._u5f3idpf{padding-right:0}
+._y3gnv2br{text-align:start}
 @media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156yru3m{transition-duration:0s}._8rmvglyw:popover-open{animation-name:none}._2qm2ru3m:popover-open{transition-duration:0s}}

package/dist/cjs/popover/popover.js

@@ -1,4 +1,4 @@
-/* popover.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popover.tsx generated by @compiled/babel-plugin v0.40.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -41,6 +41,21 @@ var supportsPopoverHint = (0, _once.default)(function () {
 var popoverAnimationStyles = {
   root: "_y44vof1f _k8m011k7 _1oecdn4k _1s9z1a5r _1o51q7pw _5sagdn4k _1pgl1lbj _15ns179n _12t71ign _n70peoah _1psg1ign _o8i7indk _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m"
 };
+
+// Surface reset — neutralises inherited text-layout properties (e.g.
+// `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
+// top-layer element because, for CSS inheritance, it is still a DOM child of its
+// trigger (top-layer promotion is paint/stacking only; the legacy portal path
+// avoided this by rendering at `<body>`). Excludes `color`/`font` (theming) and
+// `direction`/`unicode-bidi` (RTL must inherit).
+//
+// KEEP IN SYNC with the identical `surfaceResetStyles` in `dialog/dialog-content.tsx`.
+// ADS forbids sharing styles across files (`no-exported-styles` /
+// `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
+// co-located and duplicated deliberately.
+var surfaceResetStyles = {
+  root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+};
 var styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug"
 };
@@ -333,6 +348,6 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     "aria-label": label,
     "aria-labelledby": labelledBy,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root, preset && popoverAnimationStyles.root, consumerXcss])
+    className: (0, _runtime.ax)([styles.root, surfaceResetStyles.root, preset && popoverAnimationStyles.root, consumerXcss])
   }, children);
 });

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

@@ -1,5 +1,5 @@
-
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m91wug{overflow-y:auto}
 ._1reo1wug{overflow-x:auto}
-._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._syazi7uo{color:var(--ds-text,#292a2e)}

package/dist/cjs/popover-surface/popover-surface.js

@@ -1,4 +1,4 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v0.40.0 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 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); }
 var styles = {
-  root: "_2rkofajl _1reo1wug _18m91wug _bfhk1bhr _16qs130s"
+  root: "_2rkofajl _1reo1wug _18m91wug _bfhk1bhr _syazi7uo _16qs130s"
 };
 
 /**

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

@@ -1,4 +1,3 @@
-
 ._19itglyw{border:none}
 ._1iu47kvq[open]{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
 ._1m5e1op4::-ms-backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
@@ -11,29 +10,35 @@
 ._1fyf1a5r::-ms-backdrop{transition-behavior:allow-discrete}
 ._1fyf1a5r::backdrop{transition-behavior:allow-discrete}
 ._1i0neoah[open]{animation-fill-mode:backwards}
+._1i4q4jg8{overflow-wrap:normal}
 ._1jhdq7pw::-ms-backdrop{animation-fill-mode:forwards}
 ._1jhdq7pw::backdrop{animation-fill-mode:forwards}
 ._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1j28::-ms-backdrop{background-color:transparent}
 ._1ltk1j28::backdrop{background-color:transparent}
+._1nmz4jg8{word-break:normal}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
 ._1oil1d08[open]{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
+._1p1dglyw{text-transform:none}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1rsueoah[open]::-ms-backdrop{animation-fill-mode:backwards}
 ._1rsueoah[open]::backdrop{animation-fill-mode:backwards}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwx1wug{margin-right:auto}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._azhwidpf{text-indent:0}
 ._bfhk1j28{background-color:transparent}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._c71lglyw{max-height:none}
 ._k8m011k7{transition-property:overlay,display}
 ._njwk11k7::-ms-backdrop{-ms-transition-property:overlay,display;transition-property:overlay,display}
 ._njwk11k7::backdrop{transition-property:overlay,display}
+._o5724jg8{white-space:normal}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}
+._y3gnv2br{text-align:start}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
 ._yhpqi9qs::-ms-backdrop{transition-duration:var(--ds-duration-medium,.2s)}
 ._yhpqi9qs::backdrop{transition-duration:var(--ds-duration-medium,.2s)}

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

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
@@ -17,6 +17,19 @@ const dialogAnimationStyles = {
   root: "_k8m011k7 _1oeci9qs _1s9z1a5r _1fsl1mzy _1oil1d08",
   motion: "_y44vgeqi _1o51q7pw _1iu47kvq _1i0neoah"
 };
+
+// Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
+// Neutralises inherited text-layout properties (e.g. `white-space: nowrap`) that leak
+// into the top-layer surface. Excludes `color`/`font` (theming) and
+// `direction`/`unicode-bidi` (RTL must inherit). Pure layout reset with no box
+// side-effects, so it does not reintroduce the `margin: auto` centering problem that
+// kept `height: auto` off `Dialog`.
+//
+// KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
+// (ADS forbids sharing styles across files, so it is co-located and duplicated).
+const surfaceResetStyles = {
+  root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+};
 const styles = {
   dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _bl8aglyw _156y147i _10aiglyw _aeld147i"
 };
@@ -192,6 +205,6 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     style: style,
     onCancel: handleCancel,
     "data-testid": testId,
-    className: ax([styles.dialog, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles.motion, consumerXcss])
+    className: ax([styles.dialog, surfaceResetStyles.root, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles.motion, consumerXcss])
   }, children);
 });

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

@@ -1,4 +1,3 @@
-
 ._15ns179n:popover-open{animation:var(--ds-popover-motion-enter)}
 ._19itglyw{border:none}
 ._1r041wug{inset:auto}
@@ -7,8 +6,11 @@
 ._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}
 ._19pkidpf{margin-top:0}
+._1i4q4jg8{overflow-wrap:normal}
+._1nmz4jg8{word-break:normal}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
+._1p1dglyw{text-transform:none}
 ._1pgl1lbj{animation-timing-function:var(--ds-easing-in-practical,cubic-bezier(.6,0,.8,.6))}
 ._1psg1ign:popover-open{animation-duration:var(--ds-duration-short,.15s)}
 ._1reoewfl{overflow-x:visible}
@@ -16,12 +18,15 @@
 ._2hwxidpf{margin-right:0}
 ._4t3i1wug{height:auto}
 ._5sagdn4k{animation-duration:var(--ds-duration-xshort,.1s)}
+._azhwidpf{text-indent:0}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
 ._k8m011k7{transition-property:overlay,display}
 ._n3tdidpf{padding-bottom:0}
 ._n70peoah:popover-open{animation-fill-mode:backwards}
+._o5724jg8{white-space:normal}
 ._o8i7indk:popover-open{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
 ._otyridpf{margin-bottom:0}
 ._u5f3idpf{padding-right:0}
+._y3gnv2br{text-align:start}
 @media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156yru3m{transition-duration:0s}._8rmvglyw:popover-open{animation-name:none}._2qm2ru3m:popover-open{transition-duration:0s}}

package/dist/es2019/popover/popover.js

@@ -1,4 +1,4 @@
-/* popover.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popover.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
@@ -32,6 +32,21 @@ const supportsPopoverHint = once(() => {
 const popoverAnimationStyles = {
   root: "_y44vof1f _k8m011k7 _1oecdn4k _1s9z1a5r _1o51q7pw _5sagdn4k _1pgl1lbj _15ns179n _12t71ign _n70peoah _1psg1ign _o8i7indk _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m"
 };
+
+// Surface reset — neutralises inherited text-layout properties (e.g.
+// `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
+// top-layer element because, for CSS inheritance, it is still a DOM child of its
+// trigger (top-layer promotion is paint/stacking only; the legacy portal path
+// avoided this by rendering at `<body>`). Excludes `color`/`font` (theming) and
+// `direction`/`unicode-bidi` (RTL must inherit).
+//
+// KEEP IN SYNC with the identical `surfaceResetStyles` in `dialog/dialog-content.tsx`.
+// ADS forbids sharing styles across files (`no-exported-styles` /
+// `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
+// co-located and duplicated deliberately.
+const surfaceResetStyles = {
+  root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+};
 const styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug"
 };
@@ -325,6 +340,6 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     "aria-label": label,
     "aria-labelledby": labelledBy,
     "data-testid": testId,
-    className: ax([styles.root, preset && popoverAnimationStyles.root, consumerXcss])
+    className: ax([styles.root, surfaceResetStyles.root, preset && popoverAnimationStyles.root, consumerXcss])
   }, children);
 });

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

@@ -1,5 +1,5 @@
-
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m91wug{overflow-y:auto}
 ._1reo1wug{overflow-x:auto}
-._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._syazi7uo{color:var(--ds-text,#292a2e)}

package/dist/es2019/popover-surface/popover-surface.js

@@ -1,9 +1,9 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./popover-surface.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 const styles = {
-  root: "_2rkofajl _1reo1wug _18m91wug _bfhk1bhr _16qs130s"
+  root: "_2rkofajl _1reo1wug _18m91wug _bfhk1bhr _syazi7uo _16qs130s"
 };
 
 /**

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

@@ -1,4 +1,3 @@
-
 ._19itglyw{border:none}
 ._1iu47kvq[open]{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
 ._1m5e1op4::-ms-backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
@@ -11,29 +10,35 @@
 ._1fyf1a5r::-ms-backdrop{transition-behavior:allow-discrete}
 ._1fyf1a5r::backdrop{transition-behavior:allow-discrete}
 ._1i0neoah[open]{animation-fill-mode:backwards}
+._1i4q4jg8{overflow-wrap:normal}
 ._1jhdq7pw::-ms-backdrop{animation-fill-mode:forwards}
 ._1jhdq7pw::backdrop{animation-fill-mode:forwards}
 ._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1j28::-ms-backdrop{background-color:transparent}
 ._1ltk1j28::backdrop{background-color:transparent}
+._1nmz4jg8{word-break:normal}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
 ._1oil1d08[open]{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
+._1p1dglyw{text-transform:none}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1rsueoah[open]::-ms-backdrop{animation-fill-mode:backwards}
 ._1rsueoah[open]::backdrop{animation-fill-mode:backwards}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwx1wug{margin-right:auto}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._azhwidpf{text-indent:0}
 ._bfhk1j28{background-color:transparent}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._c71lglyw{max-height:none}
 ._k8m011k7{transition-property:overlay,display}
 ._njwk11k7::-ms-backdrop{-ms-transition-property:overlay,display;transition-property:overlay,display}
 ._njwk11k7::backdrop{transition-property:overlay,display}
+._o5724jg8{white-space:normal}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}
+._y3gnv2br{text-align:start}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
 ._yhpqi9qs::-ms-backdrop{transition-duration:var(--ds-duration-medium,.2s)}
 ._yhpqi9qs::backdrop{transition-duration:var(--ds-duration-medium,.2s)}

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

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
@@ -17,6 +17,19 @@ var dialogAnimationStyles = {
   root: "_k8m011k7 _1oeci9qs _1s9z1a5r _1fsl1mzy _1oil1d08",
   motion: "_y44vgeqi _1o51q7pw _1iu47kvq _1i0neoah"
 };
+
+// Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
+// Neutralises inherited text-layout properties (e.g. `white-space: nowrap`) that leak
+// into the top-layer surface. Excludes `color`/`font` (theming) and
+// `direction`/`unicode-bidi` (RTL must inherit). Pure layout reset with no box
+// side-effects, so it does not reintroduce the `margin: auto` centering problem that
+// kept `height: auto` off `Dialog`.
+//
+// KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
+// (ADS forbids sharing styles across files, so it is co-located and duplicated).
+var surfaceResetStyles = {
+  root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+};
 var styles = {
   dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _bl8aglyw _156y147i _10aiglyw _aeld147i"
 };
@@ -190,6 +203,6 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     style: style,
     onCancel: handleCancel,
     "data-testid": testId,
-    className: ax([styles.dialog, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles.motion, consumerXcss])
+    className: ax([styles.dialog, surfaceResetStyles.root, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles.motion, consumerXcss])
   }, children);
 });

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

@@ -1,4 +1,3 @@
-
 ._15ns179n:popover-open{animation:var(--ds-popover-motion-enter)}
 ._19itglyw{border:none}
 ._1r041wug{inset:auto}
@@ -7,8 +6,11 @@
 ._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}
 ._19pkidpf{margin-top:0}
+._1i4q4jg8{overflow-wrap:normal}
+._1nmz4jg8{word-break:normal}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
+._1p1dglyw{text-transform:none}
 ._1pgl1lbj{animation-timing-function:var(--ds-easing-in-practical,cubic-bezier(.6,0,.8,.6))}
 ._1psg1ign:popover-open{animation-duration:var(--ds-duration-short,.15s)}
 ._1reoewfl{overflow-x:visible}
@@ -16,12 +18,15 @@
 ._2hwxidpf{margin-right:0}
 ._4t3i1wug{height:auto}
 ._5sagdn4k{animation-duration:var(--ds-duration-xshort,.1s)}
+._azhwidpf{text-indent:0}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
 ._k8m011k7{transition-property:overlay,display}
 ._n3tdidpf{padding-bottom:0}
 ._n70peoah:popover-open{animation-fill-mode:backwards}
+._o5724jg8{white-space:normal}
 ._o8i7indk:popover-open{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
 ._otyridpf{margin-bottom:0}
 ._u5f3idpf{padding-right:0}
+._y3gnv2br{text-align:start}
 @media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156yru3m{transition-duration:0s}._8rmvglyw:popover-open{animation-name:none}._2qm2ru3m:popover-open{transition-duration:0s}}

package/dist/esm/popover/popover.js

@@ -1,4 +1,4 @@
-/* popover.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popover.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
@@ -32,6 +32,21 @@ var supportsPopoverHint = once(function () {
 var popoverAnimationStyles = {
   root: "_y44vof1f _k8m011k7 _1oecdn4k _1s9z1a5r _1o51q7pw _5sagdn4k _1pgl1lbj _15ns179n _12t71ign _n70peoah _1psg1ign _o8i7indk _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m"
 };
+
+// Surface reset — neutralises inherited text-layout properties (e.g.
+// `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
+// top-layer element because, for CSS inheritance, it is still a DOM child of its
+// trigger (top-layer promotion is paint/stacking only; the legacy portal path
+// avoided this by rendering at `<body>`). Excludes `color`/`font` (theming) and
+// `direction`/`unicode-bidi` (RTL must inherit).
+//
+// KEEP IN SYNC with the identical `surfaceResetStyles` in `dialog/dialog-content.tsx`.
+// ADS forbids sharing styles across files (`no-exported-styles` /
+// `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
+// co-located and duplicated deliberately.
+var surfaceResetStyles = {
+  root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+};
 var styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug"
 };
@@ -324,6 +339,6 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     "aria-label": label,
     "aria-labelledby": labelledBy,
     "data-testid": testId,
-    className: ax([styles.root, preset && popoverAnimationStyles.root, consumerXcss])
+    className: ax([styles.root, surfaceResetStyles.root, preset && popoverAnimationStyles.root, consumerXcss])
   }, children);
 });

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

@@ -1,5 +1,5 @@
-
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m91wug{overflow-y:auto}
 ._1reo1wug{overflow-x:auto}
-._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._syazi7uo{color:var(--ds-text,#292a2e)}

package/dist/esm/popover-surface/popover-surface.js

@@ -1,9 +1,9 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./popover-surface.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 var styles = {
-  root: "_2rkofajl _1reo1wug _18m91wug _bfhk1bhr _16qs130s"
+  root: "_2rkofajl _1reo1wug _18m91wug _bfhk1bhr _syazi7uo _16qs130s"
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "1.8.1",
+	"version": "1.10.0",
 	"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",
@@ -35,14 +35,14 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/browser-apis": "^1.1.0",
+		"@atlaskit/browser-apis": "^1.2.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^4.1.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^16.0.0",
+		"@atlaskit/tokens": "^16.2.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.20.0",
+		"@compiled/react": "^1.0.0",
 		"bind-event-listener": "^3.0.0",
 		"raf-schd": "^4.0.3"
 	},
@@ -56,7 +56,7 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/heading": "^6.2.0",
 		"@atlaskit/lozenge": "^14.1.0",
-		"@atlaskit/primitives": "^21.0.0",
+		"@atlaskit/primitives": "^22.1.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlassian/ssr-tests": "workspace:^",