From 5beda3e28963f7ee2f744e47d5ab3ae5d2db52b9 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Tue, 25 Jul 2023 12:38:02 -0400
Subject: [PATCH 1/9] Remove incorrect user-select:none

---
 packages/mui-joy/src/Link/Link.tsx                 | 1 -
 packages/mui-material-next/src/Button/Button.tsx   | 1 -
 packages/mui-material/src/ButtonBase/ButtonBase.js | 1 -
 packages/mui-material/src/Chip/Chip.js             | 1 -
 packages/mui-material/src/Link/Link.js             | 1 -
 5 files changed, 5 deletions(-)

diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
index 432e8db1660c74..cb00cbcfc0e956 100644
--- a/packages/mui-joy/src/Link/Link.tsx
+++ b/packages/mui-joy/src/Link/Link.tsx
@@ -128,7 +128,6 @@ const LinkRoot = styled('a', {
               }),
             },
           }),
-      userSelect: 'none',
       MozAppearance: 'none', // Reset
       WebkitAppearance: 'none', // Reset
       '&::-moz-focus-inner': {
diff --git a/packages/mui-material-next/src/Button/Button.tsx b/packages/mui-material-next/src/Button/Button.tsx
index 69cd22d87023a7..9ae797af859eec 100644
--- a/packages/mui-material-next/src/Button/Button.tsx
+++ b/packages/mui-material-next/src/Button/Button.tsx
@@ -294,7 +294,6 @@ export const ButtonRoot = styled('button', {
     border: 0,
     margin: `var(--Button-margin, 0)`, // Remove the margin in Safari by default
     cursor: 'pointer',
-    userSelect: 'none',
     verticalAlign: 'middle',
     MozAppearance: 'none', // Reset
     WebkitAppearance: 'none', // Reset
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js
index 414a9d640303c3..e9a41cfcf14c87 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.js
@@ -47,7 +47,6 @@ export const ButtonBaseRoot = styled('button', {
   borderRadius: 0,
   padding: 0, // Remove the padding in Firefox
   cursor: 'pointer',
-  userSelect: 'none',
   verticalAlign: 'middle',
   MozAppearance: 'none', // Reset
   WebkitAppearance: 'none', // Reset
diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js
index 5c27c9cba8ed3e..874abb04a71975 100644
--- a/packages/mui-material/src/Chip/Chip.js
+++ b/packages/mui-material/src/Chip/Chip.js
@@ -195,7 +195,6 @@ const ChipRoot = styled('div', {
   },
   ({ theme, ownerState }) => ({
     ...(ownerState.clickable && {
-      userSelect: 'none',
       WebkitTapHighlightColor: 'transparent',
       cursor: 'pointer',
       '&:hover': {
diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js
index 6bcb98420b7660..5df0085353cb59 100644
--- a/packages/mui-material/src/Link/Link.js
+++ b/packages/mui-material/src/Link/Link.js
@@ -72,7 +72,6 @@ const LinkRoot = styled(Typography, {
       borderRadius: 0,
       padding: 0, // Remove the padding in Firefox
       cursor: 'pointer',
-      userSelect: 'none',
       verticalAlign: 'middle',
       MozAppearance: 'none', // Reset
       WebkitAppearance: 'none', // Reset

From f042c2fea8de469ed3b25de7d282e689f8f95ad8 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Tue, 22 Aug 2023 16:59:55 -0400
Subject: [PATCH 2/9] Experiment with active state for select styling

---
 .../experiments/material/button-select.tsx    | 139 ++++++++++++++++++
 .../mui-material/src/ButtonBase/ButtonBase.js |   7 +-
 2 files changed, 145 insertions(+), 1 deletion(-)
 create mode 100644 docs/pages/experiments/material/button-select.tsx

diff --git a/docs/pages/experiments/material/button-select.tsx b/docs/pages/experiments/material/button-select.tsx
new file mode 100644
index 00000000000000..76585aacb9cb8b
--- /dev/null
+++ b/docs/pages/experiments/material/button-select.tsx
@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { Button as BaseUIButton } from '@mui/base';
+import {
+  Button as JoyUIButton,
+  CssVarsProvider as JoyCssVarsProvider,
+  extendTheme as joyExtendTheme,
+} from '@mui/joy';
+import {
+  Button as MaterialUIButton,
+  Experimental_CssVarsProvider as MaterialUICssVarsProvider,
+  experimental_extendTheme as materialUIExtendTheme,
+} from '@mui/material';
+import { Stack } from '@mui/system';
+
+function createHandlers(name: string) {
+  return {
+    onClick: () => console.log(`${name} click`),
+    onMouseDown: () => console.log(`${name} mouse down`),
+    onMouseUp: () => console.log(`${name} mouse up`),
+  };
+}
+
+export default function App() {
+  return (
+    <Stack direction="row" justifyContent="space-around">
+      <Stack gap={3}>
+        <Stack alignItems="flex-start">
+          <span>Enabled native button</span>
+          <button type="button" {...createHandlers('Enabled native button')}>
+            Button
+          </button>
+        </Stack>
+        <Stack alignItems="flex-start">
+          <span>Disabled native button</span>
+          <button type="button" disabled {...createHandlers('Disabled native button')}>
+            Button
+          </button>
+        </Stack>
+        <Stack alignItems="flex-start">
+          <span>Native anchor</span>
+          <a href="#" {...createHandlers('Enabled native anchor')}>
+            Anchor
+          </a>
+        </Stack>
+        <Stack alignItems="flex-start">
+          <span>Native div</span>
+          <div>Button</div>
+        </Stack>
+      </Stack>
+
+      {/* <Stack gap={3}>
+        <Stack alignItems="flex-start">
+          <span>Enabled Base UI button</span>
+          <BaseUIButton {...createHandlers('Enabled Base UI')}>Button</BaseUIButton>
+        </Stack>
+        <Stack alignItems="flex-start">
+          <span>Disabled Base UI button</span>
+          <BaseUIButton disabled {...createHandlers('Disabled Base UI')}>
+            Button
+          </BaseUIButton>
+        </Stack>
+        <Stack alignItems="flex-start">
+          <span>Enabled Base UI button as div</span>
+          <BaseUIButton slots={{ root: 'div' }} {...createHandlers('Enabled Base UI as div')}>
+            Button
+          </BaseUIButton>
+        </Stack>
+        <Stack alignItems="flex-start">
+          <span>Disabled Base UI button as div</span>
+          <BaseUIButton
+            slots={{ root: 'div' }}
+            disabled
+            {...createHandlers('Disabled Base UI as div')}
+          >
+            Button
+          </BaseUIButton>
+        </Stack>
+      </Stack>
+
+      <Stack gap={3}>
+        <JoyCssVarsProvider theme={joyExtendTheme({})}>
+          <Stack alignItems="flex-start">
+            <span>Enabled Joy UI button</span>
+            <JoyUIButton {...createHandlers('Enabled Joy UI')}>Button</JoyUIButton>
+          </Stack>
+          <Stack alignItems="flex-start">
+            <span>Disabled Joy UI button</span>
+            <JoyUIButton disabled {...createHandlers('Disabled Joy UI')}>
+              Button
+            </JoyUIButton>
+          </Stack>
+          <Stack alignItems="flex-start">
+            <span>Enabled Joy UI button as div</span>
+            <JoyUIButton component="div" {...createHandlers('Enabled Joy UI as div')}>
+              Button
+            </JoyUIButton>
+          </Stack>
+          <Stack alignItems="flex-start">
+            <span>Disabled Joy UI button as div</span>
+            <JoyUIButton component="div" disabled {...createHandlers('Disabled Joy UI as div')}>
+              Button
+            </JoyUIButton>
+          </Stack>
+        </JoyCssVarsProvider>
+      </Stack> */}
+
+      <Stack gap={3}>
+        <MaterialUICssVarsProvider theme={materialUIExtendTheme({})}>
+          <Stack alignItems="flex-start">
+            <span>Enabled Material UI button</span>
+            <MaterialUIButton {...createHandlers('Enabled Material UI')}>Button</MaterialUIButton>
+          </Stack>
+          <Stack alignItems="flex-start">
+            <span>Disabled Material UI button</span>
+            <MaterialUIButton disabled {...createHandlers('Disabled Material UI')}>
+              Button
+            </MaterialUIButton>
+          </Stack>
+          <Stack alignItems="flex-start">
+            <span>Enabled Material UI button as div</span>
+            <MaterialUIButton component="div" {...createHandlers('Enabled Material UI as div')}>
+              Button
+            </MaterialUIButton>
+          </Stack>
+          <Stack alignItems="flex-start">
+            <span>Disabled Material UI button as div</span>
+            <MaterialUIButton
+              component="div"
+              disabled
+              {...createHandlers('Disabled Material UI as div')}
+            >
+              Button
+            </MaterialUIButton>
+          </Stack>
+        </MaterialUICssVarsProvider>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js
index e9a41cfcf14c87..27309d18d2de8b 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.js
@@ -53,12 +53,17 @@ export const ButtonBaseRoot = styled('button', {
   textDecoration: 'none',
   // So we take precedent over the style of a native <a /> element.
   color: 'inherit',
+  '&:active': {
+    userSelect: 'none',
+  },
   '&::-moz-focus-inner': {
     borderStyle: 'none', // Remove Firefox dotted outline.
   },
   [`&.${buttonBaseClasses.disabled}`]: {
-    pointerEvents: 'none', // Disable link interactions
     cursor: 'default',
+    '&:active': {
+      pointerEvents: 'none', // Disable link interactions
+    },
   },
   '@media print': {
     colorAdjust: 'exact',

From 763a4b53c0b6fd0792919194368ece1995bb014e Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Wed, 23 Aug 2023 11:51:38 -0400
Subject: [PATCH 3/9] Experiment 2 (disabled non-button not working)

---
 .../experiments/material/button-select.tsx    | 120 ++++++++++--------
 .../mui-material/src/ButtonBase/ButtonBase.js |  73 ++++++-----
 2 files changed, 105 insertions(+), 88 deletions(-)

diff --git a/docs/pages/experiments/material/button-select.tsx b/docs/pages/experiments/material/button-select.tsx
index 76585aacb9cb8b..dd270028b7f32b 100644
--- a/docs/pages/experiments/material/button-select.tsx
+++ b/docs/pages/experiments/material/button-select.tsx
@@ -6,8 +6,10 @@ import {
   extendTheme as joyExtendTheme,
 } from '@mui/joy';
 import {
+  FormControlLabel,
   Button as MaterialUIButton,
   Experimental_CssVarsProvider as MaterialUICssVarsProvider,
+  Switch,
   experimental_extendTheme as materialUIExtendTheme,
 } from '@mui/material';
 import { Stack } from '@mui/system';
@@ -21,34 +23,38 @@ function createHandlers(name: string) {
 }
 
 export default function App() {
+  const [disabled, setDisabled] = React.useState(false);
+
   return (
-    <Stack direction="row" justifyContent="space-around">
-      <Stack gap={3}>
-        <Stack alignItems="flex-start">
-          <span>Enabled native button</span>
-          <button type="button" {...createHandlers('Enabled native button')}>
-            Button
-          </button>
-        </Stack>
-        <Stack alignItems="flex-start">
-          <span>Disabled native button</span>
-          <button type="button" disabled {...createHandlers('Disabled native button')}>
-            Button
-          </button>
+    <MaterialUICssVarsProvider theme={materialUIExtendTheme({})}>
+      <Stack gap={12} alignItems="center" sx={{ my: 6 }}>
+        <Stack>
+          <FormControlLabel
+            control={<Switch checked={disabled} onChange={() => setDisabled((prev) => !prev)} />}
+            label="Toggle disabled"
+          />
         </Stack>
-        <Stack alignItems="flex-start">
-          <span>Native anchor</span>
-          <a href="#" {...createHandlers('Enabled native anchor')}>
-            Anchor
-          </a>
-        </Stack>
-        <Stack alignItems="flex-start">
-          <span>Native div</span>
-          <div>Button</div>
-        </Stack>
-      </Stack>
+        <Stack direction="row" justifyContent="space-around" sx={{ width: '80vw' }}>
+          <Stack gap={3}>
+            <Stack alignItems="flex-start">
+              <span>Native button</span>
+              <button type="button" disabled={disabled} {...createHandlers('Native button')}>
+                Button
+              </button>
+            </Stack>
+            <Stack alignItems="flex-start">
+              <span>Native anchor</span>
+              <a href="#" {...createHandlers('Native anchor')}>
+                Anchor
+              </a>
+            </Stack>
+            <Stack alignItems="flex-start">
+              <span>Native div</span>
+              <div {...createHandlers('Div')}>Button</div>
+            </Stack>
+          </Stack>
 
-      {/* <Stack gap={3}>
+          {/* <Stack gap={3}>
         <Stack alignItems="flex-start">
           <span>Enabled Base UI button</span>
           <BaseUIButton {...createHandlers('Enabled Base UI')}>Button</BaseUIButton>
@@ -104,36 +110,42 @@ export default function App() {
         </JoyCssVarsProvider>
       </Stack> */}
 
-      <Stack gap={3}>
-        <MaterialUICssVarsProvider theme={materialUIExtendTheme({})}>
-          <Stack alignItems="flex-start">
-            <span>Enabled Material UI button</span>
-            <MaterialUIButton {...createHandlers('Enabled Material UI')}>Button</MaterialUIButton>
-          </Stack>
-          <Stack alignItems="flex-start">
-            <span>Disabled Material UI button</span>
-            <MaterialUIButton disabled {...createHandlers('Disabled Material UI')}>
-              Button
-            </MaterialUIButton>
-          </Stack>
-          <Stack alignItems="flex-start">
-            <span>Enabled Material UI button as div</span>
-            <MaterialUIButton component="div" {...createHandlers('Enabled Material UI as div')}>
-              Button
-            </MaterialUIButton>
-          </Stack>
-          <Stack alignItems="flex-start">
-            <span>Disabled Material UI button as div</span>
-            <MaterialUIButton
-              component="div"
-              disabled
-              {...createHandlers('Disabled Material UI as div')}
-            >
-              Button
-            </MaterialUIButton>
+          <Stack gap={3}>
+            <Stack alignItems="flex-start">
+              <span>Material UI button</span>
+              <MaterialUIButton
+                variant="contained"
+                disabled={disabled}
+                {...createHandlers('Material UI button')}
+              >
+                Button
+              </MaterialUIButton>
+            </Stack>
+            <Stack alignItems="flex-start">
+              <span>Material UI button link</span>
+              <MaterialUIButton
+                variant="contained"
+                disabled={disabled}
+                href="#"
+                {...createHandlers('Material UI button link')}
+              >
+                Button
+              </MaterialUIButton>
+            </Stack>
+            <Stack alignItems="flex-start">
+              <span>Material UI button as div</span>
+              <MaterialUIButton
+                variant="contained"
+                component="div"
+                disabled={disabled}
+                {...createHandlers('Material UI button as div')}
+              >
+                Button
+              </MaterialUIButton>
+            </Stack>
           </Stack>
-        </MaterialUICssVarsProvider>
+        </Stack>
       </Stack>
-    </Stack>
+    </MaterialUICssVarsProvider>
   );
 }
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js
index 27309d18d2de8b..787ca8251e7a39 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.js
@@ -32,42 +32,46 @@ export const ButtonBaseRoot = styled('button', {
   name: 'MuiButtonBase',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  position: 'relative',
-  boxSizing: 'border-box',
-  WebkitTapHighlightColor: 'transparent',
-  backgroundColor: 'transparent', // Reset default value
-  // We disable the focus ring for mouse, touch and keyboard users.
-  outline: 0,
-  border: 0,
-  margin: 0, // Remove the margin in Safari
-  borderRadius: 0,
-  padding: 0, // Remove the padding in Firefox
-  cursor: 'pointer',
-  verticalAlign: 'middle',
-  MozAppearance: 'none', // Reset
-  WebkitAppearance: 'none', // Reset
-  textDecoration: 'none',
-  // So we take precedent over the style of a native <a /> element.
-  color: 'inherit',
-  '&:active': {
-    userSelect: 'none',
-  },
-  '&::-moz-focus-inner': {
-    borderStyle: 'none', // Remove Firefox dotted outline.
-  },
-  [`&.${buttonBaseClasses.disabled}`]: {
-    cursor: 'default',
+})(({ ownerState }) => {
+  const { isButton } = ownerState;
+
+  return {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    boxSizing: 'border-box',
+    WebkitTapHighlightColor: 'transparent',
+    backgroundColor: 'transparent', // Reset default value
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 0,
+    border: 0,
+    margin: 0, // Remove the margin in Safari
+    borderRadius: 0,
+    padding: 0, // Remove the padding in Firefox
+    cursor: 'pointer',
+    verticalAlign: 'middle',
+    MozAppearance: 'none', // Reset
+    WebkitAppearance: 'none', // Reset
+    textDecoration: 'none',
+    // So we take precedent over the style of a native <a /> element.
+    color: 'inherit',
     '&:active': {
-      pointerEvents: 'none', // Disable link interactions
+      userSelect: 'none',
     },
-  },
-  '@media print': {
-    colorAdjust: 'exact',
-  },
+    '&::-moz-focus-inner': {
+      borderStyle: 'none', // Remove Firefox dotted outline.
+    },
+    [`&.${buttonBaseClasses.disabled}`]: {
+      cursor: 'default',
+      ...(!isButton && {
+        pointerEvents: 'none', // Disable link interactions
+      }),
+    },
+    '@media print': {
+      colorAdjust: 'exact',
+    },
+  };
 });
 
 /**
@@ -332,6 +336,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
     ...props,
     centerRipple,
     component,
+    isButton: ComponentProp === 'button',
     disabled,
     disableRipple,
     disableTouchRipple,

From dd257e3626280ec74dca9716f83d3cb7bbc9ea0f Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Fri, 25 Aug 2023 11:48:16 -0400
Subject: [PATCH 4/9] Don't destructure ownerState in style function

---
 .../mui-material/src/ButtonBase/ButtonBase.js | 78 +++++++++----------
 1 file changed, 37 insertions(+), 41 deletions(-)

diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js
index 908cdd2938eeed..b3a04047697f15 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.js
@@ -32,47 +32,43 @@ export const ButtonBaseRoot = styled('button', {
   name: 'MuiButtonBase',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})(({ ownerState }) => {
-  const { isButton } = ownerState;
-
-  return {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative',
-    boxSizing: 'border-box',
-    WebkitTapHighlightColor: 'transparent',
-    backgroundColor: 'transparent', // Reset default value
-    // We disable the focus ring for mouse, touch and keyboard users.
-    outline: 0,
-    border: 0,
-    margin: 0, // Remove the margin in Safari
-    borderRadius: 0,
-    padding: 0, // Remove the padding in Firefox
-    cursor: 'pointer',
-    verticalAlign: 'middle',
-    MozAppearance: 'none', // Reset
-    WebkitAppearance: 'none', // Reset
-    textDecoration: 'none',
-    // So we take precedent over the style of a native <a /> element.
-    color: 'inherit',
-    '&:active': {
-      userSelect: 'none',
-    },
-    '&::-moz-focus-inner': {
-      borderStyle: 'none', // Remove Firefox dotted outline.
-    },
-    [`&.${buttonBaseClasses.disabled}`]: {
-      cursor: 'default',
-      ...(!isButton && {
-        pointerEvents: 'none', // Disable link interactions
-      }),
-    },
-    '@media print': {
-      colorAdjust: 'exact',
-    },
-  };
-});
+})(({ ownerState }) => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'relative',
+  boxSizing: 'border-box',
+  WebkitTapHighlightColor: 'transparent',
+  backgroundColor: 'transparent', // Reset default value
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
+  border: 0,
+  margin: 0, // Remove the margin in Safari
+  borderRadius: 0,
+  padding: 0, // Remove the padding in Firefox
+  cursor: 'pointer',
+  verticalAlign: 'middle',
+  MozAppearance: 'none', // Reset
+  WebkitAppearance: 'none', // Reset
+  textDecoration: 'none',
+  // So we take precedent over the style of a native <a /> element.
+  color: 'inherit',
+  '&:active': {
+    userSelect: 'none',
+  },
+  '&::-moz-focus-inner': {
+    borderStyle: 'none', // Remove Firefox dotted outline.
+  },
+  [`&.${buttonBaseClasses.disabled}`]: {
+    cursor: 'default',
+    ...(!ownerState.isButton && {
+      pointerEvents: 'none', // Disable link interactions
+    }),
+  },
+  '@media print': {
+    colorAdjust: 'exact',
+  },
+}));
 
 /**
  * `ButtonBase` contains as few styles as possible.

From dc398a4b23a8f70a4379a985df4ab2ddbd599587 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Fri, 25 Aug 2023 17:59:55 -0400
Subject: [PATCH 5/9] Link components user select

---
 packages/mui-joy/src/Link/Link.tsx     | 3 +++
 packages/mui-material/src/Link/Link.js | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
index cb3ef8c0b2584d..75166ba51877bc 100644
--- a/packages/mui-joy/src/Link/Link.tsx
+++ b/packages/mui-joy/src/Link/Link.tsx
@@ -135,6 +135,9 @@ const LinkRoot = styled('a', {
           }),
       MozAppearance: 'none', // Reset
       WebkitAppearance: 'none', // Reset
+      '&:active': {
+        userSelect: 'none',
+      },
       '&::-moz-focus-inner': {
         borderStyle: 'none', // Remove Firefox dotted outline.
       },
diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js
index c3950bd4498745..b44210b88dafc4 100644
--- a/packages/mui-material/src/Link/Link.js
+++ b/packages/mui-material/src/Link/Link.js
@@ -60,6 +60,9 @@ const LinkRoot = styled(Typography, {
         textDecorationColor: 'inherit',
       },
     }),
+    '&:active': {
+      userSelect: 'none',
+    },
     // Same reset as ButtonBase.root
     ...(ownerState.component === 'button' && {
       position: 'relative',

From b2a1c211e2c9e2fd5081e33857c34f383b4b8b09 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Wed, 13 Sep 2023 12:37:16 -0300
Subject: [PATCH 6/9] Update experiment

---
 .../experiments/material/button-select.tsx    | 66 +------------------
 1 file changed, 2 insertions(+), 64 deletions(-)

diff --git a/docs/pages/experiments/material/button-select.tsx b/docs/pages/experiments/material/button-select.tsx
index dd270028b7f32b..3f363bad6dc1fe 100644
--- a/docs/pages/experiments/material/button-select.tsx
+++ b/docs/pages/experiments/material/button-select.tsx
@@ -1,10 +1,5 @@
+/* eslint-disable no-console */
 import * as React from 'react';
-import { Button as BaseUIButton } from '@mui/base';
-import {
-  Button as JoyUIButton,
-  CssVarsProvider as JoyCssVarsProvider,
-  extendTheme as joyExtendTheme,
-} from '@mui/joy';
 import {
   FormControlLabel,
   Button as MaterialUIButton,
@@ -17,8 +12,6 @@ import { Stack } from '@mui/system';
 function createHandlers(name: string) {
   return {
     onClick: () => console.log(`${name} click`),
-    onMouseDown: () => console.log(`${name} mouse down`),
-    onMouseUp: () => console.log(`${name} mouse up`),
   };
 }
 
@@ -44,6 +37,7 @@ export default function App() {
             </Stack>
             <Stack alignItems="flex-start">
               <span>Native anchor</span>
+              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a href="#" {...createHandlers('Native anchor')}>
                 Anchor
               </a>
@@ -54,62 +48,6 @@ export default function App() {
             </Stack>
           </Stack>
 
-          {/* <Stack gap={3}>
-        <Stack alignItems="flex-start">
-          <span>Enabled Base UI button</span>
-          <BaseUIButton {...createHandlers('Enabled Base UI')}>Button</BaseUIButton>
-        </Stack>
-        <Stack alignItems="flex-start">
-          <span>Disabled Base UI button</span>
-          <BaseUIButton disabled {...createHandlers('Disabled Base UI')}>
-            Button
-          </BaseUIButton>
-        </Stack>
-        <Stack alignItems="flex-start">
-          <span>Enabled Base UI button as div</span>
-          <BaseUIButton slots={{ root: 'div' }} {...createHandlers('Enabled Base UI as div')}>
-            Button
-          </BaseUIButton>
-        </Stack>
-        <Stack alignItems="flex-start">
-          <span>Disabled Base UI button as div</span>
-          <BaseUIButton
-            slots={{ root: 'div' }}
-            disabled
-            {...createHandlers('Disabled Base UI as div')}
-          >
-            Button
-          </BaseUIButton>
-        </Stack>
-      </Stack>
-
-      <Stack gap={3}>
-        <JoyCssVarsProvider theme={joyExtendTheme({})}>
-          <Stack alignItems="flex-start">
-            <span>Enabled Joy UI button</span>
-            <JoyUIButton {...createHandlers('Enabled Joy UI')}>Button</JoyUIButton>
-          </Stack>
-          <Stack alignItems="flex-start">
-            <span>Disabled Joy UI button</span>
-            <JoyUIButton disabled {...createHandlers('Disabled Joy UI')}>
-              Button
-            </JoyUIButton>
-          </Stack>
-          <Stack alignItems="flex-start">
-            <span>Enabled Joy UI button as div</span>
-            <JoyUIButton component="div" {...createHandlers('Enabled Joy UI as div')}>
-              Button
-            </JoyUIButton>
-          </Stack>
-          <Stack alignItems="flex-start">
-            <span>Disabled Joy UI button as div</span>
-            <JoyUIButton component="div" disabled {...createHandlers('Disabled Joy UI as div')}>
-              Button
-            </JoyUIButton>
-          </Stack>
-        </JoyCssVarsProvider>
-      </Stack> */}
-
           <Stack gap={3}>
             <Stack alignItems="flex-start">
               <span>Material UI button</span>

From 2252e1737a523efa207eed1fee1c715086c0a27e Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Wed, 13 Sep 2023 14:15:57 -0300
Subject: [PATCH 7/9] Rever Joy Link change

---
 packages/mui-joy/src/Link/Link.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
index 75166ba51877bc..d2dfc19f4c69db 100644
--- a/packages/mui-joy/src/Link/Link.tsx
+++ b/packages/mui-joy/src/Link/Link.tsx
@@ -133,11 +133,9 @@ const LinkRoot = styled('a', {
               }),
             },
           }),
+      userSelect: 'none',
       MozAppearance: 'none', // Reset
       WebkitAppearance: 'none', // Reset
-      '&:active': {
-        userSelect: 'none',
-      },
       '&::-moz-focus-inner': {
         borderStyle: 'none', // Remove Firefox dotted outline.
       },

From d8d70fb6fca3dd463f9eda31b99d55bb9dd0041b Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Wed, 13 Sep 2023 14:16:08 -0300
Subject: [PATCH 8/9] Port change to material-next ButtonBase

---
 .../mui-material-next/src/ButtonBase/ButtonBase.tsx | 13 +++++++++----
 .../src/ButtonBase/ButtonBase.types.ts              |  4 ++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx b/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
index de46813447ad93..6fc4b70df50541 100644
--- a/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
+++ b/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
@@ -42,7 +42,7 @@ export const ButtonBaseRoot = styled('button', {
   slot: 'Root',
   shouldForwardProp: (prop) => rootShouldForwardProp(prop) && prop !== 'touchRippleRef',
   overridesResolver: (props, styles) => styles.root,
-})({
+})<{ ownerState: ButtonBaseOwnerState }>(({ ownerState }) => ({
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -57,7 +57,9 @@ export const ButtonBaseRoot = styled('button', {
   borderRadius: 0,
   padding: 0, // Remove the padding in Firefox
   cursor: 'pointer',
-  userSelect: 'none',
+  '&:active': {
+    userSelect: 'none',
+  },
   verticalAlign: 'middle',
   MozAppearance: 'none', // Reset
   WebkitAppearance: 'none', // Reset
@@ -68,13 +70,15 @@ export const ButtonBaseRoot = styled('button', {
     borderStyle: 'none', // Remove Firefox dotted outline.
   },
   [`&.${buttonBaseClasses.disabled}`]: {
-    pointerEvents: 'none', // Disable link interactions
+    ...(!ownerState.isButton && {
+      pointerEvents: 'none', // Disable link interactions
+    }),
     cursor: 'default',
   },
   '@media print': {
     colorAdjust: 'exact',
   },
-}) as React.ElementType<any>;
+})) as React.ElementType<any>;
 
 /**
  * `ButtonBase` contains as few styles as possible.
@@ -156,6 +160,7 @@ const ButtonBase = React.forwardRef(function ButtonBase<
     disableTouchRipple,
     focusVisible,
     active,
+    isButton: ComponentProp === 'button',
   };
 
   const classes = useUtilityClasses(ownerState);
diff --git a/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts b/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts
index 1ed0777f27ecff..679fbfe4f5100b 100644
--- a/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts
+++ b/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts
@@ -126,6 +126,10 @@ export type ButtonBaseProps<
 };
 
 export interface ButtonBaseOwnerState extends ButtonBaseProps {
+  /**
+   * If `true`, the DOM element is button.
+   */
+  isButton: boolean;
   /**
    * If `true`, the button is active.
    */

From a4016f1b54cb3907f99475fe8e329cbb2f734671 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Fri, 6 Oct 2023 17:45:55 -0300
Subject: [PATCH 9/9] Decrease scope of change

---
 .../experiments/material/button-select.tsx    | 125 +++++++++---------
 .../src/ButtonBase/ButtonBase.tsx             |  15 ++-
 .../src/ButtonBase/ButtonBase.types.ts        |   4 -
 .../mui-material/src/ButtonBase/ButtonBase.js |  15 ++-
 packages/mui-material/src/Link/Link.js        |   6 +-
 5 files changed, 85 insertions(+), 80 deletions(-)

diff --git a/docs/pages/experiments/material/button-select.tsx b/docs/pages/experiments/material/button-select.tsx
index 3f363bad6dc1fe..654964f9c72db8 100644
--- a/docs/pages/experiments/material/button-select.tsx
+++ b/docs/pages/experiments/material/button-select.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import * as React from 'react';
 import {
+  CssBaseline,
   FormControlLabel,
   Button as MaterialUIButton,
   Experimental_CssVarsProvider as MaterialUICssVarsProvider,
@@ -19,71 +20,73 @@ export default function App() {
   const [disabled, setDisabled] = React.useState(false);
 
   return (
-    <MaterialUICssVarsProvider theme={materialUIExtendTheme({})}>
-      <Stack gap={12} alignItems="center" sx={{ my: 6 }}>
-        <Stack>
-          <FormControlLabel
-            control={<Switch checked={disabled} onChange={() => setDisabled((prev) => !prev)} />}
-            label="Toggle disabled"
-          />
-        </Stack>
-        <Stack direction="row" justifyContent="space-around" sx={{ width: '80vw' }}>
-          <Stack gap={3}>
-            <Stack alignItems="flex-start">
-              <span>Native button</span>
-              <button type="button" disabled={disabled} {...createHandlers('Native button')}>
-                Button
-              </button>
-            </Stack>
-            <Stack alignItems="flex-start">
-              <span>Native anchor</span>
-              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-              <a href="#" {...createHandlers('Native anchor')}>
-                Anchor
-              </a>
-            </Stack>
-            <Stack alignItems="flex-start">
-              <span>Native div</span>
-              <div {...createHandlers('Div')}>Button</div>
-            </Stack>
+    <CssBaseline>
+      <MaterialUICssVarsProvider theme={materialUIExtendTheme({})}>
+        <Stack gap={12} alignItems="center" sx={{ my: 6 }}>
+          <Stack>
+            <FormControlLabel
+              control={<Switch checked={disabled} onChange={() => setDisabled((prev) => !prev)} />}
+              label="Toggle disabled"
+            />
           </Stack>
-
-          <Stack gap={3}>
-            <Stack alignItems="flex-start">
-              <span>Material UI button</span>
-              <MaterialUIButton
-                variant="contained"
-                disabled={disabled}
-                {...createHandlers('Material UI button')}
-              >
-                Button
-              </MaterialUIButton>
-            </Stack>
-            <Stack alignItems="flex-start">
-              <span>Material UI button link</span>
-              <MaterialUIButton
-                variant="contained"
-                disabled={disabled}
-                href="#"
-                {...createHandlers('Material UI button link')}
-              >
-                Button
-              </MaterialUIButton>
+          <Stack direction="row" justifyContent="space-around" sx={{ width: '80vw' }}>
+            <Stack gap={3}>
+              <Stack alignItems="flex-start">
+                <span>Native button</span>
+                <button type="button" disabled={disabled} {...createHandlers('Native button')}>
+                  Button
+                </button>
+              </Stack>
+              <Stack alignItems="flex-start">
+                <span>Native anchor</span>
+                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                <a href="#" {...createHandlers('Native anchor')}>
+                  Anchor
+                </a>
+              </Stack>
+              <Stack alignItems="flex-start">
+                <span>Native div</span>
+                <div {...createHandlers('Div')}>Button</div>
+              </Stack>
             </Stack>
-            <Stack alignItems="flex-start">
-              <span>Material UI button as div</span>
-              <MaterialUIButton
-                variant="contained"
-                component="div"
-                disabled={disabled}
-                {...createHandlers('Material UI button as div')}
-              >
-                Button
-              </MaterialUIButton>
+
+            <Stack gap={3}>
+              <Stack alignItems="flex-start">
+                <span>Material UI button</span>
+                <MaterialUIButton
+                  variant="contained"
+                  disabled={disabled}
+                  {...createHandlers('Material UI button')}
+                >
+                  Button
+                </MaterialUIButton>
+              </Stack>
+              <Stack alignItems="flex-start">
+                <span>Material UI button link</span>
+                <MaterialUIButton
+                  variant="contained"
+                  disabled={disabled}
+                  href="#"
+                  {...createHandlers('Material UI button link')}
+                >
+                  Button
+                </MaterialUIButton>
+              </Stack>
+              <Stack alignItems="flex-start">
+                <span>Material UI button as div</span>
+                <MaterialUIButton
+                  variant="contained"
+                  component="div"
+                  disabled={disabled}
+                  {...createHandlers('Material UI button as div')}
+                >
+                  Button
+                </MaterialUIButton>
+              </Stack>
             </Stack>
           </Stack>
         </Stack>
-      </Stack>
-    </MaterialUICssVarsProvider>
+      </MaterialUICssVarsProvider>
+    </CssBaseline>
   );
 }
diff --git a/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx b/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
index 6fc4b70df50541..a72bc6b1c45223 100644
--- a/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
+++ b/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
@@ -42,7 +42,7 @@ export const ButtonBaseRoot = styled('button', {
   slot: 'Root',
   shouldForwardProp: (prop) => rootShouldForwardProp(prop) && prop !== 'touchRippleRef',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: ButtonBaseOwnerState }>(({ ownerState }) => ({
+})({
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -57,7 +57,11 @@ export const ButtonBaseRoot = styled('button', {
   borderRadius: 0,
   padding: 0, // Remove the padding in Firefox
   cursor: 'pointer',
-  '&:active': {
+  // userSelect: 'text' to overcome Firefox's default behavior
+  userSelect: 'text',
+  // only apply userSelect: none when focused so
+  // selection from dragging from outside the element is possible
+  '&:focus': {
     userSelect: 'none',
   },
   verticalAlign: 'middle',
@@ -70,15 +74,13 @@ export const ButtonBaseRoot = styled('button', {
     borderStyle: 'none', // Remove Firefox dotted outline.
   },
   [`&.${buttonBaseClasses.disabled}`]: {
-    ...(!ownerState.isButton && {
-      pointerEvents: 'none', // Disable link interactions
-    }),
+    pointerEvents: 'none', // Disable interactions
     cursor: 'default',
   },
   '@media print': {
     colorAdjust: 'exact',
   },
-})) as React.ElementType<any>;
+}) as React.ElementType<any>;
 
 /**
  * `ButtonBase` contains as few styles as possible.
@@ -160,7 +162,6 @@ const ButtonBase = React.forwardRef(function ButtonBase<
     disableTouchRipple,
     focusVisible,
     active,
-    isButton: ComponentProp === 'button',
   };
 
   const classes = useUtilityClasses(ownerState);
diff --git a/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts b/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts
index 679fbfe4f5100b..1ed0777f27ecff 100644
--- a/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts
+++ b/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts
@@ -126,10 +126,6 @@ export type ButtonBaseProps<
 };
 
 export interface ButtonBaseOwnerState extends ButtonBaseProps {
-  /**
-   * If `true`, the DOM element is button.
-   */
-  isButton: boolean;
   /**
    * If `true`, the button is active.
    */
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js
index b3a04047697f15..716d19ebbdb390 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.js
@@ -32,7 +32,7 @@ export const ButtonBaseRoot = styled('button', {
   name: 'MuiButtonBase',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})(({ ownerState }) => ({
+})({
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -53,22 +53,24 @@ export const ButtonBaseRoot = styled('button', {
   textDecoration: 'none',
   // So we take precedent over the style of a native <a /> element.
   color: 'inherit',
-  '&:active': {
+  // userSelect: 'text' to overcome Firefox's default behavior
+  userSelect: 'text',
+  // Only apply userSelect: none when focused so
+  // selection from dragging from outside the element is possible
+  '&:focus': {
     userSelect: 'none',
   },
   '&::-moz-focus-inner': {
     borderStyle: 'none', // Remove Firefox dotted outline.
   },
   [`&.${buttonBaseClasses.disabled}`]: {
+    pointerEvents: 'none', // Disable interactions
     cursor: 'default',
-    ...(!ownerState.isButton && {
-      pointerEvents: 'none', // Disable link interactions
-    }),
   },
   '@media print': {
     colorAdjust: 'exact',
   },
-}));
+});
 
 /**
  * `ButtonBase` contains as few styles as possible.
@@ -332,7 +334,6 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
     ...props,
     centerRipple,
     component,
-    isButton: ComponentProp === 'button',
     disabled,
     disableRipple,
     disableTouchRipple,
diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js
index b44210b88dafc4..1dec7fcec1c262 100644
--- a/packages/mui-material/src/Link/Link.js
+++ b/packages/mui-material/src/Link/Link.js
@@ -60,7 +60,11 @@ const LinkRoot = styled(Typography, {
         textDecorationColor: 'inherit',
       },
     }),
-    '&:active': {
+    // userSelect: 'text' to overcome Firefox's default behavior
+    userSelect: 'text',
+    // Only apply userSelect: none when focused so
+    // selection from dragging from outside the element is possible
+    '&:focus': {
       userSelect: 'none',
     },
     // Same reset as ButtonBase.root