@zendeskgarden/react-modals 8.53.1 → 8.53.2

package/dist/index.cjs.js

@@ -301,7 +301,7 @@ var COMPONENT_ID$j = 'modals.backdrop';
 var animationName$1 = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 var StyledBackdrop = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
@@ -331,7 +331,7 @@ StyledBackdrop.propTypes = {
 var COMPONENT_ID$i = 'modals.body';
 var StyledBody = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -363,7 +363,7 @@ var BASE_MULTIPLIERS$1 = {
 };
 var StyledClose = styled__default["default"].button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -389,7 +389,7 @@ StyledClose.defaultProps = {
 var COMPONENT_ID$g = 'modals.footer';
 var StyledFooter = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -407,7 +407,7 @@ StyledFooter.defaultProps = {
 var COMPONENT_ID$f = 'modals.footer_item';
 var StyledFooterItem = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -427,7 +427,7 @@ StyledFooterItem.defaultProps = {
 var COMPONENT_ID$e = 'modals.header';
 var StyledHeader = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
@@ -514,7 +514,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledModal = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
@@ -554,7 +554,7 @@ StyledModal.defaultProps = {
 var COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
 var StyledTooltipModalBackdrop = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -648,7 +648,7 @@ var COMPONENT_ID$b = 'modals.tooltip_modal';
 var StyledTooltipModal = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$b,
-    'data-garden-version': '8.53.1',
+    'data-garden-version': '8.53.2',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -679,7 +679,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTooltipModalTitle = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -699,7 +699,7 @@ StyledTooltipModalTitle.defaultProps = {
 var COMPONENT_ID$9 = 'modals.tooltip_modal.body';
 var StyledTooltipModalBody = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -721,7 +721,7 @@ StyledTooltipModalBody.defaultProps = {
 var COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
 var StyledTooltipModalFooter = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -737,7 +737,7 @@ StyledTooltipModalFooter.defaultProps = {
 var COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
 var StyledTooltipModalFooterItem = styled__default["default"](StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -751,7 +751,7 @@ StyledTooltipModalFooterItem.defaultProps = {
 var COMPONENT_ID$6 = 'modals.tooltip_modal.close';
 var StyledTooltipModalClose = styled__default["default"](StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -785,7 +785,7 @@ var boxShadow = function boxShadow(props) {
 };
 var StyledDrawerModal = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledDrawerModal",
   componentId: "sc-i1sake-0"
@@ -816,7 +816,7 @@ var BASE_MULTIPLIERS = {
 };
 var StyledDrawerModalClose = styled__default["default"](StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledDrawerModalClose",
   componentId: "sc-hrnaom-0"
@@ -834,7 +834,7 @@ StyledDrawerModalClose.defaultProps = {
 var COMPONENT_ID$3 = 'modals.drawer_modal.header';
 var StyledDrawerModalHeader = styled__default["default"](StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledDrawerModalHeader",
   componentId: "sc-1u04rqw-0"
@@ -852,7 +852,7 @@ StyledDrawerModalHeader.defaultProps = {
 var COMPONENT_ID$2 = 'modals.drawer_modal.body';
 var StyledDrawerModalBody = styled__default["default"](StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledDrawerModalBody",
   componentId: "sc-yafe2y-0"
@@ -868,7 +868,7 @@ StyledDrawerModalBody.defaultProps = {
 var COMPONENT_ID$1 = 'modals.drawer_modal.footer';
 var StyledDrawerModalFooter = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledDrawerModalFooter",
   componentId: "sc-17if4ka-0"
@@ -886,7 +886,7 @@ StyledDrawerModalFooter.defaultProps = {
 var COMPONENT_ID = 'modals.drawer_modal.footer_item';
 var StyledDrawerModalFooterItem = styled__default["default"](StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledDrawerModalFooterItem",
   componentId: "sc-1vbl885-0"
@@ -939,7 +939,7 @@ var Modal = React.forwardRef(function (_ref, ref) {
       isCloseButtonPresent = _useState2[0],
       setIsCloseButtonPresent = _useState2[1];
   var _useModal = containerModal.useModal({
-    id: id,
+    idPrefix: id,
     onClose: onClose,
     modalRef: modalRef,
     focusOnMount: focusOnMount,
@@ -1006,15 +1006,16 @@ var Modal = React.forwardRef(function (_ref, ref) {
   }
   return ReactDOM.createPortal( React__default["default"].createElement(ModalsContext.Provider, {
     value: value
-  }, React__default["default"].createElement(StyledBackdrop, getBackdropProps(_objectSpread2({
+  }, React__default["default"].createElement(StyledBackdrop, _extends$2({
     isCentered: isCentered,
     isAnimated: isAnimated
-  }, backdropProps)), React__default["default"].createElement(StyledModal, getModalProps(_objectSpread2({
+  }, getBackdropProps(backdropProps)), React__default["default"].createElement(StyledModal, _extends$2({
     isCentered: isCentered,
     isAnimated: isAnimated,
-    isLarge: isLarge,
+    isLarge: isLarge
+  }, getModalProps(), modalProps, {
     ref: mergeRefs__default["default"]([ref, modalRef])
-  }, modalProps)), children))), rootNode);
+  }), children))), rootNode);
 });
 Modal.displayName = 'Modal';
 Modal.propTypes = {
@@ -1032,12 +1033,12 @@ Modal.defaultProps = {
   isCentered: true
 };
 
-var Body$2 = React__default["default"].forwardRef(function (props, ref) {
+var Body$2 = React.forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       getContentProps = _useModalContext.getContentProps;
-  return React__default["default"].createElement(StyledBody, _extends$2({
+  return React__default["default"].createElement(StyledBody, _extends$2({}, getContentProps(props), {
     ref: ref
-  }, getContentProps(props)));
+  }));
 });
 Body$2.displayName = 'Body';
 
@@ -1060,7 +1061,7 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
 
-var Close$2 = React__default["default"].forwardRef(function (props, ref) {
+var Close$2 = React.forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       getCloseProps = _useModalContext.getCloseProps,
       setIsCloseButtonPresent = _useModalContext.setIsCloseButtonPresent;
@@ -1071,11 +1072,11 @@ var Close$2 = React__default["default"].forwardRef(function (props, ref) {
     };
   });
   var ariaLabel = reactTheming.useText(Close$2, props, 'aria-label', 'Close modal');
-  return React__default["default"].createElement(StyledClose, _extends$2({
-    ref: ref
-  }, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
+  return React__default["default"].createElement(StyledClose, _extends$2({}, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
     'aria-label': ariaLabel
-  }))), React__default["default"].createElement(SvgXStroke, null));
+  })), {
+    ref: ref
+  }), React__default["default"].createElement(SvgXStroke, null));
 });
 Close$2.displayName = 'Close';
 
@@ -1100,10 +1101,9 @@ var Header$1 = React.forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       isCloseButtonPresent = _useModalContext.isCloseButtonPresent,
       getTitleProps = _useModalContext.getTitleProps;
-  return React__default["default"].createElement(StyledHeader, _extends$2({
+  return React__default["default"].createElement(StyledHeader, _extends$2({}, getTitleProps(props), {
+    isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
-  }, getTitleProps(props), {
-    isCloseButtonPresent: isCloseButtonPresent
   }), props.isDanger && React__default["default"].createElement(StyledDangerIcon, null), props.children);
 });
 Header$1.displayName = 'Header';
@@ -1120,9 +1120,9 @@ var useTooltipModalContext = function useTooltipModalContext() {
 var TitleComponent = React.forwardRef(function (props, ref) {
   var _useTooltipModalConte = useTooltipModalContext(),
       getTitleProps = _useTooltipModalConte.getTitleProps;
-  return React__default["default"].createElement(StyledTooltipModalTitle, _extends$2({
+  return React__default["default"].createElement(StyledTooltipModalTitle, _extends$2({}, getTitleProps(props), {
     ref: ref
-  }, getTitleProps(props)), props.children);
+  }), props.children);
 });
 TitleComponent.displayName = 'TooltipModal.Title';
 var Title = TitleComponent;
@@ -1130,9 +1130,9 @@ var Title = TitleComponent;
 var BodyComponent$1 = React.forwardRef(function (props, ref) {
   var _useTooltipModalConte = useTooltipModalContext(),
       getContentProps = _useTooltipModalConte.getContentProps;
-  return React__default["default"].createElement(StyledTooltipModalBody, _extends$2({
+  return React__default["default"].createElement(StyledTooltipModalBody, _extends$2({}, getContentProps(props), {
     ref: ref
-  }, getContentProps(props)));
+  }));
 });
 BodyComponent$1.displayName = 'TooltipModal.Body';
 var Body$1 = BodyComponent$1;
@@ -1141,11 +1141,11 @@ var CloseComponent$1 = React.forwardRef(function (props, ref) {
   var _useTooltipModalConte = useTooltipModalContext(),
       getCloseProps = _useTooltipModalConte.getCloseProps;
   var ariaLabel = reactTheming.useText(CloseComponent$1, props, 'aria-label', 'Close tooltip');
-  return React__default["default"].createElement(StyledTooltipModalClose, _extends$2({
-    ref: ref
-  }, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
+  return React__default["default"].createElement(StyledTooltipModalClose, _extends$2({}, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
     'aria-label': ariaLabel
-  }))), React__default["default"].createElement(SvgXStroke, null));
+  })), {
+    ref: ref
+  }), React__default["default"].createElement(SvgXStroke, null));
 });
 CloseComponent$1.displayName = 'TooltipModal.Close';
 var Close$1 = CloseComponent$1;
@@ -1166,7 +1166,7 @@ var FooterItemComponent$1 = React.forwardRef(function (props, ref) {
 FooterItemComponent$1.displayName = 'TooltipModal.FooterItem';
 var FooterItem$1 = FooterItemComponent$1;
 
-var _excluded$1 = ["referenceElement", "popperModifiers", "placement", "onClose", "hasArrow", "isAnimated", "zIndex", "style", "backdropProps", "focusOnMount", "restoreFocus", "id"];
+var _excluded$1 = ["referenceElement", "popperModifiers", "placement", "onClose", "hasArrow", "isAnimated", "zIndex", "backdropProps", "focusOnMount", "restoreFocus", "id"];
 var TooltipModalComponent = React__default["default"].forwardRef(function (_ref, ref) {
   var referenceElement = _ref.referenceElement,
       popperModifiers = _ref.popperModifiers,
@@ -1175,7 +1175,6 @@ var TooltipModalComponent = React__default["default"].forwardRef(function (_ref,
       hasArrow = _ref.hasArrow,
       isAnimated = _ref.isAnimated,
       zIndex = _ref.zIndex,
-      style = _ref.style,
       backdropProps = _ref.backdropProps,
       focusOnMount = _ref.focusOnMount,
       restoreFocus = _ref.restoreFocus,
@@ -1190,7 +1189,7 @@ var TooltipModalComponent = React__default["default"].forwardRef(function (_ref,
       popperElement = _useState2[0],
       setPopperElement = _useState2[1];
   var _useModal = containerModal.useModal({
-    id: id,
+    idPrefix: id,
     onClose: onClose,
     modalRef: modalRef,
     focusOnMount: focusOnMount,
@@ -1227,13 +1226,6 @@ var TooltipModalComponent = React__default["default"].forwardRef(function (_ref,
     getContentProps: getContentProps,
     getCloseProps: getCloseProps
   };
-  var modalProps = getModalProps(_objectSpread2({
-    ref: mergeRefs__default["default"]([modalRef, ref]),
-    placement: state ? state.placement : 'top',
-    hasArrow: hasArrow,
-    isAnimated: isAnimated,
-    style: style
-  }, props));
   return React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
     unmountOnExit: true,
     timeout: isAnimated ? 200 : 0,
@@ -1243,17 +1235,22 @@ var TooltipModalComponent = React__default["default"].forwardRef(function (_ref,
   }, function (transitionState) {
     return React__default["default"].createElement(TooltipModalContext.Provider, {
       value: value
-    }, React__default["default"].createElement(StyledTooltipModalBackdrop, getBackdropProps(_objectSpread2({
+    }, React__default["default"].createElement(StyledTooltipModalBackdrop, _extends$2({}, getBackdropProps(), backdropProps, {
       ref: transitionRef
-    }, backdropProps)), React__default["default"].createElement(StyledTooltipWrapper, _extends$2({
+    }), React__default["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({
-      transitionState: transitionState
-    }, modalProps)))));
+      transitionState: transitionState,
+      placement: state ? state.placement : 'top',
+      hasArrow: hasArrow,
+      isAnimated: isAnimated
+    }, getModalProps(), props, {
+      ref: mergeRefs__default["default"]([modalRef, ref])
+    })))));
   });
 });
 TooltipModalComponent.displayName = 'TooltipModal';
@@ -1287,10 +1284,9 @@ var HeaderComponent = React.forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       isCloseButtonPresent = _useModalContext.isCloseButtonPresent,
       getTitleProps = _useModalContext.getTitleProps;
-  return React__default["default"].createElement(StyledDrawerModalHeader, _extends$2({
+  return React__default["default"].createElement(StyledDrawerModalHeader, _extends$2({}, getTitleProps(props), {
+    isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
-  }, getTitleProps(props), {
-    isCloseButtonPresent: isCloseButtonPresent
   }));
 });
 HeaderComponent.displayName = 'DrawerModal.Header';
@@ -1299,9 +1295,9 @@ var Header = HeaderComponent;
 var BodyComponent = React.forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       getContentProps = _useModalContext.getContentProps;
-  return React__default["default"].createElement(StyledDrawerModalBody, _extends$2({
+  return React__default["default"].createElement(StyledDrawerModalBody, _extends$2({}, getContentProps(props), {
     ref: ref
-  }, getContentProps(props)), props.children);
+  }), props.children);
 });
 BodyComponent.displayName = 'DrawerModal.Body';
 var Body = BodyComponent;
@@ -1317,11 +1313,11 @@ var CloseComponent = React.forwardRef(function (props, ref) {
     };
   });
   var ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Close drawer');
-  return React__default["default"].createElement(StyledDrawerModalClose, _extends$2({
-    ref: ref
-  }, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
+  return React__default["default"].createElement(StyledDrawerModalClose, _extends$2({}, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
     'aria-label': ariaLabel
-  }))), React__default["default"].createElement(SvgXStroke, null));
+  })), {
+    ref: ref
+  }), React__default["default"].createElement(SvgXStroke, null));
 });
 CloseComponent.displayName = 'DrawerModal.Close';
 var Close = CloseComponent;
@@ -1365,7 +1361,7 @@ var DrawerModalComponent = React.forwardRef(function (_ref, ref) {
     relativeDocument: modalRef.current
   });
   var _useModal = containerModal.useModal({
-    id: id,
+    idPrefix: id,
     modalRef: modalRef,
     focusOnMount: focusOnMount,
     restoreFocus: restoreFocus,
@@ -1414,11 +1410,6 @@ var DrawerModalComponent = React.forwardRef(function (_ref, ref) {
   if (!rootNode) {
     return null;
   }
-  var modalProps = isOpen ? getModalProps(_objectSpread2({
-    ref: mergeRefs__default["default"]([ref, modalRef, transitionRef])
-  }, props)) : _objectSpread2({
-    ref: mergeRefs__default["default"]([ref, modalRef, transitionRef])
-  }, props);
   return ReactDOM__default["default"].createPortal( React__default["default"].createElement(ModalsContext.Provider, {
     value: value
   }, React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
@@ -1427,9 +1418,11 @@ var DrawerModalComponent = React.forwardRef(function (_ref, ref) {
     unmountOnExit: true,
     classNames: "garden-drawer-transition",
     nodeRef: transitionRef
-  }, React__default["default"].createElement(StyledBackdrop, getBackdropProps(_objectSpread2({
+  }, React__default["default"].createElement(StyledBackdrop, _extends$2({
     isAnimated: true
-  }, backdropProps)), React__default["default"].createElement(StyledDrawerModal, modalProps)))), rootNode);
+  }, getBackdropProps(backdropProps)), React__default["default"].createElement(StyledDrawerModal, _extends$2({}, getModalProps(), props, {
+    ref: mergeRefs__default["default"]([ref, modalRef, transitionRef])
+  }))))), rootNode);
 });
 DrawerModalComponent.displayName = 'DrawerModal';
 DrawerModalComponent.propTypes = {

package/dist/index.esm.js

@@ -271,7 +271,7 @@ var COMPONENT_ID$j = 'modals.backdrop';
 var animationName$1 = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 var StyledBackdrop = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
@@ -301,7 +301,7 @@ StyledBackdrop.propTypes = {
 var COMPONENT_ID$i = 'modals.body';
 var StyledBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -333,7 +333,7 @@ var BASE_MULTIPLIERS$1 = {
 };
 var StyledClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -359,7 +359,7 @@ StyledClose.defaultProps = {
 var COMPONENT_ID$g = 'modals.footer';
 var StyledFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -377,7 +377,7 @@ StyledFooter.defaultProps = {
 var COMPONENT_ID$f = 'modals.footer_item';
 var StyledFooterItem = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -397,7 +397,7 @@ StyledFooterItem.defaultProps = {
 var COMPONENT_ID$e = 'modals.header';
 var StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
@@ -484,7 +484,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledModal = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
@@ -524,7 +524,7 @@ StyledModal.defaultProps = {
 var COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
 var StyledTooltipModalBackdrop = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -618,7 +618,7 @@ var COMPONENT_ID$b = 'modals.tooltip_modal';
 var StyledTooltipModal = styled.div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$b,
-    'data-garden-version': '8.53.1',
+    'data-garden-version': '8.53.2',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -649,7 +649,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTooltipModalTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -669,7 +669,7 @@ StyledTooltipModalTitle.defaultProps = {
 var COMPONENT_ID$9 = 'modals.tooltip_modal.body';
 var StyledTooltipModalBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -691,7 +691,7 @@ StyledTooltipModalBody.defaultProps = {
 var COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
 var StyledTooltipModalFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -707,7 +707,7 @@ StyledTooltipModalFooter.defaultProps = {
 var COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
 var StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -721,7 +721,7 @@ StyledTooltipModalFooterItem.defaultProps = {
 var COMPONENT_ID$6 = 'modals.tooltip_modal.close';
 var StyledTooltipModalClose = styled(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -755,7 +755,7 @@ var boxShadow = function boxShadow(props) {
 };
 var StyledDrawerModal = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledDrawerModal",
   componentId: "sc-i1sake-0"
@@ -786,7 +786,7 @@ var BASE_MULTIPLIERS = {
 };
 var StyledDrawerModalClose = styled(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledDrawerModalClose",
   componentId: "sc-hrnaom-0"
@@ -804,7 +804,7 @@ StyledDrawerModalClose.defaultProps = {
 var COMPONENT_ID$3 = 'modals.drawer_modal.header';
 var StyledDrawerModalHeader = styled(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledDrawerModalHeader",
   componentId: "sc-1u04rqw-0"
@@ -822,7 +822,7 @@ StyledDrawerModalHeader.defaultProps = {
 var COMPONENT_ID$2 = 'modals.drawer_modal.body';
 var StyledDrawerModalBody = styled(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledDrawerModalBody",
   componentId: "sc-yafe2y-0"
@@ -838,7 +838,7 @@ StyledDrawerModalBody.defaultProps = {
 var COMPONENT_ID$1 = 'modals.drawer_modal.footer';
 var StyledDrawerModalFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledDrawerModalFooter",
   componentId: "sc-17if4ka-0"
@@ -856,7 +856,7 @@ StyledDrawerModalFooter.defaultProps = {
 var COMPONENT_ID = 'modals.drawer_modal.footer_item';
 var StyledDrawerModalFooterItem = styled(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledDrawerModalFooterItem",
   componentId: "sc-1vbl885-0"
@@ -909,7 +909,7 @@ var Modal = forwardRef(function (_ref, ref) {
       isCloseButtonPresent = _useState2[0],
       setIsCloseButtonPresent = _useState2[1];
   var _useModal = useModal({
-    id: id,
+    idPrefix: id,
     onClose: onClose,
     modalRef: modalRef,
     focusOnMount: focusOnMount,
@@ -976,15 +976,16 @@ var Modal = forwardRef(function (_ref, ref) {
   }
   return createPortal( React__default.createElement(ModalsContext.Provider, {
     value: value
-  }, React__default.createElement(StyledBackdrop, getBackdropProps(_objectSpread2({
+  }, React__default.createElement(StyledBackdrop, _extends$2({
     isCentered: isCentered,
     isAnimated: isAnimated
-  }, backdropProps)), React__default.createElement(StyledModal, getModalProps(_objectSpread2({
+  }, getBackdropProps(backdropProps)), React__default.createElement(StyledModal, _extends$2({
     isCentered: isCentered,
     isAnimated: isAnimated,
-    isLarge: isLarge,
+    isLarge: isLarge
+  }, getModalProps(), modalProps, {
     ref: mergeRefs([ref, modalRef])
-  }, modalProps)), children))), rootNode);
+  }), children))), rootNode);
 });
 Modal.displayName = 'Modal';
 Modal.propTypes = {
@@ -1002,12 +1003,12 @@ Modal.defaultProps = {
   isCentered: true
 };
 
-var Body$2 = React__default.forwardRef(function (props, ref) {
+var Body$2 = forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       getContentProps = _useModalContext.getContentProps;
-  return React__default.createElement(StyledBody, _extends$2({
+  return React__default.createElement(StyledBody, _extends$2({}, getContentProps(props), {
     ref: ref
-  }, getContentProps(props)));
+  }));
 });
 Body$2.displayName = 'Body';
 
@@ -1030,7 +1031,7 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
 
-var Close$2 = React__default.forwardRef(function (props, ref) {
+var Close$2 = forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       getCloseProps = _useModalContext.getCloseProps,
       setIsCloseButtonPresent = _useModalContext.setIsCloseButtonPresent;
@@ -1041,11 +1042,11 @@ var Close$2 = React__default.forwardRef(function (props, ref) {
     };
   });
   var ariaLabel = useText(Close$2, props, 'aria-label', 'Close modal');
-  return React__default.createElement(StyledClose, _extends$2({
-    ref: ref
-  }, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
+  return React__default.createElement(StyledClose, _extends$2({}, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
     'aria-label': ariaLabel
-  }))), React__default.createElement(SvgXStroke, null));
+  })), {
+    ref: ref
+  }), React__default.createElement(SvgXStroke, null));
 });
 Close$2.displayName = 'Close';
 
@@ -1070,10 +1071,9 @@ var Header$1 = forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       isCloseButtonPresent = _useModalContext.isCloseButtonPresent,
       getTitleProps = _useModalContext.getTitleProps;
-  return React__default.createElement(StyledHeader, _extends$2({
+  return React__default.createElement(StyledHeader, _extends$2({}, getTitleProps(props), {
+    isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
-  }, getTitleProps(props), {
-    isCloseButtonPresent: isCloseButtonPresent
   }), props.isDanger && React__default.createElement(StyledDangerIcon, null), props.children);
 });
 Header$1.displayName = 'Header';
@@ -1090,9 +1090,9 @@ var useTooltipModalContext = function useTooltipModalContext() {
 var TitleComponent = forwardRef(function (props, ref) {
   var _useTooltipModalConte = useTooltipModalContext(),
       getTitleProps = _useTooltipModalConte.getTitleProps;
-  return React__default.createElement(StyledTooltipModalTitle, _extends$2({
+  return React__default.createElement(StyledTooltipModalTitle, _extends$2({}, getTitleProps(props), {
     ref: ref
-  }, getTitleProps(props)), props.children);
+  }), props.children);
 });
 TitleComponent.displayName = 'TooltipModal.Title';
 var Title = TitleComponent;
@@ -1100,9 +1100,9 @@ var Title = TitleComponent;
 var BodyComponent$1 = forwardRef(function (props, ref) {
   var _useTooltipModalConte = useTooltipModalContext(),
       getContentProps = _useTooltipModalConte.getContentProps;
-  return React__default.createElement(StyledTooltipModalBody, _extends$2({
+  return React__default.createElement(StyledTooltipModalBody, _extends$2({}, getContentProps(props), {
     ref: ref
-  }, getContentProps(props)));
+  }));
 });
 BodyComponent$1.displayName = 'TooltipModal.Body';
 var Body$1 = BodyComponent$1;
@@ -1111,11 +1111,11 @@ var CloseComponent$1 = forwardRef(function (props, ref) {
   var _useTooltipModalConte = useTooltipModalContext(),
       getCloseProps = _useTooltipModalConte.getCloseProps;
   var ariaLabel = useText(CloseComponent$1, props, 'aria-label', 'Close tooltip');
-  return React__default.createElement(StyledTooltipModalClose, _extends$2({
-    ref: ref
-  }, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
+  return React__default.createElement(StyledTooltipModalClose, _extends$2({}, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
     'aria-label': ariaLabel
-  }))), React__default.createElement(SvgXStroke, null));
+  })), {
+    ref: ref
+  }), React__default.createElement(SvgXStroke, null));
 });
 CloseComponent$1.displayName = 'TooltipModal.Close';
 var Close$1 = CloseComponent$1;
@@ -1136,7 +1136,7 @@ var FooterItemComponent$1 = forwardRef(function (props, ref) {
 FooterItemComponent$1.displayName = 'TooltipModal.FooterItem';
 var FooterItem$1 = FooterItemComponent$1;
 
-var _excluded$1 = ["referenceElement", "popperModifiers", "placement", "onClose", "hasArrow", "isAnimated", "zIndex", "style", "backdropProps", "focusOnMount", "restoreFocus", "id"];
+var _excluded$1 = ["referenceElement", "popperModifiers", "placement", "onClose", "hasArrow", "isAnimated", "zIndex", "backdropProps", "focusOnMount", "restoreFocus", "id"];
 var TooltipModalComponent = React__default.forwardRef(function (_ref, ref) {
   var referenceElement = _ref.referenceElement,
       popperModifiers = _ref.popperModifiers,
@@ -1145,7 +1145,6 @@ var TooltipModalComponent = React__default.forwardRef(function (_ref, ref) {
       hasArrow = _ref.hasArrow,
       isAnimated = _ref.isAnimated,
       zIndex = _ref.zIndex,
-      style = _ref.style,
       backdropProps = _ref.backdropProps,
       focusOnMount = _ref.focusOnMount,
       restoreFocus = _ref.restoreFocus,
@@ -1160,7 +1159,7 @@ var TooltipModalComponent = React__default.forwardRef(function (_ref, ref) {
       popperElement = _useState2[0],
       setPopperElement = _useState2[1];
   var _useModal = useModal({
-    id: id,
+    idPrefix: id,
     onClose: onClose,
     modalRef: modalRef,
     focusOnMount: focusOnMount,
@@ -1197,13 +1196,6 @@ var TooltipModalComponent = React__default.forwardRef(function (_ref, ref) {
     getContentProps: getContentProps,
     getCloseProps: getCloseProps
   };
-  var modalProps = getModalProps(_objectSpread2({
-    ref: mergeRefs([modalRef, ref]),
-    placement: state ? state.placement : 'top',
-    hasArrow: hasArrow,
-    isAnimated: isAnimated,
-    style: style
-  }, props));
   return React__default.createElement(CSSTransition, {
     unmountOnExit: true,
     timeout: isAnimated ? 200 : 0,
@@ -1213,17 +1205,22 @@ var TooltipModalComponent = React__default.forwardRef(function (_ref, ref) {
   }, function (transitionState) {
     return React__default.createElement(TooltipModalContext.Provider, {
       value: value
-    }, React__default.createElement(StyledTooltipModalBackdrop, getBackdropProps(_objectSpread2({
+    }, React__default.createElement(StyledTooltipModalBackdrop, _extends$2({}, getBackdropProps(), backdropProps, {
       ref: transitionRef
-    }, backdropProps)), React__default.createElement(StyledTooltipWrapper, _extends$2({
+    }), React__default.createElement(StyledTooltipWrapper, _extends$2({
       ref: setPopperElement,
       style: styles.popper,
       placement: state ? state.placement : undefined,
       zIndex: zIndex,
       isAnimated: isAnimated
     }, attributes.popper), React__default.createElement(StyledTooltipModal, _extends$2({
-      transitionState: transitionState
-    }, modalProps)))));
+      transitionState: transitionState,
+      placement: state ? state.placement : 'top',
+      hasArrow: hasArrow,
+      isAnimated: isAnimated
+    }, getModalProps(), props, {
+      ref: mergeRefs([modalRef, ref])
+    })))));
   });
 });
 TooltipModalComponent.displayName = 'TooltipModal';
@@ -1257,10 +1254,9 @@ var HeaderComponent = forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       isCloseButtonPresent = _useModalContext.isCloseButtonPresent,
       getTitleProps = _useModalContext.getTitleProps;
-  return React__default.createElement(StyledDrawerModalHeader, _extends$2({
+  return React__default.createElement(StyledDrawerModalHeader, _extends$2({}, getTitleProps(props), {
+    isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
-  }, getTitleProps(props), {
-    isCloseButtonPresent: isCloseButtonPresent
   }));
 });
 HeaderComponent.displayName = 'DrawerModal.Header';
@@ -1269,9 +1265,9 @@ var Header = HeaderComponent;
 var BodyComponent = forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       getContentProps = _useModalContext.getContentProps;
-  return React__default.createElement(StyledDrawerModalBody, _extends$2({
+  return React__default.createElement(StyledDrawerModalBody, _extends$2({}, getContentProps(props), {
     ref: ref
-  }, getContentProps(props)), props.children);
+  }), props.children);
 });
 BodyComponent.displayName = 'DrawerModal.Body';
 var Body = BodyComponent;
@@ -1287,11 +1283,11 @@ var CloseComponent = forwardRef(function (props, ref) {
     };
   });
   var ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close drawer');
-  return React__default.createElement(StyledDrawerModalClose, _extends$2({
-    ref: ref
-  }, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
+  return React__default.createElement(StyledDrawerModalClose, _extends$2({}, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
     'aria-label': ariaLabel
-  }))), React__default.createElement(SvgXStroke, null));
+  })), {
+    ref: ref
+  }), React__default.createElement(SvgXStroke, null));
 });
 CloseComponent.displayName = 'DrawerModal.Close';
 var Close = CloseComponent;
@@ -1335,7 +1331,7 @@ var DrawerModalComponent = forwardRef(function (_ref, ref) {
     relativeDocument: modalRef.current
   });
   var _useModal = useModal({
-    id: id,
+    idPrefix: id,
     modalRef: modalRef,
     focusOnMount: focusOnMount,
     restoreFocus: restoreFocus,
@@ -1384,11 +1380,6 @@ var DrawerModalComponent = forwardRef(function (_ref, ref) {
   if (!rootNode) {
     return null;
   }
-  var modalProps = isOpen ? getModalProps(_objectSpread2({
-    ref: mergeRefs([ref, modalRef, transitionRef])
-  }, props)) : _objectSpread2({
-    ref: mergeRefs([ref, modalRef, transitionRef])
-  }, props);
   return ReactDOM.createPortal( React__default.createElement(ModalsContext.Provider, {
     value: value
   }, React__default.createElement(CSSTransition, {
@@ -1397,9 +1388,11 @@ var DrawerModalComponent = forwardRef(function (_ref, ref) {
     unmountOnExit: true,
     classNames: "garden-drawer-transition",
     nodeRef: transitionRef
-  }, React__default.createElement(StyledBackdrop, getBackdropProps(_objectSpread2({
+  }, React__default.createElement(StyledBackdrop, _extends$2({
     isAnimated: true
-  }, backdropProps)), React__default.createElement(StyledDrawerModal, modalProps)))), rootNode);
+  }, getBackdropProps(backdropProps)), React__default.createElement(StyledDrawerModal, _extends$2({}, getModalProps(), props, {
+    ref: mergeRefs([ref, modalRef, transitionRef])
+  }))))), rootNode);
 });
 DrawerModalComponent.displayName = 'DrawerModal';
 DrawerModalComponent.propTypes = {

package/dist/typings/utils/useModalContext.d.ts

@@ -4,13 +4,13 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { HTMLAttributes } from 'react';
+import { IUseModalReturnValue } from '@zendeskgarden/container-modal';
 export interface IModalContext {
     isLarge?: boolean;
     isCloseButtonPresent?: boolean;
-    getTitleProps: <T>(options?: T) => T & HTMLAttributes<HTMLDivElement>;
-    getContentProps: <T>(options?: T) => T & HTMLAttributes<HTMLDivElement>;
-    getCloseProps: <T>(options?: T) => T & HTMLAttributes<HTMLButtonElement>;
+    getTitleProps: IUseModalReturnValue['getTitleProps'];
+    getContentProps: IUseModalReturnValue['getContentProps'];
+    getCloseProps: IUseModalReturnValue['getCloseProps'];
     setIsCloseButtonPresent: (isPresent: boolean) => void;
 }
 export declare const ModalsContext: import("react").Context<IModalContext | undefined>;

package/dist/typings/utils/useTooltipModalContext.d.ts

@@ -4,11 +4,11 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { HTMLAttributes } from 'react';
+import { IUseModalReturnValue } from '@zendeskgarden/container-modal';
 export interface IModalContext {
-    getTitleProps: <T>(options?: T) => T & HTMLAttributes<HTMLDivElement>;
-    getContentProps: <T>(options?: T) => T & HTMLAttributes<HTMLDivElement>;
-    getCloseProps: <T>(options?: T) => T & HTMLAttributes<HTMLButtonElement>;
+    getTitleProps: IUseModalReturnValue['getTitleProps'];
+    getContentProps: IUseModalReturnValue['getContentProps'];
+    getCloseProps: IUseModalReturnValue['getCloseProps'];
 }
 export declare const TooltipModalContext: import("react").Context<IModalContext | undefined>;
 export declare const useTooltipModalContext: () => IModalContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-modals",
-  "version": "8.53.1",
+  "version": "8.53.2",
   "description": "Components relating to modals in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,9 +22,9 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@popperjs/core": "^2.4.4",
-    "@zendeskgarden/container-focusvisible": "^0.4.6",
-    "@zendeskgarden/container-modal": "^0.8.7",
-    "@zendeskgarden/container-utilities": "^0.7.0",
+    "@zendeskgarden/container-focusvisible": "^1.0.0",
+    "@zendeskgarden/container-modal": "^1.0.0",
+    "@zendeskgarden/container-utilities": "^1.0.0",
     "dom-helpers": "^5.1.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^1.1.0",
@@ -39,8 +39,8 @@
   },
   "devDependencies": {
     "@types/react-transition-group": "4.4.4",
-    "@zendeskgarden/react-theming": "^8.53.1",
-    "@zendeskgarden/svg-icons": "6.32.0"
+    "@zendeskgarden/react-theming": "^8.53.2",
+    "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
     "components",
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "79dee8e82b6f082e8d4a72ba95a5fb3982d63040"
+  "gitHead": "b4ef84eb8f6606659aee9e689b8b44cb1feb0b87"
 }