Merge branch 'master' into alert-dialog-types

.eslintignore

@@ -1,5 +1,4 @@
 /.git
-/.yarn
 /coverage
 /docs/export
 /docs/pages/playground/

.github/workflows/closed-issue-message.yaml

@@ -0,0 +1,16 @@
+name: Add closing message to issue
+
+on:
+  issues:
+    types:
+      - closed
+
+permissions: {}
+
+jobs:
+  add-comment:
+    name: Add closing message
+    uses: mui/mui-public/.github/workflows/issues_add-closing-message.yml@master
+    permissions:
+      contents: read
+      issues: write

.github/workflows/new-issue-triage.yml

@@ -0,0 +1,15 @@
+name: New issue triage
+on:
+  issues:
+    types:
+      - opened
+
+permissions: {}
+
+jobs:
+  issue_cleanup:
+    name: Clean issue body
+    uses: mui/mui-public/.github/workflows/issues_body-cleanup.yml@master
+    permissions:
+      contents: read
+      issues: write

docs/app/(content)/components/[slug]/page.tsx

@@ -7,7 +7,7 @@ import { Description } from 'docs-base/src/components/content/Description';
 import { TableOfContents } from 'docs-base/src/components/TableOfContents';
 import routes, { getSlugs } from 'docs-base/data/pages';
 import { SiblingPageLinks } from 'docs-base/src/components/SiblingPageLinks';
