@zendeskgarden/react-modals 8.62.1 → 8.63.0

package/dist/index.cjs.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var ReactDOM = require('react-dom');
 var styled = require('styled-components');
@@ -20,7 +18,7 @@ var mergeRefs = require('react-merge-refs');
 var reactPopper = require('react-popper');
 var reactTransitionGroup = require('react-transition-group');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -36,16 +34,15 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 
 function _extends$2() {
   _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
@@ -144,9 +141,9 @@ function scrollbarSize(recalc) {
 
 const COMPONENT_ID$j = 'modals.backdrop';
 const animationName$1 = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
-const StyledBackdrop = styled__default["default"].div.attrs({
+const StyledBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
@@ -155,14 +152,14 @@ StyledBackdrop.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 StyledBackdrop.propTypes = {
-  isCentered: PropTypes__default["default"].bool,
-  isAnimated: PropTypes__default["default"].bool
+  isCentered: PropTypes__default.default.bool,
+  isAnimated: PropTypes__default.default.bool
 };
 
 const COMPONENT_ID$i = 'modals.body';
-const StyledBody = styled__default["default"].div.attrs({
+const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -182,9 +179,9 @@ const BASE_MULTIPLIERS$1 = {
   side: 6.5,
   size: 10
 };
-const StyledClose = styled__default["default"].button.attrs({
+const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -194,9 +191,9 @@ StyledClose.defaultProps = {
 };
 
 const COMPONENT_ID$g = 'modals.footer';
-const StyledFooter = styled__default["default"].div.attrs({
+const StyledFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -206,9 +203,9 @@ StyledFooter.defaultProps = {
 };
 
 const COMPONENT_ID$f = 'modals.footer_item';
-const StyledFooterItem = styled__default["default"].span.attrs({
+const StyledFooterItem = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -218,9 +215,9 @@ StyledFooterItem.defaultProps = {
 };
 
 const COMPONENT_ID$e = 'modals.header';
-const StyledHeader = styled__default["default"].div.attrs({
+const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
@@ -230,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",
@@ -240,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"
@@ -260,7 +254,7 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
   })));
 };
 
-const StyledDangerIcon = styled__default["default"](SvgAlertErrorStroke).withConfig({
+const StyledDangerIcon = styled__default.default(SvgAlertErrorStroke).withConfig({
   displayName: "StyledDangerIcon",
   componentId: "sc-1kwbb39-0"
 })(["position:absolute;top:", "px;", ":", ";"], props => props.theme.space.base * 5.5, props => props.theme.rtl ? 'right' : 'left', props => `${props.theme.space.base * 4}px`);
@@ -286,25 +280,25 @@ const boxShadow$1 = props => {
 const sizeStyles$1 = props => {
   return styled.css(["", "{width:", ";}"], reactTheming.mediaQuery('up', props.isLarge ? 'md' : 'sm', props.theme), props.isLarge ? props.theme.breakpoints.md : props.theme.breakpoints.sm);
 };
-const StyledModal = styled__default["default"].div.attrs({
+const StyledModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
 })(["display:flex;position:fixed;flex-direction:column;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);animation:", ";animation-delay:0.01s;overflow:auto;direction:", ";", " &:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => props.theme.colors.background, props => props.theme.space.base * 24, props => props.isAnimated && styled.css(["", " 0.3s ease-in-out"], animationName), props => props.theme.rtl && 'rtl', sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledModal.propTypes = {
-  isLarge: PropTypes__default["default"].bool,
-  isAnimated: PropTypes__default["default"].bool
+  isLarge: PropTypes__default.default.bool,
+  isAnimated: PropTypes__default.default.bool
 };
 StyledModal.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
-const StyledTooltipModalBackdrop = styled__default["default"].div.attrs({
+const StyledTooltipModalBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -368,7 +362,7 @@ function getMenuPosition(popperPlacement) {
   return popperPlacement ? popperPlacement.split('-')[0] : 'bottom';
 }
 
-const StyledTooltipWrapper = styled__default["default"].div.attrs(props => ({
+const StyledTooltipWrapper = styled__default.default.div.attrs(props => ({
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledTooltipWrapper",
@@ -385,9 +379,9 @@ StyledTooltipWrapper.defaultProps = {
 };
 
 const COMPONENT_ID$b = 'modals.tooltip_modal';
-const StyledTooltipModal = styled__default["default"].div.attrs(props => ({
+const StyledTooltipModal = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledTooltipModal",
@@ -414,9 +408,9 @@ const sizeStyles = props => `
   line-height: ${reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
   font-size: ${props.theme.fontSizes.md};
 `;
-const StyledTooltipModalTitle = styled__default["default"].div.attrs({
+const StyledTooltipModalTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -426,9 +420,9 @@ StyledTooltipModalTitle.defaultProps = {
 };
 
 const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
-const StyledTooltipModalBody = styled__default["default"].div.attrs({
+const StyledTooltipModalBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -438,9 +432,9 @@ StyledTooltipModalBody.defaultProps = {
 };
 
 const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
-const StyledTooltipModalFooter = styled__default["default"].div.attrs({
+const StyledTooltipModalFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -450,9 +444,9 @@ StyledTooltipModalFooter.defaultProps = {
 };
 
 const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
-const StyledTooltipModalFooterItem = styled__default["default"](StyledFooterItem).attrs({
+const StyledTooltipModalFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -462,9 +456,9 @@ StyledTooltipModalFooterItem.defaultProps = {
 };
 
 const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
-const StyledTooltipModalClose = styled__default["default"](StyledClose).attrs({
+const StyledTooltipModalClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -488,9 +482,9 @@ const boxShadow = props => {
   const color = reactTheming.getColor('neutralHue', 800, theme, 0.35);
   return shadows.lg(offsetY, blurRadius, color);
 };
-const StyledDrawerModal = styled__default["default"].div.attrs({
+const StyledDrawerModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModal",
   componentId: "sc-i1sake-0"
@@ -505,9 +499,9 @@ const BASE_MULTIPLIERS = {
   side: 2,
   size: BASE_MULTIPLIERS$1.size
 };
-const StyledDrawerModalClose = styled__default["default"](StyledClose).attrs({
+const StyledDrawerModalClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalClose",
   componentId: "sc-hrnaom-0"
@@ -517,9 +511,9 @@ StyledDrawerModalClose.defaultProps = {
 };
 
 const COMPONENT_ID$3 = 'modals.drawer_modal.header';
-const StyledDrawerModalHeader = styled__default["default"](StyledHeader).attrs({
+const StyledDrawerModalHeader = styled__default.default(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalHeader",
   componentId: "sc-1u04rqw-0"
@@ -529,9 +523,9 @@ StyledDrawerModalHeader.defaultProps = {
 };
 
 const COMPONENT_ID$2 = 'modals.drawer_modal.body';
-const StyledDrawerModalBody = styled__default["default"](StyledBody).attrs({
+const StyledDrawerModalBody = styled__default.default(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalBody",
   componentId: "sc-yafe2y-0"
@@ -541,9 +535,9 @@ StyledDrawerModalBody.defaultProps = {
 };
 
 const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
-const StyledDrawerModalFooter = styled__default["default"].div.attrs({
+const StyledDrawerModalFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalFooter",
   componentId: "sc-17if4ka-0"
@@ -553,9 +547,9 @@ StyledDrawerModalFooter.defaultProps = {
 };
 
 const COMPONENT_ID = 'modals.drawer_modal.footer_item';
-const StyledDrawerModalFooterItem = styled__default["default"](StyledFooterItem).attrs({
+const StyledDrawerModalFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalFooterItem",
   componentId: "sc-1vbl885-0"
@@ -603,6 +597,7 @@ const Modal = React.forwardRef((_ref, ref) => {
   const modalRef = React.useRef(null);
   const environment = reactTheming.useDocument(theme);
   const [isCloseButtonPresent, setIsCloseButtonPresent] = React.useState(false);
+  const [hasHeader, setHasHeader] = React.useState(false);
   const {
     getBackdropProps,
     getModalProps,
@@ -660,37 +655,53 @@ const Modal = React.forwardRef((_ref, ref) => {
   const value = React.useMemo(() => ({
     isLarge,
     isCloseButtonPresent,
+    hasHeader,
+    setHasHeader,
     getTitleProps,
     getContentProps,
     getCloseProps,
     setIsCloseButtonPresent
-  }), [isLarge, isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
+  }), [isLarge, hasHeader, isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
+  const modalContainerProps = getModalProps({
+    'aria-describedby': undefined,
+    ...(hasHeader ? {} : {
+      'aria-labelledby': undefined
+    })
+  });
+  const attribute = hasHeader ? 'aria-labelledby' : 'aria-label';
+  const defaultValue = hasHeader ? modalContainerProps['aria-labelledby'] : 'Modal dialog';
+  const labelValue = hasHeader ? modalContainerProps['aria-labelledby'] : modalProps['aria-label'];
+  const ariaProps = {
+    [attribute]: reactTheming.useText(Modal, {
+      [attribute]: labelValue
+    }, attribute, defaultValue)
+  };
   if (!rootNode) {
     return null;
   }
-  return ReactDOM.createPortal( React__default["default"].createElement(ModalsContext.Provider, {
+  return ReactDOM.createPortal( React__namespace.default.createElement(ModalsContext.Provider, {
     value: value
-  }, React__default["default"].createElement(StyledBackdrop, _extends$2({
+  }, React__namespace.default.createElement(StyledBackdrop, _extends$2({
     isCentered: isCentered,
     isAnimated: isAnimated
-  }, getBackdropProps(backdropProps)), React__default["default"].createElement(StyledModal, _extends$2({
+  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledModal, _extends$2({
     isCentered: isCentered,
     isAnimated: isAnimated,
     isLarge: isLarge
-  }, getModalProps(), modalProps, {
-    ref: mergeRefs__default["default"]([ref, modalRef])
+  }, modalContainerProps, ariaProps, modalProps, {
+    ref: mergeRefs__default.default([ref, modalRef])
   }), children))), rootNode);
 });
 Modal.displayName = 'Modal';
 Modal.propTypes = {
-  backdropProps: PropTypes__default["default"].object,
-  isLarge: PropTypes__default["default"].bool,
-  isAnimated: PropTypes__default["default"].bool,
-  isCentered: PropTypes__default["default"].bool,
-  focusOnMount: PropTypes__default["default"].bool,
-  restoreFocus: PropTypes__default["default"].bool,
-  onClose: PropTypes__default["default"].func,
-  appendToNode: PropTypes__default["default"].any
+  backdropProps: PropTypes__default.default.object,
+  isLarge: PropTypes__default.default.bool,
+  isAnimated: PropTypes__default.default.bool,
+  isCentered: PropTypes__default.default.bool,
+  focusOnMount: PropTypes__default.default.bool,
+  restoreFocus: PropTypes__default.default.bool,
+  onClose: PropTypes__default.default.func,
+  appendToNode: PropTypes__default.default.any
 };
 Modal.defaultProps = {
   isAnimated: true,
@@ -701,16 +712,14 @@ const Body$2 = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useModalContext();
-  return React__default["default"].createElement(StyledBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledBody, _extends$2({}, getContentProps(props), {
     ref: 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",
@@ -718,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",
@@ -737,27 +745,27 @@ const Close$2 = React.forwardRef((props, ref) => {
     return () => setIsCloseButtonPresent(false);
   });
   const ariaLabel = reactTheming.useText(Close$2, props, 'aria-label', 'Close modal');
-  return React__default["default"].createElement(StyledClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledClose, _extends$2({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
     ref: ref
-  }), React__default["default"].createElement(SvgXStroke, null));
+  }), React__namespace.default.createElement(SvgXStroke, null));
 });
 Close$2.displayName = 'Close';
 
-const Footer$2 = React__default["default"].forwardRef((props, ref) => {
+const Footer$2 = React__namespace.default.forwardRef((props, ref) => {
   const {
     isLarge
   } = useModalContext();
-  return React__default["default"].createElement(StyledFooter, _extends$2({
+  return React__namespace.default.createElement(StyledFooter, _extends$2({
     ref: ref,
     isLarge: isLarge
   }, props));
 });
 Footer$2.displayName = 'Footer';
 
-const FooterItem$2 = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(StyledFooterItem, _extends$2({
+const FooterItem$2 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, _extends$2({
   ref: ref
 }, props)));
 FooterItem$2.displayName = 'FooterItem';
@@ -770,18 +778,30 @@ const Header$1 = React.forwardRef((_ref, ref) => {
   } = _ref;
   const {
     isCloseButtonPresent,
+    hasHeader,
+    setHasHeader,
     getTitleProps
   } = useModalContext();
-  return React__default["default"].createElement(StyledHeader, _extends$2({}, getTitleProps(other), {
+  React.useEffect(() => {
+    if (!hasHeader && setHasHeader) {
+      setHasHeader(true);
+    }
+    return () => {
+      if (hasHeader && setHasHeader) {
+        setHasHeader(false);
+      }
+    };
+  }, [hasHeader, setHasHeader]);
+  return React__namespace.default.createElement(StyledHeader, _extends$2({}, getTitleProps(other), {
     as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
-  }), other.isDanger && React__default["default"].createElement(StyledDangerIcon, null), children);
+  }), other.isDanger && React__namespace.default.createElement(StyledDangerIcon, null), children);
 });
 Header$1.displayName = 'Header';
 Header$1.propTypes = {
-  isDanger: PropTypes__default["default"].bool,
-  tag: PropTypes__default["default"].any
+  isDanger: PropTypes__default.default.bool,
+  tag: PropTypes__default.default.any
 };
 Header$1.defaultProps = {
   tag: 'div'
@@ -817,14 +837,14 @@ const TitleComponent = React.forwardRef((_ref, ref) => {
       }
     };
   }, [hasTitle, setHasTitle]);
-  return React__default["default"].createElement(StyledTooltipModalTitle, _extends$2({}, getTitleProps(other), {
+  return React__namespace.default.createElement(StyledTooltipModalTitle, _extends$2({}, getTitleProps(other), {
     as: tag,
     ref: ref
   }), children);
 });
 TitleComponent.displayName = 'TooltipModal.Title';
 TitleComponent.propTypes = {
-  tag: PropTypes__default["default"].any
+  tag: PropTypes__default.default.any
 };
 TitleComponent.defaultProps = {
   tag: 'div'
@@ -835,7 +855,7 @@ const BodyComponent$1 = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useTooltipModalContext();
-  return React__default["default"].createElement(StyledTooltipModalBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledTooltipModalBody, _extends$2({}, getContentProps(props), {
     ref: ref
   }));
 });
@@ -847,29 +867,29 @@ const CloseComponent$1 = React.forwardRef((props, ref) => {
     getCloseProps
   } = useTooltipModalContext();
   const ariaLabel = reactTheming.useText(CloseComponent$1, props, 'aria-label', 'Close tooltip');
-  return React__default["default"].createElement(StyledTooltipModalClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledTooltipModalClose, _extends$2({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
     ref: ref
-  }), React__default["default"].createElement(SvgXStroke, null));
+  }), React__namespace.default.createElement(SvgXStroke, null));
 });
 CloseComponent$1.displayName = 'TooltipModal.Close';
 const Close$1 = CloseComponent$1;
 
-const FooterComponent$1 = React.forwardRef((props, ref) => React__default["default"].createElement(StyledTooltipModalFooter, _extends$2({
+const FooterComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooter, _extends$2({
   ref: ref
 }, props)));
 FooterComponent$1.displayName = 'TooltipModal.Footer';
 const Footer$1 = FooterComponent$1;
 
-const FooterItemComponent$1 = React.forwardRef((props, ref) => React__default["default"].createElement(StyledTooltipModalFooterItem, _extends$2({
+const FooterItemComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooterItem, _extends$2({
   ref: ref
 }, props)));
 FooterItemComponent$1.displayName = 'TooltipModal.FooterItem';
 const FooterItem$1 = FooterItemComponent$1;
 
-const TooltipModalComponent = React__default["default"].forwardRef((_ref, ref) => {
+const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     referenceElement,
     popperModifiers,
@@ -930,7 +950,7 @@ const TooltipModalComponent = React__default["default"].forwardRef((_ref, ref) =
     })
   });
   const attribute = hasTitle ? 'aria-labelledby' : 'aria-label';
-  const defaultValue = hasTitle ? props['aria-labelledby'] : 'Modal dialog';
+  const defaultValue = hasTitle ? modalProps['aria-labelledby'] : 'Modal dialog';
   const labelValue = hasTitle ? modalProps['aria-labelledby'] : props['aria-label'];
   const ariaProps = {
     [attribute]: reactTheming.useText(TooltipModalComponent, {
@@ -944,52 +964,51 @@ const TooltipModalComponent = React__default["default"].forwardRef((_ref, ref) =
     getContentProps,
     getCloseProps
   };
-  return React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
+  return React__namespace.default.createElement(reactTransitionGroup.CSSTransition, {
     unmountOnExit: true,
     timeout: isAnimated ? 200 : 0,
     in: Boolean(referenceElement),
     classNames: isAnimated ? 'garden-tooltip-modal-transition' : '',
     nodeRef: transitionRef
   }, transitionState => {
-    return React__default["default"].createElement(TooltipModalContext.Provider, {
+    return React__namespace.default.createElement(TooltipModalContext.Provider, {
       value: value
-    }, React__default["default"].createElement(StyledTooltipModalBackdrop, _extends$2({}, getBackdropProps(), backdropProps, {
+    }, React__namespace.default.createElement(StyledTooltipModalBackdrop, _extends$2({}, getBackdropProps(), backdropProps, {
       ref: transitionRef
-    }), React__default["default"].createElement(StyledTooltipWrapper, _extends$2({
+    }), React__namespace.default.createElement(StyledTooltipWrapper, _extends$2({
       ref: setPopperElement,
       style: styles.popper,
       placement: state ? state.placement : undefined,
       zIndex: zIndex,
       isAnimated: isAnimated
-    }, attributes.popper), React__default["default"].createElement(StyledTooltipModal, _extends$2({
+    }, attributes.popper), React__namespace.default.createElement(StyledTooltipModal, _extends$2({
       transitionState: transitionState,
       placement: state ? state.placement : 'top',
       hasArrow: hasArrow,
       isAnimated: isAnimated
     }, modalProps, ariaProps, props, {
-      ref: mergeRefs__default["default"]([modalRef, ref])
+      ref: mergeRefs__default.default([modalRef, ref])
     })))));
   });
 });
 TooltipModalComponent.displayName = 'TooltipModal';
 TooltipModalComponent.defaultProps = {
   placement: 'auto',
-  isAnimated: true,
   hasArrow: true,
   focusOnMount: true,
   restoreFocus: true
 };
 TooltipModalComponent.propTypes = {
-  referenceElement: PropTypes__default["default"].any,
-  popperModifiers: PropTypes__default["default"].any,
-  placement: PropTypes__default["default"].any,
-  isAnimated: PropTypes__default["default"].bool,
-  hasArrow: PropTypes__default["default"].bool,
-  zIndex: PropTypes__default["default"].number,
-  onClose: PropTypes__default["default"].func,
-  backdropProps: PropTypes__default["default"].any,
-  focusOnMount: PropTypes__default["default"].bool,
-  restoreFocus: PropTypes__default["default"].bool
+  referenceElement: PropTypes__default.default.any,
+  popperModifiers: PropTypes__default.default.any,
+  placement: PropTypes__default.default.any,
+  isAnimated: PropTypes__default.default.bool,
+  hasArrow: PropTypes__default.default.bool,
+  zIndex: PropTypes__default.default.number,
+  onClose: PropTypes__default.default.func,
+  backdropProps: PropTypes__default.default.any,
+  focusOnMount: PropTypes__default.default.bool,
+  restoreFocus: PropTypes__default.default.bool
 };
 const TooltipModal = TooltipModalComponent;
 TooltipModal.Body = Body$1;
@@ -998,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,
@@ -1005,9 +1037,21 @@ const HeaderComponent = React.forwardRef((_ref, ref) => {
   } = _ref;
   const {
     isCloseButtonPresent,
+    hasHeader,
+    setHasHeader,
     getTitleProps
   } = useModalContext();
-  return React__default["default"].createElement(StyledDrawerModalHeader, _extends$2({}, getTitleProps(other), {
+  React.useEffect(() => {
+    if (!hasHeader && setHasHeader) {
+      setHasHeader(true);
+    }
+    return () => {
+      if (hasHeader && setHasHeader) {
+        setHasHeader(false);
+      }
+    };
+  }, [hasHeader, setHasHeader]);
+  return React__namespace.default.createElement(StyledDrawerModalHeader, _extends$2({}, getTitleProps(other), {
     as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
@@ -1015,7 +1059,7 @@ const HeaderComponent = React.forwardRef((_ref, ref) => {
 });
 HeaderComponent.displayName = 'DrawerModal.Header';
 HeaderComponent.propTypes = {
-  tag: PropTypes__default["default"].any
+  tag: PropTypes__default.default.any
 };
 HeaderComponent.defaultProps = {
   tag: 'div'
@@ -1026,7 +1070,7 @@ const BodyComponent = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useModalContext();
-  return React__default["default"].createElement(StyledDrawerModalBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledDrawerModalBody, _extends$2({}, getContentProps(props), {
     ref: ref
   }), props.children);
 });
@@ -1043,23 +1087,23 @@ const CloseComponent = React.forwardRef((props, ref) => {
     return () => setIsCloseButtonPresent(false);
   });
   const ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Close drawer');
-  return React__default["default"].createElement(StyledDrawerModalClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledDrawerModalClose, _extends$2({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
     ref: ref
-  }), React__default["default"].createElement(SvgXStroke, null));
+  }), React__namespace.default.createElement(SvgXStroke, null));
 });
 CloseComponent.displayName = 'DrawerModal.Close';
 const Close = CloseComponent;
 
-const FooterComponent = React.forwardRef((props, ref) => React__default["default"].createElement(StyledDrawerModalFooter, _extends$2({
+const FooterComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerModalFooter, _extends$2({
   ref: ref
 }, props)));
 FooterComponent.displayName = 'DrawerModal.Footer';
 const Footer = FooterComponent;
 
-const FooterItemComponent = React.forwardRef((props, ref) => React__default["default"].createElement(StyledDrawerModalFooterItem, _extends$2({
+const FooterItemComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerModalFooterItem, _extends$2({
   ref: ref
 }, props)));
 FooterItemComponent.displayName = 'DrawerModal.FooterItem';
@@ -1078,9 +1122,11 @@ 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);
+  const [hasHeader, setHasHeader] = React.useState(false);
   containerFocusvisible.useFocusVisible({
     scope: modalRef,
     relativeDocument: modalRef.current
@@ -1094,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;
@@ -1126,36 +1192,56 @@ const DrawerModalComponent = React.forwardRef((_ref, ref) => {
   }, [appendToNode, environment]);
   const value = React.useMemo(() => ({
     isCloseButtonPresent,
+    hasHeader,
+    setHasHeader,
     getTitleProps,
     getContentProps,
     getCloseProps,
     setIsCloseButtonPresent
-  }), [isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
+  }), [isCloseButtonPresent, hasHeader, getTitleProps, getContentProps, getCloseProps]);
+  const modalProps = getModalProps({
+    'aria-describedby': undefined,
+    ...(hasHeader ? {} : {
+      'aria-labelledby': undefined
+    })
+  });
+  const attribute = hasHeader ? 'aria-labelledby' : 'aria-label';
+  const defaultValue = hasHeader ? modalProps['aria-labelledby'] : 'Modal dialog';
+  const labelValue = hasHeader ? modalProps['aria-labelledby'] : props['aria-label'];
+  const ariaProps = {
+    [attribute]: reactTheming.useText(DrawerModalComponent, {
+      [attribute]: labelValue
+    }, attribute, defaultValue)
+  };
   if (!rootNode) {
     return null;
   }
-  return ReactDOM__default["default"].createPortal( React__default["default"].createElement(ModalsContext.Provider, {
+  return ReactDOM__default.default.createPortal( React__namespace.default.createElement(ModalsContext.Provider, {
     value: value
-  }, React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
+  }, React__namespace.default.createElement(reactTransitionGroup.CSSTransition, {
     in: isOpen,
     timeout: 250,
     unmountOnExit: true,
     classNames: "garden-drawer-transition",
     nodeRef: transitionRef
-  }, React__default["default"].createElement(StyledBackdrop, _extends$2({
+  }, React__namespace.default.createElement(StyledBackdrop, _extends$2({
     isAnimated: true
-  }, getBackdropProps(backdropProps)), React__default["default"].createElement(StyledDrawerModal, _extends$2({}, getModalProps(), props, {
-    ref: mergeRefs__default["default"]([ref, modalRef, transitionRef])
+  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledDrawerModal, _extends$2({}, modalProps, ariaProps, props, {
+    ref: mergeRefs__default.default([ref, modalRef, transitionRef])
   }))))), rootNode);
 });
 DrawerModalComponent.displayName = 'DrawerModal';
 DrawerModalComponent.propTypes = {
-  backdropProps: PropTypes__default["default"].object,
-  focusOnMount: PropTypes__default["default"].bool,
-  restoreFocus: PropTypes__default["default"].bool,
-  onClose: PropTypes__default["default"].func,
-  appendToNode: PropTypes__default["default"].any,
-  isOpen: PropTypes__default["default"].bool
+  backdropProps: PropTypes__default.default.object,
+  focusOnMount: PropTypes__default.default.bool,
+  restoreFocus: PropTypes__default.default.bool,
+  onClose: PropTypes__default.default.func,
+  appendToNode: PropTypes__default.default.any,
+  isOpen: PropTypes__default.default.bool
+};
+DrawerModalComponent.defaultProps = {
+  focusOnMount: true ,
+  restoreFocus: true
 };
 const DrawerModal = DrawerModalComponent;
 DrawerModal.Body = Body;

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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1',
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  '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.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDrawerModalFooterItem",
   componentId: "sc-1vbl885-0"
@@ -573,6 +570,7 @@ const Modal = forwardRef((_ref, ref) => {
   const modalRef = useRef(null);
   const environment = useDocument(theme);
   const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
+  const [hasHeader, setHasHeader] = useState(false);
   const {
     getBackdropProps,
     getModalProps,
@@ -630,11 +628,27 @@ const Modal = forwardRef((_ref, ref) => {
   const value = useMemo(() => ({
     isLarge,
     isCloseButtonPresent,
+    hasHeader,
+    setHasHeader,
     getTitleProps,
     getContentProps,
     getCloseProps,
     setIsCloseButtonPresent
-  }), [isLarge, isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
+  }), [isLarge, hasHeader, isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
+  const modalContainerProps = getModalProps({
+    'aria-describedby': undefined,
+    ...(hasHeader ? {} : {
+      'aria-labelledby': undefined
+    })
+  });
+  const attribute = hasHeader ? 'aria-labelledby' : 'aria-label';
+  const defaultValue = hasHeader ? modalContainerProps['aria-labelledby'] : 'Modal dialog';
+  const labelValue = hasHeader ? modalContainerProps['aria-labelledby'] : modalProps['aria-label'];
+  const ariaProps = {
+    [attribute]: useText(Modal, {
+      [attribute]: labelValue
+    }, attribute, defaultValue)
+  };
   if (!rootNode) {
     return null;
   }
@@ -647,7 +661,7 @@ const Modal = forwardRef((_ref, ref) => {
     isCentered: isCentered,
     isAnimated: isAnimated,
     isLarge: isLarge
-  }, getModalProps(), modalProps, {
+  }, modalContainerProps, ariaProps, modalProps, {
     ref: mergeRefs([ref, modalRef])
   }), children))), rootNode);
 });
@@ -678,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",
@@ -688,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",
@@ -740,8 +751,20 @@ const Header$1 = forwardRef((_ref, ref) => {
   } = _ref;
   const {
     isCloseButtonPresent,
+    hasHeader,
+    setHasHeader,
     getTitleProps
   } = useModalContext();
+  useEffect(() => {
+    if (!hasHeader && setHasHeader) {
+      setHasHeader(true);
+    }
+    return () => {
+      if (hasHeader && setHasHeader) {
+        setHasHeader(false);
+      }
+    };
+  }, [hasHeader, setHasHeader]);
   return React__default.createElement(StyledHeader, _extends$2({}, getTitleProps(other), {
     as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
@@ -900,7 +923,7 @@ const TooltipModalComponent = React__default.forwardRef((_ref, ref) => {
     })
   });
   const attribute = hasTitle ? 'aria-labelledby' : 'aria-label';
-  const defaultValue = hasTitle ? props['aria-labelledby'] : 'Modal dialog';
+  const defaultValue = hasTitle ? modalProps['aria-labelledby'] : 'Modal dialog';
   const labelValue = hasTitle ? modalProps['aria-labelledby'] : props['aria-label'];
   const ariaProps = {
     [attribute]: useText(TooltipModalComponent, {
@@ -944,7 +967,6 @@ const TooltipModalComponent = React__default.forwardRef((_ref, ref) => {
 TooltipModalComponent.displayName = 'TooltipModal';
 TooltipModalComponent.defaultProps = {
   placement: 'auto',
-  isAnimated: true,
   hasArrow: true,
   focusOnMount: true,
   restoreFocus: true
@@ -968,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,
@@ -975,8 +1010,20 @@ const HeaderComponent = forwardRef((_ref, ref) => {
   } = _ref;
   const {
     isCloseButtonPresent,
+    hasHeader,
+    setHasHeader,
     getTitleProps
   } = useModalContext();
+  useEffect(() => {
+    if (!hasHeader && setHasHeader) {
+      setHasHeader(true);
+    }
+    return () => {
+      if (hasHeader && setHasHeader) {
+        setHasHeader(false);
+      }
+    };
+  }, [hasHeader, setHasHeader]);
   return React__default.createElement(StyledDrawerModalHeader, _extends$2({}, getTitleProps(other), {
     as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
@@ -1048,9 +1095,11 @@ 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);
+  const [hasHeader, setHasHeader] = useState(false);
   useFocusVisible({
     scope: modalRef,
     relativeDocument: modalRef.current
@@ -1064,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;
@@ -1096,11 +1165,27 @@ const DrawerModalComponent = forwardRef((_ref, ref) => {
   }, [appendToNode, environment]);
   const value = useMemo(() => ({
     isCloseButtonPresent,
+    hasHeader,
+    setHasHeader,
     getTitleProps,
     getContentProps,
     getCloseProps,
     setIsCloseButtonPresent
-  }), [isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
+  }), [isCloseButtonPresent, hasHeader, getTitleProps, getContentProps, getCloseProps]);
+  const modalProps = getModalProps({
+    'aria-describedby': undefined,
+    ...(hasHeader ? {} : {
+      'aria-labelledby': undefined
+    })
+  });
+  const attribute = hasHeader ? 'aria-labelledby' : 'aria-label';
+  const defaultValue = hasHeader ? modalProps['aria-labelledby'] : 'Modal dialog';
+  const labelValue = hasHeader ? modalProps['aria-labelledby'] : props['aria-label'];
+  const ariaProps = {
+    [attribute]: useText(DrawerModalComponent, {
+      [attribute]: labelValue
+    }, attribute, defaultValue)
+  };
   if (!rootNode) {
     return null;
   }
@@ -1114,7 +1199,7 @@ const DrawerModalComponent = forwardRef((_ref, ref) => {
     nodeRef: transitionRef
   }, React__default.createElement(StyledBackdrop, _extends$2({
     isAnimated: true
-  }, getBackdropProps(backdropProps)), React__default.createElement(StyledDrawerModal, _extends$2({}, getModalProps(), props, {
+  }, getBackdropProps(backdropProps)), React__default.createElement(StyledDrawerModal, _extends$2({}, modalProps, ariaProps, props, {
     ref: mergeRefs([ref, modalRef, transitionRef])
   }))))), rootNode);
 });
@@ -1127,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/dist/typings/utils/useModalContext.d.ts

@@ -8,6 +8,8 @@ import { IUseModalReturnValue } from '@zendeskgarden/container-modal';
 export interface IModalContext {
     isLarge?: boolean;
     isCloseButtonPresent?: boolean;
+    hasHeader: boolean;
+    setHasHeader: (hasHeader: boolean) => void;
     getTitleProps: IUseModalReturnValue['getTitleProps'];
     getContentProps: IUseModalReturnValue['getContentProps'];
     getCloseProps: IUseModalReturnValue['getCloseProps'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-modals",
-  "version": "8.62.1",
+  "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.1",
+    "@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": "e84b3603c69975dc0ef30029364da15fc1e4fc03"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }