@atlaskit/top-layer 0.12.0 → 0.12.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 +8 -0
- package/dist/cjs/entry-points/use-arrow-navigation.js +3 -2
- package/dist/cjs/internal/placement-to-position-area.js +43 -0
- package/dist/cjs/internal/placement-to-try-fallbacks.js +82 -0
- package/dist/cjs/internal/use-anchor-position.js +18 -131
- package/dist/cjs/popup/popup-content.js +2 -2
- package/dist/cjs/popup/popup-context.js +2 -38
- package/dist/cjs/popup/popup-provider.js +15 -0
- package/dist/cjs/popup/popup-trigger-function.js +2 -2
- package/dist/cjs/popup/popup-trigger.js +2 -2
- package/dist/cjs/popup/popup.js +2 -2
- package/dist/cjs/popup/use-maybe-popup-context.js +17 -0
- package/dist/cjs/popup/use-popup-context.js +20 -0
- package/dist/cjs/use-arrow-navigation/index.js +3 -2
- package/dist/cjs/use-arrow-navigation/is-at-current-menu-level.js +87 -0
- package/dist/cjs/use-arrow-navigation/use-arrow-navigation.js +0 -82
- package/dist/es2019/entry-points/use-arrow-navigation.js +2 -1
- package/dist/es2019/internal/placement-to-position-area.js +40 -0
- package/dist/es2019/internal/placement-to-try-fallbacks.js +77 -0
- package/dist/es2019/internal/use-anchor-position.js +2 -116
- package/dist/es2019/popup/popup-content.js +2 -1
- package/dist/es2019/popup/popup-context.js +2 -36
- package/dist/es2019/popup/popup-provider.js +10 -0
- package/dist/es2019/popup/popup-trigger-function.js +1 -1
- package/dist/es2019/popup/popup-trigger.js +2 -1
- package/dist/es2019/popup/popup.js +1 -1
- package/dist/es2019/popup/use-maybe-popup-context.js +12 -0
- package/dist/es2019/popup/use-popup-context.js +15 -0
- package/dist/es2019/use-arrow-navigation/index.js +2 -1
- package/dist/es2019/use-arrow-navigation/is-at-current-menu-level.js +81 -0
- package/dist/es2019/use-arrow-navigation/use-arrow-navigation.js +0 -81
- package/dist/esm/entry-points/use-arrow-navigation.js +2 -1
- package/dist/esm/internal/placement-to-position-area.js +38 -0
- package/dist/esm/internal/placement-to-try-fallbacks.js +76 -0
- package/dist/esm/internal/use-anchor-position.js +16 -127
- package/dist/esm/popup/popup-content.js +2 -1
- package/dist/esm/popup/popup-context.js +2 -36
- package/dist/esm/popup/popup-provider.js +10 -0
- package/dist/esm/popup/popup-trigger-function.js +1 -1
- package/dist/esm/popup/popup-trigger.js +2 -1
- package/dist/esm/popup/popup.js +1 -1
- package/dist/esm/popup/use-maybe-popup-context.js +12 -0
- package/dist/esm/popup/use-popup-context.js +15 -0
- package/dist/esm/use-arrow-navigation/index.js +2 -1
- package/dist/esm/use-arrow-navigation/is-at-current-menu-level.js +81 -0
- package/dist/esm/use-arrow-navigation/use-arrow-navigation.js +0 -81
- package/dist/types/entry-points/use-arrow-navigation.d.ts +2 -1
- package/dist/types/internal/placement-to-position-area.d.ts +21 -0
- package/dist/types/internal/placement-to-try-fallbacks.d.ts +36 -0
- package/dist/types/internal/use-anchor-position.d.ts +0 -55
- package/dist/types/popup/popup-context.d.ts +1 -21
- package/dist/types/popup/popup-provider.d.ts +10 -0
- package/dist/types/popup/use-maybe-popup-context.d.ts +8 -0
- package/dist/types/popup/use-popup-context.d.ts +7 -0
- package/dist/types/use-arrow-navigation/index.d.ts +2 -1
- package/dist/types/use-arrow-navigation/is-at-current-menu-level.d.ts +48 -0
- package/dist/types/use-arrow-navigation/use-arrow-navigation.d.ts +0 -48
- package/dist/types-ts4.5/entry-points/use-arrow-navigation.d.ts +2 -1
- package/dist/types-ts4.5/internal/placement-to-position-area.d.ts +21 -0
- package/dist/types-ts4.5/internal/placement-to-try-fallbacks.d.ts +36 -0
- package/dist/types-ts4.5/internal/use-anchor-position.d.ts +0 -55
- package/dist/types-ts4.5/popup/popup-context.d.ts +1 -21
- package/dist/types-ts4.5/popup/popup-provider.d.ts +10 -0
- package/dist/types-ts4.5/popup/use-maybe-popup-context.d.ts +8 -0
- package/dist/types-ts4.5/popup/use-popup-context.d.ts +7 -0
- package/dist/types-ts4.5/use-arrow-navigation/index.d.ts +2 -1
- package/dist/types-ts4.5/use-arrow-navigation/is-at-current-menu-level.d.ts +48 -0
- package/dist/types-ts4.5/use-arrow-navigation/use-arrow-navigation.d.ts +0 -48
- package/package.json +2 -2
- package/dist/cjs/arrow/index.js +0 -131
- package/dist/cjs/arrow/types.js +0 -5
- package/dist/es2019/arrow/index.js +0 -269
- package/dist/es2019/arrow/types.js +0 -1
- package/dist/esm/arrow/index.js +0 -124
- package/dist/esm/arrow/types.js +0 -1
- package/dist/types/arrow/index.d.ts +0 -24
- package/dist/types/arrow/types.d.ts +0 -29
- package/dist/types-ts4.5/arrow/index.d.ts +0 -24
- package/dist/types-ts4.5/arrow/types.d.ts +0 -29
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/top-layer
|
|
2
2
|
|
|
3
|
+
## 0.12.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`c3913985e2415`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c3913985e2415) -
|
|
8
|
+
Internal: remove unused `src/arrow/` module. The `arrow()` preset and `TArrowPreset` type were
|
|
9
|
+
never exported from `package.json` and had no consumers in the codebase.
|
|
10
|
+
|
|
3
11
|
## 0.12.0
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
Object.defineProperty(exports, "isAtCurrentMenuLevel", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function get() {
|
|
9
|
-
return
|
|
9
|
+
return _isAtCurrentMenuLevel.isAtCurrentMenuLevel;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
Object.defineProperty(exports, "useArrowNavigation", {
|
|
@@ -15,4 +15,5 @@ Object.defineProperty(exports, "useArrowNavigation", {
|
|
|
15
15
|
return _useArrowNavigation.useArrowNavigation;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
-
var _useArrowNavigation = require("../use-arrow-navigation");
|
|
18
|
+
var _useArrowNavigation = require("../use-arrow-navigation");
|
|
19
|
+
var _isAtCurrentMenuLevel = require("../use-arrow-navigation/is-at-current-menu-level");
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.placementToPositionArea = placementToPositionArea;
|
|
7
|
+
var _resolvePlacement = require("./resolve-placement");
|
|
8
|
+
/**
|
|
9
|
+
* Resolves placement options to CSS `position-area` syntax.
|
|
10
|
+
*
|
|
11
|
+
* The `align` field represents the *visual* alignment:
|
|
12
|
+
* - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
|
|
13
|
+
* - `align: 'end'` means "aligned to the trigger's end edge"
|
|
14
|
+
* - `align: 'center'` means centered (single-axis position-area)
|
|
15
|
+
*
|
|
16
|
+
* CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
|
|
17
|
+
* Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
|
|
18
|
+
* This function handles the inversion internally.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
|
|
22
|
+
* placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
|
|
23
|
+
* placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } }) // → 'block-end span-inline-start'
|
|
24
|
+
*/
|
|
25
|
+
function placementToPositionArea(_ref) {
|
|
26
|
+
var placement = _ref.placement;
|
|
27
|
+
var _getPlacement = (0, _resolvePlacement.getPlacement)({
|
|
28
|
+
placement: placement
|
|
29
|
+
}),
|
|
30
|
+
axis = _getPlacement.axis,
|
|
31
|
+
edge = _getPlacement.edge,
|
|
32
|
+
align = _getPlacement.align;
|
|
33
|
+
var edgeValue = "".concat(axis, "-").concat(edge);
|
|
34
|
+
if (align === 'center') {
|
|
35
|
+
return edgeValue;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Cross-axis name: block ↔ inline
|
|
39
|
+
var crossAxis = axis === 'block' ? 'inline' : 'block';
|
|
40
|
+
// Invert align → CSS span direction: visual 'start' → span toward 'end'
|
|
41
|
+
var spanDir = align === 'start' ? 'end' : 'start';
|
|
42
|
+
return "".concat(edgeValue, " span-").concat(crossAxis, "-").concat(spanDir);
|
|
43
|
+
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.placementToTryFallbacks = placementToTryFallbacks;
|
|
8
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
|
+
var _resolvePlacement = require("./resolve-placement");
|
|
10
|
+
/**
|
|
11
|
+
* Returns `position-try-fallbacks` value based on placement.
|
|
12
|
+
*
|
|
13
|
+
* For centered placements, includes cross-axis aligned position-area
|
|
14
|
+
* values so the browser can shift the popover along the cross-axis
|
|
15
|
+
* when the centered position would overflow the viewport edge.
|
|
16
|
+
*
|
|
17
|
+
* Fallback order for centered placements (e.g. `block-end`):
|
|
18
|
+
* 1. Same edge, start-aligned (shift for near-edge overflow)
|
|
19
|
+
* 2. Same edge, end-aligned (shift for far-edge overflow)
|
|
20
|
+
* 3. Flipped edge, centered
|
|
21
|
+
* 4. Flipped edge, start-aligned
|
|
22
|
+
* 5. Flipped edge, end-aligned
|
|
23
|
+
*
|
|
24
|
+
* For aligned placements (start/end), includes the same-edge centered
|
|
25
|
+
* position as fallbacks so the browser can try centering when the aligned
|
|
26
|
+
* position would overflow, before flipping to the opposite edge.
|
|
27
|
+
*
|
|
28
|
+
* **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
|
|
29
|
+
*
|
|
30
|
+
* When a popup is in a viewport corner (e.g. inline-end align-end at the
|
|
31
|
+
* top-right), flipping only the primary axis (`flip-inline`) moves the popup
|
|
32
|
+
* to the left but keeps the same cross-axis span direction (e.g. upward),
|
|
33
|
+
* which is still off-screen. The combined keyword `flip-inline flip-block`
|
|
34
|
+
* mirrors the popup diagonally. It flips BOTH the position-area AND both
|
|
35
|
+
* inline and block margins simultaneously, placing the popup at the
|
|
36
|
+
* diagonally opposite corner where there is always space.
|
|
37
|
+
*
|
|
38
|
+
* Named `position-area` entries (e.g. `inline-start span-block-end`) in
|
|
39
|
+
* `position-try-fallbacks` do NOT update margins, so only the `flip-*`
|
|
40
|
+
* tactic keywords correctly flip the gap margin along with the position.
|
|
41
|
+
*/
|
|
42
|
+
function placementToTryFallbacks(_ref) {
|
|
43
|
+
var placement = _ref.placement;
|
|
44
|
+
var _getPlacement = (0, _resolvePlacement.getPlacement)({
|
|
45
|
+
placement: placement
|
|
46
|
+
}),
|
|
47
|
+
axis = _getPlacement.axis,
|
|
48
|
+
edge = _getPlacement.edge,
|
|
49
|
+
align = _getPlacement.align;
|
|
50
|
+
var crossAxis = axis === 'block' ? 'inline' : 'block';
|
|
51
|
+
var flippedEdge = edge === 'start' ? 'end' : 'start';
|
|
52
|
+
var sameEdge = "".concat(axis, "-").concat(edge);
|
|
53
|
+
var oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
|
|
54
|
+
var flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
|
|
55
|
+
var flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
|
|
56
|
+
|
|
57
|
+
// Single algorithm: produce the shift list against any base alignment.
|
|
58
|
+
// For `align: 'start'` the "near" shift expands toward `end`; for
|
|
59
|
+
// `align: 'end'` it expands toward `start`; for `align: 'center'`
|
|
60
|
+
// either order is symmetric (we use end-then-start to match the
|
|
61
|
+
// historical fallback list).
|
|
62
|
+
function shifts(baseAlign, edgeKey) {
|
|
63
|
+
if (baseAlign === 'center') {
|
|
64
|
+
return ["".concat(edgeKey, " span-").concat(crossAxis, "-end"), "".concat(edgeKey, " span-").concat(crossAxis, "-start")];
|
|
65
|
+
}
|
|
66
|
+
var near = baseAlign === 'start' ? 'end' : 'start';
|
|
67
|
+
var far = baseAlign === 'start' ? 'start' : 'end';
|
|
68
|
+
return ["".concat(edgeKey, " span-").concat(crossAxis, "-").concat(near), edgeKey, "".concat(edgeKey, " span-").concat(crossAxis, "-").concat(far)];
|
|
69
|
+
}
|
|
70
|
+
if (align !== 'center') {
|
|
71
|
+
// Aligned (start/end): try same-edge shifts, then single-axis flip,
|
|
72
|
+
// then diagonal flip for corner overflow, then opposite-edge shifts.
|
|
73
|
+
// Legacy Popper fallback ordering for e.g. bottom-start:
|
|
74
|
+
// [bottom, bottom-end, top-start, top, top-end, auto].
|
|
75
|
+
return [].concat((0, _toConsumableArray2.default)(shifts(align, sameEdge)), [flipKeyword, "".concat(flipKeyword, " ").concat(flipCrossKeyword)], (0, _toConsumableArray2.default)(shifts(align, oppositeEdge))).join(', ');
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// Centered: same-edge shifts, single-axis flip, opposite-edge shifts.
|
|
79
|
+
// Diagonal flip is unnecessary because centered placements expand
|
|
80
|
+
// equally in both cross-axis directions.
|
|
81
|
+
return [].concat((0, _toConsumableArray2.default)(shifts('center', sameEdge)), [flipKeyword], (0, _toConsumableArray2.default)(shifts('center', oppositeEdge))).join(', ');
|
|
82
|
+
}
|
|
@@ -4,10 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.placementToPositionArea = placementToPositionArea;
|
|
8
|
-
exports.placementToTryFallbacks = placementToTryFallbacks;
|
|
9
7
|
exports.useAnchorPosition = useAnchorPosition;
|
|
10
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
8
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
12
9
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
10
|
var _react = require("react");
|
|
@@ -16,6 +13,8 @@ var _rafSchd = _interopRequireDefault(require("raf-schd"));
|
|
|
16
13
|
var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
|
|
17
14
|
var _anchorPositioningFallback = require("./anchor-positioning-fallback");
|
|
18
15
|
var _combine = require("./combine");
|
|
16
|
+
var _placementToPositionArea = require("./placement-to-position-area");
|
|
17
|
+
var _placementToTryFallbacks = require("./placement-to-try-fallbacks");
|
|
19
18
|
var _resolveCssLengthToPixels = require("./resolve-css-length-to-pixels");
|
|
20
19
|
var _resolvePlacement = require("./resolve-placement");
|
|
21
20
|
var _setStyle = require("./set-style");
|
|
@@ -58,118 +57,6 @@ var NoopResizeObserver = /*#__PURE__*/function () {
|
|
|
58
57
|
}]);
|
|
59
58
|
}();
|
|
60
59
|
|
|
61
|
-
/**
|
|
62
|
-
* Resolves placement options to CSS `position-area` syntax.
|
|
63
|
-
*
|
|
64
|
-
* The `align` field represents the *visual* alignment:
|
|
65
|
-
* - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
|
|
66
|
-
* - `align: 'end'` means "aligned to the trigger's end edge"
|
|
67
|
-
* - `align: 'center'` means centered (single-axis position-area)
|
|
68
|
-
*
|
|
69
|
-
* CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
|
|
70
|
-
* Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
|
|
71
|
-
* This function handles the inversion internally.
|
|
72
|
-
*
|
|
73
|
-
* @example
|
|
74
|
-
* placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
|
|
75
|
-
* placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
|
|
76
|
-
* placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } }) // → 'block-end span-inline-start'
|
|
77
|
-
*/
|
|
78
|
-
function placementToPositionArea(_ref) {
|
|
79
|
-
var placement = _ref.placement;
|
|
80
|
-
var _getPlacement = (0, _resolvePlacement.getPlacement)({
|
|
81
|
-
placement: placement
|
|
82
|
-
}),
|
|
83
|
-
axis = _getPlacement.axis,
|
|
84
|
-
edge = _getPlacement.edge,
|
|
85
|
-
align = _getPlacement.align;
|
|
86
|
-
var edgeValue = "".concat(axis, "-").concat(edge);
|
|
87
|
-
if (align === 'center') {
|
|
88
|
-
return edgeValue;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// Cross-axis name: block ↔ inline
|
|
92
|
-
var crossAxis = axis === 'block' ? 'inline' : 'block';
|
|
93
|
-
// Invert align → CSS span direction: visual 'start' → span toward 'end'
|
|
94
|
-
var spanDir = align === 'start' ? 'end' : 'start';
|
|
95
|
-
return "".concat(edgeValue, " span-").concat(crossAxis, "-").concat(spanDir);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
/**
|
|
99
|
-
* Returns `position-try-fallbacks` value based on placement.
|
|
100
|
-
*
|
|
101
|
-
* For centered placements, includes cross-axis aligned position-area
|
|
102
|
-
* values so the browser can shift the popover along the cross-axis
|
|
103
|
-
* when the centered position would overflow the viewport edge.
|
|
104
|
-
*
|
|
105
|
-
* Fallback order for centered placements (e.g. `block-end`):
|
|
106
|
-
* 1. Same edge, start-aligned (shift for near-edge overflow)
|
|
107
|
-
* 2. Same edge, end-aligned (shift for far-edge overflow)
|
|
108
|
-
* 3. Flipped edge, centered
|
|
109
|
-
* 4. Flipped edge, start-aligned
|
|
110
|
-
* 5. Flipped edge, end-aligned
|
|
111
|
-
*
|
|
112
|
-
* For aligned placements (start/end), includes the same-edge centered
|
|
113
|
-
* position as fallbacks so the browser can try centering when the aligned
|
|
114
|
-
* position would overflow, before flipping to the opposite edge.
|
|
115
|
-
*
|
|
116
|
-
* **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
|
|
117
|
-
*
|
|
118
|
-
* When a popup is in a viewport corner (e.g. inline-end align-end at the
|
|
119
|
-
* top-right), flipping only the primary axis (`flip-inline`) moves the popup
|
|
120
|
-
* to the left but keeps the same cross-axis span direction (e.g. upward),
|
|
121
|
-
* which is still off-screen. The combined keyword `flip-inline flip-block`
|
|
122
|
-
* mirrors the popup diagonally. It flips BOTH the position-area AND both
|
|
123
|
-
* inline and block margins simultaneously, placing the popup at the
|
|
124
|
-
* diagonally opposite corner where there is always space.
|
|
125
|
-
*
|
|
126
|
-
* Named `position-area` entries (e.g. `inline-start span-block-end`) in
|
|
127
|
-
* `position-try-fallbacks` do NOT update margins, so only the `flip-*`
|
|
128
|
-
* tactic keywords correctly flip the gap margin along with the position.
|
|
129
|
-
*/
|
|
130
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
131
|
-
function placementToTryFallbacks(_ref2) {
|
|
132
|
-
var placement = _ref2.placement;
|
|
133
|
-
var _getPlacement2 = (0, _resolvePlacement.getPlacement)({
|
|
134
|
-
placement: placement
|
|
135
|
-
}),
|
|
136
|
-
axis = _getPlacement2.axis,
|
|
137
|
-
edge = _getPlacement2.edge,
|
|
138
|
-
align = _getPlacement2.align;
|
|
139
|
-
var crossAxis = axis === 'block' ? 'inline' : 'block';
|
|
140
|
-
var flippedEdge = edge === 'start' ? 'end' : 'start';
|
|
141
|
-
var sameEdge = "".concat(axis, "-").concat(edge);
|
|
142
|
-
var oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
|
|
143
|
-
var flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
|
|
144
|
-
var flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
|
|
145
|
-
|
|
146
|
-
// Single algorithm: produce the shift list against any base alignment.
|
|
147
|
-
// For `align: 'start'` the "near" shift expands toward `end`; for
|
|
148
|
-
// `align: 'end'` it expands toward `start`; for `align: 'center'`
|
|
149
|
-
// either order is symmetric (we use end-then-start to match the
|
|
150
|
-
// historical fallback list).
|
|
151
|
-
function shifts(baseAlign, edgeKey) {
|
|
152
|
-
if (baseAlign === 'center') {
|
|
153
|
-
return ["".concat(edgeKey, " span-").concat(crossAxis, "-end"), "".concat(edgeKey, " span-").concat(crossAxis, "-start")];
|
|
154
|
-
}
|
|
155
|
-
var near = baseAlign === 'start' ? 'end' : 'start';
|
|
156
|
-
var far = baseAlign === 'start' ? 'start' : 'end';
|
|
157
|
-
return ["".concat(edgeKey, " span-").concat(crossAxis, "-").concat(near), edgeKey, "".concat(edgeKey, " span-").concat(crossAxis, "-").concat(far)];
|
|
158
|
-
}
|
|
159
|
-
if (align !== 'center') {
|
|
160
|
-
// Aligned (start/end): try same-edge shifts, then single-axis flip,
|
|
161
|
-
// then diagonal flip for corner overflow, then opposite-edge shifts.
|
|
162
|
-
// Legacy Popper fallback ordering for e.g. bottom-start:
|
|
163
|
-
// [bottom, bottom-end, top-start, top, top-end, auto].
|
|
164
|
-
return [].concat((0, _toConsumableArray2.default)(shifts(align, sameEdge)), [flipKeyword, "".concat(flipKeyword, " ").concat(flipCrossKeyword)], (0, _toConsumableArray2.default)(shifts(align, oppositeEdge))).join(', ');
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
// Centered: same-edge shifts, single-axis flip, opposite-edge shifts.
|
|
168
|
-
// Diagonal flip is unnecessary because centered placements expand
|
|
169
|
-
// equally in both cross-axis directions.
|
|
170
|
-
return [].concat((0, _toConsumableArray2.default)(shifts('center', sameEdge)), [flipKeyword], (0, _toConsumableArray2.default)(shifts('center', oppositeEdge))).join(', ');
|
|
171
|
-
}
|
|
172
|
-
|
|
173
60
|
/**
|
|
174
61
|
* Returns true when the popover is currently open. Wrapped because the
|
|
175
62
|
* `:popover-open` pseudo-class is not implemented in some test environments
|
|
@@ -201,9 +88,9 @@ var supportsAnchorPositioning = (0, _once.default)(function () {
|
|
|
201
88
|
* For example, a `block-end` placement (popover below) gets
|
|
202
89
|
* `margin-block-start: 8px` to push it away from the trigger's bottom edge.
|
|
203
90
|
*/
|
|
204
|
-
function edgeMargin(
|
|
205
|
-
var placement =
|
|
206
|
-
offset =
|
|
91
|
+
function edgeMargin(_ref) {
|
|
92
|
+
var placement = _ref.placement,
|
|
93
|
+
offset = _ref.offset;
|
|
207
94
|
var axis = placement.axis,
|
|
208
95
|
edge = placement.edge;
|
|
209
96
|
var value = offset;
|
|
@@ -244,10 +131,10 @@ function edgeMargin(_ref3) {
|
|
|
244
131
|
* positive), `align: 'center'` uses START. Margin on the un-anchored side
|
|
245
132
|
* has no effect under CSS Anchor Positioning.
|
|
246
133
|
*/
|
|
247
|
-
function crossAxisShiftMargin(
|
|
248
|
-
var placement =
|
|
249
|
-
crossAxisShiftCssValue =
|
|
250
|
-
direction =
|
|
134
|
+
function crossAxisShiftMargin(_ref2) {
|
|
135
|
+
var placement = _ref2.placement,
|
|
136
|
+
crossAxisShiftCssValue = _ref2.crossAxisShiftCssValue,
|
|
137
|
+
direction = _ref2.direction;
|
|
251
138
|
var axis = placement.axis,
|
|
252
139
|
align = placement.align;
|
|
253
140
|
var directionSign = direction === 'forwards' ? 1 : -1;
|
|
@@ -326,13 +213,13 @@ function useStablePlacement(placement) {
|
|
|
326
213
|
* placement shape is unchanged.
|
|
327
214
|
*/
|
|
328
215
|
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
329
|
-
function useAnchorPosition(
|
|
330
|
-
var anchorRef =
|
|
331
|
-
popoverRef =
|
|
332
|
-
|
|
333
|
-
placement =
|
|
334
|
-
|
|
335
|
-
forceFallbackPositioning =
|
|
216
|
+
function useAnchorPosition(_ref3) {
|
|
217
|
+
var anchorRef = _ref3.anchorRef,
|
|
218
|
+
popoverRef = _ref3.popoverRef,
|
|
219
|
+
_ref3$placement = _ref3.placement,
|
|
220
|
+
placement = _ref3$placement === void 0 ? {} : _ref3$placement,
|
|
221
|
+
_ref3$forceFallbackPo = _ref3.forceFallbackPositioning,
|
|
222
|
+
forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo;
|
|
336
223
|
var id = (0, _react.useId)();
|
|
337
224
|
// Stabilize `placement` object so the same object literal
|
|
338
225
|
// value returns an object with the same reference
|
|
@@ -367,12 +254,12 @@ function useAnchorPosition(_ref5) {
|
|
|
367
254
|
value: anchorName
|
|
368
255
|
}, {
|
|
369
256
|
property: 'position-area',
|
|
370
|
-
value: placementToPositionArea({
|
|
257
|
+
value: (0, _placementToPositionArea.placementToPositionArea)({
|
|
371
258
|
placement: stablePlacement
|
|
372
259
|
})
|
|
373
260
|
}, {
|
|
374
261
|
property: 'position-try-fallbacks',
|
|
375
|
-
value: placementToTryFallbacks({
|
|
262
|
+
value: (0, _placementToTryFallbacks.placementToTryFallbacks)({
|
|
376
263
|
placement: stablePlacement
|
|
377
264
|
})
|
|
378
265
|
},
|
|
@@ -16,7 +16,7 @@ var _roleTypes = require("../internal/role-types");
|
|
|
16
16
|
var _useAnchorPosition = require("../internal/use-anchor-position");
|
|
17
17
|
var _useWidthFromAnchor = require("../internal/use-width-from-anchor");
|
|
18
18
|
var _popover = require("../popover/popover");
|
|
19
|
-
var
|
|
19
|
+
var _useMaybePopupContext = require("./use-maybe-popup-context");
|
|
20
20
|
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); }
|
|
21
21
|
/**
|
|
22
22
|
* Thin context wrapper that composes `Popover` + `useAnchorPosition`.
|
|
@@ -46,7 +46,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
46
46
|
onEnterFinish = _ref.onEnterFinish,
|
|
47
47
|
onExitFinish = _ref.onExitFinish;
|
|
48
48
|
// When inside <Popup>, context provides defaults. Props always win.
|
|
49
|
-
var ctx = (0,
|
|
49
|
+
var ctx = (0, _useMaybePopupContext.useMaybePopupContext)();
|
|
50
50
|
var triggerRef = triggerRefProp !== null && triggerRefProp !== void 0 ? triggerRefProp : ctx === null || ctx === void 0 ? void 0 : ctx.triggerRef;
|
|
51
51
|
var placement = (_ref2 = placementProp !== null && placementProp !== void 0 ? placementProp : ctx === null || ctx === void 0 ? void 0 : ctx.placement) !== null && _ref2 !== void 0 ? _ref2 : {};
|
|
52
52
|
var onClose = onCloseProp !== null && onCloseProp !== void 0 ? onCloseProp : ctx === null || ctx === void 0 ? void 0 : ctx.onClose;
|
|
@@ -3,9 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
exports.useMaybePopupContext = useMaybePopupContext;
|
|
8
|
-
exports.usePopupContext = usePopupContext;
|
|
6
|
+
exports.PopupContext = void 0;
|
|
9
7
|
var _react = require("react");
|
|
10
8
|
/**
|
|
11
9
|
* Represents the lifecycle state of the popup.
|
|
@@ -24,38 +22,4 @@ var _react = require("react");
|
|
|
24
22
|
* the trigger (and thus the popup anchor) mid-animation.
|
|
25
23
|
*/
|
|
26
24
|
|
|
27
|
-
var PopupContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* __Popup provider__
|
|
31
|
-
*
|
|
32
|
-
* Provides shared popup state (placement, popoverId, triggerRef,
|
|
33
|
-
* isOpen, onClose) to compound child components such as `Popup.Trigger` and
|
|
34
|
-
* `Popup.Content`.
|
|
35
|
-
*/
|
|
36
|
-
var PopupProvider = exports.PopupProvider = PopupContext.Provider;
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Returns the nearest `Popup` context value.
|
|
40
|
-
*
|
|
41
|
-
* Throws if called outside of a `<Popup>` compound component.
|
|
42
|
-
*/
|
|
43
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
44
|
-
function usePopupContext() {
|
|
45
|
-
var ctx = (0, _react.useContext)(PopupContext);
|
|
46
|
-
if (ctx === null) {
|
|
47
|
-
throw new Error('@atlaskit/top-layer: Popup compound components must be used within <Popup>.');
|
|
48
|
-
}
|
|
49
|
-
return ctx;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* Returns the popup context if available, or `null` when used outside `<Popup>`.
|
|
54
|
-
*
|
|
55
|
-
* Used by `PopupContent` to support standalone usage (e.g. tooltip)
|
|
56
|
-
* where values are passed as props instead of coming from a compound component.
|
|
57
|
-
*/
|
|
58
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
59
|
-
function useMaybePopupContext() {
|
|
60
|
-
return (0, _react.useContext)(PopupContext);
|
|
61
|
-
}
|
|
25
|
+
var PopupContext = exports.PopupContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.PopupProvider = void 0;
|
|
7
|
+
var _popupContext = require("./popup-context");
|
|
8
|
+
/**
|
|
9
|
+
* __Popup provider__
|
|
10
|
+
*
|
|
11
|
+
* Provides shared popup state (placement, popoverId, triggerRef,
|
|
12
|
+
* isOpen, onClose) to compound child components such as `Popup.Trigger` and
|
|
13
|
+
* `Popup.Content`.
|
|
14
|
+
*/
|
|
15
|
+
var PopupProvider = exports.PopupProvider = _popupContext.PopupContext.Provider;
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.PopupTriggerFunction = PopupTriggerFunction;
|
|
7
7
|
var _react = require("react");
|
|
8
|
-
var
|
|
8
|
+
var _usePopupContext2 = require("./use-popup-context");
|
|
9
9
|
/**
|
|
10
10
|
* Props passed to the `TriggerFunction` render-prop child.
|
|
11
11
|
*/
|
|
@@ -42,7 +42,7 @@ var _popupContext = require("./popup-context");
|
|
|
42
42
|
*/
|
|
43
43
|
function PopupTriggerFunction(_ref) {
|
|
44
44
|
var children = _ref.children;
|
|
45
|
-
var _usePopupContext = (0,
|
|
45
|
+
var _usePopupContext = (0, _usePopupContext2.usePopupContext)(),
|
|
46
46
|
triggerRef = _usePopupContext.triggerRef,
|
|
47
47
|
popoverRef = _usePopupContext.popoverRef,
|
|
48
48
|
popoverId = _usePopupContext.popoverId,
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.PopupTrigger = PopupTrigger;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _slot = require("../internal/slot");
|
|
10
|
-
var
|
|
10
|
+
var _usePopupContext2 = require("./use-popup-context");
|
|
11
11
|
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); }
|
|
12
12
|
/**
|
|
13
13
|
* Wraps a single trigger element via `cloneElement`. Attaches aria
|
|
@@ -22,7 +22,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
22
22
|
*/
|
|
23
23
|
function PopupTrigger(_ref) {
|
|
24
24
|
var children = _ref.children;
|
|
25
|
-
var _usePopupContext = (0,
|
|
25
|
+
var _usePopupContext = (0, _usePopupContext2.usePopupContext)(),
|
|
26
26
|
triggerRef = _usePopupContext.triggerRef,
|
|
27
27
|
popoverRef = _usePopupContext.popoverRef,
|
|
28
28
|
popoverId = _usePopupContext.popoverId,
|
package/dist/cjs/popup/popup.js
CHANGED
|
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.PopupRoot = PopupRoot;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var
|
|
11
|
+
var _popupProvider = require("./popup-provider");
|
|
12
12
|
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); }
|
|
13
13
|
/**
|
|
14
14
|
* Popup compound: trigger + popover content.
|
|
@@ -75,7 +75,7 @@ function PopupRoot(props) {
|
|
|
75
75
|
testId: testId,
|
|
76
76
|
forceFallbackPositioning: forceFallbackPositioning
|
|
77
77
|
};
|
|
78
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
78
|
+
return /*#__PURE__*/_react.default.createElement(_popupProvider.PopupProvider, {
|
|
79
79
|
value: contextValue
|
|
80
80
|
}, children);
|
|
81
81
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useMaybePopupContext = useMaybePopupContext;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _popupContext = require("./popup-context");
|
|
9
|
+
/**
|
|
10
|
+
* Returns the popup context if available, or `null` when used outside `<Popup>`.
|
|
11
|
+
*
|
|
12
|
+
* Used by `PopupContent` to support standalone usage (e.g. tooltip)
|
|
13
|
+
* where values are passed as props instead of coming from a compound component.
|
|
14
|
+
*/
|
|
15
|
+
function useMaybePopupContext() {
|
|
16
|
+
return (0, _react.useContext)(_popupContext.PopupContext);
|
|
17
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.usePopupContext = usePopupContext;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _popupContext = require("./popup-context");
|
|
9
|
+
/**
|
|
10
|
+
* Returns the nearest `Popup` context value.
|
|
11
|
+
*
|
|
12
|
+
* Throws if called outside of a `<Popup>` compound component.
|
|
13
|
+
*/
|
|
14
|
+
function usePopupContext() {
|
|
15
|
+
var ctx = (0, _react.useContext)(_popupContext.PopupContext);
|
|
16
|
+
if (ctx === null) {
|
|
17
|
+
throw new Error('@atlaskit/top-layer: Popup compound components must be used within <Popup>.');
|
|
18
|
+
}
|
|
19
|
+
return ctx;
|
|
20
|
+
}
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
Object.defineProperty(exports, "isAtCurrentMenuLevel", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function get() {
|
|
9
|
-
return
|
|
9
|
+
return _isAtCurrentMenuLevel.isAtCurrentMenuLevel;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
Object.defineProperty(exports, "useArrowNavigation", {
|
|
@@ -15,4 +15,5 @@ Object.defineProperty(exports, "useArrowNavigation", {
|
|
|
15
15
|
return _useArrowNavigation.useArrowNavigation;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
-
var _useArrowNavigation = require("./use-arrow-navigation");
|
|
18
|
+
var _useArrowNavigation = require("./use-arrow-navigation");
|
|
19
|
+
var _isAtCurrentMenuLevel = require("./is-at-current-menu-level");
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isAtCurrentMenuLevel = isAtCurrentMenuLevel;
|
|
7
|
+
var menuScope = '[role="menu"]';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Returns true if the element belongs to the current menu level of the
|
|
11
|
+
* container, i.e. it is NOT inside a nested `role="menu"` sub-container.
|
|
12
|
+
*
|
|
13
|
+
* Uses `element.closest('[role="menu"]')` to determine the nearest menu
|
|
14
|
+
* scope. If the nearest scope is the container's own `role="menu"` element,
|
|
15
|
+
* the element belongs to this level. If it is a different (nested) menu,
|
|
16
|
+
* the element belongs to a child level and should be excluded.
|
|
17
|
+
*
|
|
18
|
+
* Supports two container patterns:
|
|
19
|
+
*
|
|
20
|
+
* **1. Container has `role="menu"` directly** (preferred, used by avatar-group):
|
|
21
|
+
* ```
|
|
22
|
+
* <div ref={containerRef} role="menu">
|
|
23
|
+
* <button role="menuitem" /> ← isAtCurrentMenuLevel → true
|
|
24
|
+
* <div role="menu"> ← nested sub-menu
|
|
25
|
+
* <button role="menuitem" /> ← isAtCurrentMenuLevel → false
|
|
26
|
+
* </div>
|
|
27
|
+
* </div>
|
|
28
|
+
* ```
|
|
29
|
+
* Uses the simple check: `element.closest('[role="menu"]') === container`
|
|
30
|
+
*
|
|
31
|
+
* **2. Container is a wrapper without `role="menu"`** (used by dropdown-menu,
|
|
32
|
+
* where `MenuGroup` owns `role="menu"` but does not accept a ref):
|
|
33
|
+
* ```
|
|
34
|
+
* <div ref={containerRef}> ← wrapper (no role="menu")
|
|
35
|
+
* <MenuGroup role="menu">
|
|
36
|
+
* <button role="menuitem" /> ← isAtCurrentMenuLevel → true
|
|
37
|
+
* <div role="menu"> ← nested sub-menu
|
|
38
|
+
* <button role="menuitem" /> ← isAtCurrentMenuLevel → false
|
|
39
|
+
* </div>
|
|
40
|
+
* </MenuGroup>
|
|
41
|
+
* </div>
|
|
42
|
+
* ```
|
|
43
|
+
* Falls back to walking the DOM to check that the element's closest
|
|
44
|
+
* `role="menu"` is the container's own menu (not doubly nested).
|
|
45
|
+
*
|
|
46
|
+
* Ideally all consumers should use pattern 1 (place the ref directly on the
|
|
47
|
+
* `role="menu"` element). Pattern 2 exists because `@atlaskit/menu`'s
|
|
48
|
+
* `MenuGroup` does not currently accept a ref. If `MenuGroup` gains ref
|
|
49
|
+
* support in the future, dropdown-menu should switch to pattern 1 and the
|
|
50
|
+
* fallback path can be removed.
|
|
51
|
+
*
|
|
52
|
+
* Used both as a `TFocusableFilter` (to scope getNextFocusable etc.) and as
|
|
53
|
+
* a guard to prevent parent menu handlers from acting on events that
|
|
54
|
+
* belong to a nested menu.
|
|
55
|
+
*/
|
|
56
|
+
function isAtCurrentMenuLevel(element, container) {
|
|
57
|
+
var closestMenu = element.closest(menuScope);
|
|
58
|
+
|
|
59
|
+
// Container itself has role="menu". Element belongs to this level
|
|
60
|
+
// if its closest menu is the container.
|
|
61
|
+
if (container.getAttribute('role') === 'menu') {
|
|
62
|
+
return closestMenu === container;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// Container is a wrapper without role="menu" (e.g. dropdown-menu
|
|
66
|
+
// wraps a MenuGroup). The element belongs to the top level if its
|
|
67
|
+
// closest role="menu" ancestor is a direct child of the container,
|
|
68
|
+
// i.e. there is no nested role="menu" between them.
|
|
69
|
+
if (closestMenu === null) {
|
|
70
|
+
return true;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// Walk up from the closest menu to see if it is "owned" by this
|
|
74
|
+
// container without passing through another role="menu" first.
|
|
75
|
+
var parent = closestMenu.parentElement;
|
|
76
|
+
while (parent && parent !== container) {
|
|
77
|
+
if (parent.getAttribute('role') === 'menu') {
|
|
78
|
+
// There is a parent menu between the closest menu and the
|
|
79
|
+
// container, so the element is in a nested sub-menu.
|
|
80
|
+
return false;
|
|
81
|
+
}
|
|
82
|
+
parent = parent.parentElement;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// The closest menu is directly inside the container (no nesting).
|
|
86
|
+
return parent === container;
|
|
87
|
+
}
|