-import { EditPageGithubLink } from 'docs-base/src/components/EditPageGithhubLink';
+import { EditPageGithubLink } from 'docs-base/src/components/EditPageGithubLink';
 import {
   ApiReference,
   getApiReferenceTableOfContents,

docs/app/(content)/getting-started/[slug]/page.tsx

@@ -6,7 +6,7 @@ import { TableOfContents } from 'docs-base/src/components/TableOfContents';
 import routes, { getSlugs } from 'docs-base/data/pages';
 import { Description } from 'docs-base/src/components/content/Description';
 import { SiblingPageLinks } from 'docs-base/src/components/SiblingPageLinks';
-import { EditPageGithubLink } from 'docs-base/src/components/EditPageGithhubLink';
+import { EditPageGithubLink } from 'docs-base/src/components/EditPageGithubLink';
 import classes from '../../styles.module.css';
 
 const CATEGORY_SEGMENT = 'getting-started';

docs/app/(content)/guides/[slug]/page.tsx

@@ -6,7 +6,7 @@ import { TableOfContents } from 'docs-base/src/components/TableOfContents';
 import routes, { getSlugs } from 'docs-base/data/pages';
 import { Description } from 'docs-base/src/components/content/Description';
 import { SiblingPageLinks } from 'docs-base/src/components/SiblingPageLinks';
-import { EditPageGithubLink } from 'docs-base/src/components/EditPageGithhubLink';
+import { EditPageGithubLink } from 'docs-base/src/components/EditPageGithubLink';
 import classes from '../../styles.module.css';
 
 const CATEGORY_SEGMENT = 'guides';

docs/app/experiments/[slug]/page.tsx

@@ -1,7 +1,9 @@
+import * as React from 'react';
+import { type Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { type Dirent } from 'node:fs';
+import { basename, extname } from 'node:path';
 import { readdir } from 'node:fs/promises';
-import * as React from 'react';
 
 interface Props {
   params: {
@@ -31,5 +33,13 @@ export async function generateStaticParams() {
         entry.name !== 'layout.tsx' &&
         entry.isFile(),
     )
-    .map((entry: Dirent) => ({ slug: entry.name }));
+    .map((entry: Dirent) => ({ slug: basename(entry.name, extname(entry.name)) }));
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = params;
+
+  return {
+    title: `${slug} - Experiments`,
+  };
 }

docs/app/experiments/anchor-positioning.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 

docs/app/experiments/collapsible-accordion.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import * as React from 'react';
 import * as Collapsible from '@base_ui/react/Collapsible';
 

docs/app/experiments/collapsible-framer.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import * as React from 'react';
 import { useTheme } from '@mui/system';
 import * as Collapsible from '@base_ui/react/Collapsible';

docs/app/experiments/collapsible-hidden-until-found.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import * as React from 'react';
 import * as Collapsible from '@base_ui/react/Collapsible';
 

docs/app/experiments/collapsible.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import * as React from 'react';
 import * as Collapsible from '@base_ui/react/Collapsible';
 

docs/app/experiments/dialog.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import * as React from 'react';
 import clsx from 'clsx';
 import * as Dialog from '@base_ui/react/Dialog';

docs/app/experiments/menu-anchor-el.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import * as React from 'react';
+import * as Menu from '@base_ui/react/Menu';
+
+export default function Page() {
+  const [anchorEl, setAnchor] = React.useState<HTMLDivElement | null>(null);
+  const handleRef = React.useCallback((element: HTMLDivElement | null) => {
+    setAnchor(element);
+  }, []);
+
+  return (
+    <div>
+      <h1>Element passed to anchor</h1>
+      <Menu.Root animated={false}>
+        <Menu.Trigger>Trigger</Menu.Trigger>
+        <Menu.Positioner side="bottom" alignment="start" arrowPadding={0} anchor={anchorEl}>
+          <Menu.Popup>
+            <Menu.Item style={{ background: 'lightgray', padding: '5px' }}>One</Menu.Item>
+            <Menu.Item style={{ background: 'lightgray', padding: '5px' }}>Two</Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Root>
+      <div
+        data-testid="anchor"
+        style={{ margin: '100px', background: 'yellowgreen', height: '50px', width: '200px' }}
+        ref={handleRef}
+      >
+        Anchor
+      </div>
+    </div>
+  );
+}

docs/app/experiments/menu-anchor-ref.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as Menu from '@base_ui/react/Menu';
+
+export default function Page() {
+  const anchor = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div>
+      <h1>Ref passed to anchor</h1>
+      <Menu.Root animated={false}>
+        <Menu.Trigger>Trigger</Menu.Trigger>
+        <Menu.Positioner side="bottom" alignment="start" arrowPadding={0} anchor={anchor}>
+          <Menu.Popup>
+            <Menu.Item style={{ background: 'lightgray', padding: '5px' }}>One</Menu.Item>
+            <Menu.Item style={{ background: 'lightgray', padding: '5px' }}>Two</Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Root>
+      <div
+        data-testid="anchor"
+        style={{ margin: '100px', background: 'yellowgreen', height: '50px', width: '200px' }}
+        ref={anchor}
+      >
+        Anchor
+      </div>
+    </div>
+  );
+}

docs/app/experiments/progress.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import * as React from 'react';
 import { useTheme } from '@mui/system';
 import * as Progress from '@base_ui/react/Progress';

docs/app/experiments/scroll-lock.tsx

@@ -0,0 +1,66 @@
+'use client';
+import * as React from 'react';
+import { useScrollLock } from '../../../packages/mui-base/src/utils/useScrollLock';
+
+export default function ScrollLock() {
+  const [enabled, setEnabled] = React.useState(false);
+  const [bodyScrollY, setBodyScrollY] = React.useState(false);
+  const [longContent, setLongContent] = React.useState(true);
+
+  useScrollLock(enabled);
+
+  React.useEffect(() => {
+    document.body.style.overflowY = bodyScrollY ? 'scroll' : '';
+  }, [bodyScrollY]);
+
+  return (
+    <div>
+      <h1>useScrollLock</h1>
+      <p>On macOS, enable `Show scroll bars: Always` in `Appearance` Settings.</p>
+      <div
+        style={{
+          position: 'fixed',
+          top: 15,
+          display: 'flex',
+          gap: 10,
+          background: 'white',
+          padding: 20,
+        }}
+      >
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={enabled}
+              onChange={(e) => setEnabled(e.target.checked)}
+            />
+            Scroll lock
+          </label>
+        </div>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={bodyScrollY}
+              onChange={(e) => setBodyScrollY(e.target.checked)}
+            />
+            body `overflow`
+          </label>
+        </div>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={longContent}
+              onChange={(e) => setLongContent(e.target.checked)}
+            />
+            Long content
+          </label>
+        </div>
+      </div>
+      {[...Array(longContent ? 100 : 10)].map((_, i) => (
+        <p key={i}>Scroll locking text content</p>
+      ))}
+    </div>
+  );
+}

docs/app/experiments/slider-change-committed-lag.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 // https://github.com/mui/material-ui/issues/41739
 // to cross check whether this issue would still occur in the new API
 import * as React from 'react';

docs/app/experiments/slider-marks.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import * as React from 'react';
 import * as Slider from '@base_ui/react/Slider';
 import { useSliderContext } from '@base_ui/react/Slider';

docs/app/experiments/slider-template.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import * as React from 'react';
 import * as Slider from '@base_ui/react/Slider';
 import { Styles } from './slider';

docs/app/experiments/slider-tooltip.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import * as React from 'react';
 import { useTheme } from '@mui/system';
 import * as Slider from '@base_ui/react/Slider';

docs/app/experiments/slider.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import * as React from 'react';
 import { useTheme } from '@mui/system';
 import * as Slider from '@base_ui/react/Slider';

docs/app/experiments/tabs.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { css, styled } from '@mui/system';

docs/app/experiments/tooltip.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import * as React from 'react';
 import * as Tooltip from '@base_ui/react/Tooltip';
 import { styled, keyframes } from '@mui/system';

docs/data/api/checkbox-indicator.json

@@ -1,7 +1,7 @@
 {
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
-    "keepMounted": { "type": { "name": "bool" }, "default": "false" },
+    "keepMounted": { "type": { "name": "bool" }, "default": "true" },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "CheckboxIndicator",

docs/data/api/checkbox-root.json

@@ -1,11 +1,9 @@
 {
   "props": {
-    "autoFocus": { "type": { "name": "bool" }, "default": "false" },
     "checked": { "type": { "name": "bool" }, "default": "undefined" },
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "defaultChecked": { "type": { "name": "bool" }, "default": "false" },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
-    "id": { "type": { "name": "string" } },
     "indeterminate": { "type": { "name": "bool" }, "default": "false" },
     "inputRef": {
       "type": { "name": "union", "description": "func<br>&#124;&nbsp;{ current?: object }" }

docs/data/api/field-control.json

@@ -1,6 +1,7 @@
 {
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "onValueChange": { "type": { "name": "func" } },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FieldControl",

docs/data/api/field-root.json

@@ -1,7 +1,9 @@
 {
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
     "invalid": { "type": { "name": "bool" } },
+    "name": { "type": { "name": "string" } },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },
     "validate": { "type": { "name": "func" } },
     "validateDebounceTime": { "type": { "name": "number" }, "default": "0" },