[SwipeableDrawer] Add appearOffset prop

docs/pages/api-docs/swipeable-drawer.json

@@ -10,6 +10,7 @@
       "type": { "name": "bool" },
       "default": "typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent)"
     },
+    "discoveryAmount": { "type": { "name": "number" }, "default": "disableDiscovery ? 15 : 20" },
     "hysteresis": { "type": { "name": "number" }, "default": "0.52" },
     "minFlingVelocity": { "type": { "name": "number" }, "default": "450" },
     "SwipeAreaProps": { "type": { "name": "object" } },

docs/src/pages/components/drawers/SwipeableDiscoveryAmount.js

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import InboxIcon from '@mui/icons-material/MoveToInbox';
+import MailIcon from '@mui/icons-material/Mail';
+
+export default function SwipeableDiscoveryAmount() {
+  const [state, setState] = React.useState({
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+  });
+
+  const [discoveryAmount, setDiscoveryAmount] = React.useState(20);
+
+  const toggleDrawer = (anchor, open) => (event) => {
+    if (
+      event &&
+      event.type === 'keydown' &&
+      (event.key === 'Tab' || event.key === 'Shift')
+    ) {
+      return;
+    }
+
+    setState({ ...state, [anchor]: open });
+  };
+
+  const list = (anchor) => (
+    <Box
+      sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
+      role="presentation"
+      onClick={toggleDrawer(anchor, false)}
+      onKeyDown={toggleDrawer(anchor, false)}
+    >
+      <List>
+        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+          <ListItem button key={text}>
+            <ListItemIcon>
+              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+            </ListItemIcon>
+            <ListItemText primary={text} />
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+      <List>
+        {['All mail', 'Trash', 'Spam'].map((text, index) => (
+          <ListItem button key={text}>
+            <ListItemIcon>
+              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+            </ListItemIcon>
+            <ListItemText primary={text} />
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+
+  return (
+    <div>
+      <RadioGroup
+        row
+        name="justifyContent"
+        aria-label="justifyContent"
+        value={discoveryAmount}
+        onChange={(event) => {
+          setDiscoveryAmount(parseInt(event.target.value, 10));
+        }}
+      >
+        <FormControlLabel value={0} control={<Radio />} label="0px" />
+        <FormControlLabel value={20} control={<Radio />} label="20px" />
+        <FormControlLabel value={50} control={<Radio />} label="50px" />
+        <FormControlLabel value={100} control={<Radio />} label="100px" />
+      </RadioGroup>
+      {['left', 'right', 'top', 'bottom'].map((anchor) => (
+        <React.Fragment key={anchor}>
+          <SwipeableDrawer
+            discoveryAmount={discoveryAmount}
+            anchor={anchor}
+            open={state[anchor]}
+            onClose={toggleDrawer(anchor, false)}
+            onOpen={toggleDrawer(anchor, true)}
+          >
+            {list(anchor)}
+          </SwipeableDrawer>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}

docs/src/pages/components/drawers/SwipeableDiscoveryAmount.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import InboxIcon from '@mui/icons-material/MoveToInbox';
+import MailIcon from '@mui/icons-material/Mail';
+
+type Anchor = 'top' | 'left' | 'bottom' | 'right';
+
+export default function SwipeableDiscoveryAmount() {
+  const [state, setState] = React.useState({
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+  });
+  const [discoveryAmount, setDiscoveryAmount] = React.useState(20);
+
+  const toggleDrawer =
+    (anchor: Anchor, open: boolean) =>
+    (event: React.KeyboardEvent | React.MouseEvent) => {
+      if (
+        event &&
+        event.type === 'keydown' &&
+        ((event as React.KeyboardEvent).key === 'Tab' ||
+          (event as React.KeyboardEvent).key === 'Shift')
+      ) {
+        return;
+      }
+
+      setState({ ...state, [anchor]: open });
+    };
+
+  const list = (anchor: Anchor) => (
+    <Box
+      sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
+      role="presentation"
+      onClick={toggleDrawer(anchor, false)}
+      onKeyDown={toggleDrawer(anchor, false)}
+    >
+      <List>
+        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+          <ListItem button key={text}>
+            <ListItemIcon>
+              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+            </ListItemIcon>
+            <ListItemText primary={text} />
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+      <List>
+        {['All mail', 'Trash', 'Spam'].map((text, index) => (
+          <ListItem button key={text}>
+            <ListItemIcon>
+              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+            </ListItemIcon>
+            <ListItemText primary={text} />
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+
+  return (
+    <div>
+      <RadioGroup
+        row
+        name="justifyContent"
+        aria-label="justifyContent"
+        value={discoveryAmount}
+        onChange={(event) => {
+          setDiscoveryAmount(parseInt((event.target as HTMLInputElement).value, 10));
+        }}
+      >
+        <FormControlLabel value={0} control={<Radio />} label="0px" />
+        <FormControlLabel value={20} control={<Radio />} label="20px" />
+        <FormControlLabel value={50} control={<Radio />} label="50px" />
+        <FormControlLabel value={100} control={<Radio />} label="100px" />
+      </RadioGroup>
+      {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
+        <React.Fragment key={anchor}>
+          <SwipeableDrawer
+            discoveryAmount={discoveryAmount}
+            anchor={anchor}
+            open={state[anchor]}
+            onClose={toggleDrawer(anchor, false)}
+            onOpen={toggleDrawer(anchor, true)}
+          >
+            {list(anchor)}
+          </SwipeableDrawer>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}

docs/src/pages/components/drawers/drawers-pt.md

@@ -43,6 +43,16 @@ const iOS =
 <SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />;
 ```
 
+### Drawer Discovery
+
+You can make the drawer appear slightly when the user touches the screen near where the drawer is located.
+
+The amount the drawer appears by can be configured using `discoveryAmount`, and it can be disabled using `disableDiscovery`.
+
+If you are on mobile, you can click near the edge of the screen to discover the drawers.
+
+{{"demo": "pages/components/drawers/SwipeableDiscoveryAmount.js"}}
+
 ### Borda deslizável
 
 Você pode configurar a propriedade `SwipeableDrawer` para visualizar uma borda quando o Drawer estiver fechado.

docs/src/pages/components/drawers/drawers-zh.md

@@ -43,6 +43,16 @@ const iOS =
 <SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />;
 ```
 
+### Drawer Discovery
+
+You can make the drawer appear slightly when the user touches the screen near where the drawer is located.
+
+The amount the drawer appears by can be configured using `discoveryAmount`, and it can be disabled using `disableDiscovery`.
+
+If you are on mobile, you can click near the edge of the screen to discover the drawers.
+
+{{"demo": "pages/components/drawers/SwipeableDiscoveryAmount.js"}}
+
 ### 保持挂载（mounted）
 
 你可以使用 `ModalProps` 属性来确保临时抽屉不会被卸载，就像这样：

docs/src/pages/components/drawers/drawers.md

@@ -49,6 +49,16 @@ const iOS =
 <SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />;
 ```
 
+### Drawer Discovery
+
+You can make the drawer appear slightly when the user touches the screen near where the drawer is located.
+
+The amount the drawer appears by can be configured using `discoveryAmount`, and it can be disabled using `disableDiscovery`.
+
+If you are on mobile, you can click near the edge of the screen to discover the drawers.
+
+{{"demo": "pages/components/drawers/SwipeableDiscoveryAmount.js"}}
+
 ### Swipeable edge
 
 You can configure the `SwipeableDrawer` to have a visible edge when closed.

docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json

@@ -5,6 +5,7 @@
     "disableBackdropTransition": "Disable the backdrop transition. This can improve the FPS on low-end devices.",
     "disableDiscovery": "If <code>true</code>, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture.",
     "disableSwipeToOpen": "If <code>true</code>, swipe to open is disabled. This is useful in browsers where swiping triggers navigation actions. Swipe to open is disabled on iOS browsers by default.",
+    "discoveryAmount": "The amount that the drawer adjusts on initial touch on the swipe area.",
     "hysteresis": "Affects how far the drawer must be opened/closed to change its state. Specified as percent (0-1) of the width of the drawer",
     "minFlingVelocity": "Defines, from which (average) velocity on, the swipe is defined as complete although hysteresis isn&#39;t reached. Good threshold is between 250 - 1000 px/s",
     "onClose": "Callback fired when the component requests to be closed.<br><br><strong>Signature:</strong><br><code>function(event: object) =&gt; void</code><br><em>event:</em> The event source of the callback.",

docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json

@@ -5,6 +5,7 @@
     "disableBackdropTransition": "Disable the backdrop transition. This can improve the FPS on low-end devices.",
     "disableDiscovery": "If <code>true</code>, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture.",
     "disableSwipeToOpen": "If <code>true</code>, swipe to open is disabled. This is useful in browsers where swiping triggers navigation actions. Swipe to open is disabled on iOS browsers by default.",
+    "discoveryAmount": "The amount that the drawer adjusts on initial touch on the swipe area.",
     "hysteresis": "Affects how far the drawer must be opened/closed to change its state. Specified as percent (0-1) of the width of the drawer",
     "minFlingVelocity": "Defines, from which (average) velocity on, the swipe is defined as complete although hysteresis isn&#39;t reached. Good threshold is between 250 - 1000 px/s",
     "onClose": "Callback fired when the component requests to be closed.<br><br><strong>Signature:</strong><br><code>function(event: object) =&gt; void</code><br><em>event:</em> The event source of the callback.",

docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json

@@ -5,6 +5,7 @@
     "disableBackdropTransition": "Disable the backdrop transition. This can improve the FPS on low-end devices.",
     "disableDiscovery": "If <code>true</code>, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture.",
     "disableSwipeToOpen": "If <code>true</code>, swipe to open is disabled. This is useful in browsers where swiping triggers navigation actions. Swipe to open is disabled on iOS browsers by default.",
+    "discoveryAmount": "The amount that the drawer adjusts on initial touch on the swipe area.",
     "hysteresis": "Affects how far the drawer must be opened/closed to change its state. Specified as percent (0-1) of the width of the drawer",
     "minFlingVelocity": "Defines, from which (average) velocity on, the swipe is defined as complete although hysteresis isn&#39;t reached. Good threshold is between 250 - 1000 px/s",
     "onClose": "Callback fired when the component requests to be closed.<br><br><strong>Signature:</strong><br><code>function(event: object) =&gt; void</code><br><em>event:</em> The event source of the callback.",

packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -20,6 +20,11 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
    * @default typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent)
    */
   disableSwipeToOpen?: boolean;
+  /**
+   * The amount that the drawer adjusts on initial touch on the swipe area.
+   * @default disableDiscovery ? 15 : 20
+   */
+  discoveryAmount?: number;
   /**
    * Affects how far the drawer must be opened/closed to change its state.
    * Specified as percent (0-1) of the width of the drawer

packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js

@@ -17,9 +17,6 @@ import SwipeArea from './SwipeArea';
 // trigger a native scroll.
 const UNCERTAINTY_THRESHOLD = 3; // px
 
-// This is the part of the drawer displayed on touch start.
-const DRAG_STARTED_SIGNAL = 20; // px
-
 // We can only have one instance at the time claiming ownership for handling the swipe.
 // Otherwise, the UX would be confusing.
 // That's why we use a singleton here.
@@ -141,6 +138,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
     disableBackdropTransition = false,
     disableDiscovery = false,
     disableSwipeToOpen = iOS,
+    discoveryAmount = disableDiscovery ? 15 : 20,
     hideBackdrop,
     hysteresis = 0.52,
     minFlingVelocity = 450,
@@ -365,9 +363,9 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
         // Compensate for the part of the drawer displayed on touch start.
         if (!disableDiscovery && !open) {
           if (horizontalSwipe) {
-            swipeInstance.current.startX -= DRAG_STARTED_SIGNAL;
+            swipeInstance.current.startX -= discoveryAmount;
           } else {
-            swipeInstance.current.startY -= DRAG_STARTED_SIGNAL;
+            swipeInstance.current.startY -= discoveryAmount;
           }
         }
       }
@@ -491,7 +489,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
       // The ref may be null when a parent component updates while swiping.
       setPosition(
         getMaxTranslate(horizontalSwipe, paperRef.current) +
-          (disableDiscovery ? 15 : -DRAG_STARTED_SIGNAL),
+          (disableDiscovery ? discoveryAmount : -discoveryAmount),
         {
           changeTransition: false,
         },
@@ -614,6 +612,11 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = {
    * @default typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent)
    */
   disableSwipeToOpen: PropTypes.bool,
+  /**
+   * The amount that the drawer adjusts on initial touch on the swipe area.
+   * @default disableDiscovery ? 15 : 20
+   */
+  discoveryAmount: PropTypes.number,
   /**
    * @ignore
    */