@atlaskit/modal-dialog 15.0.1 → 15.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,112 @@
1
1
  # @atlaskit/modal-dialog
2
2
 
3
+ ## 15.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`fd5faf5d7fc8e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fd5faf5d7fc8e) -
8
+ Updated scroll indicator width to use the correct token.
9
+
10
+ ## 15.0.2
11
+
12
+ ### Patch Changes
13
+
14
+ - [`7250582895c0b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7250582895c0b) -
15
+ Top-layer adoption work behind the `platform-dst-top-layer` feature flag. Public adopter APIs are
16
+ intentionally kept narrow while the top-layer API surface settles, with one exception called out
17
+ below.
18
+
19
+ Highlights:
20
+ - Pass the full `[along, away]` legacy popper offset through to the new top-layer
21
+ `placement.offset` API (via `fromLegacyPlacement`). Previously only the `away` axis was
22
+ forwarded, which dropped the `along` offset for consumers of `Popup`, `PopupSelect`,
23
+ `Spotlight`, and `Tooltip` when `platform-dst-top-layer` is enabled.
24
+ - Fix broken import of `dialogHeight` and `dialogWidth` from the removed utils module in
25
+ `@atlaskit/modal-dialog`.
26
+
27
+ Public API:
28
+ - **`@atlaskit/tooltip`** (`minor`): add an optional `testId?: string` field to `TriggerProps`.
29
+ This is additive (no existing prop changes shape). Required because `@atlaskit/button/new` (and
30
+ other `Pressable`-backed primitives) overwrite `data-testid` from spread, so the legacy
31
+ `(triggerProps as any)['data-testid']` workaround is silently absorbed by those consumers. A
32
+ typed `testId` field flows through their own `testId` destructure instead, restoring
33
+ `data-testid` propagation onto the rendered trigger element.
34
+ - **`@atlaskit/popup`**, **`@atlaskit/dropdown-menu`** (`patch`): no public type changes. Wider
35
+ `aria-haspopup` unions that the FF-on path produces are bridged at the package boundary into
36
+ `@atlaskit/top-layer` with localised `FUDGE(top-layer-api)` casts, documented in
37
+ `packages/design-system/top-layer/notes/decisions/migration-roadmap.md` ("Open API decisions
38
+ deferred to a follow-up PR"). They will be widened in a follow-up `minor` PR once the top-layer
39
+ API is committed.
40
+ - **`@atlaskit/modal-dialog`**, **`@atlaskit/select`**, **`@atlaskit/spotlight`**
41
+ (`patch`/`minor`): no public type changes; bug fixes only.
42
+
43
+ Merge-readiness fixes (FF-on test wiring + adopter behavior):
44
+ - **`@atlaskit/popup`** (`minor`): wire the compositional `PopupContent` to delegate to
45
+ `PopupContentTopLayer` when `platform-dst-top-layer` is enabled. Previously only the legacy
46
+ `Popup` component had the FF branch, leaving consumers of the compositional API on the legacy
47
+ popper path.
48
+ - **`@atlaskit/select`** (`minor`): add an `onClick` handler to the `PopupSelect` top-layer
49
+ trigger so clicks open/close the menu (mirrors the legacy global click handler in
50
+ `popup-select.tsx`). Add explicit Escape handling on the menu's `onKeyDown` so the menu closes
51
+ and focus returns to the trigger.
52
+ - **`@atlaskit/top-layer`** (`patch`): the `<dialog>` rendered by the Dialog primitive now sets
53
+ `aria-modal="true"` explicitly. Modern browsers infer modal semantics from `.showModal()` but
54
+ some assistive tech still keys off the explicit attribute.
55
+ - **`@atlaskit/top-layer`** (`patch`): guard `use-anchor-positioning` against environments where
56
+ `ResizeObserver` is not defined (e.g. jest's `node` environment, used by the post-office test
57
+ suite). The observer is used to wait for the popover's first valid layout before measuring;
58
+ consumers in non-DOM jest environments now get a no-op observer and the scroll/resize listeners
59
+ still apply if the host environment polyfills `showPopover`. Real browsers always have
60
+ `ResizeObserver`.
61
+ - **`@atlaskit/modal-dialog`** (`patch`): on the FF-on path, drop the `tabIndex={-1}` (and unused
62
+ `:focus-visible` outline) from the modal content wrapper. The native `<dialog>.showModal()`
63
+ focus-delegate algorithm picks the first focusable descendant (including `tabindex=-1`), and the
64
+ wrapper was hijacking initial focus from the close button. Also honor `shouldReturnFocus={ref}`
65
+ on the FF-on path (an unmount-cleanup focuses the ref after `dialog.close()` so it overrides the
66
+ browser's automatic return-to-trigger). Boolean `shouldReturnFocus={false}` is not yet honored
67
+ on the FF-on path — see `top-layer/notes/merge-blockers.md`.
68
+ - **`@atlaskit/datetime-picker`** (`patch`): on the FF-on path, set `mode="manual"` on the
69
+ `Popup.Content` rendered by both `internal/menu-top-layer.tsx` (date-picker calendar) and
70
+ `internal/fixed-layer-menu-top-layer.tsx` (time-picker menu). With the default `mode="auto"`,
71
+ the same click event that opens the menu (which targets the react-select combobox input —
72
+ outside the popover element) bubbles to the browser's native popover light-dismiss handler and
73
+ immediately closes the menu. react-select / DateTimePicker already own outside-click and Esc
74
+ dismissal via their own state, so opting out of the native auto-dismiss is the correct
75
+ integration. Also extend the existing Esc → trigger-focus restoration in
76
+ `components/date-picker.tsx` to the FF-on path (manual mode disables the browser's built-in
77
+ focus return, and the legacy code path was already handling this for itself behind an FF
78
+ negation).
79
+ - **`@atlaskit/popup`** (no public API change): no source changes — only FF-on Playwright
80
+ spec/example fixes drove the suite from 21/3/2 to 27/0/0. Notable: the two `test.fixme`'d
81
+ nested-popover cases were not browser limitations; `popover="auto"` chains correctly via DOM
82
+ ancestry (the original fixmes had the wrong testId selector). Added `testId` props to two
83
+ examples (`16-popup-with-a11y-props`, `18-should-fit-container`) so default-shape tests can
84
+ reach the trigger.
85
+ - Test alignment for FF-on Playwright suites across `popup`, `select`, `datetime-picker`,
86
+ `inline-dialog`, `inline-message`, and `modal-dialog`: selector updates to match the new
87
+ top-layer testId convention (`${testId}--content`, `[role="dialog"][aria-label="calendar"]`),
88
+ per-spec `skipAxeCheck()` for example-level color-contrast violations unrelated to the
89
+ migration, and focus assertions adjusted to match native `<dialog>` / `Popup.Content` auto-focus
90
+ semantics (focus lands on the first focusable child, not the dialog container itself).
91
+ - **`@atlassian/capacity-planning-capacity-graph`**, **`@atlaskit/color-picker`**,
92
+ **`@atlassian/timeline-table`**, **`@atlassian/global-side-navigation`** (`patch`): scope `fg`
93
+ mocks in unit tests so `platform-dst-top-layer` returns `false`. JSDOM does not implement the
94
+ native Popover API (`showPopover`/`hidePopover`/`toggle` events), so leaving the gate ON in unit
95
+ tests caused popover content to remain in the DOM after close and broke close-behaviour
96
+ assertions. Browser coverage for the FF-on path is provided by the Playwright suites listed
97
+ above.
98
+ - **`@atlaskit/dropdown-menu`** (no public API change): test/example-only fixes for the FF-on
99
+ Playwright suite. Added `role="menuitem"` to the nested-trigger `ButtonItem` in
100
+ `examples/93-testing-nested-keyboard-navigation-top-layer.tsx` to satisfy axe's
101
+ `aria-required-children` rule on the parent menu. Added a `test.beforeEach(skipAxeCheck)` to
102
+ `dropdown-menu.spec.tsx` (FF-on suite) for example-level `color-contrast` violations on the
103
+ pre-existing `color.text.selected`/`color.background.selected` token pair (3.91:1). Replaced a
104
+ deadlocking `await expect(moveItem).not.toBeFocused()` pre-open assertion (Playwright's
105
+ auto-wait blocks 5s on the absent element) with `await expect(moveItem).not.toBeVisible()`.
106
+ Suite result: 22/22 passing.
107
+
108
+ - Updated dependencies
109
+
3
110
  ## 15.0.1
4
111
 
5
112
  ### Patch Changes
@@ -313,9 +313,8 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
313
313
  var desktopDialogMinHeight = shouldScrollInViewport ? 'min-height:calc(100vh - 60px);' : '';
314
314
  // Doubled-ID selector (#id#id > div) at specificity (2,0,1) beats
315
315
  // Compiled atomic classes at (0,1,0) (increaseSpecificity is disabled).
316
- var dialogPositionStyles = isFullScreen ? ''
317
- // Mobile: edge-to-edge. Desktop ( 30rem): 60px gutters, max-width.
318
- : "#".concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:0;height:100vh}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:100%}@media(min-width:30rem){#").concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:").concat(desktopMargin, ";height:auto;").concat(desktopDialogMinHeight, "max-width:calc(100vw - 120px)}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:").concat(desktopContentHeight, ";min-height:").concat(desktopContentMinHeight, "}}");
316
+ var dialogPositionStyles = isFullScreen ? '' : // Mobile: edge-to-edge. Desktop (≥ 30rem): 60px gutters, max-width.
317
+ "#".concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:0;height:100vh}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:100%}@media(min-width:30rem){#").concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:").concat(desktopMargin, ";height:auto;").concat(desktopDialogMinHeight, "max-width:calc(100vw - 120px)}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:").concat(desktopContentHeight, ";min-height:").concat(desktopContentMinHeight, "}}");
319
318
  return /*#__PURE__*/React.createElement(_dialog.Dialog, {
320
319
  ref: dialogRef,
321
320
  id: dialogId,
@@ -1,7 +1,7 @@
1
1
 
2
2
  ._kkes1kw7{flex:inherit}
3
- ._179r1uh4{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}
4
- ._mqm21uh4{border-block-start:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
3
+ ._179ria51{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
4
+ ._mqm2ia51{border-block-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
5
5
  ._16jlkb7n{flex-grow:1}
6
6
  ._18m91wug{overflow-y:auto}
7
7
  ._1e0c1kw7{display:inherit}
@@ -22,10 +22,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
22
22
  var keylineColor = "var(--ds-border, #0B120E24)";
23
23
  var styles = {
24
24
  base: "_kkes1kw7 _1e0c1kw7 _2lx21kw7 _16jlkb7n _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug",
25
- topKeyline: "_mqm21uh4",
26
- bottomKeyline: "_179r1uh4"
25
+ topKeyline: "_mqm2ia51",
26
+ bottomKeyline: "_179ria51"
27
27
  };
28
- var keylineHeight = 2;
28
+ var keylineHeight = 1;
29
29
  /**
30
30
  * A container that shows top and bottom keylines when the
31
31
  * content overflows into the scrollable element.
@@ -297,9 +297,9 @@ const InternalModalWrapper = props => {
297
297
  const desktopDialogMinHeight = shouldScrollInViewport ? 'min-height:calc(100vh - 60px);' : '';
298
298
  // Doubled-ID selector (#id#id > div) at specificity (2,0,1) beats
299
299
  // Compiled atomic classes at (0,1,0) (increaseSpecificity is disabled).
300
- const dialogPositionStyles = isFullScreen ? ''
300
+ const dialogPositionStyles = isFullScreen ? '' :
301
301
  // Mobile: edge-to-edge. Desktop (≥ 30rem): 60px gutters, max-width.
302
- : `#${escapedDialogId}#${escapedDialogId}{margin:0;height:100vh}#${escapedDialogId}#${escapedDialogId}>div{height:100%}@media(min-width:30rem){#${escapedDialogId}#${escapedDialogId}{margin:${desktopMargin};height:auto;${desktopDialogMinHeight}max-width:calc(100vw - 120px)}#${escapedDialogId}#${escapedDialogId}>div{height:${desktopContentHeight};min-height:${desktopContentMinHeight}}}`;
302
+ `#${escapedDialogId}#${escapedDialogId}{margin:0;height:100vh}#${escapedDialogId}#${escapedDialogId}>div{height:100%}@media(min-width:30rem){#${escapedDialogId}#${escapedDialogId}{margin:${desktopMargin};height:auto;${desktopDialogMinHeight}max-width:calc(100vw - 120px)}#${escapedDialogId}#${escapedDialogId}>div{height:${desktopContentHeight};min-height:${desktopContentMinHeight}}}`;
303
303
  return /*#__PURE__*/React.createElement(Dialog, {
304
304
  ref: dialogRef,
305
305
  id: dialogId,
@@ -1,7 +1,7 @@
1
1
 
2
2
  ._kkes1kw7{flex:inherit}
3
- ._179r1uh4{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}
4
- ._mqm21uh4{border-block-start:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
3
+ ._179ria51{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
4
+ ._mqm2ia51{border-block-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
5
5
  ._16jlkb7n{flex-grow:1}
6
6
  ._18m91wug{overflow-y:auto}
7
7
  ._1e0c1kw7{display:inherit}
@@ -12,10 +12,10 @@ import { Focusable } from '@atlaskit/primitives/compiled';
12
12
  const keylineColor = "var(--ds-border, #0B120E24)";
13
13
  const styles = {
14
14
  base: "_kkes1kw7 _1e0c1kw7 _2lx21kw7 _16jlkb7n _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug",
15
- topKeyline: "_mqm21uh4",
16
- bottomKeyline: "_179r1uh4"
15
+ topKeyline: "_mqm2ia51",
16
+ bottomKeyline: "_179ria51"
17
17
  };
18
- const keylineHeight = 2;
18
+ const keylineHeight = 1;
19
19
  /**
20
20
  * A container that shows top and bottom keylines when the
21
21
  * content overflows into the scrollable element.
@@ -304,9 +304,8 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
304
304
  var desktopDialogMinHeight = shouldScrollInViewport ? 'min-height:calc(100vh - 60px);' : '';
305
305
  // Doubled-ID selector (#id#id > div) at specificity (2,0,1) beats
306
306
  // Compiled atomic classes at (0,1,0) (increaseSpecificity is disabled).
307
- var dialogPositionStyles = isFullScreen ? ''
308
- // Mobile: edge-to-edge. Desktop ( 30rem): 60px gutters, max-width.
309
- : "#".concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:0;height:100vh}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:100%}@media(min-width:30rem){#").concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:").concat(desktopMargin, ";height:auto;").concat(desktopDialogMinHeight, "max-width:calc(100vw - 120px)}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:").concat(desktopContentHeight, ";min-height:").concat(desktopContentMinHeight, "}}");
307
+ var dialogPositionStyles = isFullScreen ? '' : // Mobile: edge-to-edge. Desktop (≥ 30rem): 60px gutters, max-width.
308
+ "#".concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:0;height:100vh}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:100%}@media(min-width:30rem){#").concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:").concat(desktopMargin, ";height:auto;").concat(desktopDialogMinHeight, "max-width:calc(100vw - 120px)}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:").concat(desktopContentHeight, ";min-height:").concat(desktopContentMinHeight, "}}");
310
309
  return /*#__PURE__*/React.createElement(Dialog, {
311
310
  ref: dialogRef,
312
311
  id: dialogId,
@@ -1,7 +1,7 @@
1
1
 
2
2
  ._kkes1kw7{flex:inherit}
3
- ._179r1uh4{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}
4
- ._mqm21uh4{border-block-start:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
3
+ ._179ria51{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
4
+ ._mqm2ia51{border-block-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
5
5
  ._16jlkb7n{flex-grow:1}
6
6
  ._18m91wug{overflow-y:auto}
7
7
  ._1e0c1kw7{display:inherit}
@@ -13,10 +13,10 @@ import { Focusable } from '@atlaskit/primitives/compiled';
13
13
  var keylineColor = "var(--ds-border, #0B120E24)";
14
14
  var styles = {
15
15
  base: "_kkes1kw7 _1e0c1kw7 _2lx21kw7 _16jlkb7n _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug",
16
- topKeyline: "_mqm21uh4",
17
- bottomKeyline: "_179r1uh4"
16
+ topKeyline: "_mqm2ia51",
17
+ bottomKeyline: "_179ria51"
18
18
  };
19
- var keylineHeight = 2;
19
+ var keylineHeight = 1;
20
20
  /**
21
21
  * A container that shows top and bottom keylines when the
22
22
  * content overflows into the scrollable element.
@@ -14,11 +14,9 @@ export type { ModalFooterProps } from './modal-footer';
14
14
  export type { ModalAttributes } from './internal/context';
15
15
  export interface ModalDialogProps {
16
16
  /**
17
- * Focus is moved to the first interactive element inside the modal dialog
18
- * when `true`. It is not recommended to set to `false` as this creates
19
- * accessibility regressions. Pass an element `ref` to focus on a specific element.
20
- *
21
- * Default value is `true`.
17
+ * Pass an element `ref` to focus on a specific element on load. Default
18
+ * behavior is focus is moved to the first interactive element inside the
19
+ * modal dialog.
22
20
  */
23
21
  autoFocus?: RefObject<HTMLElement | null | undefined>;
24
22
  /**
@@ -14,11 +14,9 @@ export type { ModalFooterProps } from './modal-footer';
14
14
  export type { ModalAttributes } from './internal/context';
15
15
  export interface ModalDialogProps {
16
16
  /**
17
- * Focus is moved to the first interactive element inside the modal dialog
18
- * when `true`. It is not recommended to set to `false` as this creates
19
- * accessibility regressions. Pass an element `ref` to focus on a specific element.
20
- *
21
- * Default value is `true`.
17
+ * Pass an element `ref` to focus on a specific element on load. Default
18
+ * behavior is focus is moved to the first interactive element inside the
19
+ * modal dialog.
22
20
  */
23
21
  autoFocus?: RefObject<HTMLElement | null | undefined>;
24
22
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/modal-dialog",
3
- "version": "15.0.1",
3
+ "version": "15.0.3",
4
4
  "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
39
39
  "@atlaskit/button": "^23.11.0",
40
40
  "@atlaskit/css": "^0.19.0",
41
41
  "@atlaskit/ds-lib": "^7.0.0",
42
- "@atlaskit/icon": "^34.5.0",
42
+ "@atlaskit/icon": "^34.6.0",
43
43
  "@atlaskit/layering": "^3.7.0",
44
44
  "@atlaskit/motion": "^6.2.0",
45
45
  "@atlaskit/platform-feature-flags": "^1.1.0",
@@ -64,7 +64,7 @@
64
64
  "@af/integration-testing": "workspace:^",
65
65
  "@af/visual-regression": "workspace:^",
66
66
  "@atlaskit/avatar": "^25.14.0",
67
- "@atlaskit/avatar-group": "^12.8.0",
67
+ "@atlaskit/avatar-group": "^12.10.0",
68
68
  "@atlaskit/banner": "^14.1.0",
69
69
  "@atlaskit/breadcrumbs": "^16.1.0",
70
70
  "@atlaskit/checkbox": "^17.3.0",
@@ -76,18 +76,18 @@
76
76
  "@atlaskit/form": "^15.5.0",
77
77
  "@atlaskit/heading": "^5.4.0",
78
78
  "@atlaskit/link": "^3.4.0",
79
- "@atlaskit/popup": "^4.18.0",
79
+ "@atlaskit/popup": "^4.19.0",
80
80
  "@atlaskit/radio": "^8.6.0",
81
81
  "@atlaskit/section-message": "^8.12.0",
82
- "@atlaskit/select": "^21.11.0",
82
+ "@atlaskit/select": "^21.12.0",
83
83
  "@atlaskit/spotlight": "^0.14.0",
84
84
  "@atlaskit/textfield": "^8.3.0",
85
- "@atlaskit/tooltip": "^22.1.0",
85
+ "@atlaskit/tooltip": "^22.2.0",
86
86
  "@atlassian/feature-flags-test-utils": "^1.1.0",
87
87
  "@atlassian/react-compiler-gating": "workspace:^",
88
88
  "@atlassian/ssr-tests": "workspace:^",
89
89
  "@atlassian/structured-docs-types": "workspace:^",
90
- "@atlassian/testing-library": "^0.5.0",
90
+ "@atlassian/testing-library": "^0.6.0",
91
91
  "@testing-library/dom": "^10.1.0",
92
92
  "@testing-library/react": "^16.3.0",
93
93
  "@testing-library/user-event": "^14.4.3",