@12-apps/ui 6.39.16 → 6.39.17

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 (159) hide show
  1. package/dist/_internal/components/data-display/Avatar/Avatar.js +2 -2
  2. package/dist/_internal/components/data-display/Carousel/Carousel.js +3 -3
  3. package/dist/_internal/components/data-display/Chart/SpecChart.js +3 -3
  4. package/dist/_internal/components/data-display/DataViews/DataViewsGrid.js +14 -14
  5. package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js +26 -25
  6. package/dist/_internal/components/data-display/DataViews/DeleteViewDialog.js +5 -4
  7. package/dist/_internal/components/data-display/DataViews/ManageViewsDialog.js +5 -4
  8. package/dist/_internal/components/data-display/DataViews/SaveViewModal.js +5 -4
  9. package/dist/_internal/components/data-display/DataViews/base-card.js +2 -2
  10. package/dist/_internal/components/data-display/DataViews/base-list-card-geometry.js +5 -5
  11. package/dist/_internal/components/data-display/DataViews/base-list-card-slots.js +4 -4
  12. package/dist/_internal/components/data-display/DataViews/base-list-card.js +7 -7
  13. package/dist/_internal/components/data-display/DataViews/data-views-display-panel.js +4 -4
  14. package/dist/_internal/components/data-display/DataViews/data-views-display-tabs.js +3 -3
  15. package/dist/_internal/components/data-display/DataViews/data-views-grid-bodies.js +4 -4
  16. package/dist/_internal/components/data-display/DataViews/data-views-grid-parts.js +13 -13
  17. package/dist/_internal/components/data-display/DataViews/data-views-layout-context.js +2 -2
  18. package/dist/_internal/components/data-display/DataViews/data-views-scope-tabs.js +3 -3
  19. package/dist/_internal/components/data-display/DataViews/data-views-shell-toolbar.js +6 -6
  20. package/dist/_internal/components/data-display/DataViews/data-views-table-parts.js +7 -6
  21. package/dist/_internal/components/data-display/DataViews/data-views-toolbar.js +5 -5
  22. package/dist/_internal/components/data-display/DataViews/list-card-rails.js +3 -3
  23. package/dist/_internal/components/data-display/DataViews/use-data-views-state.js +1 -1
  24. package/dist/_internal/components/data-display/DataViews/use-saved-views-controller.js +2 -2
  25. package/dist/_internal/components/data-display/FleetMap/FleetBody.js +11 -11
  26. package/dist/_internal/components/data-display/FleetMap/FleetCanvas.js +8 -8
  27. package/dist/_internal/components/data-display/FleetMap/FleetMap.js +12 -12
  28. package/dist/_internal/components/data-display/FleetMap/FleetRoster.js +2 -2
  29. package/dist/_internal/components/data-display/Lightbox/Lightbox.js +1 -1
  30. package/dist/_internal/components/data-display/MapPreview/MapDecorations.js +2 -2
  31. package/dist/_internal/components/data-display/MapPreview/MapPreview.hooks.js +2 -2
  32. package/dist/_internal/components/data-display/MapPreview/MapPreview.js +7 -7
  33. package/dist/_internal/components/data-display/MapPreview/MapTiles.js +2 -2
  34. package/dist/_internal/components/data-display/MapPreview/StaticMapView.js +4 -4
  35. package/dist/_internal/components/data-display/MapPreview/useMapPreview.js +3 -3
  36. package/dist/_internal/components/data-display/Progress/Progress.js +2 -2
  37. package/dist/_internal/components/data-display/Sheet/Sheet.js +3 -3
  38. package/dist/_internal/components/data-display/Table/Table.js +2 -2
  39. package/dist/_internal/components/data-display/index.js +36 -36
  40. package/dist/_internal/components/feedback/Dialog/Dialog.focus.js +10 -0
  41. package/dist/_internal/components/feedback/Dialog/Dialog.focus.js.map +1 -0
  42. package/dist/_internal/components/feedback/Dialog/Dialog.js +4 -3
  43. package/dist/_internal/components/feedback/Dialog/Dialog.slots.js +5 -3
  44. package/dist/_internal/components/feedback/Dialog/Dialog.styles.js +1 -1
  45. package/dist/_internal/components/feedback/index.js +4 -3
  46. package/dist/_internal/components/index.js +41 -40
  47. package/dist/_internal/components/navigation/AppHeader/AppHeader.details.js +8 -7
  48. package/dist/_internal/components/navigation/index.js +8 -7
  49. package/dist/_internal/user-avatar/user-avatar.js +3 -3
  50. package/dist/charts.js +11 -11
  51. package/dist/{chunk-V2UZQS2K.js → chunk-2622YFM6.js} +4 -4
  52. package/dist/{chunk-KTCOJFZB.js → chunk-2OWKL4CC.js} +5 -5
  53. package/dist/{chunk-QSRZOXQI.js → chunk-2WVHZIWP.js} +2 -2
  54. package/dist/{chunk-P22W4N5K.js → chunk-37USSARD.js} +2 -2
  55. package/dist/{chunk-RSDYS5B3.js → chunk-4RPFI474.js} +6 -6
  56. package/dist/{chunk-SAOCDKNK.js → chunk-5JCGBCFJ.js} +4 -4
  57. package/dist/{chunk-3BNQDOHC.js → chunk-5OBGW3FG.js} +5 -5
  58. package/dist/{chunk-EMEXXAQI.js → chunk-66O55OZI.js} +6 -6
  59. package/dist/{chunk-SA65SDOY.js → chunk-A2TANYNR.js} +2 -2
  60. package/dist/{chunk-I5T5PQQW.js → chunk-BRM3T4LQ.js} +4 -4
  61. package/dist/{chunk-PG5C2AA4.js → chunk-DF4QODJ6.js} +2 -2
  62. package/dist/{chunk-ESCF5VMQ.js → chunk-DRSY37PB.js} +2 -2
  63. package/dist/{chunk-DYNJQ3HJ.js → chunk-FLDLUAHW.js} +2 -2
  64. package/dist/{chunk-OGB25P3N.js → chunk-HQZRI7UX.js} +2 -2
  65. package/dist/{chunk-HUPR5JXY.js → chunk-HWSS6C7C.js} +2 -2
  66. package/dist/{chunk-T3DNYPEA.js → chunk-I4MRBEWU.js} +12 -12
  67. package/dist/{chunk-HR7YTBR7.js → chunk-IASDP44E.js} +4 -4
  68. package/dist/{chunk-5WT4YWXC.js → chunk-IRD45DRW.js} +2 -2
  69. package/dist/{chunk-ENRBXB6L.js → chunk-JK5UJM4Y.js} +3 -3
  70. package/dist/{chunk-5NT2M2JI.js → chunk-JKIKHWD2.js} +4 -4
  71. package/dist/{chunk-WVJGNIJZ.js → chunk-JYR6VV4Y.js} +3 -3
  72. package/dist/{chunk-5ETBB2DG.js → chunk-K5V6TCYB.js} +4 -4
  73. package/dist/{chunk-3IF3I3FI.js → chunk-KHPL2J3B.js} +2 -2
  74. package/dist/{chunk-AXKLCWFR.js → chunk-KN4ZE2XZ.js} +14 -14
  75. package/dist/{chunk-M3MHYE2M.js → chunk-L566FMDD.js} +4 -4
  76. package/dist/chunk-LV7LSPBF.js +35 -0
  77. package/dist/chunk-LV7LSPBF.js.map +1 -0
  78. package/dist/{chunk-HQWJUHR4.js → chunk-M4QXG5JP.js} +4 -4
  79. package/dist/{chunk-IFS3BRRL.js → chunk-MCJRHF7Z.js} +3 -3
  80. package/dist/{chunk-JGRBHNK6.js → chunk-ME3WYPYK.js} +2 -2
  81. package/dist/{chunk-GAMLBJE6.js → chunk-MQ277OLB.js} +14 -8
  82. package/dist/chunk-MQ277OLB.js.map +1 -0
  83. package/dist/{chunk-QXSV7Z57.js → chunk-MXCIUKTQ.js} +5 -5
  84. package/dist/{chunk-UBEAJFMW.js → chunk-O25SH2MA.js} +5 -5
  85. package/dist/{chunk-ARDLCGBK.js → chunk-O2DLEAUP.js} +3 -3
  86. package/dist/{chunk-WCRGSMLV.js → chunk-SCZABICW.js} +3 -3
  87. package/dist/{chunk-2WU52FLP.js → chunk-ST7B54JN.js} +9 -4
  88. package/dist/chunk-ST7B54JN.js.map +1 -0
  89. package/dist/{chunk-LH46NYGR.js → chunk-TEEJ4GNY.js} +2 -2
  90. package/dist/{chunk-O4AHF45C.js → chunk-VY6L74JQ.js} +2 -2
  91. package/dist/{chunk-XZJM6EPC.js → chunk-YKEO6UHN.js} +4 -4
  92. package/dist/{chunk-WWGD5YVW.js → chunk-YTY7TD7S.js} +2 -2
  93. package/dist/{chunk-5HW37NSW.js → chunk-Z2JH5KW5.js} +16 -2
  94. package/dist/{chunk-5HW37NSW.js.map → chunk-Z2JH5KW5.js.map} +1 -1
  95. package/dist/{chunk-HMAPQV4C.js → chunk-ZWCYSAI5.js} +2 -2
  96. package/dist/data-display/Avatar.js +2 -2
  97. package/dist/data-display/Carousel.js +3 -3
  98. package/dist/data-display/Chart.js +11 -11
  99. package/dist/data-display/DataViews.js +34 -33
  100. package/dist/data-display/FleetMap.js +12 -12
  101. package/dist/data-display/Lightbox.js +1 -1
  102. package/dist/data-display/MapPreview.js +7 -7
  103. package/dist/data-display/Progress.js +2 -2
  104. package/dist/data-display/Sheet.js +3 -3
  105. package/dist/data-display/Table.js +2 -2
  106. package/dist/feedback/Dialog.js +4 -3
  107. package/dist/navigation/AppHeader.js +8 -7
  108. package/dist/types/components/feedback/Dialog/Dialog.d.ts.map +1 -1
  109. package/dist/types/components/feedback/Dialog/Dialog.focus.d.ts +51 -0
  110. package/dist/types/components/feedback/Dialog/Dialog.focus.d.ts.map +1 -0
  111. package/dist/types/components/feedback/Dialog/Dialog.slots.d.ts +14 -0
  112. package/dist/types/components/feedback/Dialog/Dialog.slots.d.ts.map +1 -1
  113. package/dist/types/components/feedback/Dialog/Dialog.styles.d.ts.map +1 -1
  114. package/dist/user-avatar.js +3 -3
  115. package/package.json +1 -1
  116. package/src/components/feedback/Dialog/Dialog.focus.ts +90 -0
  117. package/src/components/feedback/Dialog/Dialog.md +23 -3
  118. package/src/components/feedback/Dialog/Dialog.slots.ts +32 -0
  119. package/src/components/feedback/Dialog/Dialog.styles.ts +15 -0
  120. package/src/components/feedback/Dialog/Dialog.tsx +11 -3
  121. package/dist/chunk-2WU52FLP.js.map +0 -1
  122. package/dist/chunk-GAMLBJE6.js.map +0 -1
  123. /package/dist/{chunk-V2UZQS2K.js.map → chunk-2622YFM6.js.map} +0 -0
  124. /package/dist/{chunk-KTCOJFZB.js.map → chunk-2OWKL4CC.js.map} +0 -0
  125. /package/dist/{chunk-QSRZOXQI.js.map → chunk-2WVHZIWP.js.map} +0 -0
  126. /package/dist/{chunk-P22W4N5K.js.map → chunk-37USSARD.js.map} +0 -0
  127. /package/dist/{chunk-RSDYS5B3.js.map → chunk-4RPFI474.js.map} +0 -0
  128. /package/dist/{chunk-SAOCDKNK.js.map → chunk-5JCGBCFJ.js.map} +0 -0
  129. /package/dist/{chunk-3BNQDOHC.js.map → chunk-5OBGW3FG.js.map} +0 -0
  130. /package/dist/{chunk-EMEXXAQI.js.map → chunk-66O55OZI.js.map} +0 -0
  131. /package/dist/{chunk-SA65SDOY.js.map → chunk-A2TANYNR.js.map} +0 -0
  132. /package/dist/{chunk-I5T5PQQW.js.map → chunk-BRM3T4LQ.js.map} +0 -0
  133. /package/dist/{chunk-PG5C2AA4.js.map → chunk-DF4QODJ6.js.map} +0 -0
  134. /package/dist/{chunk-ESCF5VMQ.js.map → chunk-DRSY37PB.js.map} +0 -0
  135. /package/dist/{chunk-DYNJQ3HJ.js.map → chunk-FLDLUAHW.js.map} +0 -0
  136. /package/dist/{chunk-OGB25P3N.js.map → chunk-HQZRI7UX.js.map} +0 -0
  137. /package/dist/{chunk-HUPR5JXY.js.map → chunk-HWSS6C7C.js.map} +0 -0
  138. /package/dist/{chunk-T3DNYPEA.js.map → chunk-I4MRBEWU.js.map} +0 -0
  139. /package/dist/{chunk-HR7YTBR7.js.map → chunk-IASDP44E.js.map} +0 -0
  140. /package/dist/{chunk-5WT4YWXC.js.map → chunk-IRD45DRW.js.map} +0 -0
  141. /package/dist/{chunk-ENRBXB6L.js.map → chunk-JK5UJM4Y.js.map} +0 -0
  142. /package/dist/{chunk-5NT2M2JI.js.map → chunk-JKIKHWD2.js.map} +0 -0
  143. /package/dist/{chunk-WVJGNIJZ.js.map → chunk-JYR6VV4Y.js.map} +0 -0
  144. /package/dist/{chunk-5ETBB2DG.js.map → chunk-K5V6TCYB.js.map} +0 -0
  145. /package/dist/{chunk-3IF3I3FI.js.map → chunk-KHPL2J3B.js.map} +0 -0
  146. /package/dist/{chunk-AXKLCWFR.js.map → chunk-KN4ZE2XZ.js.map} +0 -0
  147. /package/dist/{chunk-M3MHYE2M.js.map → chunk-L566FMDD.js.map} +0 -0
  148. /package/dist/{chunk-HQWJUHR4.js.map → chunk-M4QXG5JP.js.map} +0 -0
  149. /package/dist/{chunk-IFS3BRRL.js.map → chunk-MCJRHF7Z.js.map} +0 -0
  150. /package/dist/{chunk-JGRBHNK6.js.map → chunk-ME3WYPYK.js.map} +0 -0
  151. /package/dist/{chunk-QXSV7Z57.js.map → chunk-MXCIUKTQ.js.map} +0 -0
  152. /package/dist/{chunk-UBEAJFMW.js.map → chunk-O25SH2MA.js.map} +0 -0
  153. /package/dist/{chunk-ARDLCGBK.js.map → chunk-O2DLEAUP.js.map} +0 -0
  154. /package/dist/{chunk-WCRGSMLV.js.map → chunk-SCZABICW.js.map} +0 -0
  155. /package/dist/{chunk-LH46NYGR.js.map → chunk-TEEJ4GNY.js.map} +0 -0
  156. /package/dist/{chunk-O4AHF45C.js.map → chunk-VY6L74JQ.js.map} +0 -0
  157. /package/dist/{chunk-XZJM6EPC.js.map → chunk-YKEO6UHN.js.map} +0 -0
  158. /package/dist/{chunk-WWGD5YVW.js.map → chunk-YTY7TD7S.js.map} +0 -0
  159. /package/dist/{chunk-HMAPQV4C.js.map → chunk-ZWCYSAI5.js.map} +0 -0
