[Joy] Miscellaneous fixes

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

@@ -142,19 +142,15 @@ const AutocompleteWrapper = styled('div', {
   alignItems: 'center',
   flexWrap: 'wrap',
   [`&.${autocompleteClasses.multiple}`]: {
-    paddingInlineStart: 0,
-    paddingBlockStart:
-      'calc(var(--_Input-paddingBlock) - max(var(--Autocomplete-wrapper-gap), 0px))',
-    paddingBlockEnd: 'var(--_Input-paddingBlock)',
+    paddingBlockEnd: 'min(var(--_Input-paddingBlock), var(--Autocomplete-wrapper-gap))',
     // TODO: use [CSS :has](https://caniuse.com/?search=%3Ahas) later
     ...(ownerState.startDecorator &&
       Array.isArray(ownerState.value) &&
       (ownerState.value as Array<unknown>).length > 0 && {
         marginBlockStart: 'min(var(--_Input-paddingBlock) - var(--Autocomplete-wrapper-gap), 0px)',
-        marginInlineStart:
-          'calc(-1 * min(var(--Autocomplete-wrapper-gap), var(--_Input-paddingBlock)))',
+        marginInlineStart: 'calc(-1 * var(--Autocomplete-wrapper-gap))',
         [`& .${autocompleteClasses.input}`]: {
-          marginInlineStart: 'var(--Input-gap)',
+          marginInlineStart: 'max(var(--Autocomplete-wrapper-gap), var(--Input-gap))',
         },
       }),
   },
@@ -484,7 +480,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
       name,
       readOnly,
       disabled,
-      required,
+      required: required ?? formControl?.required,
       type,
       'aria-invalid': error || undefined,
       'aria-label': ariaLabel,

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

@@ -132,7 +132,7 @@ export const ButtonRoot = styled('button', {
       transition:
         'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       fontFamily: theme.vars.fontFamily.body,
-      fontWeight: theme.vars.fontWeight.md,
+      fontWeight: theme.vars.fontWeight.lg,
       lineHeight: 1,
       ...(ownerState.fullWidth && {
         width: '100%',

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

@@ -298,7 +298,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
       name,
       value,
       readOnly,
-      required,
+      required: required ?? formControl?.required,
       'aria-describedby': formControl?.['aria-describedby'],
       ...(indeterminate && {
         // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked#values

packages/mui-joy/src/FormControl/FormControl.test.tsx

@@ -95,6 +95,17 @@ describe('<FormControl />', () => {
 
       expect(getByRole('textbox')).to.have.attribute('disabled');
     });
+
+    it('should inherit required from FormControl', () => {
+      const { getByRole } = render(
+        <FormControl required>
+          <FormLabel>label</FormLabel>
+          <Input />
+        </FormControl>,
+      );
+
+      expect(getByRole('textbox')).to.have.attribute('required');
+    });
   });
 
   describe('Textarea', () => {
@@ -139,6 +150,17 @@ describe('<FormControl />', () => {
 
       expect(getByLabelText('label')).to.have.attribute('disabled');
     });
+
+    it('should inherit required from FormControl', () => {
+      const { getByRole } = render(
+        <FormControl required>
+          <FormLabel>label</FormLabel>
+          <Textarea minRows={2} />
+        </FormControl>,
+      );
+
+      expect(getByRole('textbox', { name: 'label' })).to.have.attribute('required');
+    });
   });
 
   describe('Select', () => {
@@ -242,6 +264,16 @@ describe('<FormControl />', () => {
       expect(getByTestId('checkbox')).to.have.class(checkboxClasses.disabled);
       expect(getByLabelText('label')).to.have.attribute('disabled');
     });
+
+    it('should inherit required from FormControl', () => {
+      const { getByLabelText } = render(
+        <FormControl required>
+          <Checkbox label="label" data-testid="checkbox" />
+        </FormControl>,
+      );
+
+      expect(getByLabelText('label')).to.have.attribute('required');
+    });
   });
 
   describe('RadioGroup', () => {
@@ -328,6 +360,16 @@ describe('<FormControl />', () => {
       expect(getByTestId('radio')).to.have.class(radioClasses.disabled);
       expect(getByLabelText('label')).to.have.attribute('disabled');
     });
+
+    it('should inherit required from FormControl', () => {
+      const { getByLabelText } = render(
+        <FormControl required>
+          <Radio label="label" data-testid="radio" />
+        </FormControl>,
+      );
+
+      expect(getByLabelText('label')).to.have.attribute('required');
+    });
   });
 
   describe('Switch', () => {
@@ -420,5 +462,16 @@ describe('<FormControl />', () => {
 
       expect(getByRole('combobox')).to.have.attribute('disabled');
     });
+
+    it('should inherit required from FormControl', () => {
+      const { getByRole } = render(
+        <FormControl disabled>
+          <FormLabel>label</FormLabel>
+          <Autocomplete options={[]} />
+        </FormControl>,
+      );
+
+      expect(getByRole('combobox')).to.have.attribute('disabled');
+    });
   });
 });

packages/mui-joy/src/Input/Input.test.js

@@ -40,6 +40,13 @@ describe('Joy <Input />', () => {
     expect(screen.getByTestId('end')).toBeVisible();
   });
 
+  describe('prop: required', () => {
+    it('should pass to `input` element', () => {
+      const { getByRole } = render(<Input required />);
+      expect(getByRole('textbox')).to.have.attribute('required');
+    });
+  });
+
   describe('prop: disabled', () => {
     it('should have disabled classes', () => {
       const { container, getByRole } = render(<Input disabled />);

packages/mui-joy/src/Input/useForwardedInput.ts

@@ -41,7 +41,7 @@ export default function useForwardedInput<Output>(
     onClick,
     onChange,
     onFocus,
-    required,
+    required: required ?? formControl?.required,
     value,
   });
 

packages/mui-joy/src/Link/Link.test.js

@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import { act, createRenderer, fireEvent, describeConformance } from 'test/utils';
 import Link, { linkClasses as classes } from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
 import { ThemeProvider } from '@mui/joy/styles';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 
@@ -183,4 +184,15 @@ describe('<Link />', () => {
       });
     });
   });
+
+  describe('Typography', () => {
+    it('should be a span by default', () => {
+      const { container } = render(
+        <Link href="/">
+          hello <Typography>test</Typography>
+        </Link>,
+      );
+      expect(container.querySelector('span')).to.have.text('test');
+    });
+  });
 });

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

@@ -254,12 +254,16 @@ const Link = React.forwardRef(function Link(inProps, ref) {
   });
 
   return (
-    <LinkRoot {...rootProps}>
-      {startDecorator && <StartDecorator {...startDecoratorProps}>{startDecorator}</StartDecorator>}
+    <TypographyContext.Provider value>
+      <LinkRoot {...rootProps}>
+        {startDecorator && (
+          <StartDecorator {...startDecoratorProps}>{startDecorator}</StartDecorator>
+        )}
 
-      {children}
-      {endDecorator && <EndDecorator {...endDecoratorProps}>{endDecorator}</EndDecorator>}
-    </LinkRoot>
+        {children}
+        {endDecorator && <EndDecorator {...endDecoratorProps}>{endDecorator}</EndDecorator>}
+      </LinkRoot>
+    </TypographyContext.Provider>
   );
 }) as OverridableComponent<LinkTypeMap>;
 

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

@@ -347,7 +347,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
       id,
       name,
       readOnly,
-      required,
+      required: required ?? formControl?.required,
       value: String(value),
       'aria-describedby': formControl?.['aria-describedby'],
     },

packages/mui-joy/src/Slider/sliderClasses.ts

@@ -11,6 +11,8 @@ export interface SliderClasses {
   disabled: string;
   /** State class applied to the root if a thumb is being dragged. */
   dragging: string;
+  /** State class applied to the thumb element if it has keyboard focused. */
+  focusVisible: string;
   /** Class name applied to the rail element. */
   rail: string;
   /** Class name applied to the track element. */
@@ -61,6 +63,7 @@ const sliderClasses: SliderClasses = generateUtilityClasses('JoySlider', [
   'root',
   'disabled',
   'dragging',
+  'focusVisible',
   'marked',
   'vertical',
   'trackInverted',