@atlaskit/top-layer 3.1.0 → 4.0.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.
Files changed (38) hide show
  1. package/AGENTS.md +3 -1
  2. package/CHANGELOG.md +26 -0
  3. package/README.md +0 -14
  4. package/dist/cjs/focus/is-in-same-layer.js +1 -7
  5. package/dist/cjs/focus/selectors.js +1 -1
  6. package/dist/cjs/internal/get-aria-for-trigger.js +23 -9
  7. package/dist/cjs/internal/role-types.js +1 -64
  8. package/dist/cjs/internal/use-anchor-position.js +53 -19
  9. package/dist/cjs/popover/popover.js +2 -2
  10. package/dist/es2019/focus/is-in-same-layer.js +1 -7
  11. package/dist/es2019/focus/selectors.js +1 -1
  12. package/dist/es2019/internal/get-aria-for-trigger.js +23 -10
  13. package/dist/es2019/internal/role-types.js +0 -59
  14. package/dist/es2019/internal/use-anchor-position.js +53 -19
  15. package/dist/es2019/popover/popover.js +1 -1
  16. package/dist/esm/focus/is-in-same-layer.js +1 -7
  17. package/dist/esm/focus/selectors.js +1 -1
  18. package/dist/esm/internal/get-aria-for-trigger.js +23 -10
  19. package/dist/esm/internal/role-types.js +0 -58
  20. package/dist/esm/internal/use-anchor-position.js +53 -19
  21. package/dist/esm/popover/popover.js +1 -1
  22. package/dist/types/internal/get-aria-for-trigger.d.ts +21 -7
  23. package/dist/types/internal/role-types.d.ts +0 -32
  24. package/dist/types/popover/types.d.ts +1 -1
  25. package/package.json +3 -30
  26. package/animations/package.json +0 -10
  27. package/dist/cjs/entry-points/animations.js +0 -1
  28. package/dist/cjs/internal/role-to-aria-has-popup.js +0 -37
  29. package/dist/cjs/internal/slot.js +0 -65
  30. package/dist/es2019/entry-points/animations.js +0 -0
  31. package/dist/es2019/internal/role-to-aria-has-popup.js +0 -32
  32. package/dist/es2019/internal/slot.js +0 -57
  33. package/dist/esm/entry-points/animations.js +0 -0
  34. package/dist/esm/internal/role-to-aria-has-popup.js +0 -31
  35. package/dist/esm/internal/slot.js +0 -59
  36. package/dist/types/entry-points/animations.d.ts +0 -0
  37. package/dist/types/internal/role-to-aria-has-popup.d.ts +0 -13
  38. package/dist/types/internal/slot.d.ts +0 -29
@@ -1,5 +1,3 @@
1
- import { roleToAriaHasPopup } from './role-to-aria-has-popup';
2
-
3
1
  /**
4
2
  * Roles accepted by `getAriaForTrigger`.
5
3
  *
@@ -9,12 +7,34 @@ import { roleToAriaHasPopup } from './role-to-aria-has-popup';
9
7
  * manually for tooltip triggers.
10
8
  */
11
9
 
10
+ /**
11
+ * Valid values for the `aria-haspopup` attribute.
12
+ *
13
+ * Derived from the HTML spec - maps popover roles to what the trigger
14
+ * announces. `undefined` means the attribute is omitted entirely (used for
15
+ * non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
16
+ * `aria-haspopup` would be misleading).
17
+ *
18
+ * `true` is intentionally NOT in the union - the runtime only ever produces
19
+ * the explicit string forms, so widening the type would invite consumers to
20
+ * pass `true` and get an `aria-haspopup="true"` serialisation that the
21
+ * runtime no longer emits.
22
+ */
23
+
12
24
  /**
13
25
  * Non-undefined subset of `TAriaHasPopupValue`. Every role accepted by
14
26
  * `getAriaForTrigger` maps to a concrete `aria-haspopup` string, so the
15
27
  * trigger always receives a defined attribute value.
16
28
  */
17
29
 
30
+ var roleToAriaHasPopup = {
31
+ dialog: 'dialog',
32
+ alertdialog: 'dialog',
33
+ menu: 'menu',
34
+ listbox: 'listbox',
35
+ tree: 'tree',
36
+ grid: 'grid'
37
+ };
18
38
  /**
19
39
  * Returns the ARIA attributes to spread onto a click-activated popover trigger.
20
40
  *
@@ -66,13 +86,6 @@ export function getAriaForTrigger(_ref) {
66
86
  var role = _ref.role,
67
87
  isOpen = _ref.isOpen,
68
88
  popoverId = _ref.popoverId;
69
- // `roleToAriaHasPopup` accepts a wider role union (including tooltip-family
70
- // roles that map to `undefined`). `TAriaForTriggerRole` excludes those, so
71
- // the returned value is guaranteed to be a defined string. The cast narrows
72
- // the wider helper signature to match.
73
- var ariaHasPopup = roleToAriaHasPopup({
74
- role: role
75
- });
76
89
  // `aria-controls` is set to `undefined` while closed. The `Popover` /
77
90
  // `Dialog` primitives unmount their host element after the exit
78
91
  // animation finishes, so a closed-state `aria-controls` would point
@@ -81,7 +94,7 @@ export function getAriaForTrigger(_ref) {
81
94
  // until the target exists, avoiding the dangling reference while
82
95
  // keeping the relationship live whenever it is meaningful.
83
96
  return {
84
- 'aria-haspopup': ariaHasPopup,
97
+ 'aria-haspopup': roleToAriaHasPopup[role],
85
98
  'aria-expanded': isOpen,
86
99
  'aria-controls': isOpen ? popoverId : undefined
87
100
  };
@@ -1,58 +0,0 @@
1
- /**
2
- * Valid values for the `aria-haspopup` attribute.
3
- *
4
- * Derived from the HTML spec - maps popover roles to what the trigger
5
- * announces. `undefined` means the attribute is omitted entirely (used for
6
- * non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
7
- * `aria-haspopup` would be misleading).
8
- *
9
- * `true` is intentionally NOT in the union - the runtime only ever produces
10
- * the explicit string forms, so widening the type would invite consumers to
11
- * pass `true` and get an `aria-haspopup="true"` serialisation that the
12
- * runtime no longer emits.
13
- */
14
-
15
- /**
16
- * Roles that require an accessible name (`label` or `labelledBy`) per WCAG 4.1.2.
17
- * Without a name, assistive technology cannot identify these landmarks.
18
- */
19
-
20
- /**
21
- * Roles where the accessible name is derived from content or provided externally
22
- * (e.g. a combobox labels its listbox, tooltip content IS the accessible name).
23
- */
24
-
25
- // Shared ARIA role discrimination types
26
- //
27
- // These encode the WCAG 4.1.2 constraint: roles like `dialog`, `alertdialog`,
28
- // and `menu` MUST have an accessible name (either `label` or `labelledBy`).
29
- // TypeScript enforces this at compile time via discriminated unions.
30
-
31
- /**
32
- * ARIA role props where a role is always required.
33
- *
34
- * Used by `TPopupContentProps`. Popup content must always declare
35
- * its role so assistive technology can identify the layer.
36
- */
37
-
38
- /**
39
- * ARIA role props where a role is optional.
40
- *
41
- * Used by `TPopoverProps`. The low-level primitive allows omitting
42
- * the role for cases where it is set externally or not needed.
43
- */
44
-
45
- var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
46
-
47
- /**
48
- * Returns `true` when the given popover role moves focus into the popover
49
- * on open, and `false` otherwise (including when `role` is `undefined`).
50
- */
51
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
52
- export function shouldFocusIntoPopover(_ref) {
53
- var role = _ref.role;
54
- if (!role) {
55
- return false;
56
- }
57
- return rolesThatMoveFocus.has(role);
58
- }
@@ -317,11 +317,10 @@ export function useAnchorPosition(_ref3) {
317
317
  * See `notes/decisions/anchor-name-lifetime.md`
318
318
  */
319
319
  trigger.style.setProperty('anchor-name', anchorName);
320
- var _undoPositioning = combine(setStyle({
320
+ return setStyle({
321
321
  element: popover,
322
322
  styles: popoverStyles
323
- }));
324
- return _undoPositioning;
323
+ });
325
324
  }