@@ -0,0 +1,90 @@
1
+ /**
2
+ * WHERE INITIAL FOCUS LANDS WHEN A DIALOG OPENS (FUT-2696).
3
+ *
4
+ * MUI's `FocusTrap` focuses ITS OWN root when nothing inside already has
5
+ * focus (`FocusTrap.js`: `if (!rootRef.current.contains(doc.activeElement))
6
+ * … rootRef.current.focus()`). For `MuiDialog` that root is
7
+ * `.MuiDialog-container` — the `role="presentation"` wrapper the Transition
8
+ * clones its ref onto — which sits OUTSIDE the `role="dialog"` paper. A
9
+ * screen reader user landing there hears the page behind the dialog, not the
10
+ * dialog, and the first Tab does not start from the dialog's own controls.
11
+ *
12
+ * The WAI-ARIA APG dialog pattern wants focus INSIDE the dialog on open: the
13
+ * first tabbable descendant of the element carrying `role="dialog"`, or that
14
+ * element itself (given `tabIndex={-1}`, since it is not otherwise reachable
15
+ * by Tab) when it holds nothing focusable.
16
+ *
17
+ * `focusDialogOnEntered` is wired to `TransitionProps.onEntered` /
18
+ * `SlideProps.onEntered` on both renderers rather than to a mount effect,
19
+ * because it needs to run AFTER `FocusTrap`'s own mount effect has already
20
+ * had its turn — `onEntered` fires once the enter transition has finished,
21
+ * well after every mount effect has settled, so there is nothing left to
22
+ * race. A caller's own `autoFocus` on a field inside the dialog already wins
23
+ * against `FocusTrap` for the same reason `FocusTrap` documents: React's
24
+ * `autoFocus` runs synchronously during commit, before `FocusTrap`'s effect
25
+ * even checks whether focus is already inside its root — so by the time this
26
+ * runs, that field is already `contains()`-ed by the dialog and this backs
27
+ * off rather than moving focus away from it.
28
+ */
29
+
30
+ /**
31
+ * The candidate list `FocusTrap`'s own `defaultGetTabbable` uses
32
+ * (`@mui/material/Unstable_TrapFocus/FocusTrap.js`), so "first tabbable
33
+ * descendant" means the same thing here as it does to the trap that then
34
+ * keeps Tab cycling inside it. Like the trap, a match whose resolved
35
+ * `tabIndex` is -1 is skipped: `<button tabIndex={-1}>` is focusable but out
36
+ * of the Tab order, so it is not the first Tab stop.
37
+ */
38
+ const FOCUSABLE_SELECTOR = [
39
+ 'input:not([disabled]):not([type="hidden"])',
40
+ 'select:not([disabled])',
41
+ 'textarea:not([disabled])',
42
+ 'a[href]',
43
+ 'button:not([disabled])',
44
+ '[tabindex]:not([tabindex="-1"])',
45
+ 'audio[controls]',
46
+ 'video[controls]',
47
+ '[contenteditable]:not([contenteditable="false"])',
48
+ ].join(',');
49
+
50
+ /**
51
+ * Move focus into `target`: its first tabbable descendant, or `target`
52
+ * itself — given `tabIndex={-1}` if it does not already carry one, exactly as
53
+ * `FocusTrap` gives its own root — when nothing inside is focusable.
54
+ *
55
+ * Backs off when focus already sits on a DESCENDANT of `target` other than
56
+ * `target` itself: that is a caller's `autoFocus` (or an explicit `.focus()`
57
+ * of their own) that arrived before this ran, and it keeps winning. Focus
58
+ * already sitting ON `target` (as `FocusTrap` leaves it on the drawer's
59
+ * paper, which is its own trap root) is not a caller's choice, so it does
60
+ * not block a first-tabbable descendant from taking over.
61
+ */
62
+ export function focusFirstTabbable(target: HTMLElement): void {
63
+ const active = target.ownerDocument.activeElement;
64
+ if (active !== target && target.contains(active)) return;
65
+
66
+ const tabbable = Array.from(target.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).find(
67
+ (element) => element.tabIndex >= 0,
68
+ );
69
+ if (tabbable) {
70
+ tabbable.focus();
71
+ return;
72
+ }
73
+ if (!target.hasAttribute('tabindex')) target.setAttribute('tabindex', '-1');
74
+ target.focus();
75
+ }
76
+
77
+ /**
78
+ * `node` is what the transition hands back: `.MuiDialog-container` for
79
+ * `ModalDialog` (the paper is a descendant, carrying `role="dialog"`), or the
80
+ * drawer's own paper directly for `DrawerDialog` (`Slide` wraps the paper with
81
+ * no intermediate container, and the paper carries no `role` at all — see
82
+ * `Dialog.md`). Either way, focus the `[role="dialog"]` descendant if there is
83
+ * one, else `node` itself.
84
+ */
85
+ export function focusDialogOnEntered(node: HTMLElement): void {
86
+ const dialog = node.getAttribute('role') === 'dialog'
87
+ ? node
88
+ : (node.querySelector<HTMLElement>('[role="dialog"]') ?? node);
89
+ focusFirstTabbable(dialog);
90
+ }
@@ -317,12 +317,32 @@ Slides in from the right side of the screen, similar to a side panel or drawer.
317
317
 
