[Joy] Miscellaneous fixes (mui#35847)

packages/mui-joy/src/CircularProgress/CircularProgress.tsx

@@ -102,6 +102,7 @@ const CircularProgressRoot = styled('span', {
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
+    flexShrink: 0, // prevent from shrinking when CircularProgress is in a flex container.
     position: 'relative',
     color,
     ...(ownerState.children && {

packages/mui-joy/src/Link/Link.tsx

@@ -40,19 +40,29 @@ const StartDecorator = styled('span', {
   name: 'JoyLink',
   slot: 'StartDecorator',
   overridesResolver: (props, styles) => styles.startDecorator,
-})<{ ownerState: LinkOwnerState }>({
+})<{ ownerState: LinkOwnerState }>(({ ownerState }) => ({
   display: 'inline-flex',
   marginInlineEnd: 'clamp(4px, var(--Link-gap, 0.375em), 0.75rem)',
-});
+  ...(typeof ownerState.startDecorator !== 'string' &&
+    (ownerState.alignItems === 'flex-start' ||
+      (ownerState.sx as any)?.alignItems === 'flex-start') && {
+      marginTop: '2px', // this makes the alignment perfect in most cases
+    }),
+}));
 
 const EndDecorator = styled('span', {
   name: 'JoyLink',
   slot: 'endDecorator',
   overridesResolver: (props, styles) => styles.endDecorator,
-})<{ ownerState: LinkOwnerState }>({
+})<{ ownerState: LinkOwnerState }>(({ ownerState }) => ({
   display: 'inline-flex',
   marginInlineStart: 'clamp(4px, var(--Link-gap, 0.25em), 0.5rem)', // for end decorator, 0.25em looks better.
-});
+  ...(typeof ownerState.startDecorator !== 'string' &&
+    (ownerState.alignItems === 'flex-start' ||
+      (ownerState.sx as any)?.alignItems === 'flex-start') && {
+      marginTop: '2px', // this makes the alignment perfect in most cases
+    }),
+}));
 
 const LinkRoot = styled('a', {
   name: 'JoyLink',

packages/mui-joy/src/Select/Select.tsx

@@ -241,6 +241,7 @@ const SelectListbox = styled(StyledList, {
       theme.vars.palette.background.popup,
     '--List-item-stickyTop': 'calc(var(--List-padding, var(--List-divider-gap)) * -1)', // negative amount of the List's padding block
     ...scopedVariables,
+    minWidth: 'max-content', // prevent options from shrinking if some of them is wider than the Select's root.
     outline: 0,
     boxShadow: theme.shadow.md,
     zIndex: 1000,

packages/mui-joy/src/Typography/Typography.tsx

@@ -39,9 +39,11 @@ const StartDecorator = styled('span', {
 })<{ ownerState: TypographyOwnerState }>(({ ownerState }) => ({
   display: 'inline-flex',
   marginInlineEnd: 'clamp(4px, var(--Typography-gap, 0.375em), 0.75rem)',
-  ...((ownerState.sx as any)?.alignItems === 'flex-start' && {
-    marginTop: '2px', // this makes the alignment perfect in most cases
-  }),
+  ...(typeof ownerState.startDecorator !== 'string' &&
+    (ownerState.alignItems === 'flex-start' ||
+      (ownerState.sx as any)?.alignItems === 'flex-start') && {
+      marginTop: '2px', // this makes the alignment perfect in most cases
+    }),
 }));
 
 const EndDecorator = styled('span', {
@@ -51,9 +53,11 @@ const EndDecorator = styled('span', {
 })<{ ownerState: TypographyOwnerState }>(({ ownerState }) => ({
   display: 'inline-flex',
   marginInlineStart: 'clamp(4px, var(--Typography-gap, 0.375em), 0.75rem)',
-  ...((ownerState.sx as any)?.alignItems === 'flex-start' && {
-    marginTop: '2px', // this makes the alignment perfect in most cases
-  }),
+  ...(typeof ownerState.endDecorator !== 'string' &&
+    (ownerState.alignItems === 'flex-start' ||
+      (ownerState.sx as any)?.alignItems === 'flex-start') && {
+      marginTop: '2px', // this makes the alignment perfect in most cases
+    }),
 }));
 
 const TypographyRoot = styled('span', {

test/regressions/fixtures/CircularProgressJoy/CircularProgressFlexItem.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import Box from '@mui/joy/Box';
+import CircularProgress from '@mui/joy/CircularProgress';
+import Typography from '@mui/joy/Typography';
+
+export default function CircularProgressFlexItem() {
+  return (
+    <CssVarsProvider>
+      <Box sx={{ display: 'flex', width: 200, gap: 2 }}>
+        <CircularProgress determinate value={50} />
+        <Typography>Hello World, this is a very long sentence.</Typography>
+      </Box>
+    </CssVarsProvider>
+  );
+}

test/regressions/fixtures/SelectJoy/ListboxMinWidth.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import Box from '@mui/joy/Box';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+
+export default function ListboxMinWidth() {
+  return (
+    <CssVarsProvider>
+      <Box sx={{ display: 'flex' }}>
+        <Select defaultListboxOpen placeholder="None">
+          <Option value="short">Short option</Option>
+          <Option value="long">A very long option</Option>
+        </Select>
+      </Box>
+    </CssVarsProvider>
+  );
+}

test/regressions/fixtures/TypographyJoy/DecoratorAlignItemsStart.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import Box from '@mui/joy/Box';
+import Typography from '@mui/joy/Typography';
+import Link from '@mui/joy/Link';
+
+export default function DecoratorAlignItemsStart() {
+  return (
+    <CssVarsProvider>
+      <Typography startDecorator="✅" alignItems="flex-start" sx={{ width: 160 }}>
+        Hello World, this is a very long sentence.
+      </Typography>
+      <Typography
+        startDecorator={
+          <Box
+            component="span"
+            sx={{ bgcolor: 'tomato', width: '1.25em', height: '1.25em', borderRadius: '50%' }}
+          />
+        }
+        alignItems="flex-start"
+        sx={{ width: 160 }}
+      >
+        Hello World, this is a very long sentence.
+      </Typography>
+      <Link href="/" startDecorator="✅" sx={{ width: 160, alignItems: 'flex-start' }}>
+        Hello World, this is a very long sentence.
+      </Link>
+      <Link
+        href="/"
+        startDecorator={
+          <Box
+            component="span"
+            sx={{ bgcolor: 'tomato', width: '1.25em', height: '1.25em', borderRadius: '50%' }}
+          />
+        }
+        sx={{ width: 160, alignItems: 'flex-start' }}
+      >
+        Hello World, this is a very long sentence.
+      </Link>
+    </CssVarsProvider>
+  );
+}