326
325
 
327
326
  // JS fallback. The popover is already in the top layer via
@@ -337,6 +336,38 @@ export function useAnchorPosition(_ref3) {
337
336
  value: 'auto'
338
337
  }]
339
338
  });
339
+
340
+ // The popover can be consumer-owned (`@atlaskit/popper`'s `createPopper`),
341
+ // so restore prior inline values rather than removing ours.
342
+ var undoPosition;
343
+ var undoHide;
344
+
345
+ // `opacity: 0` not `visibility: hidden`: Firefox skips visibility-hidden
346
+ // elements during `<dialog>` initial-focus traversal.
347
+ function hideUntilPositioned() {
348
+ // Keep the first snapshot, else we capture our own `opacity: 0`.
349
+ // (`!popover` is for TS: narrowing does not reach nested functions.)
350
+ if (!popover || undoHide) {
351
+ return;
352
+ }
353
+ undoHide = setStyle({
354
+ element: popover,
355
+ styles: [{
356
+ property: 'opacity',
357
+ value: '0'
358
+ }]
359
+ });
360
+ }
361
+ function reveal() {
362
+ var _undoHide;
363
+ (_undoHide = undoHide) === null || _undoHide === void 0 || _undoHide();
364
+ undoHide = undefined;
365
+ }
366
+ function restorePosition() {
367
+ var _undoPosition;
368
+ (_undoPosition = undoPosition) === null || _undoPosition === void 0 || _undoPosition();
369
+ undoPosition = undefined;
370
+ }
340
371
  function update() {
341
372
  if (!trigger || !popover) {
342
373
  return;
@@ -375,11 +406,20 @@ export function useAnchorPosition(_ref3) {
375
406
  }),
376
407
  top = _computeFallbackPosit.top,
377
408
  left = _computeFallbackPosit.left;
378
- popover.style.setProperty('top', "".concat(top, "px"));
379
- popover.style.setProperty('left', "".concat(left, "px"));
380
- // Reveal the popover only after it has been positioned.
381
- // See the toggle listener below for why we hide on open.
382
- popover.style.removeProperty('opacity');
409
+
410
+ // Restore first so the snapshot stays the consumer's value.
411
+ restorePosition();
412
+ undoPosition = setStyle({
413
+ element: popover,
414
+ styles: [{
415
+ property: 'top',
416
+ value: "".concat(top, "px")
417
+ }, {
418
+ property: 'left',
419
+ value: "".concat(left, "px")
420
+ }]
421
+ });
422
+ reveal();
383
423
  }
384
424
 
385
425
  // Throttle scroll/resize updates to one per animation frame
