Merge remote-tracking branch 'upstream/master' into discovery-amount

CHANGELOG.md

@@ -1,5 +1,42 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.11.3
+
+<!-- generated comparing v5.11.2..master -->
+
+_Jan 2, 2023_
+
+A big thanks to the 6 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 02 -->[Select] Update `renderValue` prop's TypeScript type (#34177) @ZeeshanTamboli
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 14 -->[Autocomplete][joy] Export component (#35647) @mbranch
+
+### Docs
+
+- &#8203;<!-- 13 -->[blog] Fix handling of markdown links (#35628) @oliviertassinari
+- &#8203;<!-- 09 -->[docs] Fix demo code selection through copy shortcut key on Firefox browser (#35670) @ZeeshanTamboli
+- &#8203;<!-- 08 -->[docs] Fix layout shift when streaming the page (#35627) @oliviertassinari
+- &#8203;<!-- 07 -->[docs] Fix switch name to reflect the color (#35052) @rjhcnf
+- &#8203;<!-- 06 -->[docs] Fix anchor link in the card's docs and fix a typo (#35634) @ZeeshanTamboli
+- &#8203;<!-- 05 -->[docs] Fix layout shift with modal (#35591) @oliviertassinari
+- &#8203;<!-- 04 -->[Joy][docs] Add documentation for `Input` component (#35482) @hbjORbj
+- &#8203;<!-- 03 -->[docs][joy] Improved readability on theme tokens page (#35639) @badalsaibo
+
+### Core
+
+- &#8203;<!-- 12 -->[core] Disable prefetch of footer links @oliviertassinari
+- &#8203;<!-- 11 -->[core] A few SEO fixes (#35672) @oliviertassinari
+- &#8203;<!-- 10 -->[core] Remove need for scopePathnames (#35584) @oliviertassinari
+- &#8203;<!-- 01 -->[test] Fix Algolia noisy lvl1 anchor (#35686) @oliviertassinari
+
+All contributors of this release in alphabetical order: @badalsaibo, @hbjORbj, @mbranch, @oliviertassinari, @rjhcnf, @ZeeshanTamboli
+
 ## 5.11.2
 
 <!-- generated comparing v5.11.1..master -->

benchmark/package.json

@@ -11,11 +11,11 @@
     "server:system": "cd ../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node benchmark/server/scenarios/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\""
   },
   "dependencies": {
-    "@chakra-ui/system": "^2.3.5",
+    "@chakra-ui/system": "^2.3.7",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mdx-js/react": "^2.2.1",
-    "@mui/material": "^5.11.2",
+    "@mui/material": "^5.11.3",
     "@mui/styles": "^5.11.2",
     "@mui/system": "^5.11.2",
     "@styled-system/css": "^5.1.5",

docs/data/base/components/modal/modal.md

@@ -128,6 +128,18 @@ In order to display an Unstyled Modal rendered on the server, you need to disabl
 
 ## Limitations
 
+### Overflow layout shift
+
+The modal disables the page scrolling while open by setting `overflow: hidden` as inline-style on the relevant scroll container, this hides the scrollbar and hence impacts the page layout.
+To compensate for this offset and avoid a layout shift, the modal also set a padding property on the scroll container (~15px under normal conditions).
+
+This can create a layout shift with `position: fixed` and `position: sticky` elements.
+You need to add the `.mui-fixed` class name on these elements so the modal can add a CSS padding property when the scroll is disabled.
+
+```jsx
+<Box sx={{ position: 'sticky', right: 0, top: 0, left: 0 }} className="mui-fixed">
+```
+
 ### Focus trap
 
 Unstyled Modal moves the focus back to the body of the component if the focus tries to escape it.

docs/data/joy/components/card/card.md

@@ -13,7 +13,7 @@ githubLabel: 'component: card'
 Cards are most frequently used for easy to scan, relevant, and actionable information.
 Joy UI provides four Card-related components:
 
-- [`Card`](#basic): a container to control the content direction.
+- [`Card`](#basic-usage): a container to control the content direction.
 - [`CardOverflow`](#overflow): a handy component that takes care of stretching the content to fill all edges of the card.
 - [`CardCover`](#back-cover): a container for displaying background images within the card, also used to create gradient layers.
 - [`CardContent`](#back-cover): a wrapper that brings content to the front when used with `CardCover`.
@@ -105,7 +105,7 @@ Learn more about best accessibility practices with cards in the [Inclusive Compo
 
 ## CSS variables
 
-Play around with all the CSS variables available in the slider component to see how the design changes.
+Play around with all the CSS variables available in the component to see how the design changes.
 
 You can use those to customize the component on both the `sx` prop and the theme.
 

docs/data/joy/components/input/BasicInput.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Input from '@mui/joy/Input';
+
+export default function BasicInput() {
+  return <Input placeholder="Type in here…" />;
+}

docs/data/joy/components/input/BasicInput.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Input from '@mui/joy/Input';
+
+export default function BasicInput() {
+  return <Input placeholder="Type in here…" />;
+}

docs/data/joy/components/input/BasicInput.tsx.preview

@@ -0,0 +1 @@
+<Input placeholder="Type in here…" />

docs/data/joy/components/input/InputColors.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputColors() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'grid',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Input placeholder="Type in here…" variant="outlined" color="primary" />
+      <Input placeholder="Type in here…" variant="outlined" color="neutral" />
+      <Input placeholder="Type in here…" variant="outlined" color="danger" />
+      <Input placeholder="Type in here…" variant="outlined" color="warning" />
+    </Box>
+  );
+}

docs/data/joy/components/input/InputColors.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputColors() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'grid',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Input placeholder="Type in here…" variant="outlined" color="primary" />
+      <Input placeholder="Type in here…" variant="outlined" color="neutral" />
+      <Input placeholder="Type in here…" variant="outlined" color="danger" />
+      <Input placeholder="Type in here…" variant="outlined" color="warning" />
+    </Box>
+  );
+}

docs/data/joy/components/input/InputColors.tsx.preview

@@ -0,0 +1,4 @@
+<Input placeholder="Type in here…" variant="outlined" color="primary" />
+<Input placeholder="Type in here…" variant="outlined" color="neutral" />
+<Input placeholder="Type in here…" variant="outlined" color="danger" />
+<Input placeholder="Type in here…" variant="outlined" color="warning" />

docs/data/joy/components/input/InputDecorators.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Divider from '@mui/joy/Divider';
+import Input from '@mui/joy/Input';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+
+export default function InputDecorators() {
+  const [currency, setCurrency] = React.useState('dollar');
+  return (
+    <Input
+      placeholder="Amount"
+      startDecorator={{ dollar: '$', baht: '฿', yen: '¥' }[currency]}
+      endDecorator={
+        <React.Fragment>
+          <Divider orientation="vertical" />
+          <Select
+            variant="plain"
+            value={currency}
+            onChange={(_, value) => setCurrency(value)}
+            sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
+          >
+            <Option value="dollar">US dollar</Option>
+            <Option value="baht">Thai baht</Option>
+            <Option value="yen">Japanese yen</Option>
+          </Select>
+        </React.Fragment>
+      }
+      sx={{ width: 300 }}
+    />
+  );
+}

docs/data/joy/components/input/InputDecorators.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Divider from '@mui/joy/Divider';
+import Input from '@mui/joy/Input';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+
+export default function InputDecorators() {
+  const [currency, setCurrency] = React.useState('dollar');
+  return (
+    <Input
+      placeholder="Amount"
+      startDecorator={{ dollar: '$', baht: '฿', yen: '¥' }[currency]}
+      endDecorator={
+        <React.Fragment>
+          <Divider orientation="vertical" />
+          <Select
+            variant="plain"
+            value={currency}
+            onChange={(_, value) => setCurrency(value!)}
+            sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
+          >
+            <Option value="dollar">US dollar</Option>
+            <Option value="baht">Thai baht</Option>
+            <Option value="yen">Japanese yen</Option>
+          </Select>
+        </React.Fragment>
+      }
+      sx={{ width: 300 }}
+    />
+  );
+}

docs/data/joy/components/input/InputField.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Input from '@mui/joy/Input';
+
+export default function InputField() {
+  return (
+    <FormControl>
+      <FormLabel>Label</FormLabel>
+      <Input placeholder="Placeholder" />
+      <FormHelperText>This is a helper text.</FormHelperText>
+    </FormControl>
+  );
+}

docs/data/joy/components/input/InputField.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Input from '@mui/joy/Input';
+
+export default function InputField() {
+  return (
+    <FormControl>
+      <FormLabel>Label</FormLabel>
+      <Input placeholder="Placeholder" />
+      <FormHelperText>This is a helper text.</FormHelperText>
+    </FormControl>
+  );
+}

docs/data/joy/components/input/InputField.tsx.preview

@@ -0,0 +1,5 @@
+<FormControl>
+  <FormLabel>Label</FormLabel>
+  <Input placeholder="Placeholder" />
+  <FormHelperText>This is a helper text.</FormHelperText>
+</FormControl>

docs/data/joy/components/input/InputFormProps.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Input from '@mui/joy/Input';
+
+export default function InputFormProps() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+        }}
+      >
+        <Input
+          placeholder="Try to submit with no text!"
+          required
+          sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
+        />
+        <Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Box>
+  );
+}

