@zendeskgarden/react-modals 8.62.2 → 8.63.0

package/dist/index.cjs.js

@@ -143,7 +143,7 @@ const COMPONENT_ID$j = 'modals.backdrop';
 const animationName$1 = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 const StyledBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
@@ -159,7 +159,7 @@ StyledBackdrop.propTypes = {
 const COMPONENT_ID$i = 'modals.body';
 const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -181,7 +181,7 @@ const BASE_MULTIPLIERS$1 = {
 };
 const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -193,7 +193,7 @@ StyledClose.defaultProps = {
 const COMPONENT_ID$g = 'modals.footer';
 const StyledFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -205,7 +205,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$f = 'modals.footer_item';
 const StyledFooterItem = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -217,7 +217,7 @@ StyledFooterItem.defaultProps = {
 const COMPONENT_ID$e = 'modals.header';
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
@@ -227,9 +227,7 @@ StyledHeader.defaultProps = {
 };
 
 var _g, _circle;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
 var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -237,8 +235,7 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -285,7 +282,7 @@ const sizeStyles$1 = props => {
 };
 const StyledModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
@@ -301,7 +298,7 @@ StyledModal.defaultProps = {
 const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
 const StyledTooltipModalBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -384,7 +381,7 @@ StyledTooltipWrapper.defaultProps = {
 const COMPONENT_ID$b = 'modals.tooltip_modal';
 const StyledTooltipModal = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledTooltipModal",
@@ -413,7 +410,7 @@ const sizeStyles = props => `
 `;
 const StyledTooltipModalTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -425,7 +422,7 @@ StyledTooltipModalTitle.defaultProps = {
 const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
 const StyledTooltipModalBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -437,7 +434,7 @@ StyledTooltipModalBody.defaultProps = {
 const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
 const StyledTooltipModalFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -449,7 +446,7 @@ StyledTooltipModalFooter.defaultProps = {
 const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
 const StyledTooltipModalFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -461,7 +458,7 @@ StyledTooltipModalFooterItem.defaultProps = {
 const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
 const StyledTooltipModalClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -487,7 +484,7 @@ const boxShadow = props => {
 };
 const StyledDrawerModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModal",
   componentId: "sc-i1sake-0"
@@ -504,7 +501,7 @@ const BASE_MULTIPLIERS = {
 };
 const StyledDrawerModalClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalClose",
   componentId: "sc-hrnaom-0"
@@ -516,7 +513,7 @@ StyledDrawerModalClose.defaultProps = {
 const COMPONENT_ID$3 = 'modals.drawer_modal.header';
 const StyledDrawerModalHeader = styled__default.default(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalHeader",
   componentId: "sc-1u04rqw-0"
@@ -528,7 +525,7 @@ StyledDrawerModalHeader.defaultProps = {
 const COMPONENT_ID$2 = 'modals.drawer_modal.body';
 const StyledDrawerModalBody = styled__default.default(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalBody",
   componentId: "sc-yafe2y-0"
@@ -540,7 +537,7 @@ StyledDrawerModalBody.defaultProps = {
 const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
 const StyledDrawerModalFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalFooter",
   componentId: "sc-17if4ka-0"
@@ -552,7 +549,7 @@ StyledDrawerModalFooter.defaultProps = {
 const COMPONENT_ID = 'modals.drawer_modal.footer_item';
 const StyledDrawerModalFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalFooterItem",
   componentId: "sc-1vbl885-0"
@@ -722,9 +719,7 @@ const Body$2 = React.forwardRef((props, ref) => {
 Body$2.displayName = 'Body';
 
 var _path;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -732,8 +727,7 @@ var SvgXStroke = function SvgXStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -1023,6 +1017,19 @@ TooltipModal.Footer = Footer$1;
 TooltipModal.FooterItem = FooterItem$1;
 TooltipModal.Title = Title;
 
+function activeElement(doc) {
+  if (doc === void 0) {
+    doc = ownerDocument();
+  }
+  try {
+    var active = doc.activeElement;
+    if (!active || !active.nodeName) return null;
+    return active;
+  } catch (e) {
+    return doc.body;
+  }
+}
+
 const HeaderComponent = React.forwardRef((_ref, ref) => {
   let {
     tag,
@@ -1115,6 +1122,7 @@ const DrawerModalComponent = React.forwardRef((_ref, ref) => {
   } = _ref;
   const modalRef = React.useRef(null);
   const transitionRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
   const theme = React.useContext(styled.ThemeContext);
   const environment = reactTheming.useDocument(theme);
   const [isCloseButtonPresent, setIsCloseButtonPresent] = React.useState(false);
@@ -1132,11 +1140,31 @@ const DrawerModalComponent = React.forwardRef((_ref, ref) => {
   } = containerModal.useModal({
     idPrefix: id,
     modalRef,
-    focusOnMount,
-    restoreFocus,
+    focusOnMount: false ,
+    restoreFocus: false ,
     environment,
     onClose
   });
+  React.useEffect(() => {
+    if (environment) {
+      if (isOpen && modalRef.current) {
+        if (restoreFocus) {
+          triggerRef.current = activeElement(environment);
+        }
+        if (focusOnMount) {
+          modalRef.current.focus();
+        }
+      }
+      if (!isOpen && triggerRef.current) {
+        triggerRef.current.focus();
+      }
+    }
+    return () => {
+      if (!(restoreFocus && isOpen)) {
+        triggerRef.current = null;
+      }
+    };
+  }, [environment, restoreFocus, focusOnMount, isOpen]);
   React.useEffect(() => {
     if (!environment) {
       return undefined;
@@ -1211,6 +1239,10 @@ DrawerModalComponent.propTypes = {
   appendToNode: PropTypes__default.default.any,
   isOpen: PropTypes__default.default.bool
 };
+DrawerModalComponent.defaultProps = {
+  focusOnMount: true ,
+  restoreFocus: true
+};
 const DrawerModal = DrawerModalComponent;
 DrawerModal.Body = Body;
 DrawerModal.Close = Close;

package/dist/index.esm.js

@@ -116,7 +116,7 @@ const COMPONENT_ID$j = 'modals.backdrop';
 const animationName$1 = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 const StyledBackdrop = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
@@ -132,7 +132,7 @@ StyledBackdrop.propTypes = {
 const COMPONENT_ID$i = 'modals.body';
 const StyledBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -154,7 +154,7 @@ const BASE_MULTIPLIERS$1 = {
 };
 const StyledClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -166,7 +166,7 @@ StyledClose.defaultProps = {
 const COMPONENT_ID$g = 'modals.footer';
 const StyledFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -178,7 +178,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$f = 'modals.footer_item';
 const StyledFooterItem = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -190,7 +190,7 @@ StyledFooterItem.defaultProps = {
 const COMPONENT_ID$e = 'modals.header';
 const StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
@@ -200,9 +200,7 @@ StyledHeader.defaultProps = {
 };
 
 var _g, _circle;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
 var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -210,8 +208,7 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -258,7 +255,7 @@ const sizeStyles$1 = props => {
 };
 const StyledModal = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
@@ -274,7 +271,7 @@ StyledModal.defaultProps = {
 const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
 const StyledTooltipModalBackdrop = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -357,7 +354,7 @@ StyledTooltipWrapper.defaultProps = {
 const COMPONENT_ID$b = 'modals.tooltip_modal';
 const StyledTooltipModal = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledTooltipModal",
@@ -386,7 +383,7 @@ const sizeStyles = props => `
 `;
 const StyledTooltipModalTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -398,7 +395,7 @@ StyledTooltipModalTitle.defaultProps = {
 const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
 const StyledTooltipModalBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -410,7 +407,7 @@ StyledTooltipModalBody.defaultProps = {
 const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
 const StyledTooltipModalFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -422,7 +419,7 @@ StyledTooltipModalFooter.defaultProps = {
 const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
 const StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -434,7 +431,7 @@ StyledTooltipModalFooterItem.defaultProps = {
 const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
 const StyledTooltipModalClose = styled(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -460,7 +457,7 @@ const boxShadow = props => {
 };
 const StyledDrawerModal = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModal",
   componentId: "sc-i1sake-0"
@@ -477,7 +474,7 @@ const BASE_MULTIPLIERS = {
 };
 const StyledDrawerModalClose = styled(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalClose",
   componentId: "sc-hrnaom-0"
@@ -489,7 +486,7 @@ StyledDrawerModalClose.defaultProps = {
 const COMPONENT_ID$3 = 'modals.drawer_modal.header';
 const StyledDrawerModalHeader = styled(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalHeader",
   componentId: "sc-1u04rqw-0"
@@ -501,7 +498,7 @@ StyledDrawerModalHeader.defaultProps = {
 const COMPONENT_ID$2 = 'modals.drawer_modal.body';
 const StyledDrawerModalBody = styled(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalBody",
   componentId: "sc-yafe2y-0"
@@ -513,7 +510,7 @@ StyledDrawerModalBody.defaultProps = {
 const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
 const StyledDrawerModalFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalFooter",
   componentId: "sc-17if4ka-0"
@@ -525,7 +522,7 @@ StyledDrawerModalFooter.defaultProps = {
 const COMPONENT_ID = 'modals.drawer_modal.footer_item';
 const StyledDrawerModalFooterItem = styled(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalFooterItem",
   componentId: "sc-1vbl885-0"
@@ -695,9 +692,7 @@ const Body$2 = forwardRef((props, ref) => {
 Body$2.displayName = 'Body';
 
 var _path;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -705,8 +700,7 @@ var SvgXStroke = function SvgXStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -996,6 +990,19 @@ TooltipModal.Footer = Footer$1;
 TooltipModal.FooterItem = FooterItem$1;
 TooltipModal.Title = Title;
 
+function activeElement(doc) {
+  if (doc === void 0) {
+    doc = ownerDocument();
+  }
+  try {
+    var active = doc.activeElement;
+    if (!active || !active.nodeName) return null;
+    return active;
+  } catch (e) {
+    return doc.body;
+  }
+}
+
 const HeaderComponent = forwardRef((_ref, ref) => {
   let {
     tag,
@@ -1088,6 +1095,7 @@ const DrawerModalComponent = forwardRef((_ref, ref) => {
   } = _ref;
   const modalRef = useRef(null);
   const transitionRef = useRef(null);
+  const triggerRef = useRef(null);
   const theme = useContext(ThemeContext);
   const environment = useDocument(theme);
   const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
@@ -1105,11 +1113,31 @@ const DrawerModalComponent = forwardRef((_ref, ref) => {
   } = useModal({
     idPrefix: id,
     modalRef,
-    focusOnMount,
-    restoreFocus,
+    focusOnMount: false ,
+    restoreFocus: false ,
     environment,
     onClose
   });
+  useEffect(() => {
+    if (environment) {
+      if (isOpen && modalRef.current) {
+        if (restoreFocus) {
+          triggerRef.current = activeElement(environment);
+        }
+        if (focusOnMount) {
+          modalRef.current.focus();
+        }
+      }
+      if (!isOpen && triggerRef.current) {
+        triggerRef.current.focus();
+      }
+    }
+    return () => {
+      if (!(restoreFocus && isOpen)) {
+        triggerRef.current = null;
+      }
+    };
+  }, [environment, restoreFocus, focusOnMount, isOpen]);
   useEffect(() => {
     if (!environment) {
       return undefined;
@@ -1184,6 +1212,10 @@ DrawerModalComponent.propTypes = {
   appendToNode: PropTypes.any,
   isOpen: PropTypes.bool
 };
+DrawerModalComponent.defaultProps = {
+  focusOnMount: true ,
+  restoreFocus: true
+};
 const DrawerModal = DrawerModalComponent;
 DrawerModal.Body = Body;
 DrawerModal.Close = Close;

package/dist/typings/types/index.d.ts

@@ -7,7 +7,7 @@
 import { HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
 import { Modifier } from 'react-popper';
 export declare const PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "end", "end-top", "end-bottom", "start", "start-top", "start-bottom"];
-export declare type Placement = typeof PLACEMENT[number];
+export type Placement = (typeof PLACEMENT)[number];
 export interface IModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Passes HTML attributes to the backdrop element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-modals",
-  "version": "8.62.2",
+  "version": "8.63.0",
   "description": "Components relating to modals in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@types/react-transition-group": "4.4.5",
-    "@zendeskgarden/react-theming": "^8.62.2",
+    "@zendeskgarden/react-theming": "^8.63.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "27a7d6c021f3360396af60d51ecbf66e9076a405"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }