Merge branch 'master' into fix/js-anim

Signed-off-by: atomiks <[email protected]>

.circleci/config.yml

@@ -151,7 +151,7 @@ jobs:
           react-version: << parameters.react-version >>
       - run:
           name: Run tests on JSDOM
-          command: pnpm test:jsdom --coverage
+          command: pnpm test:jsdom --coverage --project @base-ui-components/react --project docs
       - run:
           name: Check if coverage report is generated
           command: |
@@ -290,7 +290,7 @@ jobs:
           browsers: true
       - run:
           name: Run tests on headless Chromium
-          command: pnpm test:chromium --coverage
+          command: pnpm test:chromium --coverage --project @base-ui-components/react --project docs
       - run:
           name: Check if coverage report is generated
           command: |

.eslintrc.js

@@ -87,5 +87,12 @@ module.exports = {
         '@typescript-eslint/no-use-before-define': 'off',
       },
     },
+    {
+      files: ['test/**/*{.ts,.tsx}'],
+      rules: {
+        'react/prop-types': 'off',
+        'guard-for-in': 'off',
+      },
+    },
   ],
 };

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@f09c1c0a94de965c15400f5634aa42fac8fb8f88 # v3.27.5
+        uses: github/codeql-action/init@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
         with:
           languages: typescript
           config-file: ./.github/codeql/codeql-config.yml
@@ -30,4 +30,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@f09c1c0a94de965c15400f5634aa42fac8fb8f88 # v3.27.5
+        uses: github/codeql-action/analyze@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0

.github/workflows/scorecards.yml

@@ -43,6 +43,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@f09c1c0a94de965c15400f5634aa42fac8fb8f88 # v3.27.5
+        uses: github/codeql-action/upload-sarif@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
         with:
           sarif_file: results.sarif

README.md

@@ -1,6 +1,6 @@
 # Base UI
 
-From the creators of Radix, Floating UI, and Material UI, Base UI is an unstyled UI component library for building accessible user interfaces.
+From the creators of Radix, Floating UI, and Material UI, Base UI is an unstyled UI component library for building accessible user interfaces.
 
 ---
 