318
318
  The Dialog component implements comprehensive accessibility features:
319
319
 
320
- - **ARIA Roles**: Uses `role="dialog"` with proper ARIA attributes
320
+ - **ARIA Roles**: Uses `role="dialog"` with proper ARIA attributes (the `default`,
321
+ `glass` and `fullscreen` variants; the `drawer` variant does not — see below)
321
322
  - **ARIA Labels**: Proper labeling for title (`aria-labelledby`) and description (`aria-describedby`)
322
- - **Focus Management**:
323
+ - **Focus Management** (FUT-2696):
323
324
  - Focus is trapped within dialog when open
324
325
  - Focus returns to trigger element when closed
325
- - First focusable element receives focus on open
326
+ - On open, focus moves to the first tabbable descendant of the
327
+ `role="dialog"` paper — or, when the paper holds nothing focusable, to the
328
+ paper itself (`tabIndex={-1}`). This is NOT where MUI's own `FocusTrap`
329
+ would otherwise park it: left alone, `FocusTrap` focuses its root, which
330
+ for MUI's `Dialog` is `.MuiDialog-container` — the wrapper AROUND the
331
+ paper, and so outside the element a screen reader announces as the
332
+ dialog. `Dialog.tsx` corrects this itself, off `TransitionProps.onEntered`
333
+ (see `Dialog.focus.ts`), rather than relying on MUI's default.
334
+ - A caller's own `autoFocus` on a field inside the dialog keeps winning:
335
+ React applies it synchronously on mount, before `FocusTrap` or this fix
336
+ ever runs, so by the time either would move focus, it is already inside
337
+ the dialog and both back off.
338
+ - The `drawer` variant gets the same first-tabbable behaviour, but its
339
+ paper carries no `role="dialog"` — MUI's `Drawer` sets no `role` on it at
340
+ all, unlike `Dialog`'s paper — and there is no `.MuiDrawer-container`
341
+ wrapper either: `Slide` wraps the drawer's paper directly, so it IS
342
+ `FocusTrap`'s own root and was never reachable only from outside it the
343
+ way `.MuiDialog-container` was. The drawer therefore never had this bug;
344
+ the same fix on it only saves a caller an extra Tab press to reach the
345
+ panel's first control.
326
346
  - **Keyboard Navigation**:
