@atlaskit/top-layer 0.12.1 → 0.13.0
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 +23 -0
- package/dist/cjs/animations/presets.js +5 -5
- package/dist/cjs/dialog/create-close-event.js +1 -1
- package/dist/cjs/dialog/dialog-content.js +5 -5
- package/dist/cjs/entry-points/focus.js +6 -4
- package/dist/cjs/entry-points/use-anchor-position-at-point.js +12 -0
- package/dist/cjs/focus/get-first-focusable.js +19 -0
- package/dist/cjs/focus/get-focusables.js +30 -0
- package/dist/cjs/focus/get-last-focusable.js +19 -0
- package/dist/cjs/focus/get-next-focusable.js +43 -0
- package/dist/cjs/focus/is-in-same-layer.js +23 -0
- package/dist/cjs/focus/is-nested-layer-focused.js +32 -0
- package/dist/cjs/focus/selectors.js +19 -0
- package/dist/cjs/focus/types.js +1 -0
- package/dist/cjs/internal/ensure-preset-styles.js +1 -1
- package/dist/cjs/internal/reduced-motion.js +1 -1
- package/dist/cjs/internal/resolve-placement.js +2 -2
- package/dist/cjs/internal/role-to-aria-has-popup.js +37 -0
- package/dist/cjs/internal/role-types.js +1 -97
- package/dist/cjs/internal/should-focus-into-popover.js +19 -0
- package/dist/cjs/internal/slot.js +3 -3
- package/dist/cjs/internal/use-anchor-position-at-point.js +127 -0
- package/dist/cjs/internal/use-anchor-position.js +22 -33
- package/dist/cjs/internal/use-animated-visibility.js +10 -10
- package/dist/cjs/internal/use-animation-preset.js +1 -1
- package/dist/cjs/internal/use-focus-wrap.js +8 -5
- package/dist/cjs/internal/use-initial-focus.js +4 -4
- package/dist/cjs/internal/use-preset-styles.js +1 -1
- package/dist/cjs/internal/use-width-from-anchor.js +4 -4
- package/dist/cjs/placement-map/index.js +2 -2
- package/dist/cjs/placement-map/legacy-placements.js +2 -101
- package/dist/cjs/placement-map/placement-mapping.js +103 -0
- package/dist/cjs/popover/create-close-event.js +1 -1
- package/dist/cjs/popover/popover.js +3 -3
- package/dist/cjs/popup/popup-content.js +8 -7
- package/dist/cjs/testing/polyfill.js +8 -8
- package/dist/cjs/testing/to-be-visible.js +5 -5
- package/dist/cjs/use-arrow-navigation/is-at-current-menu-level.js +19 -12
- package/dist/cjs/use-arrow-navigation/use-arrow-navigation.js +7 -5
- package/dist/cjs/use-simple-light-dismiss/index.js +3 -3
- package/dist/es2019/animations/presets.js +5 -5
- package/dist/es2019/dialog/create-close-event.js +1 -1
- package/dist/es2019/dialog/dialog-content.js +5 -5
- package/dist/es2019/entry-points/focus.js +3 -1
- package/dist/es2019/entry-points/use-anchor-position-at-point.js +1 -0
- package/dist/es2019/focus/get-first-focusable.js +14 -0
- package/dist/es2019/focus/get-focusables.js +19 -0
- package/dist/es2019/focus/get-last-focusable.js +14 -0
- package/dist/es2019/focus/get-next-focusable.js +38 -0
- package/dist/es2019/focus/is-in-same-layer.js +18 -0
- package/dist/es2019/focus/is-nested-layer-focused.js +28 -0
- package/dist/es2019/focus/selectors.js +11 -0
- package/dist/es2019/focus/types.js +0 -0
- package/dist/es2019/internal/ensure-preset-styles.js +1 -1
- package/dist/es2019/internal/reduced-motion.js +1 -1
- package/dist/es2019/internal/resolve-placement.js +2 -2
- package/dist/es2019/internal/role-to-aria-has-popup.js +32 -0
- package/dist/es2019/internal/role-types.js +0 -92
- package/dist/es2019/internal/should-focus-into-popover.js +14 -0
- package/dist/es2019/internal/slot.js +3 -3
- package/dist/es2019/internal/use-anchor-position-at-point.js +122 -0
- package/dist/es2019/internal/use-anchor-position.js +19 -19
- package/dist/es2019/internal/use-animated-visibility.js +10 -10
- package/dist/es2019/internal/use-animation-preset.js +1 -1
- package/dist/es2019/internal/use-focus-wrap.js +4 -1
- package/dist/es2019/internal/use-initial-focus.js +1 -1
- package/dist/es2019/internal/use-preset-styles.js +1 -1
- package/dist/es2019/internal/use-width-from-anchor.js +4 -4
- package/dist/es2019/placement-map/index.js +1 -1
- package/dist/es2019/placement-map/legacy-placements.js +1 -100
- package/dist/es2019/placement-map/placement-mapping.js +97 -0
- package/dist/es2019/popover/create-close-event.js +1 -1
- package/dist/es2019/popover/popover.js +3 -3
- package/dist/es2019/popup/popup-content.js +6 -5
- package/dist/es2019/testing/polyfill.js +8 -8
- package/dist/es2019/testing/to-be-visible.js +5 -5
- package/dist/es2019/use-arrow-navigation/is-at-current-menu-level.js +19 -12
- package/dist/es2019/use-arrow-navigation/use-arrow-navigation.js +3 -1
- package/dist/es2019/use-simple-light-dismiss/index.js +3 -3
- package/dist/esm/animations/presets.js +5 -5
- package/dist/esm/dialog/create-close-event.js +1 -1
- package/dist/esm/dialog/dialog-content.js +5 -5
- package/dist/esm/entry-points/focus.js +3 -1
- package/dist/esm/entry-points/use-anchor-position-at-point.js +1 -0
- package/dist/esm/focus/get-first-focusable.js +13 -0
- package/dist/esm/focus/get-focusables.js +24 -0
- package/dist/esm/focus/get-last-focusable.js +13 -0
- package/dist/esm/focus/get-next-focusable.js +37 -0
- package/dist/esm/focus/is-in-same-layer.js +17 -0
- package/dist/esm/focus/is-nested-layer-focused.js +27 -0
- package/dist/esm/focus/selectors.js +13 -0
- package/dist/esm/focus/types.js +0 -0
- package/dist/esm/internal/ensure-preset-styles.js +1 -1
- package/dist/esm/internal/reduced-motion.js +1 -1
- package/dist/esm/internal/resolve-placement.js +2 -2
- package/dist/esm/internal/role-to-aria-has-popup.js +31 -0
- package/dist/esm/internal/role-types.js +0 -90
- package/dist/esm/internal/should-focus-into-popover.js +13 -0
- package/dist/esm/internal/slot.js +3 -3
- package/dist/esm/internal/use-anchor-position-at-point.js +122 -0
- package/dist/esm/internal/use-anchor-position.js +22 -33
- package/dist/esm/internal/use-animated-visibility.js +10 -10
- package/dist/esm/internal/use-animation-preset.js +1 -1
- package/dist/esm/internal/use-focus-wrap.js +4 -1
- package/dist/esm/internal/use-initial-focus.js +1 -1
- package/dist/esm/internal/use-preset-styles.js +1 -1
- package/dist/esm/internal/use-width-from-anchor.js +4 -4
- package/dist/esm/placement-map/index.js +1 -1
- package/dist/esm/placement-map/legacy-placements.js +1 -100
- package/dist/esm/placement-map/placement-mapping.js +97 -0
- package/dist/esm/popover/create-close-event.js +1 -1
- package/dist/esm/popover/popover.js +3 -3
- package/dist/esm/popup/popup-content.js +6 -5
- package/dist/esm/testing/polyfill.js +8 -8
- package/dist/esm/testing/to-be-visible.js +5 -5
- package/dist/esm/use-arrow-navigation/is-at-current-menu-level.js +19 -12
- package/dist/esm/use-arrow-navigation/use-arrow-navigation.js +3 -1
- package/dist/esm/use-simple-light-dismiss/index.js +3 -3
- package/dist/types/dialog/create-close-event.d.ts +1 -1
- package/dist/types/dialog/types.d.ts +8 -0
- package/dist/types/entry-points/focus.d.ts +4 -2
- package/dist/types/entry-points/use-anchor-position-at-point.d.ts +1 -0
- package/dist/types/focus/get-first-focusable.d.ts +8 -0
- package/dist/types/focus/get-focusables.d.ts +13 -0
- package/dist/types/focus/get-last-focusable.d.ts +8 -0
- package/dist/types/focus/get-next-focusable.d.ts +13 -0
- package/dist/types/focus/is-in-same-layer.d.ts +8 -0
- package/dist/types/focus/is-nested-layer-focused.d.ts +8 -0
- package/dist/types/focus/selectors.d.ts +4 -0
- package/dist/types/focus/types.d.ts +5 -0
- package/dist/types/internal/reduced-motion.d.ts +1 -1
- package/dist/types/internal/resolve-placement.d.ts +2 -2
- package/dist/types/internal/role-to-aria-has-popup.d.ts +13 -0
- package/dist/types/internal/role-types.d.ts +0 -19
- package/dist/types/internal/should-focus-into-popover.d.ts +8 -0
- package/dist/types/internal/slot.d.ts +4 -4
- package/dist/types/internal/use-anchor-position-at-point.d.ts +62 -0
- package/dist/types/internal/use-anchor-position.d.ts +6 -1
- package/dist/types/internal/use-animated-visibility.d.ts +3 -3
- package/dist/types/internal/use-animation-preset.d.ts +1 -1
- package/dist/types/internal/use-preset-styles.d.ts +1 -1
- package/dist/types/internal/use-width-from-anchor.d.ts +2 -2
- package/dist/types/placement-map/index.d.ts +1 -1
- package/dist/types/placement-map/legacy-placements.d.ts +0 -12
- package/dist/types/placement-map/placement-mapping.d.ts +13 -0
- package/dist/types/popover/create-close-event.d.ts +1 -1
- package/dist/types/popover/popover.d.ts +1 -1
- package/dist/types/popup/popup-context.d.ts +1 -1
- package/dist/types/testing/to-be-visible.d.ts +3 -3
- package/dist/types/use-arrow-navigation/use-arrow-navigation.d.ts +1 -1
- package/dist/types/use-simple-light-dismiss/index.d.ts +1 -1
- package/dist/types-ts4.5/dialog/create-close-event.d.ts +1 -1
- package/dist/types-ts4.5/dialog/types.d.ts +8 -0
- package/dist/types-ts4.5/entry-points/focus.d.ts +4 -2
- package/dist/types-ts4.5/entry-points/use-anchor-position-at-point.d.ts +1 -0
- package/dist/types-ts4.5/focus/get-first-focusable.d.ts +8 -0
- package/dist/types-ts4.5/focus/get-focusables.d.ts +13 -0
- package/dist/types-ts4.5/focus/get-last-focusable.d.ts +8 -0
- package/dist/types-ts4.5/focus/get-next-focusable.d.ts +13 -0
- package/dist/types-ts4.5/focus/is-in-same-layer.d.ts +8 -0
- package/dist/types-ts4.5/focus/is-nested-layer-focused.d.ts +8 -0
- package/dist/types-ts4.5/focus/selectors.d.ts +4 -0
- package/dist/types-ts4.5/focus/types.d.ts +5 -0
- package/dist/types-ts4.5/internal/reduced-motion.d.ts +1 -1
- package/dist/types-ts4.5/internal/resolve-placement.d.ts +2 -2
- package/dist/types-ts4.5/internal/role-to-aria-has-popup.d.ts +13 -0
- package/dist/types-ts4.5/internal/role-types.d.ts +0 -19
- package/dist/types-ts4.5/internal/should-focus-into-popover.d.ts +8 -0
- package/dist/types-ts4.5/internal/slot.d.ts +4 -4
- package/dist/types-ts4.5/internal/use-anchor-position-at-point.d.ts +62 -0
- package/dist/types-ts4.5/internal/use-anchor-position.d.ts +6 -1
- package/dist/types-ts4.5/internal/use-animated-visibility.d.ts +3 -3
- package/dist/types-ts4.5/internal/use-animation-preset.d.ts +1 -1
- package/dist/types-ts4.5/internal/use-preset-styles.d.ts +1 -1
- package/dist/types-ts4.5/internal/use-width-from-anchor.d.ts +2 -2
- package/dist/types-ts4.5/placement-map/index.d.ts +1 -1
- package/dist/types-ts4.5/placement-map/legacy-placements.d.ts +0 -12
- package/dist/types-ts4.5/placement-map/placement-mapping.d.ts +13 -0
- package/dist/types-ts4.5/popover/create-close-event.d.ts +1 -1
- package/dist/types-ts4.5/popover/popover.d.ts +1 -1
- package/dist/types-ts4.5/popup/popup-context.d.ts +1 -1
- package/dist/types-ts4.5/testing/to-be-visible.d.ts +3 -3
- package/dist/types-ts4.5/use-arrow-navigation/use-arrow-navigation.d.ts +1 -1
- package/dist/types-ts4.5/use-simple-light-dismiss/index.d.ts +1 -1
- package/package.json +1 -1
- package/use-anchor-position-at-point/package.json +17 -0
- package/dist/cjs/focus/focus.js +0 -169
- package/dist/cjs/focus/index.js +0 -24
- package/dist/es2019/focus/focus.js +0 -158
- package/dist/es2019/focus/index.js +0 -1
- package/dist/esm/focus/focus.js +0 -160
- package/dist/esm/focus/index.js +0 -1
- package/dist/types/focus/focus.d.ts +0 -50
- package/dist/types/focus/index.d.ts +0 -2
- package/dist/types-ts4.5/focus/focus.d.ts +0 -50
- package/dist/types-ts4.5/focus/index.d.ts +0 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @atlaskit/top-layer
|
|
2
2
|
|
|
3
|
+
## 0.13.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`cf4af9aa9a2fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf4af9aa9a2fe) -
|
|
8
|
+
Fix tooltip with `position="mouse-x"` / `position="mouse-y"` not respecting the `mousePosition`
|
|
9
|
+
prop when the `platform-dst-top-layer` feature flag is enabled.
|
|
10
|
+
|
|
11
|
+
The cursor-anchored tooltip is now positioned via a new `useAnchorPositionAtPoint` hook in
|
|
12
|
+
`@atlaskit/top-layer`, which delegates to `useAnchorPosition` against a hidden anchor element
|
|
13
|
+
placed once at the cursor location at show time. The popover stays anchored at that location and
|
|
14
|
+
does not follow subsequent pointer movement.
|
|
15
|
+
|
|
16
|
+
`useAnchorPosition` now also accepts an optional `isEnabled` prop (defaults to `true`); when
|
|
17
|
+
`false`, the hook is a no-op.
|
|
18
|
+
|
|
19
|
+
## 0.12.2
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- [`7210e88c14f95`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7210e88c14f95) -
|
|
24
|
+
Internal: align package with house authoring rules (style-only refactors).
|
|
25
|
+
|
|
3
26
|
## 0.12.1
|
|
4
27
|
|
|
5
28
|
### Patch Changes
|
|
@@ -9,7 +9,7 @@ exports.fade = fade;
|
|
|
9
9
|
exports.scaleAndFade = scaleAndFade;
|
|
10
10
|
exports.slideAndFade = slideAndFade;
|
|
11
11
|
var _resolvePlacement = require("../internal/resolve-placement");
|
|
12
|
-
//
|
|
12
|
+
// slideAndFade
|
|
13
13
|
|
|
14
14
|
function getSlideAndFadeProperties(_ref) {
|
|
15
15
|
var placement = _ref.placement,
|
|
@@ -91,7 +91,7 @@ function slideAndFade(options) {
|
|
|
91
91
|
};
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
//
|
|
94
|
+
// fade
|
|
95
95
|
|
|
96
96
|
var FADE_CSS = "\n[data-ds-popover-fade] {\n opacity: 0;\n transition:\n opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-popover-fade]:popover-open {\n opacity: 1;\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-popover-fade]:popover-open {\n opacity: 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-ds-popover-fade],\n [data-ds-popover-fade]:popover-open {\n transition-duration: 0s;\n }\n}\n";
|
|
97
97
|
|
|
@@ -117,7 +117,7 @@ function fade() {
|
|
|
117
117
|
};
|
|
118
118
|
}
|
|
119
119
|
|
|
120
|
-
//
|
|
120
|
+
// scaleAndFade
|
|
121
121
|
|
|
122
122
|
var SCALE_AND_FADE_CSS = "\n[data-ds-popover-scale-and-fade] {\n opacity: 0;\n transform: scale(0.95);\n transition:\n opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-popover-scale-and-fade]:popover-open {\n opacity: 1;\n transform: none;\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-popover-scale-and-fade]:popover-open {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-ds-popover-scale-and-fade],\n [data-ds-popover-scale-and-fade]:popover-open {\n transition-duration: 0s;\n }\n}\n";
|
|
123
123
|
|
|
@@ -147,7 +147,7 @@ function scaleAndFade() {
|
|
|
147
147
|
// Dialog presets
|
|
148
148
|
// ══════════════════════════════════════════════════════════════════════════════
|
|
149
149
|
|
|
150
|
-
//
|
|
150
|
+
// dialogSlideUpAndFade
|
|
151
151
|
|
|
152
152
|
var DIALOG_SLIDE_UP_AND_FADE_CSS = "\n[data-ds-dialog-slide-up-and-fade] {\n opacity: 0;\n transform: translateY(calc(-1 * var(--ds-dialog-ty, 12px)));\n transition:\n opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open] {\n opacity: 1;\n transform: none;\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-dialog-slide-up-and-fade][open] {\n opacity: 0;\n transform: translateY(var(--ds-dialog-ty, 12px));\n }\n}\n\n[data-ds-dialog-slide-up-and-fade]::backdrop {\n background-color: transparent;\n transition:\n background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open]::backdrop {\n background-color: var(--ds-blanket, #050C1F75);\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n background-color: transparent;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-ds-dialog-slide-up-and-fade],\n [data-ds-dialog-slide-up-and-fade][open],\n [data-ds-dialog-slide-up-and-fade]::backdrop,\n [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n transition-duration: 0s;\n }\n}\n";
|
|
153
153
|
|
|
@@ -183,7 +183,7 @@ function dialogSlideUpAndFade(options) {
|
|
|
183
183
|
};
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
-
//
|
|
186
|
+
// dialogFade
|
|
187
187
|
|
|
188
188
|
var DIALOG_FADE_CSS = "\n[data-ds-dialog-fade] {\n opacity: 0;\n transition:\n opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-dialog-fade][open] {\n opacity: 1;\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-dialog-fade][open] {\n opacity: 0;\n }\n}\n\n[data-ds-dialog-fade]::backdrop {\n background-color: transparent;\n transition:\n background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-dialog-fade][open]::backdrop {\n background-color: var(--ds-blanket, #050C1F75);\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-dialog-fade][open]::backdrop {\n background-color: transparent;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-ds-dialog-fade],\n [data-ds-dialog-fade][open],\n [data-ds-dialog-fade]::backdrop,\n [data-ds-dialog-fade][open]::backdrop {\n transition-duration: 0s;\n }\n}\n";
|
|
189
189
|
|
|
@@ -8,7 +8,7 @@ exports.createCloseEvent = createCloseEvent;
|
|
|
8
8
|
* Creates a synthetic DOM event from a `TDialogCloseReason`.
|
|
9
9
|
*
|
|
10
10
|
* Useful when bridging the Dialog primitive's `onClose({ reason })` callback
|
|
11
|
-
* to a legacy API that expects a `KeyboardEvent` or `MouseEvent`
|
|
11
|
+
* to a legacy API that expects a `KeyboardEvent` or `MouseEvent` - for example,
|
|
12
12
|
* `@atlaskit/modal-dialog`'s `onClose(event, analyticsEvent)` contract.
|
|
13
13
|
*
|
|
14
14
|
* - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`
|
|
@@ -58,7 +58,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
|
|
|
58
58
|
var ownRef = (0, _react.useRef)(null);
|
|
59
59
|
var combinedRef = (0, _mergeRefs.default)([ownRef, ref]);
|
|
60
60
|
|
|
61
|
-
//
|
|
61
|
+
// Animation lifecycle
|
|
62
62
|
var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
|
|
63
63
|
isOpen: isOpen,
|
|
64
64
|
animate: animate,
|
|
@@ -68,7 +68,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
|
|
|
68
68
|
showChildren = _useAnimatedVisibilit.showChildren,
|
|
69
69
|
preset = _useAnimatedVisibilit.preset;
|
|
70
70
|
|
|
71
|
-
//
|
|
71
|
+
// Focus wrap
|
|
72
72
|
// Native <dialog>.showModal() traps focus but wraps through <body> at
|
|
73
73
|
// the boundary (A → B → C → body → A). This hook intercepts Tab to
|
|
74
74
|
// wrap directly (A → B → C → A), matching the WAI-ARIA APG pattern.
|
|
@@ -77,7 +77,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
|
|
|
77
77
|
role: 'dialog'
|
|
78
78
|
});
|
|
79
79
|
|
|
80
|
-
//
|
|
80
|
+
// Open layer observer registration
|
|
81
81
|
// Notifies the open layer observer so app-coordination features
|
|
82
82
|
// (open-count subscriptions) work with top-layer dialogs.
|
|
83
83
|
(0, _openLayerObserver.useNotifyOpenLayerObserver)({
|
|
@@ -108,7 +108,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
|
|
|
108
108
|
}
|
|
109
109
|
}, [isOpen]);
|
|
110
110
|
|
|
111
|
-
//
|
|
111
|
+
// Handle native Escape (cancel event)
|
|
112
112
|
var handleCancel = (0, _react.useCallback)(function (event) {
|
|
113
113
|
event.preventDefault();
|
|
114
114
|
onClose({
|
|
@@ -116,7 +116,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
|
|
|
116
116
|
});
|
|
117
117
|
}, [onClose]);
|
|
118
118
|
|
|
119
|
-
//
|
|
119
|
+
// Handle backdrop click
|
|
120
120
|
// Attached via bind-event-listener rather than a React prop so we avoid
|
|
121
121
|
// a11y lint suppressions on the <dialog> element.
|
|
122
122
|
// Keyboard dismiss is already handled natively (Escape → onCancel above).
|
|
@@ -6,19 +6,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
Object.defineProperty(exports, "getFirstFocusable", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function get() {
|
|
9
|
-
return
|
|
9
|
+
return _getFirstFocusable.getFirstFocusable;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
Object.defineProperty(exports, "getLastFocusable", {
|
|
13
13
|
enumerable: true,
|
|
14
14
|
get: function get() {
|
|
15
|
-
return
|
|
15
|
+
return _getLastFocusable.getLastFocusable;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
Object.defineProperty(exports, "getNextFocusable", {
|
|
19
19
|
enumerable: true,
|
|
20
20
|
get: function get() {
|
|
21
|
-
return
|
|
21
|
+
return _getNextFocusable.getNextFocusable;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
-
var
|
|
24
|
+
var _getFirstFocusable = require("../focus/get-first-focusable");
|
|
25
|
+
var _getLastFocusable = require("../focus/get-last-focusable");
|
|
26
|
+
var _getNextFocusable = require("../focus/get-next-focusable");
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "useAnchorPositionAtPoint", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _useAnchorPositionAtPoint.useAnchorPositionAtPoint;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _useAnchorPositionAtPoint = require("../internal/use-anchor-position-at-point");
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getFirstFocusable = getFirstFocusable;
|
|
7
|
+
var _getFocusables = require("./get-focusables");
|
|
8
|
+
/**
|
|
9
|
+
* Returns the first focusable element within the container.
|
|
10
|
+
*/
|
|
11
|
+
function getFirstFocusable(_ref) {
|
|
12
|
+
var container = _ref.container,
|
|
13
|
+
filter = _ref.filter;
|
|
14
|
+
var items = (0, _getFocusables.getFocusables)({
|
|
15
|
+
container: container,
|
|
16
|
+
filter: filter
|
|
17
|
+
});
|
|
18
|
+
return items.length > 0 ? items[0] : null;
|
|
19
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getFocusables = getFocusables;
|
|
7
|
+
var _isInSameLayer = require("./is-in-same-layer");
|
|
8
|
+
var _selectors = require("./selectors");
|
|
9
|
+
/**
|
|
10
|
+
* Returns all focusable HTMLElements within the container, optionally filtered.
|
|
11
|
+
*
|
|
12
|
+
* Focusables that belong to a nested top-layer scope (a `[popover]` or
|
|
13
|
+
* `<dialog>` descendant of the container) are excluded - those elements
|
|
14
|
+
* are owned by the inner layer's focus management. The container itself
|
|
15
|
+
* is allowed to be a popover/dialog; only nested ones are filtered.
|
|
16
|
+
*/
|
|
17
|
+
function getFocusables(_ref) {
|
|
18
|
+
var container = _ref.container,
|
|
19
|
+
filter = _ref.filter;
|
|
20
|
+
return Array.from(container.querySelectorAll(_selectors.selectors.focusable)).filter(function (element) {
|
|
21
|
+
return element instanceof HTMLElement;
|
|
22
|
+
}).filter(function (element) {
|
|
23
|
+
return (0, _isInSameLayer.isInSameLayer)({
|
|
24
|
+
element: element,
|
|
25
|
+
container: container
|
|
26
|
+
});
|
|
27
|
+
}).filter(function (element) {
|
|
28
|
+
return !filter || filter(element, container);
|
|
29
|
+
});
|
|
30
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getLastFocusable = getLastFocusable;
|
|
7
|
+
var _getFocusables = require("./get-focusables");
|
|
8
|
+
/**
|
|
9
|
+
* Returns the last focusable element within the container.
|
|
10
|
+
*/
|
|
11
|
+
function getLastFocusable(_ref) {
|
|
12
|
+
var container = _ref.container,
|
|
13
|
+
filter = _ref.filter;
|
|
14
|
+
var items = (0, _getFocusables.getFocusables)({
|
|
15
|
+
container: container,
|
|
16
|
+
filter: filter
|
|
17
|
+
});
|
|
18
|
+
return items.length > 0 ? items[items.length - 1] : null;
|
|
19
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getNextFocusable = getNextFocusable;
|
|
7
|
+
var _getFocusables = require("./get-focusables");
|
|
8
|
+
var _selectors = require("./selectors");
|
|
9
|
+
/**
|
|
10
|
+
* Returns the next focusable element in the given direction relative to the
|
|
11
|
+
* currently focused element within the container. Wraps around at both ends.
|
|
12
|
+
*
|
|
13
|
+
* Returns `null` if there is no focused element within the container or if
|
|
14
|
+
* the focused element is not in the list of focusable elements.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
function getNextFocusable(_ref) {
|
|
18
|
+
var _all$nextIndex;
|
|
19
|
+
var container = _ref.container,
|
|
20
|
+
direction = _ref.direction,
|
|
21
|
+
filter = _ref.filter;
|
|
22
|
+
var all = (0, _getFocusables.getFocusables)({
|
|
23
|
+
container: container,
|
|
24
|
+
filter: filter
|
|
25
|
+
});
|
|
26
|
+
var current = container.querySelector(_selectors.selectors.focused);
|
|
27
|
+
if (!(current instanceof HTMLElement)) {
|
|
28
|
+
return null;
|
|
29
|
+
}
|
|
30
|
+
var index = all.indexOf(current);
|
|
31
|
+
if (index === -1) {
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
var nextIndex = function () {
|
|
35
|
+
if (direction === 'forwards') {
|
|
36
|
+
return (index + 1) % all.length;
|
|
37
|
+
}
|
|
38
|
+
var proposed = index - 1;
|
|
39
|
+
// if going into negative numbers, loop back to the last item
|
|
40
|
+
return proposed < 0 ? all.length - 1 : proposed;
|
|
41
|
+
}();
|
|
42
|
+
return (_all$nextIndex = all[nextIndex]) !== null && _all$nextIndex !== void 0 ? _all$nextIndex : null;
|
|
43
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isInSameLayer = isInSameLayer;
|
|
7
|
+
var topLayerSelector = '[popover], dialog, [role="dialog"], [role="alertdialog"]';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Returns true when `element` and `container` resolve to the same nearest
|
|
11
|
+
* top-layer host (or both resolve to `null`, meaning the document layer).
|
|
12
|
+
*/
|
|
13
|
+
function isInSameLayer(_ref) {
|
|
14
|
+
var element = _ref.element,
|
|
15
|
+
container = _ref.container;
|
|
16
|
+
var elementLayer = element.closest(topLayerSelector);
|
|
17
|
+
var containerLayer = container.closest(topLayerSelector);
|
|
18
|
+
// Both elements are in the "document" layer
|
|
19
|
+
if (!elementLayer && !containerLayer) {
|
|
20
|
+
return true;
|
|
21
|
+
}
|
|
22
|
+
return elementLayer === containerLayer;
|
|
23
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isNestedLayerFocused = isNestedLayerFocused;
|
|
7
|
+
var _browserApis = require("@atlaskit/browser-apis");
|
|
8
|
+
var _isInSameLayer = require("./is-in-same-layer");
|
|
9
|
+
/**
|
|
10
|
+
* Returns `true` when `document.activeElement` is inside a nested top-layer
|
|
11
|
+
* descendant of `container` (a `[popover]`, `<dialog>`, `[role="dialog"]` or
|
|
12
|
+
* `[role="alertdialog"]` that is itself a descendant of `container`).
|
|
13
|
+
*/
|
|
14
|
+
function isNestedLayerFocused(_ref) {
|
|
15
|
+
var _getDocument;
|
|
16
|
+
var container = _ref.container;
|
|
17
|
+
var focused = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement;
|
|
18
|
+
if (!(focused instanceof HTMLElement)) {
|
|
19
|
+
return false;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// Cannot be in a nested layer if it is not in the container
|
|
23
|
+
if (!container.contains(focused)) {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// If not in the same layer, must be in a nested layer
|
|
28
|
+
return !(0, _isInSameLayer.isInSameLayer)({
|
|
29
|
+
element: focused,
|
|
30
|
+
container: container
|
|
31
|
+
});
|
|
32
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.selectors = void 0;
|
|
7
|
+
var selectors = exports.selectors = function () {
|
|
8
|
+
// Common exclusion filter applied to every selector.
|
|
9
|
+
var not = ':not([tabindex="-1"]):not([aria-disabled="true"]):not([aria-hidden="true"])';
|
|
10
|
+
var notDisabled = ":not([disabled])".concat(not);
|
|
11
|
+
var focusable = ["a[href]".concat(not), "area[href]".concat(not), "input".concat(notDisabled, ":not([type=\"hidden\"])"), "select".concat(notDisabled), "textarea".concat(notDisabled), "button".concat(notDisabled), "iframe".concat(not), "audio[controls]".concat(not), "video[controls]".concat(not), "[contenteditable]:not([contenteditable=\"false\"])".concat(not), "[tabindex]".concat(notDisabled).concat(not)];
|
|
12
|
+
return {
|
|
13
|
+
focusable: focusable.join(','),
|
|
14
|
+
// Build the `:focus` selector
|
|
15
|
+
focused: focusable.map(function (selector) {
|
|
16
|
+
return "".concat(selector, ":focus");
|
|
17
|
+
}).join(',')
|
|
18
|
+
};
|
|
19
|
+
}();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -10,7 +10,7 @@ exports.ensurePresetStyles = ensurePresetStyles;
|
|
|
10
10
|
* Each preset's CSS is injected at most once into `<head>`.
|
|
11
11
|
* Shared by both PopoverContent and DialogContent.
|
|
12
12
|
*
|
|
13
|
-
* Note: injected `<style>` elements and the tracking Set are append-only
|
|
13
|
+
* Note: injected `<style>` elements and the tracking Set are append-only -
|
|
14
14
|
* they are never removed. This is intentional: the number of distinct
|
|
15
15
|
* presets is bounded (handful of animation presets), so the
|
|
16
16
|
* memory footprint is negligible. Removing styles would risk breaking
|
|
@@ -13,7 +13,7 @@ var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
|
|
|
13
13
|
*
|
|
14
14
|
* The result is cached after the first call via `once`. This avoids
|
|
15
15
|
* calling `matchMedia` on every render. The trade-off is that if a user
|
|
16
|
-
* toggles the OS reduced-motion setting mid-session, the change
|
|
16
|
+
* toggles the OS reduced-motion setting mid-session, the change will not
|
|
17
17
|
* take effect until the next page load. This is acceptable because
|
|
18
18
|
* toggling this system-level preference mid-session is extremely rare,
|
|
19
19
|
* and a page refresh is a reasonable expectation for system accessibility
|
|
@@ -30,8 +30,8 @@ var DEFAULT_GAP = "var(--ds-space-100, 8px)";
|
|
|
30
30
|
* CSS length string (e.g. `token('space.100')`).
|
|
31
31
|
*
|
|
32
32
|
* The two offset axes are named for clarity at the call site:
|
|
33
|
-
* - `gap`
|
|
34
|
-
* - `crossAxisShift`
|
|
33
|
+
* - `gap` - distance away from the trigger along the placement axis
|
|
34
|
+
* - `crossAxisShift` - nudge along the trigger edge (perpendicular to the placement axis)
|
|
35
35
|
*/
|
|
36
36
|
|
|
37
37
|
/**
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.roleToAriaHasPopup = roleToAriaHasPopup;
|
|
7
|
+
/**
|
|
8
|
+
* Maps a popover content role to the correct `aria-haspopup` value
|
|
9
|
+
* for its trigger element.
|
|
10
|
+
*
|
|
11
|
+
* Returns `undefined` for roles that are not popups in the ARIA sense
|
|
12
|
+
* (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
|
|
13
|
+
* should not announce a popup at all - emitting `aria-haspopup="dialog"`
|
|
14
|
+
* on a tooltip trigger would mislead assistive technology.
|
|
15
|
+
*/
|
|
16
|
+
function roleToAriaHasPopup(_ref) {
|
|
17
|
+
var role = _ref.role;
|
|
18
|
+
if (role === 'menu') {
|
|
19
|
+
return 'menu';
|
|
20
|
+
}
|
|
21
|
+
if (role === 'listbox') {
|
|
22
|
+
return 'listbox';
|
|
23
|
+
}
|
|
24
|
+
if (role === 'tree') {
|
|
25
|
+
return 'tree';
|
|
26
|
+
}
|
|
27
|
+
if (role === 'grid') {
|
|
28
|
+
return 'grid';
|
|
29
|
+
}
|
|
30
|
+
if (role === 'dialog' || role === 'alertdialog') {
|
|
31
|
+
return 'dialog';
|
|
32
|
+
}
|
|
33
|
+
// Non-popup roles (tooltip, note, status, alert, log) and the
|
|
34
|
+
// no-role case: omit `aria-haspopup` entirely. React drops the
|
|
35
|
+
// attribute when the value is `undefined`.
|
|
36
|
+
return undefined;
|
|
37
|
+
}
|
|
@@ -1,97 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.roleToAriaHasPopup = roleToAriaHasPopup;
|
|
7
|
-
exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
|
|
8
|
-
/**
|
|
9
|
-
* Valid values for the `aria-haspopup` attribute.
|
|
10
|
-
*
|
|
11
|
-
* Derived from the HTML spec - maps popover roles to what the trigger
|
|
12
|
-
* announces. `undefined` means the attribute is omitted entirely (used for
|
|
13
|
-
* non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
|
|
14
|
-
* `aria-haspopup` would be misleading).
|
|
15
|
-
*
|
|
16
|
-
* `true` is intentionally NOT in the union - the runtime only ever produces
|
|
17
|
-
* the explicit string forms, so widening the type would invite consumers to
|
|
18
|
-
* pass `true` and get an `aria-haspopup="true"` serialisation that the
|
|
19
|
-
* runtime no longer emits.
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* Roles that require an accessible name (`label` or `labelledBy`) per WCAG 4.1.2.
|
|
24
|
-
* Without a name, assistive technology cannot identify these landmarks.
|
|
25
|
-
*/
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* Roles where the accessible name is derived from content or provided externally
|
|
29
|
-
* (e.g. a combobox labels its listbox, tooltip content IS the accessible name).
|
|
30
|
-
*/
|
|
31
|
-
|
|
32
|
-
// ── Shared ARIA role discrimination types ──
|
|
33
|
-
//
|
|
34
|
-
// These encode the WCAG 4.1.2 constraint: roles like `dialog`, `alertdialog`,
|
|
35
|
-
// and `menu` MUST have an accessible name (either `label` or `labelledBy`).
|
|
36
|
-
// TypeScript enforces this at compile time via discriminated unions.
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* ARIA role props where a role is always required.
|
|
40
|
-
*
|
|
41
|
-
* Used by `TPopupContentProps`. Popup content must always declare
|
|
42
|
-
* its role so assistive technology can identify the layer.
|
|
43
|
-
*/
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* ARIA role props where a role is optional.
|
|
47
|
-
*
|
|
48
|
-
* Used by `TPopoverProps`. The low-level primitive allows omitting
|
|
49
|
-
* the role for cases where it is set externally or not needed.
|
|
50
|
-
*/
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* Maps a popover content role to the correct `aria-haspopup` value
|
|
54
|
-
* for its trigger element.
|
|
55
|
-
*
|
|
56
|
-
* Returns `undefined` for roles that are not popups in the ARIA sense
|
|
57
|
-
* (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
|
|
58
|
-
* should not announce a popup at all - emitting `aria-haspopup="dialog"`
|
|
59
|
-
* on a tooltip trigger would mislead assistive technology.
|
|
60
|
-
*/
|
|
61
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
62
|
-
function roleToAriaHasPopup(_ref) {
|
|
63
|
-
var role = _ref.role;
|
|
64
|
-
if (role === 'menu') {
|
|
65
|
-
return 'menu';
|
|
66
|
-
}
|
|
67
|
-
if (role === 'listbox') {
|
|
68
|
-
return 'listbox';
|
|
69
|
-
}
|
|
70
|
-
if (role === 'tree') {
|
|
71
|
-
return 'tree';
|
|
72
|
-
}
|
|
73
|
-
if (role === 'grid') {
|
|
74
|
-
return 'grid';
|
|
75
|
-
}
|
|
76
|
-
if (role === 'dialog' || role === 'alertdialog') {
|
|
77
|
-
return 'dialog';
|
|
78
|
-
}
|
|
79
|
-
// Non-popup roles (tooltip, note, status, alert, log) and the
|
|
80
|
-
// no-role case: omit `aria-haspopup` entirely. React drops the
|
|
81
|
-
// attribute when the value is `undefined`.
|
|
82
|
-
return undefined;
|
|
83
|
-
}
|
|
84
|
-
var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
|
|
85
|
-
|
|
86
|
-
/**
|
|
87
|
-
* Returns `true` when the given popover role moves focus into the popover
|
|
88
|
-
* on open, and `false` otherwise (including when `role` is `undefined`).
|
|
89
|
-
*/
|
|
90
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
91
|
-
function shouldFocusIntoPopover(_ref2) {
|
|
92
|
-
var role = _ref2.role;
|
|
93
|
-
if (!role) {
|
|
94
|
-
return false;
|
|
95
|
-
}
|
|
96
|
-
return rolesThatMoveFocus.has(role);
|
|
97
|
-
}
|
|
1
|
+
"use strict";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
|
|
7
|
+
var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Returns `true` when the given popover role moves focus into the popover
|
|
11
|
+
* on open, and `false` otherwise (including when `role` is `undefined`).
|
|
12
|
+
*/
|
|
13
|
+
function shouldFocusIntoPopover(_ref) {
|
|
14
|
+
var role = _ref.role;
|
|
15
|
+
if (!role) {
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
18
|
+
return rolesThatMoveFocus.has(role);
|
|
19
|
+
}
|
|
@@ -32,14 +32,14 @@ function isSlotChild(child) {
|
|
|
32
32
|
* Merges props (including ref) onto a single React element child.
|
|
33
33
|
*
|
|
34
34
|
* A safer alternative to raw `cloneElement` that:
|
|
35
|
-
* 1. Guards with `isValidElement`
|
|
35
|
+
* 1. Guards with `isValidElement` - non-element children (strings,
|
|
36
36
|
* fragments, null) are returned as-is instead of crashing.
|
|
37
37
|
* 2. Merges refs via `mergeRefs` so both the caller's ref and the
|
|
38
38
|
* child's existing ref are honoured.
|
|
39
39
|
* 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
|
|
40
40
|
* onto the child element.
|
|
41
41
|
*
|
|
42
|
-
* Event handlers (e.g. `onClick`) are **not** auto-merged
|
|
42
|
+
* Event handlers (e.g. `onClick`) are **not** auto-merged - the caller's
|
|
43
43
|
* handler replaces the child's. Compose handlers before passing them in.
|
|
44
44
|
*
|
|
45
45
|
* @example
|
|
@@ -52,7 +52,7 @@ function isSlotChild(child) {
|
|
|
52
52
|
var Slot = exports.Slot = /*#__PURE__*/(0, _react.forwardRef)(function Slot(slotProps, ref) {
|
|
53
53
|
var rawChildren = slotProps.children,
|
|
54
54
|
props = (0, _objectWithoutProperties2.default)(slotProps, _excluded);
|
|
55
|
-
// `
|
|
55
|
+
// `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
|
|
56
56
|
var children = rawChildren;
|
|
57
57
|
if (!isSlotChild(children)) {
|
|
58
58
|
return children;
|