docs/data/joy/components/input/InputFormProps.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Input from '@mui/joy/Input';
+
+export default function InputFormProps() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+        }}
+      >
+        <Input
+          placeholder="Try to submit with no text!"
+          required
+          sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
+        />
+        <Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Box>
+  );
+}

docs/data/joy/components/input/InputFormProps.tsx.preview

@@ -0,0 +1,13 @@
+<form
+  onSubmit={(event) => {
+    event.preventDefault();
+  }}
+>
+  <Input
+    placeholder="Try to submit with no text!"
+    required
+    sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
+  />
+  <Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
+  <Button type="submit">Submit</Button>
+</form>

docs/data/joy/components/input/InputSizes.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Input from '@mui/joy/Input';
+import Stack from '@mui/joy/Stack';
+
+export default function InputSizes() {
+  return (
+    <Stack spacing={2}>
+      <Input size="sm" placeholder="Small" />
+      <Input size="md" placeholder="Medium" />
+      <Input size="lg" placeholder="Large" />
+    </Stack>
+  );
+}

docs/data/joy/components/input/InputSizes.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Input from '@mui/joy/Input';
+import Stack from '@mui/joy/Stack';
+
+export default function InputSizes() {
+  return (
+    <Stack spacing={2}>
+      <Input size="sm" placeholder="Small" />
+      <Input size="md" placeholder="Medium" />
+      <Input size="lg" placeholder="Large" />
+    </Stack>
+  );
+}

docs/data/joy/components/input/InputSizes.tsx.preview

@@ -0,0 +1,3 @@
+<Input size="sm" placeholder="Small" />
+<Input size="md" placeholder="Medium" />
+<Input size="lg" placeholder="Large" />