@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/overlays/Toast.js

@@ -0,0 +1,126 @@
+const _excluded = ["text", "action", "onWillHide", "onDidHide", "bottomOffset", "variant", "accessibilityLabel"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle } from 'react';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { Button } from '../buttons';
+import { useA11y } from '../hooks/useA11y';
+import { useTheme } from '../hooks/useTheme';
+import { Box, HStack } from '../layout';
+import { ColorSurge } from '../motion/ColorSurge';
+import { Text } from '../typography/Text';
+import { useToastAnimation } from './useToastAnimation';
+import { useToastPanResponder } from './useToastPanResponder';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  var _action$testID;
+  let {
+      text,
+      action,
+      onWillHide,
+      onDidHide,
+      bottomOffset,
+      variant,
+      accessibilityLabel
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const [{
+    opacity,
+    bottom
+  }, animateIn, animateOut] = useToastAnimation();
+  const {
+    announceForA11y
+  } = useA11y();
+  const defaultA11yLabel = text + (action ? action.label : '');
+  useEffect(() => {
+    animateIn.start(_ref2 => {
+      let {
+        finished
+      } = _ref2;
+      if (finished) {
+        // announce toast copy and action label to screen reader
+        announceForA11y(accessibilityLabel != null ? accessibilityLabel : defaultA11yLabel);
+      }
+    });
+  }, [animateIn, text, action, accessibilityLabel, defaultA11yLabel, announceForA11y]);
+  const handleClose = useCallback(async () => {
+    onWillHide == null || onWillHide();
+    return new Promise(resolve => {
+      animateOut.start(_ref3 => {
+        let {
+          finished
+        } = _ref3;
+        if (finished) {
+          onDidHide == null || onDidHide();
+          resolve(finished);
+        }
+      });
+    });
+  }, [onWillHide, onDidHide, animateOut]);
+  const {
+    panHandlers,
+    panResponderAnimation
+  } = useToastPanResponder({
+    onWillHide,
+    onDidHide
+  });
+  useImperativeHandle(ref, () => ({
+    hide: handleClose
+  }), [handleClose]);
+  const handleActionPress = useCallback(() => {
+    action == null || action.onPress();
+    void handleClose();
+  }, [action, handleClose]);
+  return /*#__PURE__*/_jsx(Box, _extends({
+    alignSelf: "center",
+    bottom: bottomOffset != null ? bottomOffset : theme.space[2],
+    maxWidth: "100%",
+    padding: 2,
+    position: "absolute",
+    style: {
+      // display on android
+      elevation: zIndex.portal
+    },
+    zIndex: zIndex.portal
+  }, props, {
+    accessibilityRole: "alert",
+    children: /*#__PURE__*/_jsxs(HStack, _extends({
+      animated: true,
+      bordered: true,
+      alignItems: "center",
+      background: "bgAlternate",
+      borderRadius: 200,
+      elevation: 2,
+      overflow: "hidden",
+      paddingEnd: 1,
+      paddingStart: 3,
+      paddingY: 1,
+      style: {
+        opacity,
+        transform: [{
+          translateY: bottom
+        }, ...panResponderAnimation]
+      }
+    }, panHandlers, {
+      children: [/*#__PURE__*/_jsx(ColorSurge, {
+        background: variant
+      }), /*#__PURE__*/_jsx(Box, {
+        accessible: true,
+        flexShrink: 1,
+        paddingEnd: 2,
+        paddingY: 1,
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: text
+        })
+      }), !!action && /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        transparent: true,
+        onPress: handleActionPress,
+        testID: (_action$testID = action.testID) != null ? _action$testID : 'toast-action',
+        children: action.label
+      })]
+    }))
+  }));
+}));

package/esm/overlays/__figma__/Alert.figma.js

