@zendeskgarden/react-modals 9.12.2 → 9.12.4

package/dist/index.cjs.js

@@ -64,26 +64,23 @@ const animationStyles$1 = props => {
 };
 const StyledBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
-})(["display:flex;position:fixed;inset:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";", ";", ";"], props => props.$isCentered && 'center', props => props.$isCentered && 'center', _ref => {
-  let {
-    theme
-  } = _ref;
-  return reactTheming.getColor({
-    theme,
-    hue: 'neutralHue',
-    transparency: theme.opacity[1000],
-    light: {
-      shade: 900
-    },
-    dark: {
-      shade: 1200
-    }
-  });
-}, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, reactTheming.componentStyles);
+})(["display:flex;position:fixed;inset:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";", ";", ";"], props => props.$isCentered && 'center', props => props.$isCentered && 'center', ({
+  theme
+}) => reactTheming.getColor({
+  theme,
+  hue: 'neutralHue',
+  transparency: theme.opacity[1000],
+  light: {
+    shade: 900
+  },
+  dark: {
+    shade: 1200
+  }
+}), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, reactTheming.componentStyles);
 StyledBackdrop.propTypes = {
   $isCentered: PropTypes__default.default.bool,
   $isAnimated: PropTypes__default.default.bool
@@ -92,19 +89,16 @@ StyledBackdrop.propTypes = {
 const COMPONENT_ID$i = 'modals.body';
 const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
-})(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color-scheme:only ", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, _ref => {
-  let {
-    theme
-  } = _ref;
-  return reactTheming.getColor({
-    theme,
-    variable: 'foreground.default'
-  });
-}, props => props.theme.fontSizes.md, reactTheming.componentStyles);
+})(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color-scheme:only ", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, ({
+  theme
+}) => reactTheming.getColor({
+  theme,
+  variable: 'foreground.default'
+}), props => props.theme.fontSizes.md, reactTheming.componentStyles);
 
 const COMPONENT_ID$h = 'modals.close';
 const BASE_MULTIPLIERS$1 = {
@@ -114,7 +108,7 @@ const BASE_MULTIPLIERS$1 = {
 };
 const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -123,7 +117,7 @@ const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
 const COMPONENT_ID$g = 'modals.footer';
 const StyledFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -135,18 +129,17 @@ const StyledFooter = styled__default.default.div.attrs({
 const COMPONENT_ID$f = 'modals.footer_item';
 const StyledFooterItem = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
 })(["display:flex;margin-", ":", "px;min-width:0;&:first-child{margin-", ":0;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 5, props => props.theme.rtl ? 'right' : 'left', reactTheming.componentStyles);
 
 const COMPONENT_ID$e = 'modals.header';
-const colorStyles$2 = _ref => {
-  let {
-    $isDanger,
-    theme
-  } = _ref;
+const colorStyles$2 = ({
+  $isDanger,
+  theme
+}) => {
   const bottomBorderColor = reactTheming.getColor({
     theme,
     variable: 'border.subtle'
@@ -159,7 +152,7 @@ const colorStyles$2 = _ref => {
 };
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
@@ -206,10 +199,9 @@ const animationStyles = props => {
   }
   return '';
 };
-const colorStyles$1 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$1 = ({
+  theme
+}) => {
   const offsetY = `${theme.space.base * 5}px`;
   const blurRadius = `${theme.space.base * 7}px`;
   const shadowColor = reactTheming.getColor({
@@ -232,7 +224,7 @@ const sizeStyles$2 = props => {
 };
 const StyledModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
@@ -313,9 +305,9 @@ function _wrapNativeSuper(t) {
     return Wrapper.prototype = Object.create(t.prototype, {
       constructor: {
         value: Wrapper,
-        enumerable: !1,
-        writable: !0,
-        configurable: !0
+        enumerable: false,
+        writable: true,
+        configurable: true
       }
     }), _setPrototypeOf(Wrapper, t);
   }, _wrapNativeSuper(t);
@@ -817,17 +809,13 @@ function hslToHex(hue, saturation, lightness) {
   return hslToRgb(hue, saturation, lightness, convertToHex);
 }
 function hsl(value, saturation, lightness) {
-  if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number') {
-    return hslToHex(value, saturation, lightness);
-  } else if (typeof value === 'object' && saturation === undefined && lightness === undefined) {
+  if (typeof value === 'object' && saturation === undefined && lightness === undefined) {
     return hslToHex(value.hue, value.saturation, value.lightness);
   }
   throw new PolishedError(1);
 }
 function hsla(value, saturation, lightness, alpha) {
-  if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number' && typeof alpha === 'number') {
-    return "rgba(" + hslToRgb(value, saturation, lightness) + "," + alpha + ")";
-  } else if (typeof value === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) {
+  if (typeof value === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) {
     return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")";
   }
   throw new PolishedError(2);
@@ -841,12 +829,7 @@ function rgb(value, green, blue) {
   throw new PolishedError(6);
 }
 function rgba(firstValue, secondValue, thirdValue, fourthValue) {
-  if (typeof firstValue === 'string' && typeof secondValue === 'number') {
-    var rgbValue = parseToRgb(firstValue);
-    return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
-  } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
-    return "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
-  } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
+  if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
     return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
   }
   throw new PolishedError(7);
@@ -1006,7 +989,7 @@ curry (transparentize);
 const COMPONENT_ID$c = 'modals.tooltip_dialog.backdrop';
 const StyledTooltipDialogBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTooltipDialogBackdrop",
   componentId: "sc-zrk625-0"
@@ -1027,7 +1010,7 @@ const StyledTooltipWrapper = styled__default.default.div.attrs(props => ({
 const COMPONENT_ID$b = 'modals.tooltip_dialog.close';
 const StyledTooltipDialogClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTooltipDialogClose",
   componentId: "sc-18xlgfi-0"
@@ -1044,7 +1027,7 @@ const sizeStyles$1 = props => `
 `;
 const StyledTooltipDialog = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   className: props.$isAnimated ? 'is-animated' : undefined
 })).withConfig({
   displayName: "StyledTooltipDialog",
@@ -1069,41 +1052,35 @@ const sizeStyles = props => `
 `;
 const StyledTooltipDialogTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTooltipDialogTitle",
   componentId: "sc-1rceixg-0"
-})(["margin:0;color:", ";font-weight:", ";", ";", ";"], _ref => {
-  let {
-    theme
-  } = _ref;
-  return reactTheming.getColor({
-    variable: 'foreground.default',
-    theme
-  });
-}, props => props.theme.fontWeights.semibold, props => sizeStyles(props), reactTheming.componentStyles);
+})(["margin:0;color:", ";font-weight:", ";", ";", ";"], ({
+  theme
+}) => reactTheming.getColor({
+  variable: 'foreground.default',
+  theme
+}), props => props.theme.fontWeights.semibold, props => sizeStyles(props), reactTheming.componentStyles);
 
 const COMPONENT_ID$8 = 'modals.tooltip_dialog.body';
 const StyledTooltipDialogBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTooltipDialogBody",
   componentId: "sc-132lcoq-0"
-})(["display:block;margin:0;padding-top:", "px;line-height:", ";color-scheme:only ", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, _ref => {
-  let {
-    theme
-  } = _ref;
-  return reactTheming.getColor({
-    variable: 'foreground.default',
-    theme
-  });
-}, props => props.theme.fontSizes.md, reactTheming.componentStyles);
+})(["display:block;margin:0;padding-top:", "px;line-height:", ";color-scheme:only ", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, ({
+  theme
+}) => reactTheming.getColor({
+  variable: 'foreground.default',
+  theme
+}), props => props.theme.fontSizes.md, reactTheming.componentStyles);
 
 const COMPONENT_ID$7 = 'modals.tooltip_dialog.footer';
 const StyledTooltipDialogFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTooltipDialogFooter",
   componentId: "sc-kjomsm-0"
@@ -1112,7 +1089,7 @@ const StyledTooltipDialogFooter = styled__default.default.div.attrs({
 const COMPONENT_ID$6 = 'modals.tooltip_dialog.footer_item';
 const StyledTooltipDialogFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTooltipDialogFooterItem",
   componentId: "sc-u2rmo8-0"
@@ -1120,10 +1097,9 @@ const StyledTooltipDialogFooterItem = styled__default.default(StyledFooterItem).
 
 const COMPONENT_ID$5 = 'modals.drawer_modal';
 const DRAWER_WIDTH = 380;
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles = ({
+  theme
+}) => {
   const offsetY = `${theme.space.base * 5}px`;
   const blurRadius = `${theme.space.base * 7}px`;
   const shadowColor = reactTheming.getColor({
@@ -1143,7 +1119,7 @@ const colorStyles = _ref => {
 };
 const StyledDrawer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledDrawer",
   componentId: "sc-zp66t3-0"
@@ -1151,13 +1127,12 @@ const StyledDrawer = styled__default.default.div.attrs({
 
 const COMPONENT_ID$4 = 'modals.drawer_modal.close';
 const BASE_MULTIPLIERS = {
-  top: BASE_MULTIPLIERS$1.top,
   side: 2,
   size: BASE_MULTIPLIERS$1.size
 };
 const StyledDrawerClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledDrawerClose",
   componentId: "sc-1a0xt3x-0"
@@ -1166,7 +1141,7 @@ const StyledDrawerClose = styled__default.default(StyledClose).attrs({
 const COMPONENT_ID$3 = 'modals.drawer_modal.header';
 const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledDrawerHeader",
   componentId: "sc-y4mgkj-0"
@@ -1175,7 +1150,7 @@ const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
 const COMPONENT_ID$2 = 'modals.drawer_modal.body';
 const StyledDrawerBody = styled__default.default(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledDrawerBody",
   componentId: "sc-13qufyn-0"
@@ -1184,24 +1159,21 @@ const StyledDrawerBody = styled__default.default(StyledBody).attrs({
 const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
 const StyledDrawerFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledDrawerFooter",
   componentId: "sc-kc7e6p-0"
-})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], _ref => {
-  let {
-    theme
-  } = _ref;
-  return `${theme.borders.sm} ${reactTheming.getColor({
-    theme,
-    variable: 'border.subtle'
-  })}`;
-}, props => props.theme.space.base * 5, reactTheming.componentStyles);
+})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], ({
+  theme
+}) => `${theme.borders.sm} ${reactTheming.getColor({
+  theme,
+  variable: 'border.subtle'
+})}`, props => props.theme.space.base * 5, reactTheming.componentStyles);
 
 const COMPONENT_ID = 'modals.drawer_modal.footer_item';
 const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledDrawerFooterItem",
   componentId: "sc-m2yul4-0"
@@ -1278,13 +1250,12 @@ const FooterItem$2 = React__namespace.default.forwardRef((props, ref) => React__
 }, props)));
 FooterItem$2.displayName = 'Modal.FooterItem';
 
-const Header$1 = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    isDanger,
-    tag = 'div',
-    ...other
-  } = _ref;
+const Header$1 = React.forwardRef(({
+  children,
+  isDanger,
+  tag = 'div',
+  ...other
+}, ref) => {
   const {
     isCloseButtonPresent,
     hasHeader,
@@ -1326,20 +1297,19 @@ const isOverflowing = element => {
   const marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
   return marginLeft + doc.body.clientWidth + marginRight < win.innerWidth;
 };
-const ModalComponent = React.forwardRef((_ref, ref) => {
-  let {
-    backdropProps,
-    children,
-    onClose,
-    isLarge,
-    isCentered = true,
-    isAnimated = true,
-    id,
-    appendToNode,
-    focusOnMount,
-    restoreFocus,
-    ...modalProps
-  } = _ref;
+const ModalComponent = React.forwardRef(({
+  backdropProps,
+  children,
+  onClose,
+  isLarge,
+  isCentered = true,
+  isAnimated = true,
+  id,
+  appendToNode,
+  focusOnMount,
+  restoreFocus,
+  ...modalProps
+}, ref) => {
   const theme = React.useContext(styled.ThemeContext);
   const modalRef = React.useRef(null);
   const environment = reactTheming.useDocument(theme);
@@ -1356,7 +1326,8 @@ const ModalComponent = React.forwardRef((_ref, ref) => {
     onClose,
     modalRef,
     focusOnMount,
-    restoreFocus
+    restoreFocus,
+    environment
   });
   React.useEffect(() => {
     if (!environment) {
@@ -1464,12 +1435,11 @@ const useTooltipDialogContext = () => {
 
 const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 
-const TitleComponent = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    tag = 'div',
-    ...other
-  } = _ref;
+const TitleComponent = React.forwardRef(({
+  children,
+  tag = 'div',
+  ...other
+}, ref) => {
   const {
     getTitleProps,
     hasTitle,
@@ -1536,30 +1506,33 @@ FooterItemComponent$1.displayName = 'TooltipDialog.FooterItem';
 const FooterItem$1 = FooterItemComponent$1;
 
 const PLACEMENT_DEFAULT = 'top';
-const TooltipDialogComponent = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    appendToNode,
-    referenceElement,
-    placement: _placement = 'auto',
-    fallbackPlacements: _fallbackPlacements,
-    offset: _offset,
-    onClose,
-    hasArrow = true,
-    keepMounted,
-    isAnimated,
-    zIndex,
-    backdropProps,
-    focusOnMount = true,
-    restoreFocus = true,
-    id,
-    ...props
-  } = _ref;
+const TooltipDialogComponent = React__namespace.default.forwardRef(({
+  appendToNode,
+  referenceElement,
+  placement: _placement = 'auto',
+  fallbackPlacements: _fallbackPlacements,
+  offset: _offset,
+  onClose,
+  hasArrow = true,
+  keepMounted,
+  isAnimated,
+  zIndex,
+  backdropProps,
+  focusOnMount = true,
+  restoreFocus = true,
+  id,
+  ...props
+}, ref) => {
   const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
+  const environment = reactTheming.useDocument(theme);
   const previousReferenceElementRef = React.useRef();
   const modalRef = React.useRef(null);
   const transitionRef = React.useRef(null);
   const [floatingElement, setFloatingElement] = React.useState();
   const [hasTitle, setHasTitle] = React.useState(false);
+  const handleClose = event => {
+    referenceElement && onClose?.(event);
+  };
   const {
     getTitleProps,
     getCloseProps,
@@ -1568,10 +1541,11 @@ const TooltipDialogComponent = React__namespace.default.forwardRef((_ref, ref) =
     getModalProps
   } = containerModal.useModal({
     idPrefix: id,
-    onClose,
+    onClose: handleClose,
     modalRef,
     focusOnMount,
-    restoreFocus: false
+    restoreFocus: false,
+    environment
   });
   const [floatingPlacement, fallbackPlacements] = reactTheming.getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement, _fallbackPlacements);
   const {
@@ -1691,11 +1665,10 @@ TooltipDialog.Footer = Footer$1;
 TooltipDialog.FooterItem = FooterItem$1;
 TooltipDialog.Title = Title;
 
-const HeaderComponent = React.forwardRef((_ref, ref) => {
-  let {
-    tag = 'div',
-    ...other
-  } = _ref;
+const HeaderComponent = React.forwardRef(({
+  tag = 'div',
+  ...other
+}, ref) => {
   const {
     isCloseButtonPresent,
     hasHeader,
@@ -1767,17 +1740,16 @@ const FooterItemComponent = React.forwardRef((props, ref) => React__namespace.de
 FooterItemComponent.displayName = 'Drawer.FooterItem';
 const FooterItem = FooterItemComponent;
 
-const DrawerComponent = React.forwardRef((_ref, ref) => {
-  let {
-    id,
-    isOpen,
-    onClose,
-    backdropProps,
-    appendToNode,
-    focusOnMount = true,
-    restoreFocus = true,
-    ...props
-  } = _ref;
+const DrawerComponent = React.forwardRef(({
+  id,
+  isOpen,
+  onClose,
+  backdropProps,
+  appendToNode,
+  focusOnMount = true,
+  restoreFocus = true,
+  ...props
+}, ref) => {
   const modalRef = React.useRef(null);
   const transitionRef = React.useRef(null);
   const triggerRef = React.useRef(null);
@@ -1785,6 +1757,9 @@ const DrawerComponent = React.forwardRef((_ref, ref) => {
   const environment = reactTheming.useDocument(theme);
   const [isCloseButtonPresent, setIsCloseButtonPresent] = React.useState(false);
   const [hasHeader, setHasHeader] = React.useState(false);
+  const handleClose = event => {
+    isOpen && onClose?.(event);
+  };
   const {
     getTitleProps,
     getCloseProps,
@@ -1797,7 +1772,7 @@ const DrawerComponent = React.forwardRef((_ref, ref) => {
     focusOnMount: false ,
     restoreFocus: false ,
     environment,
-    onClose
+    onClose: handleClose
   });
   React.useEffect(() => {
     if (environment) {

package/dist/typings/elements/TooltipDialog/TooltipDialog.d.ts

@@ -11,12 +11,6 @@ import { Body } from './Body';
 import { Close } from './Close';
 import { Footer } from './Footer';
 import { FooterItem } from './FooterItem';
-/**
- * 1. When content is kept mounted we must manually focus on re-open
- * 2. Hide only at 'exited' so exit animations finish
- *    and floating-ui sizing/focus logic remain valid during 'exiting'.
- *    Earlier hiding would cut animation and risk focus/layout issues.
- */
 declare const TooltipDialogComponent: React.ForwardRefExoticComponent<ITooltipDialogProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-modals",
-  "version": "9.12.2",
+  "version": "9.12.4",
   "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": {
     "@floating-ui/react-dom": "^2.0.0",
-    "@zendeskgarden/container-modal": "^1.0.21",
-    "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.12.2",
+    "@zendeskgarden/container-modal": "^1.0.22",
+    "@zendeskgarden/container-utilities": "^2.0.4",
+    "@zendeskgarden/react-buttons": "^9.12.4",
     "dom-helpers": "^5.1.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0",
@@ -38,8 +38,8 @@
   },
   "devDependencies": {
     "@types/react-transition-group": "4.4.12",
-    "@zendeskgarden/react-theming": "^9.12.2",
-    "@zendeskgarden/svg-icons": "7.5.0"
+    "@zendeskgarden/react-theming": "^9.12.4",
+    "@zendeskgarden/svg-icons": "7.6.0"
   },
   "keywords": [
     "components",
@@ -51,5 +51,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "9b6f34bf0eda4bee3b47f97a437aa9b7f3008af4"
+  "gitHead": "e79e9687e6bcbd097c059add2938cdae59a5173b"
 }