[docs][base-ui] Renaming demos to BaseXxx

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@00e563ead9f72a8461b24876bee2d0c2e8bd2ee8 # v2.21.5
+        uses: github/codeql-action/init@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
         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@00e563ead9f72a8461b24876bee2d0c2e8bd2ee8 # v2.21.5
+        uses: github/codeql-action/analyze@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8

.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@00e563ead9f72a8461b24876bee2d0c2e8bd2ee8 # v2.21.5
+        uses: github/codeql-action/upload-sarif@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
         with:
           sarif_file: results.sarif

CHANGELOG.md

@@ -1,5 +1,60 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.14.10
+
+<!-- generated comparing v5.14.9..master -->
+
+_Sep 18, 2023_
+
+A big thanks to the 16 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 20 -->[Chip] Add cursor CSS property reset (#38984) @DiegoAndai
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 05 -->[utils] Move @types/prop-types back to dependencies (#39030) @Methuselah96
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 24 -->[NumberInput][base-ui] Warn when changing control mode with `useControlled` (#38757) @sai6855
+- &#8203;<!-- 23 -->[Select][base-ui] Fix Select button layout shift, add placeholder prop (#38796) @mj12albert
+- &#8203;<!-- 22 -->[useList][base-ui] Accept arbitrary external props and forward to root (#38848) @mj12albert
+- &#8203;<!-- 25 -->[Autocomplete][base-ui] Added ref to getInputProps return value (#38919) @DarhkVoyd
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 26 -->[AccordionGroup][joy-ui] Fix console warning when using custom color (#38950) @sai6855
+- &#8203;<!-- 07 -->[GlobalStyles][joy-ui] Ensure compatibility with RSC (#38955) @mateuseap
+
+### Docs
+
+- &#8203;<!-- 21 -->[docs][base] Add Tailwind CSS + plain CSS demo on the NumberInput page (#38928) @alisasanib
+- &#8203;<!-- 13 -->[docs][Dialog] Add non-modal dialog docs & demo (#38684) @mnajdova
+- &#8203;<!-- 12 -->[docs] Fix number input wrong demo @oliviertassinari
+- &#8203;<!-- 11 -->[docs] Exclude joy-ui LinearProgressCountup from visual regression (#38969) @siriwatknp
+- &#8203;<!-- 09 -->[docs][joy-ui] Revise the Overview page (#38842) @danilo-leal
+- &#8203;<!-- 08 -->[docs][material-ui][Pagination] Add `TablePagination` to the API components list (#38486) @MonstraG
+
+### Core
+
+- &#8203;<!-- 19 -->[core] Add more context about useEventCallback @oliviertassinari
+- &#8203;<!-- 18 -->[core] Allow deeper import of @mui/utils (#38806) @oliviertassinari
+- &#8203;<!-- 17 -->[core] Remove react-dom from @mui/utils peerDependencies (#38974) @michaldudak
+- &#8203;<!-- 16 -->[core] Remove react from styled-engine dependencies (#38971) @michaldudak
+- &#8203;<!-- 15 -->[core] Fix image loading bug on Safari @oliviertassinari
+- &#8203;<!-- 14 -->[core] Fix bundle size upload to S3 job (#38956) @Janpot
+- &#8203;<!-- 20 -->[core] Move eslint to peer dependencies of eslint-plugin-material-ui (#39033) @michaldudak
+- &#8203;<!-- 10 -->[docs-infra] Display markdown lists correctly in docs for props description (#38973) @ZeeshanTamboli
+- &#8203;<!-- 04 -->[website] Improve lighthouse score (#39011) @oliviertassinari
+- &#8203;<!-- 03 -->[website] Fix lighthouse issues @oliviertassinari
+- &#8203;<!-- 02 -->[website] Create the `InfoCard` component (#38987) @danilo-leal
+- &#8203;<!-- 01 -->[website] Small tweaks for performance @oliviertassinari
+- &#8203;<!-- 06 -->[zero][next] Setup nextjs plugin package (#38852) @brijeshb42
+
+All contributors of this release in alphabetical order: @alisasanib, @brijeshb42, @danilo-leal, @DarhkVoyd, @DiegoAndai, @Janpot, @mateuseap, @Methuselah96, @michaldudak, @mj12albert, @mnajdova, @MonstraG, @oliviertassinari, @sai6855, @siriwatknp, @ZeeshanTamboli
+
 ## 5.14.9
 
 <!-- generated comparing v5.14.8..master -->

benchmark/package.json

@@ -15,9 +15,9 @@
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.9",
-    "@mui/styles": "^5.14.9",
-    "@mui/system": "^5.14.9",
+    "@mui/material": "^5.14.10",
+    "@mui/styles": "^5.14.10",
+    "@mui/system": "^5.14.10",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "docs": "^5.0.0",

docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js

@@ -6,8 +6,8 @@ export default function UnstyledButtonsIntroduction() {
   return (
     <React.Fragment>
       <Stack spacing={2} direction="row">
-        <Button className="CustomButton">Button</Button>
-        <Button className="CustomButton" disabled>
+        <Button className="BaseButton">Button</Button>
+        <Button className="BaseButton" disabled>
           Disabled
         </Button>
       </Stack>
@@ -32,7 +32,7 @@ const cyan = {
 function Styles() {
   return (
     <style>{`
-  .CustomButton {
+  .BaseButton {
     font-family: IBM Plex Sans,sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
@@ -44,7 +44,7 @@ function Styles() {
     cursor: pointer;
     border: none;
   }
-  .CustomButton:hover {
+  .BaseButton:hover {
     background-color: ${cyan[600]};
   }
   .${buttonClasses.active} {

docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx

@@ -6,8 +6,8 @@ export default function UnstyledButtonsIntroduction() {
   return (
     <React.Fragment>
       <Stack spacing={2} direction="row">
-        <Button className="CustomButton">Button</Button>
-        <Button className="CustomButton" disabled>
+        <Button className="BaseButton">Button</Button>
+        <Button className="BaseButton" disabled>
           Disabled
         </Button>
       </Stack>
@@ -32,7 +32,7 @@ const cyan = {
 function Styles() {
   return (
     <style>{`
-  .CustomButton {
+  .BaseButton {
     font-family: IBM Plex Sans,sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
@@ -44,7 +44,7 @@ function Styles() {
     cursor: pointer;
     border: none;
   }
-  .CustomButton:hover {
+  .BaseButton:hover {
     background-color: ${cyan[600]};
   }
   .${buttonClasses.active} {

docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx.preview

@@ -1,7 +1,7 @@
 <React.Fragment>
   <Stack spacing={2} direction="row">
-    <Button className="CustomButton">Button</Button>
-    <Button className="CustomButton" disabled>
+    <Button className="BaseButton">Button</Button>
+    <Button className="BaseButton" disabled>
       Disabled
     </Button>
   </Stack>

docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsIntroduction() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton>Button</CustomButton>
-      <CustomButton disabled>Disabled</CustomButton>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
     </Stack>
   );
 }
@@ -24,7 +24,7 @@ const grey = {
   900: '#24292f',
 };
 
-const CustomButton = styled(Button)(
+const Button = styled(BaseButton)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;

docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsIntroduction() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton>Button</CustomButton>
-      <CustomButton disabled>Disabled</CustomButton>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
     </Stack>
   );
 }
@@ -24,7 +24,7 @@ const grey = {
   900: '#24292f',
 };
 
-const CustomButton = styled(Button)(
+const Button = styled(BaseButton)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;

docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx.preview

@@ -1,2 +1,2 @@
-<CustomButton>Button</CustomButton>
-<CustomButton disabled>Disabled</CustomButton>
+<Button>Button</Button>
+<Button disabled>Disabled</Button>

docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js

@@ -1,22 +1,22 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@mui/base/Button';
+import { Button as BaseButton } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 import clsx from 'clsx';
 
 export default function UnstyledButtonsIntroduction() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton>Button</CustomButton>
-      <CustomButton disabled>Disabled</CustomButton>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
     </Stack>
   );
 }
 
-const CustomButton = React.forwardRef((props, ref) => {
+const Button = React.forwardRef((props, ref) => {
   const { className, ...other } = props;
   return (
-    <Button
+    <BaseButton
       ref={ref}
       className={clsx(
         'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
@@ -27,6 +27,6 @@ const CustomButton = React.forwardRef((props, ref) => {
   );
 });
 
-CustomButton.propTypes = {
+Button.propTypes = {
   className: PropTypes.string,
 };

docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx

@@ -1,29 +1,27 @@
 import * as React from 'react';
-import { Button, ButtonProps } from '@mui/base/Button';
+import { Button as BaseButton, ButtonProps } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 import clsx from 'clsx';
 
 export default function UnstyledButtonsIntroduction() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton>Button</CustomButton>
-      <CustomButton disabled>Disabled</CustomButton>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
     </Stack>
   );
 }
 
-const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const { className, ...other } = props;
-    return (
-      <Button
-        ref={ref}
-        className={clsx(
-          'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
-          className,
-        )}
-        {...other}
-      />
-    );
-  },
-);
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseButton
+      ref={ref}
+      className={clsx(
+        'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
+        className,
+      )}
+      {...other}
+    />
+  );
+});

docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx.preview

@@ -1,2 +1,2 @@
-<CustomButton>Button</CustomButton>
-<CustomButton disabled>Disabled</CustomButton>
+<Button>Button</Button>
+<Button disabled>Disabled</Button>

docs/data/base/components/button/UnstyledButtonsDisabledFocus.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsDisabledFocus() {
   return (
     <Stack spacing={2}>
-      <CustomButton disabled>focusableWhenDisabled = false</CustomButton>
-      <CustomButton disabled focusableWhenDisabled>
+      <Button disabled>focusableWhenDisabled = false</Button>
+      <Button disabled focusableWhenDisabled>
         focusableWhenDisabled = true
-      </CustomButton>
+      </Button>
     </Stack>
   );
 }
@@ -20,7 +20,7 @@ const blue = {
   700: '#0059B2',
 };
 
-const CustomButton = styled(Button)`
+const Button = styled(BaseButton)`
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;

docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsDisabledFocus() {
   return (
     <Stack spacing={2}>
-      <CustomButton disabled>focusableWhenDisabled = false</CustomButton>
-      <CustomButton disabled focusableWhenDisabled>
+      <Button disabled>focusableWhenDisabled = false</Button>
+      <Button disabled focusableWhenDisabled>
         focusableWhenDisabled = true
-      </CustomButton>
+      </Button>
     </Stack>
   );
 }
@@ -20,7 +20,7 @@ const blue = {
   700: '#0059B2',
 };
 
-const CustomButton = styled(Button)`
+const Button = styled(BaseButton)`
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;

docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview

@@ -1,4 +1,4 @@
-<CustomButton disabled>focusableWhenDisabled = false</CustomButton>
-<CustomButton disabled focusableWhenDisabled>
+<Button disabled>focusableWhenDisabled = false</Button>
+<Button disabled focusableWhenDisabled>
   focusableWhenDisabled = true
-</CustomButton>
+</Button>