[SwipeableDrawer] Add appearOffset prop

docs/data/material/components/drawers/SwipeableAppearOffset.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 SwipeableAppearOffset() {
+  const [state, setState] = React.useState({
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+  });
+
+  const [appearOffset, setAppearOffset] = 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={appearOffset}
+        onChange={(event) => {
+          setAppearOffset(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
+            appearOffset={appearOffset}
+            anchor={anchor}
+            open={state[anchor]}
+            onClose={toggleDrawer(anchor, false)}
+            onOpen={toggleDrawer(anchor, true)}
+          >
+            {list(anchor)}
+          </SwipeableDrawer>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}

docs/data/material/components/drawers/SwipeableAppearOffset.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 SwipeableAppearOffset() {
+  const [state, setState] = React.useState({
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+  });
+  const [appearOffset, setAppearOffset] = 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={appearOffset}
+        onChange={(event) => {
+          setAppearOffset(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
+            appearOffset={appearOffset}
+            anchor={anchor}
+            open={state[anchor]}
+            onClose={toggleDrawer(anchor, false)}
+            onOpen={toggleDrawer(anchor, true)}
+          >
+            {list(anchor)}
+          </SwipeableDrawer>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}

docs/data/material/components/drawers/drawers.md

@@ -50,6 +50,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 `appearOffset`, and it can be disabled using `disableDiscovery`.
+
+Using a mobile device or mobile view, you can touch near the edge of the screen to discover the drawers.
+
+{{"demo": "SwipeableAppearOffset.js"}}
+
 ### Swipeable edge
 
 You can configure the `SwipeableDrawer` to have a visible edge when closed.

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

@@ -2,6 +2,7 @@
   "props": {
     "onClose": { "type": { "name": "func" }, "required": true },
     "onOpen": { "type": { "name": "func" }, "required": true },
+    "appearOffset": { "type": { "name": "number" }, "default": "disableDiscovery ? 15 : 20" },
     "children": { "type": { "name": "node" } },
     "disableBackdropTransition": { "type": { "name": "bool" } },
     "disableDiscovery": { "type": { "name": "bool" } },

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

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "appearOffset": "The amount that the drawer adjusts on initial touch on the swipe area.",
     "children": "O conteúdo do componente.",
     "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.",

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

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "appearOffset": "The amount that the drawer adjusts on initial touch on the swipe area.",
     "children": "The content of the component.",
     "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.",

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

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "appearOffset": "The amount that the drawer adjusts on initial touch on the swipe area.",
     "children": "The content of the component.",
     "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.",

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

@@ -2,6 +2,11 @@ import * as React from 'react';
 import { DrawerProps } from '../Drawer';
 
 export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open'> {
+  /**
+   * The amount that the drawer adjusts on initial touch on the swipe area.
+   * @default disableDiscovery ? 15 : 20
+   */
+  appearOffset?: number;
   /**
    * Disable the backdrop transition.
    * This can improve the FPS on low-end devices.

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

@@ -18,9 +18,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.
@@ -145,6 +142,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
     disableBackdropTransition = false,
     disableDiscovery = false,
     disableSwipeToOpen = iOS,
+    appearOffset = disableDiscovery ? 15 : 20,
     hideBackdrop,
     hysteresis = 0.52,
     minFlingVelocity = 450,
@@ -373,9 +371,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 -= appearOffset;
           } else {
-            swipeInstance.current.startY -= DRAG_STARTED_SIGNAL;
+            swipeInstance.current.startY -= appearOffset;
           }
         }
       }
@@ -502,7 +500,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 ? appearOffset : -appearOffset),
         {
           changeTransition: false,
         },
@@ -608,6 +606,11 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+  /**
+   * The amount that the drawer adjusts on initial touch on the swipe area.
+   * @default disableDiscovery ? 15 : 20
+   */
+  appearOffset: PropTypes.number,
   /**
    * The content of the component.
    */