@@ -0,0 +1,32 @@
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { Alert } from '../Alert';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Alert, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=35-698&m=dev', {
+  imports: ["import { Alert } from '@coinbase/cds-mobile/overlays/Alert'"],
+  props: {
+    body: figma.string('body'),
+    title: figma.string('title'),
+    pictogram: figma.boolean('illustration', {
+      true: figma.instance('spotsquare'),
+      false: undefined
+    }),
+    dismissActionLabel: figma.enum('footer', {
+      'single action': '',
+      stacked: 'Button'
+    }),
+    preferredActionVariant: figma.enum('type', {
+      default: 'primary',
+      destructive: 'negative'
+    })
+  },
+  // @ts-expect-error pictogram mapping issue
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(Alert, _extends({}, props, {
+      preferredActionLabel: "Button"
+    }));
+  }
+});

package/esm/overlays/__figma__/Toast.figma.js

@@ -0,0 +1,51 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useCallback } from 'react';
+import { useToast } from '@coinbase/cds-mobile/overlays/useToast';
+import { figma } from '@figma/code-connect';
+import { Button } from '../../buttons';
+import { PortalProvider } from '../PortalProvider';
+import { Toast } from '../Toast';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Toast, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=8500%3A674', {
+  imports: ["import { useToast } from '@coinbase/cds-mobile/overlays/useToast';"],
+  props: {
+    hideCloseButton: figma.boolean('close', {
+      true: undefined,
+      false: true
+    }),
+    content: figma.nestedProps('string.toast', {
+      string: figma.enum('Ready-made', {
+        Custom: figma.string('string'),
+        Transaction: figma.textContent('toast-label'),
+        'Copied to clipboard': figma.textContent('toast-label'),
+        Reward: figma.textContent('toast-label')
+      })
+    }),
+    action: figma.boolean('action', {
+      true: {
+        label: 'Button',
+        onPress: () => {}
+      },
+      false: undefined
+    })
+  },
+  example: () => {
+    const toast = useToast();
+    const handleShowToast = useCallback(() => {
+      toast.show('Toast content', {
+        action: {
+          label: 'Action',
+          onPress: () => {}
+        },
+        onWillHide: () => {},
+        onDidHide: () => {}
+      });
+    }, [toast]);
+    return /*#__PURE__*/_jsx(PortalProvider, {
+      children: /*#__PURE__*/_jsx(Button, {
+        onPress: handleShowToast,
+        children: "Show Toast"
+      })
+    });
+  }
+});

package/esm/overlays/__stories__/AlertBasic.stories.js

@@ -0,0 +1,35 @@
+import { useCallback, useState } from 'react';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Alert } from '../Alert';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const BasicAlert = () => {
+  const [visible, setVisible] = useState(true);
+  const handleShow = useCallback(() => setVisible(true), []);
+  const handleClose = useCallback(() => setVisible(false), []);
+  const handleAction = useCallback(() => console.log('pressed'), []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: handleShow,
+      children: "Show Alert"
+    }), /*#__PURE__*/_jsx(Alert, {
+      body: "Alert body type that can run over multiple lines, but should be kept short.",
+      dismissActionLabel: "Cancel",
+      onPreferredActionPress: handleAction,
+      onRequestClose: handleClose,
+      pictogram: "warning",
+      preferredActionLabel: "Primary",
+      title: "Alert title",
+      visible: visible
+    })]
+  });
+};
+const AlertBasicScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Basic Alert",
+      children: /*#__PURE__*/_jsx(BasicAlert, {})
+    })
+  });
+};
+export default AlertBasicScreen;

package/esm/overlays/__stories__/AlertLongTitle.stories.js

@@ -0,0 +1,35 @@
+import React, { useCallback, useState } from 'react';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Alert } from '../Alert';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const LongTitleAlert = () => {
+  const [visible, setVisible] = useState(true);
+  const handleShow = useCallback(() => setVisible(true), []);
+  const handleClose = useCallback(() => setVisible(false), []);
+  const handleAction = useCallback(() => console.log('pressed'), []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: handleShow,
+      children: "Show Alert"
+    }), /*#__PURE__*/_jsx(Alert, {
+      body: "Alert body type that can run over multiple lines, but should be kept short.",
+      dismissActionLabel: "Cancel",
+      onPreferredActionPress: handleAction,
+      onRequestClose: handleClose,
+      pictogram: "warning",
+      preferredActionLabel: "Primary",
+      title: "Multiline title should be centered",
+      visible: visible
+    })]
+  });
+};
+const AlertLongTitleScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Long Title Alert",
+      children: /*#__PURE__*/_jsx(LongTitleAlert, {})
+    })
+  });
+};
+export default AlertLongTitleScreen;

