@zendeskgarden/react-modals 9.15.3 → 9.15.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/esm/elements/TooltipDialog/TooltipDialog.js +11 -2
  2. package/dist/esm/styled/StyledBackdrop.js +1 -1
  3. package/dist/esm/styled/StyledBody.js +1 -1
  4. package/dist/esm/styled/StyledClose.js +1 -1
  5. package/dist/esm/styled/StyledDrawer.js +1 -1
  6. package/dist/esm/styled/StyledDrawerBody.js +1 -1
  7. package/dist/esm/styled/StyledDrawerClose.js +1 -1
  8. package/dist/esm/styled/StyledDrawerFooter.js +1 -1
  9. package/dist/esm/styled/StyledDrawerFooterItem.js +1 -1
  10. package/dist/esm/styled/StyledDrawerHeader.js +1 -1
  11. package/dist/esm/styled/StyledFooter.js +1 -1
  12. package/dist/esm/styled/StyledFooterItem.js +1 -1
  13. package/dist/esm/styled/StyledHeader.js +1 -1
  14. package/dist/esm/styled/StyledModal.js +1 -1
  15. package/dist/esm/styled/StyledTooltipDialog.js +3 -1
  16. package/dist/esm/styled/StyledTooltipDialogBackdrop.js +1 -1
  17. package/dist/esm/styled/StyledTooltipDialogBody.js +1 -1
  18. package/dist/esm/styled/StyledTooltipDialogClose.js +1 -1
  19. package/dist/esm/styled/StyledTooltipDialogFooter.js +1 -1
  20. package/dist/esm/styled/StyledTooltipDialogFooterItem.js +1 -1
  21. package/dist/esm/styled/StyledTooltipDialogTitle.js +1 -1
  22. package/dist/index.cjs.js +32 -21
  23. package/dist/typings/styled/StyledTooltipDialog.d.ts +1 -0
  24. package/package.json +5 -5
package/dist/esm/elements/TooltipDialog/TooltipDialog.js CHANGED
@@ -8,7 +8,7 @@ import React__default, { useContext, useRef, useState, useEffect } from 'react';
8
8
  import PropTypes from 'prop-types';
9
9
  import { ThemeContext } from 'styled-components';
10
10
  import { CSSTransition } from 'react-transition-group';
11
- import { useFloating, platform, offset, autoPlacement, flip, autoUpdate } from '@floating-ui/react-dom';
11
+ import { useFloating, platform, offset, autoPlacement, flip, shift, autoUpdate } from '@floating-ui/react-dom';
12
12
  import { useModal } from '@zendeskgarden/container-modal';
13
13
  import { mergeRefs } from 'react-merge-refs';
14
14
  import { TooltipDialogContext } from '../../utils/useTooltipDialogContext.js';