@@ -413,22 +453,17 @@ export function useAnchorPosition(_ref3) {
413
453
  // event has already fired and our listener below would miss it. Start
414
454
  // observing immediately so the first measurement still happens.
415
455
  if (isPopoverOpen(popover)) {
416
- popover.style.setProperty('opacity', '0');
456
+ hideUntilPositioned();
417
457
  resizeObserver.observe(popover);
418
458
  }
419
459
  var undoPositioning = combine(cleanupBaseStyles,
420
- // On every open: hide synchronously so the user never sees
421
- // the UA-default position, then re-observe for a fresh
422
- // measurement. We use `opacity: 0` rather than
423
- // `visibility: hidden` because Firefox skips visibility-hidden
424
- // elements during `<dialog>` initial-focus traversal. See
425
- // `form-in-popup.spec.tsx` on `desktop-firefox`.
460
+ // Each open needs a fresh measurement, so hide and re-observe.
426
461
  bind(popover, {
427
462
  type: 'toggle',
428
463
  listener: function listener(event) {
429
464
  var toggleEvent = event;
430
465
  if (toggleEvent.newState === 'open') {
431
- popover.style.setProperty('opacity', '0');
466
+ hideUntilPositioned();
432
467
  resizeObserver.observe(popover);
433
468
  }
434
469
  }
@@ -449,9 +484,8 @@ export function useAnchorPosition(_ref3) {
449
484
  }
450
485
  }), function () {
451
486
  scheduledUpdate.cancel();
452
- popover.style.removeProperty('top');
453
- popover.style.removeProperty('left');
454
- popover.style.removeProperty('opacity');
487
+ restorePosition();
488
+ reveal();
455
489
  });
456
490
  return undoPositioning;
457
491
  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id, isOpen]);
@@ -8,7 +8,7 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
8
8
  import once from '@atlaskit/ds-lib/once';
9
9
  import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
10
10
  import { resolvePlacement } from '../internal/resolve-placement';
11
- import { shouldFocusIntoPopover } from '../internal/role-types';
11
+ import { shouldFocusIntoPopover } from '../internal/should-focus-into-popover';
12
12
  import { useAnimatedVisibility } from '../internal/use-animated-visibility';
13
13
  import { useFocusWrap } from '../internal/use-focus-wrap';
14
14
  import { useInitialFocus } from '../internal/use-initial-focus';
@@ -1,4 +1,4 @@
1
- import { type TAriaHasPopupValue, type TRoleRequiringAccessibleName } from './role-types';
1
+ import { type TRoleRequiringAccessibleName } from './role-types';
2
2
  /**
3
3
  * Roles accepted by `getAriaForTrigger`.
4
4
  *
@@ -8,6 +8,26 @@ import { type TAriaHasPopupValue, type TRoleRequiringAccessibleName } from './ro
8
8
  * manually for tooltip triggers.
9
9
  */
10
10
  type TAriaForTriggerRole = TRoleRequiringAccessibleName | 'listbox' | 'tree' | 'grid';
11
+ /**
12
+ * Valid values for the `aria-haspopup` attribute.
13
+ *
14
+ * Derived from the HTML spec - maps popover roles to what the trigger
15
+ * announces. `undefined` means the attribute is omitted entirely (used for
16
+ * non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
17
+ * `aria-haspopup` would be misleading).
18
+ *
19
+ * `true` is intentionally NOT in the union - the runtime only ever produces
20
+ * the explicit string forms, so widening the type would invite consumers to
21
+ * pass `true` and get an `aria-haspopup="true"` serialisation that the
22
+ * runtime no longer emits.
23
+ */
24
+ type TAriaHasPopupValue = 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | undefined;
25
+ /**
26
+ * Non-undefined subset of `TAriaHasPopupValue`. Every role accepted by
27
+ * `getAriaForTrigger` maps to a concrete `aria-haspopup` string, so the
28
+ * trigger always receives a defined attribute value.
29
+ */
30
+ type TAriaHasPopupForTrigger = Exclude<TAriaHasPopupValue, undefined>;
11
31
  type TGetAriaForTriggerOptions = {
12
32
  /**
13
33
  * The `role` that will be set on the `<Popover>` element. Used to derive
@@ -24,12 +44,6 @@ type TGetAriaForTriggerOptions = {
24
44
  */
25
45
  popoverId: string;
26
46
  };
