@mui/material 6.0.0-beta.0 → 6.0.0-beta.2

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 (207) hide show
  1. package/Autocomplete/Autocomplete.d.ts +6 -7
  2. package/Autocomplete/Autocomplete.js +1 -1
  3. package/Badge/Badge.d.ts +1 -1
  4. package/Badge/Badge.js +2 -2
  5. package/Badge/useBadge.d.ts +13 -0
  6. package/Badge/useBadge.js +41 -0
  7. package/Badge/useBadge.types.d.ts +40 -0
  8. package/Badge/useBadge.types.js +1 -0
  9. package/Breadcrumbs/Breadcrumbs.d.ts +1 -1
  10. package/Breadcrumbs/Breadcrumbs.js +1 -1
  11. package/CHANGELOG.md +48 -0
  12. package/ClickAwayListener/ClickAwayListener.d.ts +47 -0
  13. package/ClickAwayListener/ClickAwayListener.js +178 -0
  14. package/ClickAwayListener/index.d.ts +2 -2
  15. package/ClickAwayListener/index.js +1 -1
  16. package/InputBase/InputBase.js +2 -2
  17. package/ListItem/ListItem.js +1 -1
  18. package/Menu/Menu.js +1 -1
  19. package/Modal/Modal.d.ts +1 -1
  20. package/Modal/Modal.js +1 -1
  21. package/Modal/ModalManager.d.ts +25 -0
  22. package/Modal/ModalManager.js +211 -0
  23. package/Modal/index.d.ts +1 -1
  24. package/Modal/index.js +1 -1
  25. package/Modal/useModal.d.ts +13 -0
  26. package/Modal/useModal.js +195 -0
  27. package/Modal/useModal.types.d.ts +115 -0
  28. package/Modal/useModal.types.js +1 -0
  29. package/NoSsr/NoSsr.d.ts +25 -0
  30. package/NoSsr/NoSsr.js +73 -0
  31. package/NoSsr/NoSsr.types.d.ts +18 -0
  32. package/NoSsr/NoSsr.types.js +1 -0
  33. package/NoSsr/index.d.ts +3 -2
  34. package/NoSsr/index.js +1 -1
  35. package/Popover/Popover.js +1 -1
  36. package/Popper/BasePopper.d.ts +7 -0
  37. package/Popper/BasePopper.js +370 -0
  38. package/Popper/BasePopper.types.d.ts +130 -0
  39. package/Popper/BasePopper.types.js +1 -0
  40. package/Popper/Popper.d.ts +1 -1
  41. package/Popper/Popper.js +1 -1
  42. package/Popper/index.d.ts +2 -1
  43. package/Popper/index.js +2 -1
  44. package/Popper/popperClasses.d.ts +8 -0
  45. package/Popper/popperClasses.js +7 -0
  46. package/Portal/Portal.d.ts +16 -0
  47. package/Portal/Portal.js +92 -0
  48. package/Portal/Portal.types.d.ts +23 -0
  49. package/Portal/Portal.types.js +1 -0
  50. package/Portal/index.d.ts +3 -2
  51. package/Portal/index.js +1 -1
  52. package/Slider/Slider.d.ts +2 -2
  53. package/Slider/Slider.js +3 -2
  54. package/Slider/useSlider.d.ts +14 -0
  55. package/Slider/useSlider.js +647 -0
  56. package/Slider/useSlider.types.d.ts +228 -0
  57. package/Slider/useSlider.types.js +1 -0
  58. package/Snackbar/Snackbar.d.ts +1 -1
  59. package/Snackbar/Snackbar.js +3 -3
  60. package/Snackbar/useSnackbar.d.ts +14 -0
  61. package/Snackbar/useSnackbar.js +133 -0
  62. package/Snackbar/useSnackbar.types.d.ts +60 -0
  63. package/Snackbar/useSnackbar.types.js +1 -0
  64. package/SwipeableDrawer/SwipeableDrawer.js +1 -1
  65. package/TabScrollButton/TabScrollButton.d.ts +1 -1
  66. package/TabScrollButton/TabScrollButton.js +1 -1
  67. package/TablePagination/TablePagination.js +1 -1
  68. package/Tabs/Tabs.d.ts +1 -1
  69. package/Tabs/Tabs.js +1 -1
  70. package/TextareaAutosize/TextareaAutosize.d.ts +14 -0
  71. package/TextareaAutosize/TextareaAutosize.js +222 -0
  72. package/TextareaAutosize/TextareaAutosize.types.d.ts +13 -0
  73. package/TextareaAutosize/TextareaAutosize.types.js +1 -0
  74. package/TextareaAutosize/index.d.ts +3 -2
  75. package/TextareaAutosize/index.js +1 -1
  76. package/Tooltip/Tooltip.js +1 -1
  77. package/Unstable_TrapFocus/FocusTrap.d.ts +10 -0
  78. package/Unstable_TrapFocus/FocusTrap.js +330 -0
  79. package/Unstable_TrapFocus/FocusTrap.types.d.ts +51 -0
  80. package/Unstable_TrapFocus/FocusTrap.types.js +1 -0
  81. package/Unstable_TrapFocus/index.d.ts +2 -2
  82. package/Unstable_TrapFocus/index.js +1 -1
  83. package/index.d.ts +1 -1
  84. package/index.js +2 -2
  85. package/modern/Autocomplete/Autocomplete.js +1 -1
  86. package/modern/Badge/Badge.js +2 -2
  87. package/modern/Badge/useBadge.js +41 -0
  88. package/modern/Badge/useBadge.types.js +1 -0
  89. package/modern/Breadcrumbs/Breadcrumbs.js +1 -1
  90. package/modern/ClickAwayListener/ClickAwayListener.js +178 -0
  91. package/modern/ClickAwayListener/index.js +1 -1
  92. package/modern/InputBase/InputBase.js +2 -2
  93. package/modern/ListItem/ListItem.js +1 -1
  94. package/modern/Menu/Menu.js +1 -1
  95. package/modern/Modal/Modal.js +1 -1
  96. package/modern/Modal/ModalManager.js +211 -0
  97. package/modern/Modal/index.js +1 -1
  98. package/modern/Modal/useModal.js +195 -0
  99. package/modern/Modal/useModal.types.js +1 -0
  100. package/modern/NoSsr/NoSsr.js +73 -0
  101. package/modern/NoSsr/NoSsr.types.js +1 -0
  102. package/modern/NoSsr/index.js +1 -1
  103. package/modern/Popover/Popover.js +1 -1
  104. package/modern/Popper/BasePopper.js +370 -0
  105. package/modern/Popper/BasePopper.types.js +1 -0
  106. package/modern/Popper/Popper.js +1 -1
  107. package/modern/Popper/index.js +2 -1
  108. package/modern/Popper/popperClasses.js +7 -0
  109. package/modern/Portal/Portal.js +92 -0
  110. package/modern/Portal/Portal.types.js +1 -0
  111. package/modern/Portal/index.js +1 -1
  112. package/modern/Slider/Slider.js +3 -2
  113. package/modern/Slider/useSlider.js +647 -0
  114. package/modern/Slider/useSlider.types.js +1 -0
  115. package/modern/Snackbar/Snackbar.js +3 -3
  116. package/modern/Snackbar/useSnackbar.js +133 -0
  117. package/modern/Snackbar/useSnackbar.types.js +1 -0
  118. package/modern/SwipeableDrawer/SwipeableDrawer.js +1 -1
  119. package/modern/TabScrollButton/TabScrollButton.js +1 -1
  120. package/modern/TablePagination/TablePagination.js +1 -1
  121. package/modern/Tabs/Tabs.js +1 -1
  122. package/modern/TextareaAutosize/TextareaAutosize.js +222 -0
  123. package/modern/TextareaAutosize/TextareaAutosize.types.js +1 -0
  124. package/modern/TextareaAutosize/index.js +1 -1
  125. package/modern/Tooltip/Tooltip.js +1 -1
  126. package/modern/Unstable_TrapFocus/FocusTrap.js +330 -0
  127. package/modern/Unstable_TrapFocus/FocusTrap.types.js +1 -0
  128. package/modern/Unstable_TrapFocus/index.js +1 -1
  129. package/modern/index.js +2 -2
  130. package/modern/useAutocomplete/useAutocomplete.js +976 -2
  131. package/modern/utils/PolymorphicComponent.js +1 -0
  132. package/modern/utils/areArraysEqual.js +4 -0
  133. package/modern/utils/index.js +1 -1
  134. package/modern/utils/isHostComponent.js +7 -0
  135. package/modern/utils/omitEventHandlers.js +18 -0
  136. package/modern/utils/shouldSpreadAdditionalProps.js +1 -1
  137. package/modern/utils/useSlot.js +3 -1
  138. package/node/Autocomplete/Autocomplete.js +3 -3
  139. package/node/Badge/Badge.js +5 -5
  140. package/node/Badge/useBadge.js +46 -0
  141. package/node/Badge/useBadge.types.js +5 -0
  142. package/node/Breadcrumbs/Breadcrumbs.js +2 -2
  143. package/node/ClickAwayListener/ClickAwayListener.js +184 -0
  144. package/node/ClickAwayListener/index.js +1 -1
  145. package/node/InputBase/InputBase.js +7 -7
  146. package/node/ListItem/ListItem.js +3 -3
  147. package/node/Menu/Menu.js +3 -3
  148. package/node/Modal/Modal.js +2 -2
  149. package/node/Modal/ModalManager.js +219 -0
  150. package/node/Modal/index.js +2 -2
  151. package/node/Modal/useModal.js +205 -0
  152. package/node/Modal/useModal.types.js +5 -0
  153. package/node/NoSsr/NoSsr.js +81 -0
  154. package/node/NoSsr/NoSsr.types.js +5 -0
  155. package/node/NoSsr/index.js +3 -2
  156. package/node/Popover/Popover.js +2 -2
  157. package/node/Popper/BasePopper.js +379 -0
  158. package/node/Popper/BasePopper.types.js +5 -0
  159. package/node/Popper/Popper.js +2 -2
  160. package/node/Popper/index.js +14 -1
  161. package/node/Popper/popperClasses.js +15 -0
  162. package/node/Portal/Portal.js +100 -0
  163. package/node/Portal/Portal.types.js +5 -0
  164. package/node/Portal/index.js +3 -2
  165. package/node/Slider/Slider.js +14 -13
  166. package/node/Slider/useSlider.js +670 -0
  167. package/node/Slider/useSlider.types.js +5 -0
  168. package/node/Snackbar/Snackbar.js +6 -6
  169. package/node/Snackbar/useSnackbar.js +141 -0
  170. package/node/Snackbar/useSnackbar.types.js +5 -0
  171. package/node/SwipeableDrawer/SwipeableDrawer.js +2 -2
  172. package/node/TabScrollButton/TabScrollButton.js +3 -3
  173. package/node/TablePagination/TablePagination.js +2 -2
  174. package/node/Tabs/Tabs.js +3 -3
  175. package/node/TextareaAutosize/TextareaAutosize.js +230 -0
  176. package/node/TextareaAutosize/TextareaAutosize.types.js +5 -0
  177. package/node/TextareaAutosize/index.js +3 -2
  178. package/node/Tooltip/Tooltip.js +5 -5
  179. package/node/Unstable_TrapFocus/FocusTrap.js +339 -0
  180. package/node/Unstable_TrapFocus/FocusTrap.types.js +5 -0
  181. package/node/Unstable_TrapFocus/index.js +3 -2
  182. package/node/index.js +3 -3
  183. package/node/useAutocomplete/useAutocomplete.js +985 -18
  184. package/node/utils/PolymorphicComponent.js +5 -0
  185. package/node/utils/areArraysEqual.js +10 -0
  186. package/node/utils/index.js +2 -2
  187. package/node/utils/isHostComponent.js +13 -0
  188. package/node/utils/omitEventHandlers.js +24 -0
  189. package/node/utils/shouldSpreadAdditionalProps.js +3 -2
  190. package/node/utils/useSlot.js +6 -4
  191. package/package.json +8 -8
  192. package/styles/overrides.d.ts +1 -1
  193. package/useAutocomplete/useAutocomplete.d.ts +468 -2
  194. package/useAutocomplete/useAutocomplete.js +976 -2
  195. package/utils/PolymorphicComponent.d.ts +17 -0
  196. package/utils/PolymorphicComponent.js +1 -0
  197. package/utils/areArraysEqual.d.ts +3 -0
  198. package/utils/areArraysEqual.js +4 -0
  199. package/utils/index.d.ts +2 -1
  200. package/utils/index.js +1 -1
  201. package/utils/isHostComponent.d.ts +6 -0
  202. package/utils/isHostComponent.js +7 -0
  203. package/utils/omitEventHandlers.d.ts +9 -0
  204. package/utils/omitEventHandlers.js +18 -0
  205. package/utils/shouldSpreadAdditionalProps.js +1 -1
  206. package/utils/types.d.ts +2 -1
  207. package/utils/useSlot.js +3 -1
