@zendeskgarden/react-modals 9.15.4 → 9.15.6

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 +10 -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 +31 -21
  23. package/dist/typings/styled/StyledTooltipDialog.d.ts +1 -0
  24. package/package.json +4 -4
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';
@@ -87,9 +87,11 @@ const TooltipDialogComponent = React__default.forwardRef(({
87
87
  environment
88
88
  });
89
89
  const [floatingPlacement, fallbackPlacements] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement, _fallbackPlacements);
90
+ const isAutoPlacement = _placement === 'auto';
90
91
  const {
91
92
  refs,
92
93
  placement,
94
+ middlewareData,
93
95
  update,
94
96
  floatingStyles: {
95
97
  transform
@@ -104,10 +106,15 @@ const TooltipDialogComponent = React__default.forwardRef(({
104
106
  floating: floatingElement
105
107
  },
106
108
  placement: floatingPlacement,
107
- 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({
108
110
  fallbackPlacements
111
+ }), shift({
112
+ mainAxis: true,
113
+ crossAxis: true
109
114
  })]
110
115
  });
116
+ const placementSide = placement.split('-')[0];
117
+ const arrowShift = placementSide === 'top' || placementSide === 'bottom' ? -(middlewareData.shift?.x || 0) : -(middlewareData.shift?.y || 0);
111
118
  useEffect(() => {
112
119
  let cleanup;
113
120
  if (referenceElement && floatingElement && refs.reference.current && refs.floating.current) {
@@ -173,6 +180,7 @@ const TooltipDialogComponent = React__default.forwardRef(({
173
180
  }, React__default.createElement(StyledTooltipDialog, Object.assign({
174
181
  $transitionState: transitionState,
175
182
  $placement: placement,
183
+ $arrowShift: arrowShift,
176
184
  $hasArrow: hasArrow,
177
185
  $isAnimated: isAnimated,
178
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.4'
21
+ 'data-garden-version': '9.15.6'
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.4'
13
+ 'data-garden-version': '9.15.6'
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.4'
19
+ 'data-garden-version': '9.15.6'
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.4'
34
+ 'data-garden-version': '9.15.6'
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.4'
14
+ 'data-garden-version': '9.15.6'
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.4'
18
+ 'data-garden-version': '9.15.6'
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.4'
13
+ 'data-garden-version': '9.15.6'
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.4'
14
+ 'data-garden-version': '9.15.6'
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.4'
15
+ 'data-garden-version': '9.15.6'
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.4'
13
+ 'data-garden-version': '9.15.6'
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.4'
13
+ 'data-garden-version': '9.15.6'
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.4'
28
+ 'data-garden-version': '9.15.6'
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.4'
44
+ 'data-garden-version': '9.15.6'
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.4',
23
+ 'data-garden-version': '9.15.6',
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.4'
14
+ 'data-garden-version': '9.15.6'
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.4'
13
+ 'data-garden-version': '9.15.6'
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.4'
14
+ 'data-garden-version': '9.15.6'
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.4'
13
+ 'data-garden-version': '9.15.6'
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.4'
14
+ 'data-garden-version': '9.15.6'
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.4'
18
+ 'data-garden-version': '9.15.6'
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.4'
67
+ 'data-garden-version': '9.15.6'
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.4'
92
+ 'data-garden-version': '9.15.6'
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.4'
111
+ 'data-garden-version': '9.15.6'
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.4'
120
+ 'data-garden-version': '9.15.6'
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.4'
132
+ 'data-garden-version': '9.15.6'
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.4'
155
+ 'data-garden-version': '9.15.6'
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.4'
227
+ 'data-garden-version': '9.15.6'
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.4'
992
+ 'data-garden-version': '9.15.6'
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.4'
1013
+ 'data-garden-version': '9.15.6'
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.4',
1031
+ 'data-garden-version': '9.15.6',
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.4'
1057
+ 'data-garden-version': '9.15.6'
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.4'
1071
+ 'data-garden-version': '9.15.6'
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.4'
1085
+ 'data-garden-version': '9.15.6'
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.4'
1094
+ 'data-garden-version': '9.15.6'
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.4'
1124
+ 'data-garden-version': '9.15.6'
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.4'
1137
+ 'data-garden-version': '9.15.6'
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.4'
1146
+ 'data-garden-version': '9.15.6'
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.4'
1155
+ 'data-garden-version': '9.15.6'
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.4'
1164
+ 'data-garden-version': '9.15.6'
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.4'
1178
+ 'data-garden-version': '9.15.6'
1177
1179
  }).withConfig({
1178
1180
  displayName: "StyledDrawerFooterItem",
1179
1181
  componentId: "sc-m2yul4-0"
@@ -1549,9 +1551,11 @@ const TooltipDialogComponent = React__namespace.default.forwardRef(({
1549
1551
  environment
1550
1552
  });
1551
1553
  const [floatingPlacement, fallbackPlacements] = reactTheming.getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement, _fallbackPlacements);
1554
+ const isAutoPlacement = _placement === 'auto';
1552
1555
  const {
1553
1556
  refs,
1554
1557
  placement,
1558
+ middlewareData,
1555
1559
  update,
1556
1560
  floatingStyles: {
1557
1561
  transform
@@ -1566,10 +1570,15 @@ const TooltipDialogComponent = React__namespace.default.forwardRef(({
1566
1570
  floating: floatingElement
1567
1571
  },
1568
1572
  placement: floatingPlacement,
1569
- 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({
1570
1574
  fallbackPlacements
1575
+ }), reactDom.shift({
1576
+ mainAxis: true,
1577
+ crossAxis: true
1571
1578
  })]
1572
1579
  });
1580
+ const placementSide = placement.split('-')[0];
1581
+ const arrowShift = placementSide === 'top' || placementSide === 'bottom' ? -(middlewareData.shift?.x || 0) : -(middlewareData.shift?.y || 0);
1573
1582
  React.useEffect(() => {
1574
1583
  let cleanup;
1575
1584
  if (referenceElement && floatingElement && refs.reference.current && refs.floating.current) {
@@ -1635,6 +1644,7 @@ const TooltipDialogComponent = React__namespace.default.forwardRef(({
1635
1644
  }, React__namespace.default.createElement(StyledTooltipDialog, Object.assign({
1636
1645
  $transitionState: transitionState,
1637
1646
  $placement: placement,
1647
+ $arrowShift: arrowShift,
1638
1648
  $hasArrow: hasArrow,
1639
1649
  $isAnimated: isAnimated,
1640
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.4",
3
+ "version": "9.15.6",
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>",
@@ -24,7 +24,7 @@
24
24
  "@floating-ui/react-dom": "^2.0.0",
25
25
  "@zendeskgarden/container-modal": "^2.0.0",
26
26
  "@zendeskgarden/container-utilities": "^2.0.4",
27
- "@zendeskgarden/react-buttons": "^9.15.4",
27
+ "@zendeskgarden/react-buttons": "^9.15.6",
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.4",
41
+ "@zendeskgarden/react-theming": "^9.15.6",
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": "90b55c46c1ba44ea9b198e7434a1daeb976824a6"
54
+ "gitHead": "3f69e9346e936577e5551ca06e5f5d67a62ba1b8"
55
55
  }