@@ -24,12 +24,12 @@ To see the latest updates, check out the [releases](https://base-ui.com/react/ov
 
 ## Team
 
-- Michał Dudak [@michaldudak](https://x.com/michaldudak)
-- James Nelson [@atomiksdev](https://x.com/atomiksdev)
-- Albert Yu [@mj12albert](https://github.com/mj12albert)
-- Colm Tuite [@colmtuite](https://x.com/colmtuite)
-- Marija Najdova [@marijanajdova](https://x.com/marijanajdova)
-- Vlad Moroz [@vladyslavmoroz](https://x.com/vladyslavmoroz)
+- **Colm Tuite** (Radix) [@colmtuite](https://x.com/colmtuite)
+- **Vlad Moroz** (Radix) [@vladyslavmoroz](https://x.com/vladyslavmoroz)
+- **James Nelson** (Floating UI) [@atomiksdev](https://x.com/atomiksdev)
+- **Michał Dudak** (Material UI) [@michaldudak](https://x.com/michaldudak)
+- **Marija Najdova** (Material UI + Fluent UI) [@marijanajdova](https://x.com/marijanajdova)
+- **Albert Yu** (Material UI) [@mj12albert](https://github.com/mj12albert)
 
 ## License
 

SECURITY.md

@@ -0,0 +1,13 @@
+# Security policy
+
+## Supported versions
+
+The versions of the project that are currently supported with security updates.
+
+| Base UI version | Release    | Supported          |
+| --------------: | :--------- | :----------------- |
+|          <1.0.0 | 2024-12-17 | :white_check_mark: |
+
+## Reporting a vulnerability
+
+You can report a vulnerability by contacting us via email at [[email protected]](mailto:[email protected]).

docs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

docs/package.json

@@ -5,7 +5,7 @@
   "author": "MUI Team",
   "license": "MIT",
   "scripts": {
-    "build": "rimraf ./export && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=8192 next build --profile",
+    "build": "rimraf ./export && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=8192 next build",
     "build:clean": "rimraf .next && pnpm build",
     "dev": "next dev --port 3005",
     "deploy": "git push -f material-ui-docs master:latest",
@@ -18,17 +18,17 @@
     "@babel/runtime": "^7.26.0",
     "@babel/runtime-corejs3": "^7.26.0",
     "@base-ui-components/react": "workspace:*",
-    "@emotion/cache": "^11.13.5",
-    "@emotion/react": "^11.13.5",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.13.5",
+    "@emotion/styled": "^11.14.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@mui/system": "6.2.0",
-    "@next/mdx": "^15.0.3",
+    "@mui/system": "6.3.0",
+    "@next/mdx": "^15.1.3",
     "@react-spring/web": "^9.7.5",
-    "@stefanprobst/rehype-extract-toc": "^2.2.0",
+    "@stefanprobst/rehype-extract-toc": "^2.2.1",
     "@types/mdx": "^2.0.13",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-optimize-clsx": "^2.6.2",
@@ -45,16 +45,16 @@
     "hast-util-to-string": "^3.0.1",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
-    "next": "15.0.3",
+    "next": "15.1.3",
     "postcss": "^8.4.49",
     "postcss-custom-media": "^11.0.5",
     "postcss-import": "^16.1.0",
     "prop-types": "^15.8.1",
-    "react": "19.0.0-rc-fb9a90fa48-20240614",
-    "react-dom": "19.0.0-rc-fb9a90fa48-20240614",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-error-boundary": "^4.1.2",
-    "react-is": "19.0.0-rc-fb9a90fa48-20240614",
-    "react-router-dom": "^6.28.0",
+    "react-is": "^19.0.0",
+    "react-router-dom": "^6.28.1",
     "react-runner": "^1.0.5",
     "rehype-pretty-code": "^0.14.0",
     "remark": "^15.0.1",
@@ -65,7 +65,7 @@
     "remark-rehype": "^11.1.1",
     "remark-typography": "0.6.21",
     "scroll-into-view-if-needed": "3.1.0",
-    "shiki": "^1.24.0",
+    "shiki": "^1.25.1",
     "to-vfile": "^8.0.0",
     "unist-util-visit": "^5.0.0",
     "unist-util-visit-parents": "^6.0.1",
@@ -75,22 +75,22 @@
     "@babel/plugin-transform-react-constant-elements": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
     "@mui/internal-docs-utils": "^1.0.16",
-    "@mui/internal-scripts": "^1.0.29",
-    "@mui/internal-test-utils": "^1.0.22",
+    "@mui/internal-scripts": "^1.0.31",
+    "@mui/internal-test-utils": "^1.0.24",
     "@tailwindcss/postcss": "4.0.0-beta.2",
     "@types/chai": "^4.3.20",
     "@types/gtag.js": "^0.0.20",
     "@types/hast": "^3.0.4",
-    "@types/node": "^18.19.67",
-    "@types/prop-types": "^15.7.13",
-    "@types/react": "npm:types-react@19.0.0-rc.1",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+    "@types/node": "^18.19.69",
+    "@types/prop-types": "^15.7.14",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/unist": "^3.0.3",
     "chai": "^4.5.0",
     "fs-extra": "^11.2.0",
     "mdast-util-mdx-jsx": "^3.1.3",
     "motion": "^11.15.0",
-    "prettier": "^3.4.1",
+    "prettier": "^3.4.2",
     "rimraf": "^5.0.10",
     "serve": "^14.2.4",
     "tailwindcss": "4.0.0-beta.2",

docs/reference/generated/menu-checkbox-item.json

@@ -32,6 +32,14 @@
       "type": "boolean",
       "default": "false",
       "description": "Whether the component should ignore user interaction."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
   "dataAttributes": {

docs/reference/generated/menu-item.json

@@ -19,6 +19,14 @@
       "type": "boolean",
       "default": "false",
       "description": "Whether the component should ignore user interaction."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
   "dataAttributes": {},

docs/reference/generated/menu-radio-item.json

@@ -24,6 +24,14 @@
       "type": "boolean",
       "default": "false",
       "description": "Whether the component should ignore user interaction."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
   "dataAttributes": {

docs/reference/generated/select-item-text.json

@@ -1,7 +1,16 @@
 {
   "name": "SelectItemText",
   "description": "A text label of the select item.\nRenders a `<div>` element.",
-  "props": {},
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
   "dataAttributes": {},
   "cssVariables": {}
 }

docs/reference/generated/select-item.json

@@ -15,6 +15,14 @@
       "type": "boolean",
       "default": "false",
       "description": "Whether the component should ignore user interaction."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
   "dataAttributes": {},

docs/reference/generated/select-scroll-down-arrow.json

@@ -2,10 +2,18 @@
   "name": "SelectScrollDownArrow",
   "description": "An element that scrolls the select menu down when hovered.\nRenders a `<div>` element.",
   "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
     "keepMounted": {
       "type": "boolean",
       "default": "false",
       "description": "Whether to keep the HTML element in the DOM while the select menu is not scrollable."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
   "dataAttributes": {

docs/reference/generated/select-scroll-up-arrow.json

@@ -2,10 +2,18 @@
   "name": "SelectScrollUpArrow",
   "description": "An element that scrolls the select menu down when hovered.\nRenders a `<div>` element.",
   "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
     "keepMounted": {
       "type": "boolean",
       "default": "false",
       "description": "Whether to keep the HTML element in the DOM while the select menu is not scrollable."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
   "dataAttributes": {

docs/src/app/(public)/(content)/react/handbook/styling/page.mdx

@@ -3,7 +3,7 @@
 <Subtitle>A guide to styling Base UI components with your preferred styling engine.</Subtitle>
 <Meta
   name="description"
-  content="Learn how to make the most of Base UI's accessibility features and guidelines."
+  content="Learn how to style Base UI components with your preferred styling engine."
 />
 
 Base UI components are unstyled, don't bundle CSS, and are compatible with Tailwind, CSS Modules, CSS-in-JS, or any other styling solution you prefer.
@@ -70,7 +70,7 @@ Then style those classes in a CSS Modules file.
 ```tsx title="menu.tsx"
 import * as React from 'react';
 import { Menu } from '@base-ui-components/react/menu';
-import styles from './index.module.css';
+import styles from './menu.module.css';
 
 export default function ExampleMenu() {
   return (
@@ -93,7 +93,7 @@ export default function ExampleMenu() {
 
 Wrap each component part and apply styles, then assemble your styled components.
 
-```tsx title="index.tsx"
+```tsx title="menu.tsx"
 import * as React from 'react';
 import { Menu } from '@base-ui-components/react/menu';
 import styled from '@emotion/styled';

docs/src/app/(public)/(content)/react/overview/about/page.mdx

@@ -6,7 +6,7 @@
   content="An overview of Base UI, providing information on its history, team, and goals."
 />
 
-From the creators of Radix, Material UI, and Floating UI, Base UI is an unstyled React component library for building accessible user interfaces.
+From the creators of Radix, Material UI, and Floating UI, Base UI is an unstyled React component library for building accessible user interfaces.
 Our focus is on accessibility, performance, and developer experience.
 Our goal is to provide a complete set of open-source UI components, with a delightful developer experience, in a sustainable way.
 
@@ -30,12 +30,12 @@ Component APIs are fully open, so you have direct access to each node, you can e
 
 ## Team
 
-- **Colm Tuite** (Radix)
-- **Vlad Moroz** (Radix)
-- **James Nelson** (Floating UI)
-- **Michał Dudak** (Material UI)
-- **Marija Najdova** (Material UI + Fluent UI)
-- **Albert Yu** (Material UI)
+- **Colm Tuite** (Radix) [@colmtuite](https://x.com/colmtuite)
+- **Vlad Moroz** (Radix) [@vladyslavmoroz](https://x.com/vladyslavmoroz)
+- **James Nelson** (Floating UI) [@atomiksdev](https://x.com/atomiksdev)
+- **Michał Dudak** (Material UI) [@michaldudak](https://x.com/michaldudak)
+- **Marija Najdova** (Material UI + Fluent UI) [@marijanajdova](https://x.com/marijanajdova)
+- **Albert Yu** (Material UI) [@mj12albert](https://github.com/mj12albert)
 
 ## Community
 

docs/src/app/(public)/page.tsx

@@ -14,7 +14,7 @@ export default function Homepage() {
           Unstyled UI components for building accessible web apps and design systems.
         </h1>
         <p className="HomepageCaption">
-          From the creators of Radix, Floating UI, and Material UI.
+          From the creators of Radix, Floating&nbsp;UI, and Material&nbsp;UI.
         </p>
         <Link
           className="-m-1 inline-flex items-center gap-1 p-1"

docs/src/app/not-found.tsx

@@ -13,13 +13,13 @@ export default function NotFound() {
           <Logo className="mb-8 ml-px" aria-label="Base UI" />
           <h1 className="NotFoundHeading">404</h1>
           <p className="NotFoundCaption">
-            This page couldn’t be found. Please return to the docs or create a
+            This page couldn't be found. Please return to the docs or create a
             corresponding issue on GitHub.
           </p>
           <div className="flex flex-col items-start gap-2">
             <Link
               className="-m-1 inline-flex items-center gap-1 p-1"
-              href="/react/components/accordion"
+              href="/react/overview/quick-start"
             >
               Documentation <ArrowRightIcon />
             </Link>