327
347
  - `Escape` - Closes dialog (unless persistent mode is enabled)
328
348
  - `Tab` - Navigates between focusable elements
@@ -98,3 +98,35 @@ export function mergedBackdropSlot<O>(
98
98
  ): Slot<SlotValue, O> {
99
99
  return mergedSlot(look, legacy, slot);
100
100
  }
101
+
102
+ /** What the transition slot's `onEntered` looks like on either renderer. */
103
+ interface TransitionSlotValue {
104
+ onEntered?: (node: HTMLElement, isAppearing: boolean) => void;
105
+ }
106
+
107
+ /**
108
+ * The transition slot: `onFocusEntered` (initial-focus, FUT-2696) runs
109
+ * first, then the deprecated `TransitionProps`/`SlideProps`, then
110
+ * `slotProps.transition` — so a caller's own `onEntered` still runs, and
111
+ * still runs last, meaning it can move focus again if it wants to.
112
+ *
113
+ * No `sx`/`look` here: unlike the paper and the backdrop, the transition slot
114
+ * carries no visual look of the Dialog's own to merge under a caller's.
115
+ */
116
+ export function mergedTransitionSlot<O>(
117
+ onFocusEntered: (node: HTMLElement, isAppearing: boolean) => void,
118
+ legacy: TransitionSlotValue | undefined,
119
+ slot: Slot<TransitionSlotValue, O> | undefined,
120
+ ): Slot<TransitionSlotValue, O> {
121
+ const compose = (merged: TransitionSlotValue): TransitionSlotValue => ({
122
+ ...merged,
123
+ onEntered: (node: HTMLElement, isAppearing: boolean) => {
124
+ onFocusEntered(node, isAppearing);
125
+ merged.onEntered?.(node, isAppearing);
126
+ },
127
+ });
128
+ if (typeof slot === 'function') {
129
+ return (ownerState: O) => compose({ ...legacy, ...slot(ownerState) });
130
+ }
131
+ return compose({ ...legacy, ...slot });
132
+ }
@@ -125,6 +125,17 @@ function defaultVariantStyles(theme: Theme, opts: VariantStyleOptions) {
125
125
  };
126
126
  }
127
127
 