package/esm/overlays/__stories__/AlertOverModal.stories.js

@@ -0,0 +1,72 @@
+import React, { useCallback, useEffect } from 'react';
+import { useAlert } from '@coinbase/cds-common/overlays/useAlert';
+import { useModal } from '@coinbase/cds-common/overlays/useModal';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Text } from '../../typography/Text';
+import { Alert } from '../Alert';
+import { Modal } from '../modal/Modal';
+import { ModalBody } from '../modal/ModalBody';
+import { ModalFooter } from '../modal/ModalFooter';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AlertOnModal = () => {
+  const {
+    openModal,
+    closeModal
+  } = useModal();
+  const {
+    open,
+    close
+  } = useAlert();
+  const showAlert = useCallback(() => open(/*#__PURE__*/_jsx(Alert, {
+    visible: true,
+    body: "Alert body type that can run over multiple lines, but should be kept short.",
+    onPreferredActionPress: close,
+    onRequestClose: close,
+    pictogram: "warning",
+    preferredActionLabel: "Primary",
+    title: "Alert title"
+  })), [open, close]);
+  const handlePress = useCallback(() => {
+    openModal(/*#__PURE__*/_jsxs(Modal, {
+      visible: true,
+      onRequestClose: closeModal,
+      children: [/*#__PURE__*/_jsx(ModalBody, {
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Test Modal"
+        })
+      }), /*#__PURE__*/_jsx(ModalFooter, {
+        primaryAction: /*#__PURE__*/_jsx(Button, {
+          onPress: showAlert,
+          children: "Show Alert"
+        }),
+        secondaryAction: /*#__PURE__*/_jsx(Button, {
+          onPress: closeModal,
+          children: "Cancel"
+        })
+      })]
+    }));
+  }, [closeModal, openModal, showAlert]);
+  useEffect(() => {
+    handlePress();
+    showAlert();
+    return () => {
+      close();
+      closeModal();
+    };
+  }, [close, closeModal, handlePress, showAlert]);
+  return /*#__PURE__*/_jsx(Button, {
+    onPress: handlePress,
+    children: "Open Modal"
+  });
+};
+const AlertOverModalScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Alert over Modal (Multiple Modals)",
+      children: /*#__PURE__*/_jsx(AlertOnModal, {})
+    })
+  });
+};
+export default AlertOverModalScreen;

package/esm/overlays/__stories__/AlertPortal.stories.js

@@ -0,0 +1,47 @@
+import React, { useCallback, useEffect } from 'react';
+import { useAlert } from '@coinbase/cds-common/overlays/useAlert';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Alert } from '../Alert';
+import { PortalProvider } from '../PortalProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const PortalAlert = () => {
+  return /*#__PURE__*/_jsx(PortalProvider, {
+    children: /*#__PURE__*/_jsx(AlertExample, {})
+  });
+};
+const AlertExample = () => {
+  const {
+    open,
+    close
+  } = useAlert();
+  const handleAction = useCallback(() => console.log('pressed'), []);
+  const showAlert = useCallback(() => open(/*#__PURE__*/_jsx(Alert, {
+    visible: true,
+    body: "Alert body type that can run over multiple lines, but should be kept short.",
+    dismissActionLabel: "Cancel",
+    onPreferredActionPress: handleAction,
+    onRequestClose: close,
+    pictogram: "warning",
+    preferredActionLabel: "Save",
+    preferredActionVariant: "negative",
+    title: "Alert title"
+  })), [open, close, handleAction]);
+  useEffect(() => {
+    showAlert();
+    return () => close();
+  }, [close, showAlert]);
+  return /*#__PURE__*/_jsx(Button, {
+    onPress: showAlert,
+    children: "Show Alert"
+  });
+};
+const AlertPortalScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Portal Alert",
+      children: /*#__PURE__*/_jsx(PortalAlert, {})
+    })
+  });
+};
+export default AlertPortalScreen;