27
- /**
28
- * Non-undefined subset of `TAriaHasPopupValue`. Every role accepted by
29
- * `getAriaForTrigger` maps to a concrete `aria-haspopup` string, so the
30
- * trigger always receives a defined attribute value.
31
- */
32
- type TAriaHasPopupForTrigger = Exclude<TAriaHasPopupValue, undefined>;
33
47
  type TAriaForTrigger = {
34
48
  'aria-haspopup': TAriaHasPopupForTrigger;
35
49
  'aria-expanded': boolean;
@@ -1,17 +1,3 @@
1
- /**
2
- * Valid values for the `aria-haspopup` attribute.
3
- *
4
- * Derived from the HTML spec - maps popover roles to what the trigger
5
- * announces. `undefined` means the attribute is omitted entirely (used for
6
- * non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
7
- * `aria-haspopup` would be misleading).
8
- *
9
- * `true` is intentionally NOT in the union - the runtime only ever produces
10
- * the explicit string forms, so widening the type would invite consumers to
11
- * pass `true` and get an `aria-haspopup="true"` serialisation that the
12
- * runtime no longer emits.
13
- */
14
- export type TAriaHasPopupValue = 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | undefined;
15
1
  /**
16
2
  * Roles that require an accessible name (`label` or `labelledBy`) per WCAG 4.1.2.
17
3
  * Without a name, assistive technology cannot identify these landmarks.
@@ -50,22 +36,4 @@ export type TAriaRoleRequired = ({
50
36
  } & TAccessibleNameRequired) | ({
51
37
  role: TRoleWithImplicitName;
52
38
  } & TAccessibleNameOptional);
53
- /**
54
- * ARIA role props where a role is optional.
55
- *
56
- * Used by `TPopoverProps`. The low-level primitive allows omitting
57
- * the role for cases where it is set externally or not needed.
58
- */
59
- export type TAriaRoleOptional = ({
60
- role: TRoleRequiringAccessibleName;
61
- } & TAccessibleNameRequired) | ({
62
- role?: TRoleWithImplicitName;
63
- } & TAccessibleNameOptional);
64
- /**
65
- * Returns `true` when the given popover role moves focus into the popover
66
- * on open, and `false` otherwise (including when `role` is `undefined`).
67
- */
68
- export declare function shouldFocusIntoPopover({ role, }: {
69
- role: TRoleRequiringAccessibleName | TRoleWithImplicitName | undefined;
70
- }): boolean;
71
39
  export {};
@@ -92,7 +92,7 @@ type TPopoverBaseProps = {
92
92
  */
93
93
  isOpen: boolean;
94
94
  /**
95
- * Placement hint for directional animations (e.g. `slideAndFade`).
95
+ * Placement hint for the default directional animation.
96
96
  *
97
97
  * When `shouldAnimate` is `true`, placement is used to set CSS custom
98
98
  * properties (like `--ds-popover-tx`, `--ds-popover-ty`) that control the
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/top-layer",
3
- "version": "3.1.0",
3
+ "version": "4.0.0",
4
4
  "description": "Low-level layering primitives based on popover and dialog",
5
5
  "homepage": "https://atlassian.design/components/top-layer",
6
6
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -40,9 +40,9 @@
40
40
  "@atlaskit/ds-lib": "^8.0.0",
41
41
  "@atlaskit/layering": "^5.0.0",
42
42
  "@atlaskit/react-compiler-gating": "^0.2.0",
43
- "@atlaskit/tokens": "^16.3.0",
43
+ "@atlaskit/tokens": "^16.7.0",
44
44
  "@babel/runtime": "^7.0.0",
45
- "@compiled/react": "^1.0.0",
45
+ "@compiled/react": "^1.0.2",
46
46
  "bind-event-listener": "^3.0.0",
47
47
  "raf-schd": "^4.0.3"
48
48
  },
@@ -68,33 +68,6 @@
68
68
  "react-dom": "^19.0.0",
69
69
  "tiny-invariant": "^1.2.0"
70
70
  },
71
- "techstack": {
72
- "@atlassian/frontend": {
73
- "import-structure": [
74
- "atlassian-conventions"
75
- ],
76
- "circular-dependencies": [
77
- "file-and-folder-level"
78
- ]
79
- },
80
- "@repo/internal": {
81
- "dom-events": "use-bind-event-listener",
82
- "ui-components": [
83
- "lite-mode"
84
- ],
85
- "design-tokens": [
86
- "color",
87
- "spacing"
88
- ],
89
- "deprecation": [
90
- "no-deprecated-imports"
91
- ],
92
- "styling": [
93
- "static",
94
- "compiled"
95
- ]
96
- }
97
- },
98
71
  "publishConfig": {
99
72
  "registry": "https://registry.npmjs.org/"
100
73
  }
@@ -1,10 +0,0 @@
1
- {
2
- "name": "@atlaskit/top-layer/animations",
3
- "main": "../dist/cjs/entry-points/animations.js",
4
- "module": "../dist/esm/entry-points/animations.js",
5
- "module:es2019": "../dist/es2019/entry-points/animations.js",
6
- "sideEffects": [
7
- "*.compiled.css"
8
- ],
9
- "types": "../dist/types/entry-points/animations.d.ts"
10
- }
@@ -1 +0,0 @@
1
- "use strict";
@@ -1,37 +0,0 @@
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,65 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.Slot = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
- var _react = require("react");
11
- var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
12
- var _excluded = ["children"];
13
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
14
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
15
- /**
16
- * Extra DOM/event props are passed through to the cloned child.
17
- */
18
-
19
- /**
20
- * Single element child: merge the caller ref with `child.ref`.
21
- *
22
- * Do not read `child.props.ref`: React keeps a `ref` key on `props` for
23
- * host elements but accessing it logs a warning and returns `undefined`
24
- * (ref lives on the element as `child.ref`).
25
- */
26
-
27
- function isSlotChild(child) {
28
- return /*#__PURE__*/(0, _react.isValidElement)(child);
29
- }
30
-
31
- /**
32
- * Merges props (including ref) onto a single React element child.
33
- *
34
- * A safer alternative to raw `cloneElement` that:
35
- * 1. Guards with `isValidElement` - non-element children (strings,
36
- * fragments, null) are returned as-is instead of crashing.
37
- * 2. Merges refs via `mergeRefs` so both the caller's ref and the
38
- * child's existing ref are honoured.
39
- * 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
40
- * onto the child element.
41
- *
42
- * Event handlers (e.g. `onClick`) are **not** auto-merged - the caller's
43
- * handler replaces the child's. Compose handlers before passing them in.
44
- *
45
- * @example
46
- * ```tsx
47
- * <Slot ref={triggerRef} onClick={handleClick} aria-expanded={isOpen}>
48
- * <button>Open</button>
49
- * </Slot>
50
- * ```
51
- */
52
- var Slot = exports.Slot = /*#__PURE__*/(0, _react.forwardRef)(function Slot(slotProps, ref) {
53
- var rawChildren = slotProps.children,
54
- props = (0, _objectWithoutProperties2.default)(slotProps, _excluded);
55
- // `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
56
- var children = rawChildren;
57
- if (!isSlotChild(children)) {
58
- return children;
59
- }
60
-
61
- // eslint-disable-next-line @repo/internal/react/no-clone-element -- Slot is a controlled wrapper around cloneElement with isValidElement guard
62
- return /*#__PURE__*/(0, _react.cloneElement)(children, _objectSpread(_objectSpread({}, props), {}, {
63
- ref: (0, _mergeRefs.default)([ref, children.ref])
64
- }));
65
- });
File without changes
@@ -1,32 +0,0 @@
1
- /**
2
- * Maps a popover content role to the correct `aria-haspopup` value
3
- * for its trigger element.
4
- *
5
- * Returns `undefined` for roles that are not popups in the ARIA sense
6
- * (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
7
- * should not announce a popup at all - emitting `aria-haspopup="dialog"`
8
- * on a tooltip trigger would mislead assistive technology.
9
- */
10
- export function roleToAriaHasPopup({
11
- role
12
- }) {
13
- if (role === 'menu') {
14
- return 'menu';
15
- }
16
- if (role === 'listbox') {
17
- return 'listbox';
18
- }
19
- if (role === 'tree') {
20
- return 'tree';
21
- }
22
- if (role === 'grid') {
23
- return 'grid';
24
- }
25
- if (role === 'dialog' || role === 'alertdialog') {
26
- return 'dialog';
27
- }
28
- // Non-popup roles (tooltip, note, status, alert, log) and the
29
- // no-role case: omit `aria-haspopup` entirely. React drops the
30
- // attribute when the value is `undefined`.
31
- return undefined;
32
- }
@@ -1,57 +0,0 @@
1
- import { cloneElement, forwardRef, isValidElement } from 'react';
2
- import mergeRefs from '@atlaskit/ds-lib/merge-refs';
3
-
4
- /**
5
- * Extra DOM/event props are passed through to the cloned child.
6
- */
7
-
8
- /**
9
- * Single element child: merge the caller ref with `child.ref`.
10
- *
11
- * Do not read `child.props.ref`: React keeps a `ref` key on `props` for
12
- * host elements but accessing it logs a warning and returns `undefined`
13
- * (ref lives on the element as `child.ref`).
14
- */
15
-
16
- function isSlotChild(child) {
17
- return /*#__PURE__*/isValidElement(child);
18
- }
19
-
20
- /**
21
- * Merges props (including ref) onto a single React element child.
22
- *
23
- * A safer alternative to raw `cloneElement` that:
24
- * 1. Guards with `isValidElement` - non-element children (strings,
25
- * fragments, null) are returned as-is instead of crashing.
26
- * 2. Merges refs via `mergeRefs` so both the caller's ref and the
27
- * child's existing ref are honoured.
28
- * 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
29
- * onto the child element.
30
- *
31
- * Event handlers (e.g. `onClick`) are **not** auto-merged - the caller's
32
- * handler replaces the child's. Compose handlers before passing them in.
33
- *
34
- * @example
35
- * ```tsx
36
- * <Slot ref={triggerRef} onClick={handleClick} aria-expanded={isOpen}>
37
- * <button>Open</button>
38
- * </Slot>
39
- * ```
40
- */
41
- export const Slot = /*#__PURE__*/forwardRef(function Slot(slotProps, ref) {
42
- const {
43
- children: rawChildren,
44
- ...props
45
- } = slotProps;
46
- // `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
47
- const children = rawChildren;
48
- if (!isSlotChild(children)) {
49
- return children;
50
- }
51
-
52
- // eslint-disable-next-line @repo/internal/react/no-clone-element -- Slot is a controlled wrapper around cloneElement with isValidElement guard
53
- return /*#__PURE__*/cloneElement(children, {
54
- ...props,
55
- ref: mergeRefs([ref, children.ref])
56
- });
57
- });
File without changes
@@ -1,31 +0,0 @@
1
- /**
2
- * Maps a popover content role to the correct `aria-haspopup` value
3
- * for its trigger element.
4
- *
5
- * Returns `undefined` for roles that are not popups in the ARIA sense
6
- * (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
7
- * should not announce a popup at all - emitting `aria-haspopup="dialog"`
8
- * on a tooltip trigger would mislead assistive technology.
9
- */
10
- export function roleToAriaHasPopup(_ref) {
11
- var role = _ref.role;
12
- if (role === 'menu') {
13
- return 'menu';
14
- }
15
- if (role === 'listbox') {
16
- return 'listbox';
17
- }
18
- if (role === 'tree') {
19
- return 'tree';
20
- }
21
- if (role === 'grid') {
22
- return 'grid';
23
- }
24
- if (role === 'dialog' || role === 'alertdialog') {
25
- return 'dialog';
26
- }
27
- // Non-popup roles (tooltip, note, status, alert, log) and the
28
- // no-role case: omit `aria-haspopup` entirely. React drops the
29
- // attribute when the value is `undefined`.
30
- return undefined;
31
- }