128
+ /**
129
+ * The paper never grows an outline of its own — same as `.MuiDialog-container`
130
+ * (`outline: 0`, unconditionally, in MUI's own `Dialog.js`). It matters once
131
+ * `focusDialogOnEntered` (FUT-2696) falls back to focusing the paper itself: a
132
+ * browser's default `:focus`/`:focus-visible` ring is drawn OUTSIDE the box
133
+ * model — it never resizes a box or shifts a sibling — but this keeps the
134
+ * paper visually identical whether or not that fallback ever fires, rather
135
+ * than relying on that guarantee.
136
+ */
137
+ const NO_FOCUS_OUTLINE = { outline: 0 } as const;
138
+
128
139
  export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProps<Theme> {
129
140
  const decorations = {
130
141
  ...glowStylesOf(theme, opts.glow),
@@ -135,6 +146,7 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
135
146
  return {
136
147
  ...baseStylesOf(theme, opts),
137
148
  ...decorations,
149
+ ...NO_FOCUS_OUTLINE,
138
150
  backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),
139
151
  backdropFilter: `blur(${rem(theme, DIALOG_GLASS.blurPx)})`,
140
152
  border: `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`,
@@ -150,6 +162,7 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
150
162
  maxWidth: 'none',
151
163
  maxHeight: 'none',
152
164
  ...decorations,
165
+ ...NO_FOCUS_OUTLINE,
153
166
  };
154
167
  case 'drawer': {
155
168
  const radius = borderRadiusOf(theme, opts.borderRadius);
@@ -166,6 +179,7 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
166
179
  ...dynamicViewportHeight('height'),
167
180
  maxHeight: 'none',
168
181
  ...decorations,
182
+ ...NO_FOCUS_OUTLINE,
169
183
  };
170
184
  }
171
185
  default:
@@ -173,6 +187,7 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
173
187
  ...baseStylesOf(theme, opts),
174
188
  ...decorations,
175
189
  ...defaultVariantStyles(theme, opts),
190
+ ...NO_FOCUS_OUTLINE,
176
191
  };
177
192
  }
178
193
  }
@@ -11,6 +11,7 @@ import Typography from '@mui/material/Typography/index.js';
11
11
  import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
12
12
  import React from 'react';
13
13
 