package/esm/overlays/__stories__/AlertSingleAction.stories.js

@@ -0,0 +1,34 @@
+import React, { useCallback, useState } from 'react';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Alert } from '../Alert';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SingleActionAlert = () => {
+  const [visible, setVisible] = useState(true);
+  const handleShow = useCallback(() => setVisible(true), []);
+  const handleClose = useCallback(() => setVisible(false), []);
+  const handleAction = useCallback(() => console.log('pressed'), []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: handleShow,
+      children: "Show Alert"
+    }), /*#__PURE__*/_jsx(Alert, {
+      body: "Alert body type that can run over multiple lines, but should be kept short.",
+      onPreferredActionPress: handleAction,
+      onRequestClose: handleClose,
+      pictogram: "warning",
+      preferredActionLabel: "Primary",
+      title: "Alert title",
+      visible: visible
+    })]
+  });
+};
+const AlertSingleActionScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Single Action Alert",
+      children: /*#__PURE__*/_jsx(SingleActionAlert, {})
+    })
+  });
+};
+export default AlertSingleActionScreen;

package/esm/overlays/__stories__/AlertVerticalActions.stories.js

@@ -0,0 +1,36 @@
+import { useCallback, useState } from 'react';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Alert } from '../Alert';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const BasicAlert = () => {
+  const [visible, setVisible] = useState(true);
+  const handleShow = useCallback(() => setVisible(true), []);
+  const handleClose = useCallback(() => setVisible(false), []);
+  const handleAction = useCallback(() => console.log('pressed'), []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: handleShow,
+      children: "Show Alert"
+    }), /*#__PURE__*/_jsx(Alert, {
+      actionLayout: "vertical",
+      body: "Alert body type that can run over multiple lines, but should be kept short.",
+      dismissActionLabel: "Cancel",
+      onPreferredActionPress: handleAction,
+      onRequestClose: handleClose,
+      pictogram: "warning",
+      preferredActionLabel: "Primary",
+      title: "Alert title",
+      visible: visible
+    })]
+  });
+};
+const AlertBasicScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Basic Alert",
+      children: /*#__PURE__*/_jsx(BasicAlert, {})
+    })
+  });
+};
+export default AlertBasicScreen;

package/esm/overlays/__stories__/DrawerBottom.stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { DefaultDrawer } from './Drawers';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DrawerBottomScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Bottom Drawer",
+      children: /*#__PURE__*/_jsx(DefaultDrawer, {
+        pin: "bottom"
+      })
+    })
+  });
+};
+export default DrawerBottomScreen;

package/esm/overlays/__stories__/DrawerFallback.stories.js

@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Fallback, Spacer, VStack } from '../../layout';
+import { Drawer } from '../drawer/Drawer';
+import { navOptions, SideDrawerContent } from './Drawers';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const SidebarDrawerContentFallback = () => {
+  return /*#__PURE__*/_jsxs(VStack, {
+    height: "100%",
+    justifyContent: "space-between",
+    padding: 2,
+    paddingBottom: 4,
+    children: [/*#__PURE__*/_jsxs(VStack, {
+      alignItems: "center",
+      gap: 2,
+      children: [/*#__PURE__*/_jsx(Fallback, {
+        height: 50,
+        shape: "circle",
+        width: 50
+      }), /*#__PURE__*/_jsx(VStack, {
+        alignItems: "center",
+        padding: 2,
+        children: /*#__PURE__*/_jsx(Fallback, {
+          height: 30,
+          shape: "square",
+          width: 150
+        })
+      }), /*#__PURE__*/_jsx(Fallback, {
+        height: 50,
+        shape: "squircle",
+        width: "100%"
+      }), /*#__PURE__*/_jsx(Spacer, {}), navOptions.map(_ref => {
+        let {
+          label
+        } = _ref;
+        return /*#__PURE__*/_jsx(Fallback, {
+          height: 30,
+          shape: "square",
+          width: "100%"
+        }, label);
+      })]
+    }), /*#__PURE__*/_jsx(Fallback, {
+      height: 50,
+      shape: "squircle",
+      width: "100%"
+    })]
+  });
+};
+const SideDrawerWithFallback = _ref2 => {
+  let {
+    pin = 'left'
+  } = _ref2;
+  const [isVisible, setIsVisible] = useState(true);
+  const setIsVisibleToOn = useCallback(() => setIsVisible(true), []);
+  const setIsVisibleToOff = useCallback(() => setIsVisible(false), []);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    if (isVisible) {
+      setIsLoading(true);
+      setTimeout(() => setIsLoading(false), __DEV__ ? 2000 : 20000);
+    }
+  }, [isVisible]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsVisibleToOn,
+      children: "Open"
+    }), isVisible && /*#__PURE__*/_jsx(Drawer, {
+      onCloseComplete: setIsVisibleToOff,
+      pin: pin,
+      children: _ref3 => {
+        let {
+          handleClose
+        } = _ref3;
+        return isLoading ? /*#__PURE__*/_jsx(SidebarDrawerContentFallback, {}) : /*#__PURE__*/_jsx(SideDrawerContent, {
+          handleClose: handleClose
+        });
+      }
+    })]
+  });
+};
+const DrawerFallbackScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Side Drawer with Fallback",
+      children: /*#__PURE__*/_jsx(SideDrawerWithFallback, {
+        pin: "left"
+      })
+    })
+  });
+};
+export default DrawerFallbackScreen;

package/esm/overlays/__stories__/DrawerLeft.stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { SideDrawer } from './Drawers';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DrawerLeftScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Left Drawer",
+      children: /*#__PURE__*/_jsx(SideDrawer, {
+        pin: "left"
+      })
+    })
+  });
+};
+export default DrawerLeftScreen;

package/esm/overlays/__stories__/DrawerMisc.stories.js

@@ -0,0 +1,52 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useA11y } from '../../hooks/useA11y';
+import { Drawer } from '../drawer/Drawer';
+import { SideDrawerContent } from './Drawers';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SideDrawerWithA11y = _ref => {
+  let {
+    pin = 'left'
+  } = _ref;
+  const [isVisible, setIsVisible] = useState(false);
+  const setIsVisibleToOn = useCallback(() => setIsVisible(true), []);
+  const triggerRef = useRef(null);
+  const {
+    setA11yFocus
+  } = useA11y();
+  const handleCloseDrawer = useCallback(() => {
+    setIsVisible(false);
+    // return a11y focus to trigger
+    setA11yFocus(triggerRef);
+  }, [setA11yFocus]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      ref: triggerRef,
+      onPress: setIsVisibleToOn,
+      children: "Open"
+    }), isVisible && /*#__PURE__*/_jsx(Drawer, {
+      onCloseComplete: handleCloseDrawer,
+      pin: pin,
+      children: _ref2 => {
+        let {
+          handleClose
+        } = _ref2;
+        return /*#__PURE__*/_jsx(SideDrawerContent, {
+          handleClose: handleClose
+        });
+      }
+    })]
+  });
+};
+const DrawerMiscScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Drawer with A11y focus return",
+      children: /*#__PURE__*/_jsx(SideDrawerWithA11y, {
+        pin: "left"
+      })
+    })
+  });
+};
+export default DrawerMiscScreen;

package/esm/overlays/__stories__/DrawerRight.stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { SideDrawer } from './Drawers';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DrawerRightScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Right Drawer",
+      children: /*#__PURE__*/_jsx(SideDrawer, {
+        pin: "right"
+      })
+    })
+  });
+};
+export default DrawerRightScreen;