@@ -0,0 +1,222 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils';
6
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
+ function getStyleValue(value) {
8
+ return parseInt(value, 10) || 0;
9
+ }
10
+ const styles = {
11
+ shadow: {
12
+ // Visibility needed to hide the extra text area on iPads
13
+ visibility: 'hidden',
14
+ // Remove from the content flow
15
+ position: 'absolute',
16
+ // Ignore the scrollbar width
17
+ overflow: 'hidden',
18
+ height: 0,
19
+ top: 0,
20
+ left: 0,
21
+ // Create a new layer, increase the isolation of the computed values
22
+ transform: 'translateZ(0)'
23
+ }
24
+ };
25
+ function isEmpty(obj) {
26
+ return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing;
27
+ }
28
+
29
+ /**
30
+ *
31
+ * Demos:
32
+ *
33
+ * - [Textarea Autosize](https://next.mui.com/material-ui/react-textarea-autosize/)
34
+ *
35
+ * API:
36
+ *
37
+ * - [TextareaAutosize API](https://next.mui.com/material-ui/api/textarea-autosize/)
38
+ */
39
+ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
40
+ const {
41
+ onChange,
42
+ maxRows,
43
+ minRows = 1,
44
+ style,
45
+ value,
46
+ ...other
47
+ } = props;
48
+ const {
49
+ current: isControlled
50
+ } = React.useRef(value != null);
51
+ const inputRef = React.useRef(null);
52
+ const handleRef = useForkRef(forwardedRef, inputRef);
53
+ const heightRef = React.useRef(null);
54
+ const shadowRef = React.useRef(null);
55
+ const calculateTextareaStyles = React.useCallback(() => {
56
+ const input = inputRef.current;
57
+ const containerWindow = ownerWindow(input);
58
+ const computedStyle = containerWindow.getComputedStyle(input);
59
+
60
+ // If input's width is shrunk and it's not visible, don't sync height.
61
+ if (computedStyle.width === '0px') {
62
+ return {
63
+ outerHeightStyle: 0,
64
+ overflowing: false
65
+ };
66
+ }
67
+ const inputShallow = shadowRef.current;
68
+ inputShallow.style.width = computedStyle.width;
69
+ inputShallow.value = input.value || props.placeholder || 'x';
70
+ if (inputShallow.value.slice(-1) === '\n') {
71
+ // Certain fonts which overflow the line height will cause the textarea
72
+ // to report a different scrollHeight depending on whether the last line
73
+ // is empty. Make it non-empty to avoid this issue.
74
+ inputShallow.value += ' ';
75
+ }
76
+ const boxSizing = computedStyle.boxSizing;
77
+ const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
78
+ const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
79
+
80
+ // The height of the inner content
81
+ const innerHeight = inputShallow.scrollHeight;
82
+
83
+ // Measure height of a textarea with a single row
84
+ inputShallow.value = 'x';
85
+ const singleRowHeight = inputShallow.scrollHeight;
86
+
87
+ // The height of the outer content
88
+ let outerHeight = innerHeight;
89
+ if (minRows) {
90
+ outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
91
+ }
92
+ if (maxRows) {
93
+ outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
94
+ }
95
+ outerHeight = Math.max(outerHeight, singleRowHeight);
96
+
97
+ // Take the box sizing into account for applying this value as a style.
98
+ const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
99
+ const overflowing = Math.abs(outerHeight - innerHeight) <= 1;
100
+ return {
101
+ outerHeightStyle,
102
+ overflowing
103
+ };
104
+ }, [maxRows, minRows, props.placeholder]);
105
+ const syncHeight = React.useCallback(() => {
106
+ const textareaStyles = calculateTextareaStyles();
107
+ if (isEmpty(textareaStyles)) {
108
+ return;
109
+ }
110
+ const outerHeightStyle = textareaStyles.outerHeightStyle;
111
+ const input = inputRef.current;
112
+ if (heightRef.current !== outerHeightStyle) {
113
+ heightRef.current = outerHeightStyle;
114
+ input.style.height = `${outerHeightStyle}px`;
115
+ }
116
+ input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
117
+ }, [calculateTextareaStyles]);
118
+ useEnhancedEffect(() => {
119
+ const handleResize = () => {
120
+ syncHeight();
121
+ };
122
+ // Workaround a "ResizeObserver loop completed with undelivered notifications" error
123
+ // in test.
124
+ // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
125
+ // Also see https://github.com/mui/mui-x/issues/8733
126
+ let rAF;
127
+ const rAFHandleResize = () => {
128
+ cancelAnimationFrame(rAF);
129
+ rAF = requestAnimationFrame(() => {
130
+ handleResize();
131
+ });
132
+ };
133
+ const debounceHandleResize = debounce(handleResize);
134
+ const input = inputRef.current;
135
+ const containerWindow = ownerWindow(input);
136
+ containerWindow.addEventListener('resize', debounceHandleResize);
137
+ let resizeObserver;
138
+ if (typeof ResizeObserver !== 'undefined') {
139
+ resizeObserver = new ResizeObserver(process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize);
140
+ resizeObserver.observe(input);
141
+ }
142
+ return () => {
143
+ debounceHandleResize.clear();
144
+ cancelAnimationFrame(rAF);
145
+ containerWindow.removeEventListener('resize', debounceHandleResize);
146
+ if (resizeObserver) {
147
+ resizeObserver.disconnect();
148
+ }
149
+ };
150
+ }, [calculateTextareaStyles, syncHeight]);
151
+ useEnhancedEffect(() => {
152
+ syncHeight();
153
+ });
154
+ const handleChange = event => {
155
+ if (!isControlled) {
156
+ syncHeight();
157
+ }
158
+ if (onChange) {
159
+ onChange(event);
160
+ }
161
+ };
162
+ return /*#__PURE__*/_jsxs(React.Fragment, {
163
+ children: [/*#__PURE__*/_jsx("textarea", {
164
+ value: value,
165
+ onChange: handleChange,
166
+ ref: handleRef
167
+ // Apply the rows prop to get a "correct" first SSR paint
168
+ ,
169
+ rows: minRows,
170
+ style: style,
171
+ ...other
172
+ }), /*#__PURE__*/_jsx("textarea", {
173
+ "aria-hidden": true,
174
+ className: props.className,
175
+ readOnly: true,
176
+ ref: shadowRef,
177
+ tabIndex: -1,
178
+ style: {
179
+ ...styles.shadow,
180
+ ...style,
181
+ paddingTop: 0,
182
+ paddingBottom: 0
183
+ }
184
+ })]
185
+ });
186
+ });
187
+ process.env.NODE_ENV !== "production" ? TextareaAutosize.propTypes /* remove-proptypes */ = {
188
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
189
+ // │ These PropTypes are generated from the TypeScript type definitions. │
190
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
191
+ // └─────────────────────────────────────────────────────────────────────┘
192
+ /**
193
+ * @ignore
194
+ */
195
+ className: PropTypes.string,
196
+ /**
197
+ * Maximum number of rows to display.
198
+ */
199
+ maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
200
+ /**
201
+ * Minimum number of rows to display.
202
+ * @default 1
203
+ */
204
+ minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
205
+ /**
206
+ * @ignore
207
+ */
208
+ onChange: PropTypes.func,
209
+ /**
210
+ * @ignore
211
+ */
212
+ placeholder: PropTypes.string,
213
+ /**
214
+ * @ignore
215
+ */
216
+ style: PropTypes.object,
217
+ /**
218
+ * @ignore
219
+ */
220
+ value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string])
221
+ } : void 0;
222
+ export default TextareaAutosize;
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ export interface TextareaAutosizeProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'> {
3
+ ref?: React.Ref<HTMLTextAreaElement>;
4
+ /**
5
+ * Maximum number of rows to display.
6
+ */
7
+ maxRows?: string | number;
8
+ /**
9
+ * Minimum number of rows to display.
10
+ * @default 1
11
+ */
12
+ minRows?: string | number;
13
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -1,2 +1,3 @@
1
- export { TextareaAutosize as default } from '@mui/base/TextareaAutosize';
2
- export * from '@mui/base/TextareaAutosize';
1
+ export { default } from './TextareaAutosize';
2
+ export * from './TextareaAutosize';
3
+ export * from './TextareaAutosize.types';
@@ -1 +1 @@
1
- export { TextareaAutosize as default } from '@mui/base/TextareaAutosize';
1
+ export { default } from './TextareaAutosize';
@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
5
5
  import clsx from 'clsx';