@@ -78,6 +78,7 @@ const TooltipDialogComponent = React__default.forwardRef(({
78
78
  getBackdropProps,
79
79
  getModalProps
80
80
  } = useModal({
81
+ closeOnBlur: true,
81
82
  idPrefix: id,
82
83
  onClose: handleClose,
83
84
  modalRef,
@@ -86,9 +87,11 @@ const TooltipDialogComponent = React__default.forwardRef(({
86
87
  environment
87
88
  });
88
89
  const [floatingPlacement, fallbackPlacements] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement, _fallbackPlacements);
90
+ const isAutoPlacement = _placement === 'auto';
89
91
  const {
90
92
  refs,
91
93
  placement,
94
+ middlewareData,
92
95
  update,
93
96
  floatingStyles: {
94
97
  transform
@@ -103,10 +106,15 @@ const TooltipDialogComponent = React__default.forwardRef(({
103
106
  floating: floatingElement
104
107
  },
105
108
  placement: floatingPlacement,
106
- middleware: [offset(_offset === undefined ? theme.space.base * 3 : _offset), _placement === 'auto' ? autoPlacement() : flip({
109
+ middleware: [offset(_offset === undefined ? theme.space.base * 3 : _offset), isAutoPlacement ? autoPlacement() : flip({
107
110
  fallbackPlacements
111
+ }), shift({
112
+ mainAxis: true,
113
+ crossAxis: true
108
114
  })]
109
115
  });
116
+ const placementSide = placement.split('-')[0];
117
+ const arrowShift = placementSide === 'top' || placementSide === 'bottom' ? -(middlewareData.shift?.x || 0) : -(middlewareData.shift?.y || 0);
110
118
  useEffect(() => {
111
119
  let cleanup;
112
120
  if (referenceElement && floatingElement && refs.reference.current && refs.floating.current) {
@@ -172,6 +180,7 @@ const TooltipDialogComponent = React__default.forwardRef(({
172
180
  }, React__default.createElement(StyledTooltipDialog, Object.assign({
173
181
  $transitionState: transitionState,
174
182
  $placement: placement,
183
+ $arrowShift: arrowShift,
175
184
  $hasArrow: hasArrow,
176
185
  $isAnimated: isAnimated,
177
186
  inert: isHidden ? '' : undefined
package/dist/esm/styled/StyledBackdrop.js CHANGED
@@ -18,7 +18,7 @@ const animationStyles$1 = props => {
18
18
  };
19
19
  const StyledBackdrop = styled.div.attrs({
20
20
  'data-garden-id': COMPONENT_ID$j,
21
- 'data-garden-version': '9.15.3'
21
+ 'data-garden-version': '9.15.5'
22
22
  }).withConfig({
23
23
  displayName: "StyledBackdrop",
24
24
  componentId: "sc-mzdjpo-0"
package/dist/esm/styled/StyledBody.js CHANGED
@@ -10,7 +10,7 @@ import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-t
10
10
  const COMPONENT_ID$i = 'modals.body';
11
11
  const StyledBody = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID$i,
13
- 'data-garden-version': '9.15.3'
13
+ 'data-garden-version': '9.15.5'
14
14
  }).withConfig({
15
15
  displayName: "StyledBody",
16
16
  componentId: "sc-14rzecg-0"
package/dist/esm/styled/StyledClose.js CHANGED
@@ -16,7 +16,7 @@ const BASE_MULTIPLIERS$1 = {
16
16
  };
17
17
  const StyledClose = styled(IconButton).attrs({
18
18
  'data-garden-id': COMPONENT_ID$h,
19
- 'data-garden-version': '9.15.3'
19
+ 'data-garden-version': '9.15.5'
20
20
  }).withConfig({
21
21
  displayName: "StyledClose",
22
22
  componentId: "sc-iseudj-0"
package/dist/esm/styled/StyledDrawer.js CHANGED
@@ -31,7 +31,7 @@ const colorStyles = ({
31
31
  };
32
32
  const StyledDrawer = styled.div.attrs({
33
33
  'data-garden-id': COMPONENT_ID$5,
34
- 'data-garden-version': '9.15.3'
34
+ 'data-garden-version': '9.15.5'
35
35
  }).withConfig({
36
36
  displayName: "StyledDrawer",
37
37
  componentId: "sc-zp66t3-0"
package/dist/esm/styled/StyledDrawerBody.js CHANGED
@@ -11,7 +11,7 @@ import { StyledBody } from './StyledBody.js';
11
11
  const COMPONENT_ID$2 = 'modals.drawer_modal.body';
12
12
  const StyledDrawerBody = styled(StyledBody).attrs({
13
13
  'data-garden-id': COMPONENT_ID$2,
14
- 'data-garden-version': '9.15.3'
14
+ 'data-garden-version': '9.15.5'
15
15
  }).withConfig({
16
16
  displayName: "StyledDrawerBody",
17
17
  componentId: "sc-13qufyn-0"
package/dist/esm/styled/StyledDrawerClose.js CHANGED
@@ -15,7 +15,7 @@ const BASE_MULTIPLIERS = {
15
15
  };
16
16
  const StyledDrawerClose = styled(StyledClose).attrs({
17
17
  'data-garden-id': COMPONENT_ID$4,
18
- 'data-garden-version': '9.15.3'
18
+ 'data-garden-version': '9.15.5'
19
19
  }).withConfig({
20
20
  displayName: "StyledDrawerClose",
21
21
  componentId: "sc-1a0xt3x-0"
package/dist/esm/styled/StyledDrawerFooter.js CHANGED
@@ -10,7 +10,7 @@ import { getColor, componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
11
11
  const StyledDrawerFooter = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID$1,
13
- 'data-garden-version': '9.15.3'
13
+ 'data-garden-version': '9.15.5'
14
14
  }).withConfig({
15
15
  displayName: "StyledDrawerFooter",
16
16
  componentId: "sc-kc7e6p-0"
package/dist/esm/styled/StyledDrawerFooterItem.js CHANGED
@@ -11,7 +11,7 @@ import { StyledFooterItem } from './StyledFooterItem.js';
11
11
  const COMPONENT_ID = 'modals.drawer_modal.footer_item';
12
12
  const StyledDrawerFooterItem = styled(StyledFooterItem).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.15.3'
14
+ 'data-garden-version': '9.15.5'
15
15
  }).withConfig({
16
16
  displayName: "StyledDrawerFooterItem",
17
17
  componentId: "sc-m2yul4-0"
package/dist/esm/styled/StyledDrawerHeader.js CHANGED
@@ -12,7 +12,7 @@ import { BASE_MULTIPLIERS } from './StyledDrawerClose.js';
12
12
  const COMPONENT_ID$3 = 'modals.drawer_modal.header';
13
13
  const StyledDrawerHeader = styled(StyledHeader).attrs({
14
14
  'data-garden-id': COMPONENT_ID$3,
15
- 'data-garden-version': '9.15.3'
15
+ 'data-garden-version': '9.15.5'
16
16
  }).withConfig({
17
17
  displayName: "StyledDrawerHeader",
18
18
  componentId: "sc-y4mgkj-0"
package/dist/esm/styled/StyledFooter.js CHANGED
@@ -10,7 +10,7 @@ import { getColor, componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID$g = 'modals.footer';
11
11
  const StyledFooter = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID$g,
13
- 'data-garden-version': '9.15.3'
13
+ 'data-garden-version': '9.15.5'
14
14
  }).withConfig({
15
15
  displayName: "StyledFooter",
16
16
  componentId: "sc-d8pfdu-0"
package/dist/esm/styled/StyledFooterItem.js CHANGED
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID$f = 'modals.footer_item';
11
11
  const StyledFooterItem = styled.span.attrs({
12
12
  'data-garden-id': COMPONENT_ID$f,
13
- 'data-garden-version': '9.15.3'
13
+ 'data-garden-version': '9.15.5'
14
14
  }).withConfig({
15
15
  displayName: "StyledFooterItem",
16
16
  componentId: "sc-1mb76hl-0"
package/dist/esm/styled/StyledHeader.js CHANGED
@@ -25,7 +25,7 @@ const colorStyles$2 = ({
25
25
  };
26
26
  const StyledHeader = styled.div.attrs({
27
27
  'data-garden-id': COMPONENT_ID$e,
28
- 'data-garden-version': '9.15.3'
28
+ 'data-garden-version': '9.15.5'
29
29
  }).withConfig({
30
30
  displayName: "StyledHeader",
31
31
  componentId: "sc-1787r9v-0"
package/dist/esm/styled/StyledModal.js CHANGED
@@ -41,7 +41,7 @@ const sizeStyles$2 = props => {
41
41
  };
42
42
  const StyledModal = styled.div.attrs({
43
43
  'data-garden-id': COMPONENT_ID$d,
44
- 'data-garden-version': '9.15.3'
44
+ 'data-garden-version': '9.15.5'
45
45
  }).withConfig({
46
46
  displayName: "StyledModal",
47
47
  componentId: "sc-1pe1axu-0"
package/dist/esm/styled/StyledTooltipDialog.js CHANGED
@@ -12,6 +12,7 @@ const COMPONENT_ID$a = 'modals.tooltip_dialog';
12
12
  const sizeStyles$1 = props => `
13
13
  padding: ${props.theme.space.base * 5}px;
14
14
  width: 400px;
15
+ max-width: 100vw;
15
16
 
16
17
  &:has(${StyledTooltipDialogClose}) > :first-child {
17
18
  padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
@@ -19,7 +20,7 @@ const sizeStyles$1 = props => `
19
20
  `;
20
21
  const StyledTooltipDialog = styled.div.attrs(props => ({
21
22
  'data-garden-id': COMPONENT_ID$a,
22
- 'data-garden-version': '9.15.3',
23
+ 'data-garden-version': '9.15.5',
23
24
  className: props.$isAnimated ? 'is-animated' : undefined
24
25
  })).withConfig({
25
26
  displayName: "StyledTooltipDialog",
@@ -28,6 +29,7 @@ const StyledTooltipDialog = styled.div.attrs(props => ({
28
29
  const computedArrowStyles = arrowStyles(getArrowPosition(props.theme, props.$placement), {
29
30
  size: `${props.theme.space.base * 2}px`,
30
31
  inset: '1px',
32
+ shift: `${props.$arrowShift || 0}px`,
31
33
  animationModifier: '.is-animated'
32
34
  });
33
35
  if (props.$isAnimated) {
package/dist/esm/styled/StyledTooltipDialogBackdrop.js CHANGED
@@ -11,7 +11,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
11
11
  const COMPONENT_ID$c = 'modals.tooltip_dialog.backdrop';
12
12
  const StyledTooltipDialogBackdrop = styled.div.attrs({
13
13
  'data-garden-id': COMPONENT_ID$c,
14
- 'data-garden-version': '9.15.3'
14
+ 'data-garden-version': '9.15.5'
15
15
  }).withConfig({
16
16
  displayName: "StyledTooltipDialogBackdrop",
17
17
  componentId: "sc-zrk625-0"
package/dist/esm/styled/StyledTooltipDialogBody.js CHANGED
@@ -10,7 +10,7 @@ import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-t
10
10
  const COMPONENT_ID$8 = 'modals.tooltip_dialog.body';
11
11
  const StyledTooltipDialogBody = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID$8,
13
- 'data-garden-version': '9.15.3'
13
+ 'data-garden-version': '9.15.5'
14
14
  }).withConfig({
15
15
  displayName: "StyledTooltipDialogBody",
16
16
  componentId: "sc-132lcoq-0"
package/dist/esm/styled/StyledTooltipDialogClose.js CHANGED
@@ -11,7 +11,7 @@ import { StyledClose } from './StyledClose.js';
11
11
  const COMPONENT_ID$b = 'modals.tooltip_dialog.close';
12
12
  const StyledTooltipDialogClose = styled(StyledClose).attrs({
13
13
  'data-garden-id': COMPONENT_ID$b,
14
- 'data-garden-version': '9.15.3'
14
+ 'data-garden-version': '9.15.5'
15
15
  }).withConfig({
16
16
  displayName: "StyledTooltipDialogClose",
17
17
  componentId: "sc-18xlgfi-0"
package/dist/esm/styled/StyledTooltipDialogFooter.js CHANGED
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID$7 = 'modals.tooltip_dialog.footer';
11
11
  const StyledTooltipDialogFooter = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID$7,
13
- 'data-garden-version': '9.15.3'
13
+ 'data-garden-version': '9.15.5'
14
14
  }).withConfig({
15
15
  displayName: "StyledTooltipDialogFooter",
16
16
  componentId: "sc-kjomsm-0"
package/dist/esm/styled/StyledTooltipDialogFooterItem.js CHANGED
@@ -11,7 +11,7 @@ import { StyledFooterItem } from './StyledFooterItem.js';
11
11
  const COMPONENT_ID$6 = 'modals.tooltip_dialog.footer_item';
12
12
  const StyledTooltipDialogFooterItem = styled(StyledFooterItem).attrs({
13
13
  'data-garden-id': COMPONENT_ID$6,
14
- 'data-garden-version': '9.15.3'
14
+ 'data-garden-version': '9.15.5'
15
15
  }).withConfig({
16
16
  displayName: "StyledTooltipDialogFooterItem",
17
17
  componentId: "sc-u2rmo8-0"
package/dist/esm/styled/StyledTooltipDialogTitle.js CHANGED
@@ -15,7 +15,7 @@ const sizeStyles = props => `
15
15
  `;
16
16
  const StyledTooltipDialogTitle = styled.div.attrs({
17
17
  'data-garden-id': COMPONENT_ID$9,
18
- 'data-garden-version': '9.15.3'
18
+ 'data-garden-version': '9.15.5'
19
19
  }).withConfig({
20
20
  displayName: "StyledTooltipDialogTitle",
21
21
  componentId: "sc-1rceixg-0"
package/dist/index.cjs.js CHANGED
@@ -64,7 +64,7 @@ const animationStyles$1 = props => {
64
64
  };
65
65
  const StyledBackdrop = styled__default.default.div.attrs({
66
66
  'data-garden-id': COMPONENT_ID$j,
67
- 'data-garden-version': '9.15.3'
67
+ 'data-garden-version': '9.15.5'
68
68
  }).withConfig({
69
69
  displayName: "StyledBackdrop",
70
70
  componentId: "sc-mzdjpo-0"
@@ -89,7 +89,7 @@ StyledBackdrop.propTypes = {
89
89
  const COMPONENT_ID$i = 'modals.body';
90
90
  const StyledBody = styled__default.default.div.attrs({
91
91
  'data-garden-id': COMPONENT_ID$i,
92
- 'data-garden-version': '9.15.3'
92
+ 'data-garden-version': '9.15.5'
93
93
  }).withConfig({
94
94
  displayName: "StyledBody",
95
95
  componentId: "sc-14rzecg-0"
@@ -108,7 +108,7 @@ const BASE_MULTIPLIERS$1 = {
108
108
  };
109
109
  const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
110
110
  'data-garden-id': COMPONENT_ID$h,
111
- 'data-garden-version': '9.15.3'
111
+ 'data-garden-version': '9.15.5'
112
112
  }).withConfig({
113
113
  displayName: "StyledClose",
114
114
  componentId: "sc-iseudj-0"
@@ -117,7 +117,7 @@ const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
117
117
  const COMPONENT_ID$g = 'modals.footer';
118
118
  const StyledFooter = styled__default.default.div.attrs({
119
119
  'data-garden-id': COMPONENT_ID$g,
120
- 'data-garden-version': '9.15.3'
120
+ 'data-garden-version': '9.15.5'
121
121
  }).withConfig({
122
122
  displayName: "StyledFooter",
123
123
  componentId: "sc-d8pfdu-0"
@@ -129,7 +129,7 @@ const StyledFooter = styled__default.default.div.attrs({
129
129
  const COMPONENT_ID$f = 'modals.footer_item';
130
130
  const StyledFooterItem = styled__default.default.span.attrs({
131
131
  'data-garden-id': COMPONENT_ID$f,
132
- 'data-garden-version': '9.15.3'
132
+ 'data-garden-version': '9.15.5'
133
133
  }).withConfig({
134
134
  displayName: "StyledFooterItem",
135
135
  componentId: "sc-1mb76hl-0"
@@ -152,7 +152,7 @@ const colorStyles$2 = ({
152
152
  };
153
153
  const StyledHeader = styled__default.default.div.attrs({
154
154
  'data-garden-id': COMPONENT_ID$e,
155
- 'data-garden-version': '9.15.3'
155
+ 'data-garden-version': '9.15.5'
156
156
  }).withConfig({
157
157
  displayName: "StyledHeader",
158
158
  componentId: "sc-1787r9v-0"
@@ -224,7 +224,7 @@ const sizeStyles$2 = props => {
224
224
  };
225
225
  const StyledModal = styled__default.default.div.attrs({
226
226
  'data-garden-id': COMPONENT_ID$d,
227
- 'data-garden-version': '9.15.3'
227
+ 'data-garden-version': '9.15.5'
228
228
  }).withConfig({
229
229
  displayName: "StyledModal",
230
230
  componentId: "sc-1pe1axu-0"
@@ -989,7 +989,7 @@ curry (transparentize);
989
989
  const COMPONENT_ID$c = 'modals.tooltip_dialog.backdrop';
990
990
  const StyledTooltipDialogBackdrop = styled__default.default.div.attrs({
991
991
  'data-garden-id': COMPONENT_ID$c,
992
- 'data-garden-version': '9.15.3'
992
+ 'data-garden-version': '9.15.5'
993
993
  }).withConfig({
994
994
  displayName: "StyledTooltipDialogBackdrop",
995
995
  componentId: "sc-zrk625-0"
@@ -1010,7 +1010,7 @@ const StyledTooltipWrapper = styled__default.default.div.attrs(props => ({
1010
1010
  const COMPONENT_ID$b = 'modals.tooltip_dialog.close';
1011
1011
  const StyledTooltipDialogClose = styled__default.default(StyledClose).attrs({
1012
1012
  'data-garden-id': COMPONENT_ID$b,
1013
- 'data-garden-version': '9.15.3'
1013
+ 'data-garden-version': '9.15.5'
1014
1014
  }).withConfig({
1015
1015
  displayName: "StyledTooltipDialogClose",
1016
1016
  componentId: "sc-18xlgfi-0"
@@ -1020,6 +1020,7 @@ const COMPONENT_ID$a = 'modals.tooltip_dialog';
1020
1020
  const sizeStyles$1 = props => `
1021
1021
  padding: ${props.theme.space.base * 5}px;
1022
1022
  width: 400px;
1023
+ max-width: 100vw;
1023
1024
 
1024
1025
  &:has(${StyledTooltipDialogClose}) > :first-child {
1025
1026
  padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
@@ -1027,7 +1028,7 @@ const sizeStyles$1 = props => `
1027
1028
  `;
1028
1029
  const StyledTooltipDialog = styled__default.default.div.attrs(props => ({
1029
1030
  'data-garden-id': COMPONENT_ID$a,
1030
- 'data-garden-version': '9.15.3',
1031
+ 'data-garden-version': '9.15.5',
1031
1032
  className: props.$isAnimated ? 'is-animated' : undefined
1032
1033
  })).withConfig({
1033
1034
  displayName: "StyledTooltipDialog",
@@ -1036,6 +1037,7 @@ const StyledTooltipDialog = styled__default.default.div.attrs(props => ({
1036
1037
  const computedArrowStyles = reactTheming.arrowStyles(reactTheming.getArrowPosition(props.theme, props.$placement), {
1037
1038
  size: `${props.theme.space.base * 2}px`,
1038
1039
  inset: '1px',
1040
+ shift: `${props.$arrowShift || 0}px`,
1039
1041
  animationModifier: '.is-animated'
1040
1042
  });
1041
1043
  if (props.$isAnimated) {
@@ -1052,7 +1054,7 @@ const sizeStyles = props => `
1052
1054
  `;
1053
1055
  const StyledTooltipDialogTitle = styled__default.default.div.attrs({
1054
1056
  'data-garden-id': COMPONENT_ID$9,
1055
- 'data-garden-version': '9.15.3'
1057
+ 'data-garden-version': '9.15.5'
1056
1058
  }).withConfig({
1057
1059
  displayName: "StyledTooltipDialogTitle",
1058
1060
  componentId: "sc-1rceixg-0"
@@ -1066,7 +1068,7 @@ const StyledTooltipDialogTitle = styled__default.default.div.attrs({
1066
1068
  const COMPONENT_ID$8 = 'modals.tooltip_dialog.body';
1067
1069
  const StyledTooltipDialogBody = styled__default.default.div.attrs({
1068
1070
  'data-garden-id': COMPONENT_ID$8,
1069
- 'data-garden-version': '9.15.3'
1071
+ 'data-garden-version': '9.15.5'
1070
1072
  }).withConfig({
1071
1073
  displayName: "StyledTooltipDialogBody",
1072
1074
  componentId: "sc-132lcoq-0"
@@ -1080,7 +1082,7 @@ const StyledTooltipDialogBody = styled__default.default.div.attrs({
1080
1082
  const COMPONENT_ID$7 = 'modals.tooltip_dialog.footer';
1081
1083
  const StyledTooltipDialogFooter = styled__default.default.div.attrs({
1082
1084
  'data-garden-id': COMPONENT_ID$7,
1083
- 'data-garden-version': '9.15.3'
1085
+ 'data-garden-version': '9.15.5'
1084
1086
  }).withConfig({
1085
1087
  displayName: "StyledTooltipDialogFooter",
1086
1088
  componentId: "sc-kjomsm-0"
@@ -1089,7 +1091,7 @@ const StyledTooltipDialogFooter = styled__default.default.div.attrs({
1089
1091
  const COMPONENT_ID$6 = 'modals.tooltip_dialog.footer_item';
1090
1092
  const StyledTooltipDialogFooterItem = styled__default.default(StyledFooterItem).attrs({
1091
1093
  'data-garden-id': COMPONENT_ID$6,
1092
- 'data-garden-version': '9.15.3'
1094
+ 'data-garden-version': '9.15.5'
1093
1095
  }).withConfig({
1094
1096
  displayName: "StyledTooltipDialogFooterItem",
1095
1097
  componentId: "sc-u2rmo8-0"
@@ -1119,7 +1121,7 @@ const colorStyles = ({
1119
1121
  };
1120
1122
  const StyledDrawer = styled__default.default.div.attrs({
1121
1123
  'data-garden-id': COMPONENT_ID$5,
1122
- 'data-garden-version': '9.15.3'
1124
+ 'data-garden-version': '9.15.5'
1123
1125
  }).withConfig({
1124
1126
  displayName: "StyledDrawer",
1125
1127
  componentId: "sc-zp66t3-0"
@@ -1132,7 +1134,7 @@ const BASE_MULTIPLIERS = {
1132
1134
  };
1133
1135
  const StyledDrawerClose = styled__default.default(StyledClose).attrs({
1134
1136
  'data-garden-id': COMPONENT_ID$4,
1135
- 'data-garden-version': '9.15.3'
1137
+ 'data-garden-version': '9.15.5'
1136
1138
  }).withConfig({
1137
1139
  displayName: "StyledDrawerClose",
1138
1140
  componentId: "sc-1a0xt3x-0"
@@ -1141,7 +1143,7 @@ const StyledDrawerClose = styled__default.default(StyledClose).attrs({
1141
1143
  const COMPONENT_ID$3 = 'modals.drawer_modal.header';
1142
1144
  const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
1143
1145
  'data-garden-id': COMPONENT_ID$3,
1144
- 'data-garden-version': '9.15.3'
1146
+ 'data-garden-version': '9.15.5'
1145
1147
  }).withConfig({
1146
1148
  displayName: "StyledDrawerHeader",
1147
1149
  componentId: "sc-y4mgkj-0"
@@ -1150,7 +1152,7 @@ const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
1150
1152
  const COMPONENT_ID$2 = 'modals.drawer_modal.body';
1151
1153
  const StyledDrawerBody = styled__default.default(StyledBody).attrs({
1152
1154
  'data-garden-id': COMPONENT_ID$2,
1153
- 'data-garden-version': '9.15.3'
1155
+ 'data-garden-version': '9.15.5'
1154
1156
  }).withConfig({
1155
1157
  displayName: "StyledDrawerBody",
1156
1158
  componentId: "sc-13qufyn-0"
@@ -1159,7 +1161,7 @@ const StyledDrawerBody = styled__default.default(StyledBody).attrs({
1159
1161
  const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
1160
1162
  const StyledDrawerFooter = styled__default.default.div.attrs({
1161
1163
  'data-garden-id': COMPONENT_ID$1,
1162
- 'data-garden-version': '9.15.3'
1164
+ 'data-garden-version': '9.15.5'
1163
1165
  }).withConfig({
1164
1166
  displayName: "StyledDrawerFooter",
1165
1167
  componentId: "sc-kc7e6p-0"
@@ -1173,7 +1175,7 @@ const StyledDrawerFooter = styled__default.default.div.attrs({
1173
1175
  const COMPONENT_ID = 'modals.drawer_modal.footer_item';
1174
1176
  const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
1175
1177
  'data-garden-id': COMPONENT_ID,
1176
- 'data-garden-version': '9.15.3'
1178
+ 'data-garden-version': '9.15.5'
1177
1179
  }).withConfig({
1178
1180
  displayName: "StyledDrawerFooterItem",
1179
1181
  componentId: "sc-m2yul4-0"
@@ -1540,6 +1542,7 @@ const TooltipDialogComponent = React__namespace.default.forwardRef(({
1540
1542
  getBackdropProps,
1541
1543
  getModalProps
1542
1544
  } = containerModal.useModal({
1545
+ closeOnBlur: true,
1543
1546
  idPrefix: id,
1544
1547
  onClose: handleClose,
1545
1548
  modalRef,
@@ -1548,9 +1551,11 @@ const TooltipDialogComponent = React__namespace.default.forwardRef(({
1548
1551
  environment
1549
1552
  });
1550
1553
  const [floatingPlacement, fallbackPlacements] = reactTheming.getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement, _fallbackPlacements);
1554
+ const isAutoPlacement = _placement === 'auto';
1551
1555
  const {
1552
1556
  refs,
1553
1557
  placement,
1558
+ middlewareData,
1554
1559
  update,
1555
1560
  floatingStyles: {
1556
1561
  transform
@@ -1565,10 +1570,15 @@ const TooltipDialogComponent = React__namespace.default.forwardRef(({
1565
1570
  floating: floatingElement
1566
1571
  },
1567
1572
  placement: floatingPlacement,
1568
- middleware: [reactDom.offset(_offset === undefined ? theme.space.base * 3 : _offset), _placement === 'auto' ? reactDom.autoPlacement() : reactDom.flip({
1573
+ middleware: [reactDom.offset(_offset === undefined ? theme.space.base * 3 : _offset), isAutoPlacement ? reactDom.autoPlacement() : reactDom.flip({
1569
1574
  fallbackPlacements
1575
+ }), reactDom.shift({
1576
+ mainAxis: true,
1577
+ crossAxis: true
1570
1578
  })]
1571
1579
  });
1580
+ const placementSide = placement.split('-')[0];
1581
+ const arrowShift = placementSide === 'top' || placementSide === 'bottom' ? -(middlewareData.shift?.x || 0) : -(middlewareData.shift?.y || 0);
1572
1582
  React.useEffect(() => {
1573
1583
  let cleanup;
1574
1584
  if (referenceElement && floatingElement && refs.reference.current && refs.floating.current) {
@@ -1634,6 +1644,7 @@ const TooltipDialogComponent = React__namespace.default.forwardRef(({
1634
1644
  }, React__namespace.default.createElement(StyledTooltipDialog, Object.assign({
1635
1645
  $transitionState: transitionState,
1636
1646
  $placement: placement,
1647
+ $arrowShift: arrowShift,
1637
1648
  $hasArrow: hasArrow,
1638
1649
  $isAnimated: isAnimated,
1639
1650
  inert: isHidden ? '' : undefined
package/dist/typings/styled/StyledTooltipDialog.d.ts CHANGED
@@ -8,6 +8,7 @@ import { Placement } from '@floating-ui/react-dom';
8
8
  import { TransitionStatus } from 'react-transition-group';
9
9
  export interface IStyledTooltipDialogProps {
10
10
  $hasArrow?: boolean;
11
+ $arrowShift?: number;
11
12
  $isAnimated?: boolean;
12
13
  $placement: Placement;
13
14
  $transitionState?: TransitionStatus;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-modals",
3
- "version": "9.15.3",
3
+ "version": "9.15.5",
4
4
  "description": "Components relating to modals in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,9 +22,9 @@
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
24
  "@floating-ui/react-dom": "^2.0.0",
25
- "@zendeskgarden/container-modal": "^1.0.24",
25
+ "@zendeskgarden/container-modal": "^2.0.0",
26
26
  "@zendeskgarden/container-utilities": "^2.0.4",
27
- "@zendeskgarden/react-buttons": "^9.15.3",
27
+ "@zendeskgarden/react-buttons": "^9.15.5",
28
28
  "dom-helpers": "^5.1.0",
29
29
  "prop-types": "^15.5.7",
30
30
  "react-merge-refs": "^2.0.0",
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "devDependencies": {
40
40
  "@types/react-transition-group": "4.4.12",
41
- "@zendeskgarden/react-theming": "^9.15.3",
41
+ "@zendeskgarden/react-theming": "^9.15.5",
42
42
  "@zendeskgarden/svg-icons": "7.6.0"
43
43
  },
44
44
  "keywords": [
@@ -51,5 +51,5 @@
51
51
  "access": "public"
52
52
  },
53
53
  "zendeskgarden:src": "src/index.ts",
54
- "gitHead": "3c6ecac2e9b27837fab569d91ef8228ea42c59fb"
54
+ "gitHead": "ddc708be1345889219977ad05438c68bfc458a0f"
55
55
  }