14
+ import { focusDialogOnEntered } from './Dialog.focus';
14
15
  import { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';
15
16
  import {
16
17
  DIALOG_ACTIONS,
@@ -20,7 +21,7 @@ import {
20
21
  DIALOG_TITLE,
21
22
  DIALOG_TITLED_BODY_PADDING_TOP_UNITS,
22
23
  } from './Dialog.metrics';
23
- import { mergedBackdropSlot, mergedPaperSlot } from './Dialog.slots';
24
+ import { mergedBackdropSlot, mergedPaperSlot, mergedTransitionSlot } from './Dialog.slots';
24
25
  import { backdropSxOf, variantStylesOf } from './Dialog.styles';
25
26
  import { childTestId, resolveTestId, slotTestId, withoutTestIdProps } from '../../../platform/test-id';
26
27
  import type {
@@ -106,6 +107,8 @@ type RendererProps = DialogLooks & { children: React.ReactNode };
106
107
  * `slotProps.backdrop`, not the deprecated `BackdropProps`, and a caller's
107
108
  * backdrop props from either spelling merge over it rather than replacing it
108
109
  * (FUT-2672) — as their paper props merge over the variant's look (FUT-2613).
110
+ * `slotProps.transition` gives initial focus to the paper (FUT-2696, see
111
+ * `Dialog.focus.ts` and `Dialog.md`) ahead of a caller's own `onEntered`.
109
112
  */
110
113
  function ModalDialog({
111
114
  paperSx,
@@ -114,7 +117,7 @@ function ModalDialog({
114
117
  dialogProps,
115
118
  children,
116
119
  }: RendererProps & { dialogProps: MuiDialogProps }) {
117
- const { PaperProps: callerPaper, BackdropProps: callerBackdrop, slotProps, ...rest } = dialogProps;
120
+ const { PaperProps: callerPaper, BackdropProps: callerBackdrop, TransitionProps: callerTransition, slotProps, ...rest } = dialogProps;
118
121
  return (
119
122
  <MuiDialog
120
123
  {...rest}
@@ -122,6 +125,7 @@ function ModalDialog({
122
125
  ...slotProps,
123
126
  paper: mergedPaperSlot(paperSx, testId, callerPaper, slotProps?.paper),
124
127
  backdrop: mergedBackdropSlot(backdropSx, callerBackdrop, slotProps?.backdrop),
128
+ transition: mergedTransitionSlot(focusDialogOnEntered, callerTransition, slotProps?.transition),
125
129
  }}
126
130
  >
127
131
  {children}
@@ -139,6 +143,9 @@ function ModalDialog({
139
143
  * `glass` blurs it here too; the paper does not frost (FUT-2673). MUI's
140
144
  * `Drawer` does not merge `BackdropProps` into `slotProps.backdrop` — it takes
141
145
  * one or the other — so both are folded into the one slot here.
146
+ * `slotProps.transition` gives initial focus the same way `ModalDialog` does
147
+ * (FUT-2696, see `Dialog.focus.ts` and `Dialog.md` for why the drawer's paper
148
+ * differs from the modal's paper here and needed the fix less).
142
149
  */
143
150
  function DrawerDialog({
144
151
  paperSx,
@@ -147,7 +154,7 @@ function DrawerDialog({
147
154
  drawerProps,
148
155
  children,
149
156
  }: RendererProps & { drawerProps: DrawerProps }) {
150
- const { PaperProps: callerPaper, BackdropProps: callerBackdrop, slotProps, ...rest } = drawerProps;
157
+ const { PaperProps: callerPaper, BackdropProps: callerBackdrop, SlideProps: callerTransition, slotProps, ...rest } = drawerProps;
151
158
  return (
152
159
  <Drawer
153
160
  anchor="right"
@@ -157,6 +164,7 @@ function DrawerDialog({
157
164
  ...slotProps,
158
165
  paper: mergedPaperSlot(paperSx, undefined, callerPaper, slotProps?.paper),
159
166
  backdrop: mergedBackdropSlot(backdropSx, callerBackdrop, slotProps?.backdrop),
167
+ transition: mergedTransitionSlot(focusDialogOnEntered, callerTransition, slotProps?.transition),
160
168
  }}
161
169
  >
162
170
  {children}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/feedback/Dialog/Dialog.styles.ts"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport { alpha, keyframes } from '@mui/material/styles/index.js';\n\nimport type { DialogBorderRadius, DialogSize, DialogVariant } from './Dialog.base';\nimport {\n DIALOG_BACKDROP,\n DIALOG_BORDER_WIDTH,\n DIALOG_GLASS,\n DIALOG_GLOW,\n DIALOG_GRADIENT,\n DIALOG_MARGIN_UNITS,\n DIALOG_MAX_WIDTH,\n DIALOG_PULSE,\n DIALOG_RADIUS_UNITS,\n DIALOG_WIDTH_PERCENT,\n} from './Dialog.metrics';\nimport { scrim, shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\nimport { dynamicViewportHeight } from '../../../utils/viewport';\n\n/**\n * Paper/backdrop styling for the Dialog component (FUT-181 gate cleanup):\n * pure helpers so `Dialog.tsx` stays within the size/complexity budget.\n *\n * Every number comes from `Dialog.metrics.ts`, which the native renderer reads\n * too — so a paper cannot be 800px wide on one side and 780 on the other.\n */\n\n// Define pulse animation — a function of the theme so the ring's spread follows the type scale.\nconst pulseAnimation = (theme: Theme) => keyframes`\n 0% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 1;\n }\n 70% {\n box-shadow: 0 0 0 ${rem(theme, DIALOG_PULSE.spread)} currentColor;\n opacity: 0;\n }\n 100% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 0;\n }\n`;\n\n/** Style toggles that shape the dialog paper (extracted so each fn stays small). */\ninterface VariantStyleOptions {\n variant: DialogVariant;\n size: DialogSize;\n borderRadius: DialogBorderRadius;\n glass: boolean;\n gradient: boolean;\n glow: boolean;\n pulse: boolean;\n}\n\nfunction borderRadiusOf(theme: Theme, borderRadius: VariantStyleOptions['borderRadius']) {\n const units = DIALOG_RADIUS_UNITS[borderRadius] ?? DIALOG_RADIUS_UNITS.lg;\n // `none` is a bare 0 rather than `spacing(0)`, as this has always written it.\n return units === 0 ? '0' : theme.spacing(units);\n}\n\nfunction maxWidthOf(theme: Theme, size: VariantStyleOptions['size']): string {\n return rem(theme, DIALOG_MAX_WIDTH[size] ?? DIALOG_MAX_WIDTH.md);\n}\n\nfunction baseStylesOf(theme: Theme, opts: VariantStyleOptions) {\n return {\n borderRadius: borderRadiusOf(theme, opts.borderRadius),\n maxWidth: maxWidthOf(theme, opts.size),\n width: `${DIALOG_WIDTH_PERCENT}vw`,\n margin: theme.spacing(DIALOG_MARGIN_UNITS),\n transition: theme.transitions.create(\n ['box-shadow', 'background-color', 'backdrop-filter'],\n { duration: theme.transitions.duration.standard },\n ),\n };\n}\n\nfunction glowStylesOf(theme: Theme, glow: boolean) {\n return glow\n ? {\n boxShadow: `${rems(theme, 0, 0, DIALOG_GLOW.blurRadius)} ${alpha(theme.palette.primary.main, DIALOG_GLOW.alpha)}`,\n }\n : {};\n}\n\nfunction pulseStylesOf(theme: Theme, pulse: boolean) {\n if (!pulse) return {};\n return {\n position: 'relative' as const,\n '&::after': {\n content: '\"\"',\n position: 'absolute' as const,\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n borderRadius: 'inherit',\n backgroundColor: theme.palette.primary.main,\n opacity: DIALOG_PULSE.alpha,\n animation: `${pulseAnimation(theme)} ${DIALOG_PULSE.durationMs / 1000}s infinite`,\n pointerEvents: 'none' as const,\n zIndex: DIALOG_PULSE.zIndex,\n },\n };\n}\n\n/** The default variant's paper: optional gradient/glass over the base styles. */\nfunction defaultVariantStyles(theme: Theme, opts: VariantStyleOptions) {\n const gradientStyles = opts.gradient\n ? {\n background: `linear-gradient(${DIALOG_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, DIALOG_GRADIENT.stopAlpha)}, ${alpha(theme.palette.secondary.main, DIALOG_GRADIENT.stopAlpha)})`,\n backdropFilter: `blur(${rem(theme, DIALOG_GRADIENT.blurPx)})`,\n }\n : {};\n return {\n ...gradientStyles,\n backgroundColor: opts.glass\n ? alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha)\n : theme.palette.background.paper,\n backdropFilter: opts.glass ? `blur(${rem(theme, DIALOG_GLASS.blurPx)})` : 'none',\n border: opts.glass\n ? `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`\n : 'none',\n };\n}\n\nexport function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProps<Theme> {\n const decorations = {\n ...glowStylesOf(theme, opts.glow),\n ...pulseStylesOf(theme, opts.pulse),\n };\n switch (opts.variant) {\n case 'glass':\n return {\n ...baseStylesOf(theme, opts),\n ...decorations,\n backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),\n backdropFilter: `blur(${rem(theme, DIALOG_GLASS.blurPx)})`,\n border: `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`,\n boxShadow: `${rems(theme, 0, DIALOG_GLASS.shadow.offsetY, DIALOG_GLASS.shadow.blurRadius)} ${shadowInk(theme, DIALOG_GLASS.shadow.alpha)}`,\n };\n case 'fullscreen':\n return {\n borderRadius: 0,\n margin: 0,\n width: '100vw',\n // `100dvh`, not `100vh` — see `dynamicViewportHeight`.\n ...dynamicViewportHeight('height'),\n maxWidth: 'none',\n maxHeight: 'none',\n ...decorations,\n };\n case 'drawer': {\n const radius = borderRadiusOf(theme, opts.borderRadius);\n return {\n // `radius` is already a length (`theme.spacing(n)` → '16px', or 0): gluing\n // another `px` on wrote '16pxpx', which the browser dropped, leaving the\n // panel's leading corners square.\n borderRadius: `${radius} 0 0 ${radius}`,\n margin: 0,\n width: maxWidthOf(theme, opts.size),\n // Never wider than the screen: a 600px panel on a 375px phone put its\n // title and the start of every line off the left edge.\n maxWidth: '100%',\n ...dynamicViewportHeight('height'),\n maxHeight: 'none',\n ...decorations,\n };\n }\n default:\n return {\n ...baseStylesOf(theme, opts),\n ...decorations,\n ...defaultVariantStyles(theme, opts),\n };\n }\n}\n\nexport function backdropSxOf(theme: Theme, glass: boolean) {\n return {\n backgroundColor: scrim(theme, glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain),\n backdropFilter: glass ? `blur(${rem(theme, DIALOG_BACKDROP.blurPx)})` : 'none',\n };\n}\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/feedback/Dialog/Dialog.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport Backdrop from '@mui/material/Backdrop/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiDialog, { type DialogProps as MuiDialogProps } from '@mui/material/Dialog/index.js';\nimport MuiDialogActions from '@mui/material/DialogActions/index.js';\nimport MuiDialogContent from '@mui/material/DialogContent/index.js';\nimport MuiDialogTitle from '@mui/material/DialogTitle/index.js';\nimport Drawer, { type DrawerProps } from '@mui/material/Drawer/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';\nimport {\n DIALOG_ACTIONS,\n DIALOG_BODY_PADDING_UNITS,\n DIALOG_CONTENT_PADDING_UNITS,\n DIALOG_HEADER_CHILDREN_PADDING_UNITS,\n DIALOG_TITLE,\n DIALOG_TITLED_BODY_PADDING_TOP_UNITS,\n} from './Dialog.metrics';\nimport { mergedBackdropSlot, mergedPaperSlot } from './Dialog.slots';\nimport { backdropSxOf, variantStylesOf } from './Dialog.styles';\nimport { childTestId, resolveTestId, slotTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport type {\n DialogActionsProps,\n DialogContentProps,\n DialogHeaderProps,\n DialogProps,\n} from './Dialog.types';\n\n/**\n * The padding a dialog gives children that are not managing their own — and the\n * rule that takes it back when it turns out they are.\n *\n * `:has()` is doing what {@link hasSpacingSlot} cannot. A slot passed through a\n * COMPONENT (`<Body />` rendering a `DialogContent`) is invisible to any check\n * on element type: React does not know what a component renders until it has\n * rendered it, and by then the wrapper is already in the tree. The selector\n * asks the question one step later, of the DOM, where the answer exists.\n *\n * `display: contents` rather than `padding: 0`, because the padding is only\n * half of what a wrapper does. The other half is standing between the paper and\n * its children: MUI's `scroll=\"paper\"` makes the paper a flex column with\n * `overflow-y: auto`, so a `DialogContent` that is no longer its direct child\n * cannot be the thing that scrolls — the whole dialog scrolls instead and\n * carries the `DialogActions` off the bottom with it. An element with\n * `display: contents` generates no box at all: its children become the paper's\n * flex items, and its padding is never applied. Both halves, one declaration.\n *\n * A browser without `:has()` falls back to the padded box — the layout this\n * had before, not a broken one.\n */\nconst BODY_SX = {\n px: DIALOG_BODY_PADDING_UNITS.horizontal,\n pb: DIALOG_BODY_PADDING_UNITS.bottom,\n '&:has(> .MuiDialogContent-root), &:has(> .MuiDialogActions-root)': {\n display: 'contents',\n },\n} as const;\n\n/**\n * The dialog body. Consumers that pass raw children (no <DialogContent>) used\n * to render them flush against the paper edges — give them comfortable default\n * padding; <DialogContent>/<DialogActions> users keep managing their own\n * spacing.\n */\nfunction bodyOf(children: React.ReactNode, hasTitle: boolean): React.ReactNode {\n // Read lazily: both slots are declared below this function.\n if (hasSpacingSlot(children, [DialogContent, DialogActions])) return children;\n const pt = hasTitle\n ? DIALOG_BODY_PADDING_UNITS.topUnderTitle\n : DIALOG_BODY_PADDING_UNITS.top;\n return <Box sx={{ ...BODY_SX, pt }}>{children}</Box>;\n}\n\n/**\n * MUI's `onClose` for either renderer: a `persistent` dialog swallows the\n * backdrop press and Escape, and the caller's `onClose` is called with no\n * arguments, as `Dialog.base.ts` promises. The drawer used to get the caller's\n * raw `onClose` — so it closed when `persistent` said it must not, and was\n * handed MUI's `(event, reason)` (FUT-2673).\n */\nfunction closeHandlerOf(persistent: boolean, onClose: (() => void) | undefined) {\n return (_event: object, reason: 'backdropClick' | 'escapeKeyDown') => {\n if (persistent && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {\n return;\n }\n onClose?.();\n };\n}\n\n/** The looks the Dialog lays under a caller's paper and backdrop props. */\ninterface DialogLooks {\n paperSx: SxProps<Theme>;\n backdropSx: SxProps<Theme>;\n testId: string | undefined;\n}\n\n/** What either renderer below takes: the looks, and the dialog's own children. */\ntype RendererProps = DialogLooks & { children: React.ReactNode };\n\n/**\n * Every variant but the drawer: MUI's `Dialog`. The scrim reaches MUI through\n * `slotProps.backdrop`, not the deprecated `BackdropProps`, and a caller's\n * backdrop props from either spelling merge over it rather than replacing it\n * (FUT-2672) — as their paper props merge over the variant's look (FUT-2613).\n */\nfunction ModalDialog({\n paperSx,\n backdropSx,\n testId,\n dialogProps,\n children,\n}: RendererProps & { dialogProps: MuiDialogProps }) {\n const { PaperProps: callerPaper, BackdropProps: callerBackdrop, slotProps, ...rest } = dialogProps;\n return (\n <MuiDialog\n {...rest}\n slotProps={{\n ...slotProps,\n paper: mergedPaperSlot(paperSx, testId, callerPaper, slotProps?.paper),\n backdrop: mergedBackdropSlot(backdropSx, callerBackdrop, slotProps?.backdrop),\n }}\n >\n {children}\n </MuiDialog>\n );\n}\n\n/**\n * The drawer variant: MUI's `Drawer`, with the variant's look on the Drawer's\n * OWN paper — on an inner Box it left the paper 0px wide and clipped the panel —\n * and a caller's paper props merged over it rather than replacing it. The\n * test id stays on the Drawer root, so the paper carries none of its own.\n *\n * The scrim rides the drawer's backdrop exactly as it rides the dialog's, so\n * `glass` blurs it here too; the paper does not frost (FUT-2673). MUI's\n * `Drawer` does not merge `BackdropProps` into `slotProps.backdrop` — it takes\n * one or the other — so both are folded into the one slot here.\n */\nfunction DrawerDialog({\n paperSx,\n backdropSx,\n testId,\n drawerProps,\n children,\n}: RendererProps & { drawerProps: DrawerProps }) {\n const { PaperProps: callerPaper, BackdropProps: callerBackdrop, slotProps, ...rest } = drawerProps;\n return (\n <Drawer\n anchor=\"right\"\n data-testid={testId}\n {...rest}\n slotProps={{\n ...slotProps,\n paper: mergedPaperSlot(paperSx, undefined, callerPaper, slotProps?.paper),\n backdrop: mergedBackdropSlot(backdropSx, callerBackdrop, slotProps?.backdrop),\n }}\n >\n {children}\n </Drawer>\n );\n}\n\nexport const Dialog: React.FC<DialogProps> = (rawProps) => {\n const {\n children,\n variant,\n size,\n title,\n description,\n showCloseButton,\n backdrop,\n persistent,\n glass,\n gradient,\n glow,\n pulse,\n borderRadius,\n onClose,\n open,\n ...others\n } = withDialogDefaults(rawProps);\n const theme = useTheme();\n // Every spelling of the test id the shared contract allows, mapped to the one\n // the DOM reads, and stripped from what is spread — `testID` is React\n // Native's name for it and is not a DOM attribute. The native `Dialog` does\n // the same in reverse.\n const testId = resolveTestId(others, 'dialog');\n const props = withoutTestIdProps(others);\n const looks: DialogLooks = {\n paperSx: variantStylesOf(theme, { variant, size, borderRadius, glass, gradient, glow, pulse }),\n backdropSx: backdropSxOf(theme, glass),\n testId,\n };\n const handleClose = closeHandlerOf(persistent, onClose);\n\n const header = title ? (\n <DialogHeader\n title={title}\n subtitle={description}\n showCloseButton={showCloseButton}\n onClose={onClose}\n dataTestId={testId}\n />\n ) : null;\n const body = bodyOf(children, Boolean(title));\n\n if (variant === 'drawer') {\n return (\n <DrawerDialog {...looks} drawerProps={{ ...props, open, onClose: handleClose }}>\n {header}\n {body}\n </DrawerDialog>\n );\n }\n\n return (\n <ModalDialog\n {...looks}\n dialogProps={{\n open,\n onClose: handleClose,\n fullScreen: variant === 'fullscreen',\n BackdropComponent: backdrop ? Backdrop : undefined,\n ...props,\n }}\n >\n {header}\n {body}\n </ModalDialog>\n );\n};\n\nexport const DialogHeader: React.FC<DialogHeaderProps> = ({\n children,\n title,\n subtitle,\n showCloseButton = true,\n onClose,\n ...others\n}) => {\n const props = withoutTestIdProps(others);\n\n if (children) {\n return (\n <Box\n data-testid={slotTestId(others, 'header', 'dialog')}\n sx={{\n p: DIALOG_HEADER_CHILDREN_PADDING_UNITS,\n borderBottom: '1px solid',\n borderColor: 'divider',\n }}\n >\n {children}\n </Box>\n );\n }\n\n return (\n <MuiDialogTitle\n data-testid={slotTestId(others, 'title', 'dialog')}\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n pb: subtitle\n ? DIALOG_TITLE.paddingBottomUnits.withSubtitle\n : DIALOG_TITLE.paddingBottomUnits.plain,\n }}\n {...props}\n >\n <Box>\n <Typography variant=\"h6\" component=\"div\">\n {title}\n </Typography>\n {subtitle && (\n <Typography\n variant=\"body2\"\n color=\"text.secondary\"\n sx={{ mt: DIALOG_TITLE.subtitleGapUnits }}\n >\n {subtitle}\n </Typography>\n )}\n </Box>\n {showCloseButton && onClose && (\n <IconButton\n aria-label=\"close\"\n onClick={onClose}\n data-testid={childTestId(others, 'close', 'dialog')}\n sx={{\n color: 'text.secondary',\n '&:hover': {\n backgroundColor: 'action.hover',\n },\n }}\n >\n <CloseIcon />\n </IconButton>\n )}\n </MuiDialogTitle>\n );\n};\n\n/**\n * Top padding for a body that sits directly under the title.\n *\n * MUI zeroes it there (`.MuiDialogTitle-root + &` on a non-`dividers` content),\n * assuming the title's own bottom padding is the whole gap. That assumption\n * breaks for a body opening with an outlined field: a filled field floats its\n * label ABOVE the input's border box, and `DialogContent` is `overflow-y: auto`\n * — a clipping box — so the label gets sliced in half (FUT-544: \"Tipo\" in the\n * \"Novo insumo\" dialog).\n *\n * Reserve the overhang rather than restore the full 24px: the title already\n * contributes its bottom padding, so a shrunk label's `translate(…, -9px)` is\n * all that is missing. 12px clears it and leaves the gap visually tight.\n */\nconst TITLED_BODY_PADDING_TOP = DIALOG_TITLED_BODY_PADDING_TOP_UNITS;\n\n/**\n * `.MuiDialogTitle-root + &` is `(0,2,0)`-specific and a plain `sx` entry is\n * `(0,1,0)`, so the padding above only survives the cascade by naming the class\n * again — `(0,3,0)`. Scoped to the title-following case so an untitled dialog\n * keeps MUI's roomier default.\n */\nconst TITLED_BODY_SELECTOR = '.MuiDialogTitle-root + &.MuiDialogContent-root';\n\nexport const DialogContent: React.FC<DialogContentProps> = ({\n children,\n dividers = false,\n dense = false,\n ...others\n}) => (\n <MuiDialogContent\n data-testid={slotTestId(others, 'content', 'dialog')}\n dividers={dividers}\n sx={{\n padding: dense ? DIALOG_CONTENT_PADDING_UNITS.dense : DIALOG_CONTENT_PADDING_UNITS.normal,\n [TITLED_BODY_SELECTOR]: { paddingTop: TITLED_BODY_PADDING_TOP },\n '&.MuiDialogContent-dividers': {\n borderTop: dividers ? '1px solid' : 'none',\n borderBottom: dividers ? '1px solid' : 'none',\n borderColor: 'divider',\n },\n }}\n {...withoutTestIdProps(others)}\n >\n {children}\n </MuiDialogContent>\n );\n\nexport const DialogActions: React.FC<DialogActionsProps> = ({\n children,\n alignment = 'right',\n spacing = DIALOG_ACTIONS.defaultSpacingUnits,\n ...others\n}) => {\n const getJustifyContent = () => {\n switch (alignment) {\n case 'left': return 'flex-start';\n case 'center': return 'center';\n case 'right': return 'flex-end';\n case 'space-between': return 'space-between';\n default: return 'flex-end';\n }\n };\n\n return (\n <MuiDialogActions\n data-testid={slotTestId(others, 'actions', 'dialog')}\n sx={{\n justifyContent: getJustifyContent(),\n gap: spacing,\n p: DIALOG_ACTIONS.paddingUnits,\n }}\n {...withoutTestIdProps(others)}\n >\n {children}\n </MuiDialogActions>\n );\n};"],"mappings":"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","names":[]}