6
6
  import useTimeout, { Timeout } from '@mui/utils/useTimeout';
7
7
  import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
8
- import { appendOwnerState } from '@mui/base/utils';
9
8
  import composeClasses from '@mui/utils/composeClasses';
10
9
  import { alpha } from '@mui/system/colorManipulator';
11
10
  import { useRtl } from '@mui/system/RtlProvider';
12
11
  import isFocusVisible from '@mui/utils/isFocusVisible';
12
+ import appendOwnerState from '@mui/utils/appendOwnerState';
13
13
  import { styled, useTheme } from '../zero-styled';
14
14
  import { useDefaultProps } from '../DefaultPropsProvider';
15
15
  import capitalize from '../utils/capitalize';
@@ -0,0 +1,10 @@
1
+ import * as React from 'react';
2
+ import { FocusTrapProps } from './FocusTrap.types';
3
+ /**
4
+ * @ignore - internal component.
5
+ */
6
+ declare function FocusTrap(props: FocusTrapProps): React.JSX.Element;
7
+ declare namespace FocusTrap {
8
+ var propTypes: any;
9
+ }
10
+ export default FocusTrap;
@@ -0,0 +1,330 @@
1
+ 'use client';
2
+
3
+ /* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
4
+ import * as React from 'react';
5
+ import PropTypes from 'prop-types';
6
+ import { exactProp, elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument } from '@mui/utils';
7
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
8
+ // Inspired by https://github.com/focus-trap/tabbable
9
+ const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
10
+ function getTabIndex(node) {
11
+ const tabindexAttr = parseInt(node.getAttribute('tabindex') || '', 10);
12
+ if (!Number.isNaN(tabindexAttr)) {
13
+ return tabindexAttr;
14
+ }
15
+
16
+ // Browsers do not return `tabIndex` correctly for contentEditable nodes;
17
+ // https://bugs.chromium.org/p/chromium/issues/detail?id=661108&q=contenteditable%20tabindex&can=2
18
+ // so if they don't have a tabindex attribute specifically set, assume it's 0.
19
+ // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
20
+ // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
21
+ // yet they are still part of the regular tab order; in FF, they get a default
22
+ // `tabIndex` of 0; since Chrome still puts those elements in the regular tab
23
+ // order, consider their tab index to be 0.
24
+ if (node.contentEditable === 'true' || (node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {
25
+ return 0;
26
+ }
27
+ return node.tabIndex;
28
+ }
29
+ function isNonTabbableRadio(node) {
30
+ if (node.tagName !== 'INPUT' || node.type !== 'radio') {
31
+ return false;
32
+ }
33
+ if (!node.name) {
34
+ return false;
35
+ }
36
+ const getRadio = selector => node.ownerDocument.querySelector(`input[type="radio"]${selector}`);
37
+ let roving = getRadio(`[name="${node.name}"]:checked`);
38
+ if (!roving) {
39
+ roving = getRadio(`[name="${node.name}"]`);
40
+ }
41
+ return roving !== node;
42
+ }
43
+ function isNodeMatchingSelectorFocusable(node) {
44
+ if (node.disabled || node.tagName === 'INPUT' && node.type === 'hidden' || isNonTabbableRadio(node)) {
45
+ return false;
46
+ }
47
+ return true;
48
+ }
49
+ function defaultGetTabbable(root) {
50
+ const regularTabNodes = [];
51
+ const orderedTabNodes = [];
52
+ Array.from(root.querySelectorAll(candidatesSelector)).forEach((node, i) => {
53
+ const nodeTabIndex = getTabIndex(node);
54
+ if (nodeTabIndex === -1 || !isNodeMatchingSelectorFocusable(node)) {
55
+ return;
56
+ }
57
+ if (nodeTabIndex === 0) {
58
+ regularTabNodes.push(node);
59
+ } else {
60
+ orderedTabNodes.push({
61
+ documentOrder: i,
62
+ tabIndex: nodeTabIndex,
63
+ node: node
64
+ });
65
+ }
66
+ });
67
+ return orderedTabNodes.sort((a, b) => a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex).map(a => a.node).concat(regularTabNodes);
68
+ }
69
+ function defaultIsEnabled() {
70
+ return true;
71
+ }
72
+
73
+ /**
74
+ * @ignore - internal component.
75
+ */
76
+ function FocusTrap(props) {
77
+ const {
78
+ children,
79
+ disableAutoFocus = false,
80
+ disableEnforceFocus = false,
81
+ disableRestoreFocus = false,
82
+ getTabbable = defaultGetTabbable,
83
+ isEnabled = defaultIsEnabled,
84
+ open
85
+ } = props;
86
+ const ignoreNextEnforceFocus = React.useRef(false);
87
+ const sentinelStart = React.useRef(null);
88
+ const sentinelEnd = React.useRef(null);
89
+ const nodeToRestore = React.useRef(null);
90
+ const reactFocusEventTarget = React.useRef(null);
91
+ // This variable is useful when disableAutoFocus is true.
92
+ // It waits for the active element to move into the component to activate.
93
+ const activated = React.useRef(false);
94
+ const rootRef = React.useRef(null);
95
+ // @ts-expect-error TODO upstream fix
96
+ const handleRef = useForkRef(children.ref, rootRef);
97
+ const lastKeydown = React.useRef(null);
98
+ React.useEffect(() => {
99
+ // We might render an empty child.
100
+ if (!open || !rootRef.current) {
101
+ return;
102
+ }
103
+ activated.current = !disableAutoFocus;
104
+ }, [disableAutoFocus, open]);
105
+ React.useEffect(() => {
106
+ // We might render an empty child.
107
+ if (!open || !rootRef.current) {
108
+ return;
109
+ }
110
+ const doc = ownerDocument(rootRef.current);
111
+ if (!rootRef.current.contains(doc.activeElement)) {
112
+ if (!rootRef.current.hasAttribute('tabIndex')) {
113
+ if (process.env.NODE_ENV !== 'production') {
114
+ console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
115
+ }
116
+ rootRef.current.setAttribute('tabIndex', '-1');
117
+ }
118
+ if (activated.current) {
119
+ rootRef.current.focus();
120
+ }
121
+ }
122
+ return () => {
123
+ // restoreLastFocus()
124
+ if (!disableRestoreFocus) {
125
+ // In IE11 it is possible for document.activeElement to be null resulting
126
+ // in nodeToRestore.current being null.
127
+ // Not all elements in IE11 have a focus method.
128
+ // Once IE11 support is dropped the focus() call can be unconditional.
129
+ if (nodeToRestore.current && nodeToRestore.current.focus) {
130
+ ignoreNextEnforceFocus.current = true;
131
+ nodeToRestore.current.focus();
132
+ }
133
+ nodeToRestore.current = null;
134
+ }
135
+ };
136
+ // Missing `disableRestoreFocus` which is fine.
137
+ // We don't support changing that prop on an open FocusTrap
138
+ // eslint-disable-next-line react-hooks/exhaustive-deps
139
+ }, [open]);
140
+ React.useEffect(() => {
141
+ // We might render an empty child.
142
+ if (!open || !rootRef.current) {
143
+ return;
144
+ }
145
+ const doc = ownerDocument(rootRef.current);
146
+ const loopFocus = nativeEvent => {
147
+ lastKeydown.current = nativeEvent;
148
+ if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
149
+ return;
150
+ }
151
+
152
+ // Make sure the next tab starts from the right place.
153
+ // doc.activeElement refers to the origin.
154
+ if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {
155
+ // We need to ignore the next contain as
156
+ // it will try to move the focus back to the rootRef element.
157
+ ignoreNextEnforceFocus.current = true;
158
+ if (sentinelEnd.current) {
159
+ sentinelEnd.current.focus();
160
+ }
161
+ }
162
+ };
163
+ const contain = () => {
164
+ const rootElement = rootRef.current;
165
+
166
+ // Cleanup functions are executed lazily in React 17.
167
+ // Contain can be called between the component being unmounted and its cleanup function being run.
168
+ if (rootElement === null) {
169
+ return;
170
+ }
171
+ if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
172
+ ignoreNextEnforceFocus.current = false;
173
+ return;
174
+ }
175
+
176
+ // The focus is already inside
177
+ if (rootElement.contains(doc.activeElement)) {
178
+ return;
179
+ }
180
+
181
+ // The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)
182
+ if (disableEnforceFocus && doc.activeElement !== sentinelStart.current && doc.activeElement !== sentinelEnd.current) {
183
+ return;
184
+ }
185
+
186
+ // if the focus event is not coming from inside the children's react tree, reset the refs
187
+ if (doc.activeElement !== reactFocusEventTarget.current) {
188
+ reactFocusEventTarget.current = null;
189
+ } else if (reactFocusEventTarget.current !== null) {
190
+ return;
191
+ }
192
+ if (!activated.current) {
193
+ return;
194
+ }
195
+ let tabbable = [];
196
+ if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
197
+ tabbable = getTabbable(rootRef.current);
198
+ }
199
+
200
+ // one of the sentinel nodes was focused, so move the focus
201
+ // to the first/last tabbable element inside the focus trap
202
+ if (tabbable.length > 0) {
203
+ const isShiftTab = Boolean(lastKeydown.current?.shiftKey && lastKeydown.current?.key === 'Tab');
204
+ const focusNext = tabbable[0];
205
+ const focusPrevious = tabbable[tabbable.length - 1];
206
+ if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
207
+ if (isShiftTab) {
208
+ focusPrevious.focus();
209
+ } else {
210
+ focusNext.focus();
211
+ }
212
+ }
213
+ // no tabbable elements in the trap focus or the focus was outside of the focus trap
214
+ } else {
215
+ rootElement.focus();
216
+ }
217
+ };
218
+ doc.addEventListener('focusin', contain);
219
+ doc.addEventListener('keydown', loopFocus, true);
220
+
221
+ // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area.
222
+ // for example https://bugzilla.mozilla.org/show_bug.cgi?id=559561.
223
+ // Instead, we can look if the active element was restored on the BODY element.
224
+ //
225
+ // The whatwg spec defines how the browser should behave but does not explicitly mention any events:
226
+ // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
227
+ const interval = setInterval(() => {
228
+ if (doc.activeElement && doc.activeElement.tagName === 'BODY') {
229
+ contain();
230
+ }
231
+ }, 50);
232
+ return () => {
233
+ clearInterval(interval);
234
+ doc.removeEventListener('focusin', contain);
235
+ doc.removeEventListener('keydown', loopFocus, true);
236
+ };
237
+ }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open, getTabbable]);
238
+ const onFocus = event => {
239
+ if (nodeToRestore.current === null) {
240
+ nodeToRestore.current = event.relatedTarget;
241
+ }
242
+ activated.current = true;
243
+ reactFocusEventTarget.current = event.target;
244
+ const childrenPropsHandler = children.props.onFocus;
245
+ if (childrenPropsHandler) {
246
+ childrenPropsHandler(event);
247
+ }
248
+ };
249
+ const handleFocusSentinel = event => {
250
+ if (nodeToRestore.current === null) {
251
+ nodeToRestore.current = event.relatedTarget;
252
+ }
253
+ activated.current = true;
254
+ };
255
+ return /*#__PURE__*/_jsxs(React.Fragment, {
256
+ children: [/*#__PURE__*/_jsx("div", {
257
+ tabIndex: open ? 0 : -1,
258
+ onFocus: handleFocusSentinel,
259
+ ref: sentinelStart,
260
+ "data-testid": "sentinelStart"
261
+ }), /*#__PURE__*/React.cloneElement(children, {
262
+ ref: handleRef,
263
+ onFocus
264
+ }), /*#__PURE__*/_jsx("div", {
265
+ tabIndex: open ? 0 : -1,
266
+ onFocus: handleFocusSentinel,
267
+ ref: sentinelEnd,
268
+ "data-testid": "sentinelEnd"
269
+ })]
270
+ });
271
+ }
272
+ process.env.NODE_ENV !== "production" ? FocusTrap.propTypes /* remove-proptypes */ = {
273
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
274
+ // │ These PropTypes are generated from the TypeScript type definitions. │
275
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
276
+ // └─────────────────────────────────────────────────────────────────────┘
277
+ /**
278
+ * A single child content element.
279
+ */
280
+ children: elementAcceptingRef,
281
+ /**
282
+ * If `true`, the focus trap will not automatically shift focus to itself when it opens, and
283
+ * replace it to the last focused element when it closes.
284
+ * This also works correctly with any focus trap children that have the `disableAutoFocus` prop.
285
+ *
286
+ * Generally this should never be set to `true` as it makes the focus trap less
287
+ * accessible to assistive technologies, like screen readers.
288
+ * @default false
289
+ */
290
+ disableAutoFocus: PropTypes.bool,
291
+ /**
292
+ * If `true`, the focus trap will not prevent focus from leaving the focus trap while open.
293
+ *
294
+ * Generally this should never be set to `true` as it makes the focus trap less
295
+ * accessible to assistive technologies, like screen readers.
296
+ * @default false
297
+ */
298
+ disableEnforceFocus: PropTypes.bool,
299
+ /**
300
+ * If `true`, the focus trap will not restore focus to previously focused element once
301
+ * focus trap is hidden or unmounted.
302
+ * @default false
303
+ */
304
+ disableRestoreFocus: PropTypes.bool,
305
+ /**
306
+ * Returns an array of ordered tabbable nodes (i.e. in tab order) within the root.
307
+ * For instance, you can provide the "tabbable" npm dependency.
308
+ * @param {HTMLElement} root
309
+ */
310
+ getTabbable: PropTypes.func,
311
+ /**
312
+ * This prop extends the `open` prop.
313
+ * It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.
314
+ * This prop should be memoized.
315
+ * It can be used to support multiple focus trap mounted at the same time.
316
+ * @default function defaultIsEnabled(): boolean {
317
+ * return true;
318
+ * }
319
+ */
320
+ isEnabled: PropTypes.func,
321
+ /**
322
+ * If `true`, focus is locked.
323
+ */
324
+ open: PropTypes.bool.isRequired
325
+ } : void 0;
326
+ if (process.env.NODE_ENV !== 'production') {
327
+ // eslint-disable-next-line
328
+ FocusTrap['propTypes' + ''] = exactProp(FocusTrap.propTypes);
329
+ }
330
+ export default FocusTrap;
@@ -0,0 +1,51 @@
1
+ import * as React from 'react';
2
+ export interface FocusTrapProps {
3
+ /**
4
+ * If `true`, focus is locked.
5
+ */
6
+ open: boolean;
7
+ /**
8
+ * Returns an array of ordered tabbable nodes (i.e. in tab order) within the root.
9
+ * For instance, you can provide the "tabbable" npm dependency.
10
+ * @param {HTMLElement} root
11
+ */
12
+ getTabbable?: (root: HTMLElement) => ReadonlyArray<string>;
13
+ /**
14
+ * This prop extends the `open` prop.
15
+ * It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.
16
+ * This prop should be memoized.
17
+ * It can be used to support multiple focus trap mounted at the same time.
18
+ * @default function defaultIsEnabled(): boolean {
19
+ * return true;
20
+ * }
21
+ */
22
+ isEnabled?: () => boolean;
23
+ /**
24
+ * A single child content element.
25
+ */
26
+ children: React.ReactElement<any>;
27
+ /**
28
+ * If `true`, the focus trap will not automatically shift focus to itself when it opens, and
29
+ * replace it to the last focused element when it closes.
30
+ * This also works correctly with any focus trap children that have the `disableAutoFocus` prop.
31
+ *
32
+ * Generally this should never be set to `true` as it makes the focus trap less
33
+ * accessible to assistive technologies, like screen readers.
34
+ * @default false
35
+ */
36
+ disableAutoFocus?: boolean;
37
+ /**
38
+ * If `true`, the focus trap will not prevent focus from leaving the focus trap while open.
39
+ *
40
+ * Generally this should never be set to `true` as it makes the focus trap less
41
+ * accessible to assistive technologies, like screen readers.
42
+ * @default false
43
+ */
44
+ disableEnforceFocus?: boolean;
45
+ /**
46
+ * If `true`, the focus trap will not restore focus to previously focused element once
47
+ * focus trap is hidden or unmounted.
48
+ * @default false
49
+ */
50
+ disableRestoreFocus?: boolean;
51
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -1,2 +1,2 @@
1
- export { FocusTrap as default } from '@mui/base/FocusTrap';
2
- export { FocusTrapProps as TrapFocusProps } from '@mui/base/FocusTrap';
1
+ export { default } from './FocusTrap';
2
+ export { FocusTrapProps as TrapFocusProps } from './FocusTrap.types';
@@ -1 +1 @@
1
- export { FocusTrap as default } from '@mui/base/FocusTrap';
1
+ export { default } from './FocusTrap';
package/index.d.ts CHANGED
@@ -481,7 +481,7 @@ export * from './GlobalStyles';
481
481
  */
482
482
  export { StyledEngineProvider } from './styles';
483
483
 
484
- export { unstable_composeClasses } from '@mui/base/composeClasses';
484
+ export { unstable_composeClasses } from '@mui/utils';
485
485
 
486
486
  export { default as generateUtilityClass } from './generateUtilityClass';
487
487
  export * from './generateUtilityClass';