@atlaskit/popup 4.18.0 → 4.19.1
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 +109 -0
- package/dist/cjs/popper-wrapper.compiled.css +2 -0
- package/dist/cjs/popper-wrapper.js +4 -2
- package/dist/es2019/popper-wrapper.compiled.css +2 -0
- package/dist/es2019/popper-wrapper.js +4 -2
- package/dist/esm/popper-wrapper.compiled.css +2 -0
- package/dist/esm/popper-wrapper.js +4 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,114 @@
|
|
|
1
1
|
# @atlaskit/popup
|
|
2
2
|
|
|
3
|
+
## 4.19.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`50154b7d33050`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/50154b7d33050) -
|
|
8
|
+
Fixed styling related issues behind the new motion uplift
|
|
9
|
+
|
|
10
|
+
## 4.19.0
|
|
11
|
+
|
|
12
|
+
### Minor 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
|
+
### Patch Changes
|
|
109
|
+
|
|
110
|
+
- Updated dependencies
|
|
111
|
+
|
|
3
112
|
## 4.18.0
|
|
4
113
|
|
|
5
114
|
### Minor Changes
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
7
7
|
._18m91wug{overflow-y:auto}
|
|
8
8
|
._1bsb1osq{width:100%}
|
|
9
|
+
._1e0c1txw{display:flex}
|
|
9
10
|
._1e0c1ule{display:block}
|
|
10
11
|
._1pby1nn1{z-index:400}
|
|
11
12
|
._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
|
|
@@ -13,6 +14,7 @@
|
|
|
13
14
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
14
15
|
._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
|
|
15
16
|
._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
|
|
17
|
+
._c71l1kw7{max-height:inherit}
|
|
16
18
|
._c71ldtre{max-height:50vh}
|
|
17
19
|
._kqsw1n9t{position:fixed}
|
|
18
20
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
@@ -32,7 +32,8 @@ var fullWidthStyles = null;
|
|
|
32
32
|
var wrapperStyles = {
|
|
33
33
|
root: "_2rko12b0 _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs130s _syazi7uo _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36",
|
|
34
34
|
rootT26Shape: "_2rko1mok",
|
|
35
|
-
fullWidth: "_1bsb1osq"
|
|
35
|
+
fullWidth: "_1bsb1osq",
|
|
36
|
+
motion: "_c71l1kw7 _1e0c1txw"
|
|
36
37
|
};
|
|
37
38
|
var scrollableStyles = null;
|
|
38
39
|
var blanketStyles = null;
|
|
@@ -261,7 +262,8 @@ function PopperWrapper(_ref) {
|
|
|
261
262
|
className: (0, _runtime.ax)([shouldFitContainer && wrapperStyles.fullWidth])
|
|
262
263
|
}, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(_motion.Motion, {
|
|
263
264
|
enteringAnimation: placementMap[placement].enter,
|
|
264
|
-
exitingAnimation: placementMap[placement].exit
|
|
265
|
+
exitingAnimation: placementMap[placement].exit,
|
|
266
|
+
xcss: wrapperStyles.motion
|
|
265
267
|
}, popupContainer));
|
|
266
268
|
return /*#__PURE__*/React.createElement(_react.Fragment, null, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
|
|
267
269
|
className: (0, _runtime.ax)(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
7
7
|
._18m91wug{overflow-y:auto}
|
|
8
8
|
._1bsb1osq{width:100%}
|
|
9
|
+
._1e0c1txw{display:flex}
|
|
9
10
|
._1e0c1ule{display:block}
|
|
10
11
|
._1pby1nn1{z-index:400}
|
|
11
12
|
._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
|
|
@@ -13,6 +14,7 @@
|
|
|
13
14
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
14
15
|
._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
|
|
15
16
|
._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
|
|
17
|
+
._c71l1kw7{max-height:inherit}
|
|
16
18
|
._c71ldtre{max-height:50vh}
|
|
17
19
|
._kqsw1n9t{position:fixed}
|
|
18
20
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
@@ -16,7 +16,8 @@ const fullWidthStyles = null;
|
|
|
16
16
|
const wrapperStyles = {
|
|
17
17
|
root: "_2rko12b0 _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs130s _syazi7uo _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36",
|
|
18
18
|
rootT26Shape: "_2rko1mok",
|
|
19
|
-
fullWidth: "_1bsb1osq"
|
|
19
|
+
fullWidth: "_1bsb1osq",
|
|
20
|
+
motion: "_c71l1kw7 _1e0c1txw"
|
|
20
21
|
};
|
|
21
22
|
const scrollableStyles = null;
|
|
22
23
|
const blanketStyles = null;
|
|
@@ -239,7 +240,8 @@ function PopperWrapper({
|
|
|
239
240
|
className: ax([shouldFitContainer && wrapperStyles.fullWidth])
|
|
240
241
|
}, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
|
|
241
242
|
enteringAnimation: placementMap[placement].enter,
|
|
242
|
-
exitingAnimation: placementMap[placement].exit
|
|
243
|
+
exitingAnimation: placementMap[placement].exit,
|
|
244
|
+
xcss: wrapperStyles.motion
|
|
243
245
|
}, popupContainer));
|
|
244
246
|
return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift-popup') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
|
|
245
247
|
className: ax(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
7
7
|
._18m91wug{overflow-y:auto}
|
|
8
8
|
._1bsb1osq{width:100%}
|
|
9
|
+
._1e0c1txw{display:flex}
|
|
9
10
|
._1e0c1ule{display:block}
|
|
10
11
|
._1pby1nn1{z-index:400}
|
|
11
12
|
._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
|
|
@@ -13,6 +14,7 @@
|
|
|
13
14
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
14
15
|
._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
|
|
15
16
|
._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
|
|
17
|
+
._c71l1kw7{max-height:inherit}
|
|
16
18
|
._c71ldtre{max-height:50vh}
|
|
17
19
|
._kqsw1n9t{position:fixed}
|
|
18
20
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
@@ -23,7 +23,8 @@ var fullWidthStyles = null;
|
|
|
23
23
|
var wrapperStyles = {
|
|
24
24
|
root: "_2rko12b0 _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs130s _syazi7uo _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36",
|
|
25
25
|
rootT26Shape: "_2rko1mok",
|
|
26
|
-
fullWidth: "_1bsb1osq"
|
|
26
|
+
fullWidth: "_1bsb1osq",
|
|
27
|
+
motion: "_c71l1kw7 _1e0c1txw"
|
|
27
28
|
};
|
|
28
29
|
var scrollableStyles = null;
|
|
29
30
|
var blanketStyles = null;
|
|
@@ -252,7 +253,8 @@ function PopperWrapper(_ref) {
|
|
|
252
253
|
className: ax([shouldFitContainer && wrapperStyles.fullWidth])
|
|
253
254
|
}, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
|
|
254
255
|
enteringAnimation: placementMap[placement].enter,
|
|
255
|
-
exitingAnimation: placementMap[placement].exit
|
|
256
|
+
exitingAnimation: placementMap[placement].exit,
|
|
257
|
+
xcss: wrapperStyles.motion
|
|
256
258
|
}, popupContainer));
|
|
257
259
|
return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift-popup') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
|
|
258
260
|
className: ax(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
|