[TrapFocus] Move docs to Base and drop the Unstyled prefix (#31954)

docs/data/material/components/trap-focus/BasicTrapFocus.js → docs/data/base/components/trap-focus/BasicTrapFocus.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import TrapFocus from '@mui/base/TrapFocus';
 
 export default function BasicTrapFocus() {
   const [open, setOpen] = React.useState(false);

docs/data/material/components/trap-focus/BasicTrapFocus.tsx → docs/data/base/components/trap-focus/BasicTrapFocus.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import TrapFocus from '@mui/base/TrapFocus';
 
 export default function BasicTrapFocus() {
   const [open, setOpen] = React.useState(false);

docs/data/material/components/trap-focus/DisableEnforceFocus.js → docs/data/base/components/trap-focus/DisableEnforceFocus.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import TrapFocus from '@mui/base/TrapFocus';
 
 export default function DisableEnforceFocus() {
   const [open, setOpen] = React.useState(false);

docs/data/material/components/trap-focus/DisableEnforceFocus.tsx → docs/data/base/components/trap-focus/DisableEnforceFocus.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import TrapFocus from '@mui/base/TrapFocus';
 
 export default function DisableEnforceFocus() {
   const [open, setOpen] = React.useState(false);

docs/data/material/components/trap-focus/LazyTrapFocus.js → docs/data/base/components/trap-focus/LazyTrapFocus.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import TrapFocus from '@mui/base/TrapFocus';
 
 export default function LazyTrapFocus() {
   const [open, setOpen] = React.useState(false);

docs/data/material/components/trap-focus/LazyTrapFocus.tsx → docs/data/base/components/trap-focus/LazyTrapFocus.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import TrapFocus from '@mui/base/TrapFocus';
 
 export default function LazyTrapFocus() {
   const [open, setOpen] = React.useState(false);

docs/data/material/components/trap-focus/PortalTrapFocus.js → docs/data/base/components/trap-focus/PortalTrapFocus.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import Portal from '@mui/material/Portal';
-import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import { Box } from '@mui/system';
+import Portal from '@mui/base/Portal';
+import TrapFocus from '@mui/base/TrapFocus';
 
 export default function PortalTrapFocus() {
   const [open, setOpen] = React.useState(false);

docs/data/material/components/trap-focus/PortalTrapFocus.tsx → docs/data/base/components/trap-focus/PortalTrapFocus.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import Portal from '@mui/material/Portal';
-import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import { Box } from '@mui/system';
+import Portal from '@mui/base/Portal';
+import TrapFocus from '@mui/base/TrapFocus';
 
 export default function PortalTrapFocus() {
   const [open, setOpen] = React.useState(false);

docs/data/material/components/trap-focus/trap-focus.md → docs/data/base/components/trap-focus/trap-focus.md

@@ -1,8 +1,9 @@
 ---
-product: material-ui
+product: base
 title: Trap Focus React component
-components: Unstable_TrapFocus
+components: TrapFocus
 githubLabel: 'component: TrapFocus'
+packageName: '@mui/base'
 ---
 
 # Trap Focus
@@ -16,8 +17,6 @@ When `open={true}` the trap is enabled, and pressing <kbd class="key">Tab</kbd>
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
-> ⚠️ The component is experimental and unstable.
-
 ## Example
 
 {{"demo": "BasicTrapFocus.js"}}
@@ -29,7 +28,7 @@ When `open={true}` the trap is enabled, and pressing <kbd class="key">Tab</kbd>
 As the component does not have any styles, it also comes with the Base package.
 
 ```js
-import TrapFocus from '@mui/base/Unstable_TrapFocus';
+import TrapFocus from '@mui/base/TrapFocus';
 ```
 
 ## Disable enforce focus
@@ -51,6 +50,6 @@ When auto focus is disabled, as in the demo below, the component only traps the
 
 ## Portal
 
-The following demo uses the [`Portal`](/components/portal/) component to render a subset of the trap focus children into a new "subtree" outside of the current DOM hierarchy; so that they no longer form part of the focus loop.
+The following demo uses the [`Portal`](/base/react-portal/) component to render a subset of the trap focus children into a new "subtree" outside of the current DOM hierarchy; so that they no longer form part of the focus loop.
 
 {{"demo": "PortalTrapFocus.js"}}

docs/data/base/pages.ts

@@ -31,6 +31,7 @@ const pages = [
           { pathname: '/base/react-click-away-listener', title: 'Click-away listener' },
           { pathname: '/base/react-modal', title: 'Modal' },
           { pathname: '/base/react-portal', title: 'Portal' },
+          { pathname: '/base/react-trap-focus', title: 'Trap focus' },
         ],
       },
     ],

docs/data/base/pagesApi.js

@@ -22,5 +22,5 @@ module.exports = [
   { pathname: '/base/api/tabs-unstyled' },
   { pathname: '/base/api/tab-unstyled' },
   { pathname: '/base/api/textarea-autosize' },
-  { pathname: '/base/api/unstable-trap-focus' },
+  { pathname: '/base/api/trap-focus' },
 ];

docs/pages/api-docs/unstable-trap-focus.js → docs/pages/base/api/trap-focus.js

@@ -1,19 +1,15 @@
 import * as React from 'react';
 import ApiPage from 'docs/src/modules/components/ApiPage';
 import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './unstable-trap-focus.json';
+import jsonPageContent from './trap-focus.json';
 
 export default function Page(props) {
   const { descriptions, pageContent } = props;
   return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
 }
 
 Page.getInitialProps = () => {
-  const req = require.context(
-    'docs/translations/api-docs/unstable-trap-focus',
-    false,
-    /unstable-trap-focus.*.json$/,
-  );
+  const req = require.context('docs/translations/api-docs/trap-focus', false, /trap-focus.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {

docs/pages/api-docs/unstable-trap-focus.json → docs/pages/base/api/trap-focus.json

@@ -11,11 +11,11 @@
       "default": "function defaultIsEnabled() {\n  return true;\n}"
     }
   },
-  "name": "Unstable_TrapFocus",
+  "name": "TrapFocus",
   "styles": { "classes": [], "globalClasses": {}, "name": null },
   "spread": false,
-  "filename": "/packages/mui-base/src/Unstable_TrapFocus/Unstable_TrapFocus.js",
+  "filename": "/packages/mui-base/src/TrapFocus/TrapFocus.js",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/components/trap-focus/\">Trap Focus</a></li></ul>",
+  "demos": "<ul><li><a href=\"/base/components/trap-focus/\">Trap Focus</a></li></ul>",
   "cssComponent": false
 }

docs/pages/material-ui/react-trap-focus.js → docs/pages/base/react-trap-focus.js

@@ -4,7 +4,7 @@ import {
   demos,
   docs,
   demoComponents,
-} from 'docs/data/material/components/trap-focus/trap-focus.md?@mui/markdown';
+} from 'docs/data/base/components/trap-focus/trap-focus.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;

docs/pages/blog/2021-q3-update.md

@@ -91,7 +91,7 @@ Here are the most significant improvements since early July 2021.
   - [TrapFocus](/components/trap-focus/#unstyled)
 
   ```jsx
-  import TrapFocus from '@mui/base/Unstable_TrapFocus';
+  import TrapFocus from '@mui/base/TrapFocus';
   ```
 
 ### MUI X

docs/scripts/buildApiUtils.ts

@@ -107,10 +107,11 @@ const migratedBaseComponents = [
   'ButtonUnstyled',
   'ClickAwayListener',
   'InputUnstyled',
-  'MenuUnstyled',
   'MenuItemUnstyled',
+  'MenuUnstyled',
   'ModalUnstyled',
   'Portal',
+  'TrapFocus',
 ];
 
 export const getGenericComponentInfo = (filename: string): ComponentInfo => {

docs/src/modules/utils/replaceMarkdownLinks.test.js

@@ -198,7 +198,7 @@ describe('replaceMarkdownLinks', () => {
       [ButtonUnstyled](/api/button-unstyled)
       [TabPanelUnstyled](/api/tab-panel-unstyled)
       [TabsListUnstyled](/api/tabs-list-unstyled)
-      [Unstable_TrapFocus](/api/unstable-trap-focus)
+      [TrapFocus](/api/trap-focus)
       [ClickAwayListener](/api/click-away-listener)
       [IconButton](/api/icon-button)
       [LoadingButton](/api/loading-button)
@@ -217,7 +217,7 @@ describe('replaceMarkdownLinks', () => {
       [ButtonUnstyled](/base/api/button-unstyled)
       [TabPanelUnstyled](/base/api/tab-panel-unstyled)
       [TabsListUnstyled](/base/api/tabs-list-unstyled)
-      [Unstable_TrapFocus](/base/api/unstable-trap-focus)
+      [TrapFocus](/base/api/trap-focus)
       [ClickAwayListener](/base/api/click-away-listener)
       [IconButton](/material-ui/api/icon-button)
       [LoadingButton](/material-ui/api/loading-button)

docs/src/modules/utils/replaceMarkdownLinks.ts

@@ -33,7 +33,7 @@ export const replaceAPILinks = (markdown: string) => {
     .replace(/\(\/api\/data-grid([^)]*)\)/gm, '(/x/api/data-grid$1)')
     .replace(/\(\/api\/([^"/]+-unstyled)([^)]*)\)/gm, '(/base/api/$1$2)')
     .replace(
-      /\(\/api\/(unstable-trap-focus|click-away-listener|no-ssr|portal|textarea-autosize)([^)]*)\)/gm,
+      /\(\/api\/(trap-focus|click-away-listener|no-ssr|portal|textarea-autosize)([^)]*)\)/gm,
       '(/base/api/$1$2)',
     )
     .replace(

docs/src/pagesApi.js

@@ -172,7 +172,6 @@ module.exports = [
   { pathname: '/api-docs/tree-item' },
   { pathname: '/api-docs/tree-view' },
   { pathname: '/api-docs/typography' },
-  { pathname: '/api-docs/unstable-trap-focus' },
   { pathname: '/api-docs/year-picker' },
   { pathname: '/api-docs/zoom' },
 ];

packages/mui-base/src/ModalUnstyled/ModalUnstyled.js

@@ -13,7 +13,7 @@ import composeClasses from '../composeClasses';
 import isHostComponent from '../utils/isHostComponent';
 import Portal from '../Portal';
 import ModalManager, { ariaHidden } from './ModalManager';
-import TrapFocus from '../Unstable_TrapFocus';
+import TrapFocus from '../TrapFocus';
 import { getModalUtilityClass } from './modalUnstyledClasses';
 
 const useUtilityClasses = (ownerState) => {

packages/mui-base/src/Unstable_TrapFocus/Unstable_TrapFocus.d.ts → packages/mui-base/src/TrapFocus/TrapFocus.d.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import * as React from 'react';
 
 export interface TrapFocusProps {
@@ -57,10 +56,10 @@ export interface TrapFocusProps {
  *
  * Demos:
  *
- * - [Trap Focus](https://mui.com/components/trap-focus/)
+ * - [Trap Focus](https://mui.com/base/components/trap-focus/)
  *
  * API:
  *
- * - [Unstable_TrapFocus API](https://mui.com/api/unstable-trap-focus/)
+ * - [TrapFocus API](https://mui.com/base/api/trap-focus/)
  */
-export default function Unstable_TrapFocus(props: TrapFocusProps): JSX.Element;
+export default function TrapFocus(props: TrapFocusProps): JSX.Element;

packages/mui-base/src/Unstable_TrapFocus/Unstable_TrapFocus.js → packages/mui-base/src/TrapFocus/TrapFocus.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/naming-convention, consistent-return, jsx-a11y/no-noninteractive-tabindex */
+/* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -115,7 +115,7 @@ function defaultIsEnabled() {
 /**
  * Utility component that locks focus inside the component.
  */
-function Unstable_TrapFocus(props) {
+function TrapFocus(props) {
   const {
     children,
     disableAutoFocus = false,
@@ -336,7 +336,7 @@ function Unstable_TrapFocus(props) {
   );
 }
 
-Unstable_TrapFocus.propTypes /* remove-proptypes */ = {
+TrapFocus.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -393,7 +393,7 @@ Unstable_TrapFocus.propTypes /* remove-proptypes */ = {
 
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line
-  Unstable_TrapFocus['propTypes' + ''] = exactProp(Unstable_TrapFocus.propTypes);
+  TrapFocus['propTypes' + ''] = exactProp(TrapFocus.propTypes);
 }
 
-export default Unstable_TrapFocus;
+export default TrapFocus;

packages/mui-base/src/Unstable_TrapFocus/Unstable_TrapFocus.test.js → packages/mui-base/src/TrapFocus/TrapFocus.test.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { expect } from 'chai';
 import { act, createRenderer, screen } from 'test/utils';
-import TrapFocus from '@mui/base/Unstable_TrapFocus';
+import TrapFocus from '@mui/base/TrapFocus';
 import Portal from '@mui/base/Portal';
 
 describe('<TrapFocus />', () => {

packages/mui-base/src/TrapFocus/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TrapFocus';
+export * from './TrapFocus';

packages/mui-base/src/TrapFocus/index.js

@@ -0,0 +1 @@
+export { default } from './TrapFocus';

packages/mui-base/src/index.d.ts

@@ -78,5 +78,5 @@ export * from './TabUnstyled';
 export { default as TextareaAutosize } from './TextareaAutosize';
 export * from './TextareaAutosize';
 
-export { default as Unstable_TrapFocus } from './Unstable_TrapFocus';
-export * from './Unstable_TrapFocus';
+export { default as TrapFocus } from './TrapFocus';
+export * from './TrapFocus';

packages/mui-base/src/index.js

@@ -72,4 +72,4 @@ export * from './TabUnstyled';
 
 export { default as TextareaAutosize } from './TextareaAutosize';
 
-export { default as Unstable_TrapFocus } from './Unstable_TrapFocus';
+export { default as TrapFocus } from './TrapFocus';

packages/mui-material/src/Unstable_TrapFocus/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from '@mui/base/Unstable_TrapFocus';
-export * from '@mui/base/Unstable_TrapFocus';
+export { default } from '@mui/base/TrapFocus';
+export * from '@mui/base/TrapFocus';

packages/mui-material/src/Unstable_TrapFocus/index.js

@@ -1 +1 @@
-export { default } from '@mui/base/Unstable_TrapFocus';
+export { default } from '@mui/base/TrapFocus';

test/e2e/README.md

@@ -15,7 +15,7 @@ If you're adding a new test prefer a new component instead of editing existing f
 
 We're using [`playwright`](https://playwright.dev) to replay user actions.
 Each test tests only a single fixture.
-A fixture can be loaded with `await renderFixture(fixturePath)` e.g. `renderFixture('Unstable_TrapFocus/OpenTrapFocus')`.
+A fixture can be loaded with `await renderFixture(fixturePath)` e.g. `renderFixture('TrapFocus/OpenTrapFocus')`.
 
 ## Commands