@zendeskgarden/react-modals 9.12.1 → 9.12.3
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.
- package/dist/esm/elements/Modal.js +2 -1
- package/dist/esm/elements/TooltipDialog/TooltipDialog.js +6 -3
- package/dist/esm/styled/StyledBackdrop.js +1 -1
- package/dist/esm/styled/StyledBody.js +1 -1
- package/dist/esm/styled/StyledClose.js +1 -1
- package/dist/esm/styled/StyledDrawer.js +1 -1
- package/dist/esm/styled/StyledDrawerBody.js +1 -1
- package/dist/esm/styled/StyledDrawerClose.js +1 -1
- package/dist/esm/styled/StyledDrawerFooter.js +1 -1
- package/dist/esm/styled/StyledDrawerFooterItem.js +1 -1
- package/dist/esm/styled/StyledDrawerHeader.js +1 -1
- package/dist/esm/styled/StyledFooter.js +1 -1
- package/dist/esm/styled/StyledFooterItem.js +1 -1
- package/dist/esm/styled/StyledHeader.js +1 -1
- package/dist/esm/styled/StyledModal.js +1 -1
- package/dist/esm/styled/StyledTooltipDialog.js +1 -1
- package/dist/esm/styled/StyledTooltipDialogBackdrop.js +1 -1
- package/dist/esm/styled/StyledTooltipDialogBody.js +1 -1
- package/dist/esm/styled/StyledTooltipDialogClose.js +1 -1
- package/dist/esm/styled/StyledTooltipDialogFooter.js +1 -1
- package/dist/esm/styled/StyledTooltipDialogFooterItem.js +1 -1
- package/dist/esm/styled/StyledTooltipDialogTitle.js +1 -1
- package/dist/index.cjs.js +27 -23
- package/dist/typings/styled/StyledTooltipDialog.d.ts +1 -0
- package/package.json +6 -6
|
@@ -40,7 +40,7 @@ import { Body } from './Body.js';
|
|
|
40
40
|
import { Close } from './Close.js';
|
|
41
41
|
import { Footer } from './Footer.js';
|
|
42
42
|
import { FooterItem } from './FooterItem.js';
|
|
43
|
-
import { DEFAULT_THEME, getFloatingPlacements, useText } from '@zendeskgarden/react-theming';
|
|
43
|
+
import { DEFAULT_THEME, useDocument, getFloatingPlacements, useText } from '@zendeskgarden/react-theming';
|
|
44
44
|
import { createPortal } from 'react-dom';
|
|
45
45
|
|
|
46
46
|
const PLACEMENT_DEFAULT = 'top';
|
|
@@ -63,6 +63,7 @@ const TooltipDialogComponent = React__default.forwardRef((_ref, ref) => {
|
|
|
63
63
|
...props
|
|
64
64
|
} = _ref;
|
|
65
65
|
const theme = useContext(ThemeContext) || DEFAULT_THEME;
|
|
66
|
+
const environment = useDocument(theme);
|
|
66
67
|
const previousReferenceElementRef = useRef();
|
|
67
68
|
const modalRef = useRef(null);
|
|
68
69
|
const transitionRef = useRef(null);
|
|
@@ -79,7 +80,8 @@ const TooltipDialogComponent = React__default.forwardRef((_ref, ref) => {
|
|
|
79
80
|
onClose,
|
|
80
81
|
modalRef,
|
|
81
82
|
focusOnMount,
|
|
82
|
-
restoreFocus: false
|
|
83
|
+
restoreFocus: false,
|
|
84
|
+
environment
|
|
83
85
|
});
|
|
84
86
|
const [floatingPlacement, fallbackPlacements] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement, _fallbackPlacements);
|
|
85
87
|
const {
|
|
@@ -169,7 +171,8 @@ const TooltipDialogComponent = React__default.forwardRef((_ref, ref) => {
|
|
|
169
171
|
$transitionState: transitionState,
|
|
170
172
|
$placement: placement,
|
|
171
173
|
$hasArrow: hasArrow,
|
|
172
|
-
$isAnimated: isAnimated
|
|
174
|
+
$isAnimated: isAnimated,
|
|
175
|
+
inert: isHidden ? '' : undefined
|
|
173
176
|
}, modalProps, ariaProps, props, {
|
|
174
177
|
ref: mergeRefs([modalRef, ref])
|
|
175
178
|
})))));
|
|
@@ -18,7 +18,7 @@ const animationStyles = props => {
|
|
|
18
18
|
};
|
|
19
19
|
const StyledBackdrop = styled.div.attrs({
|
|
20
20
|
'data-garden-id': COMPONENT_ID,
|
|
21
|
-
'data-garden-version': '9.12.
|
|
21
|
+
'data-garden-version': '9.12.3'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledBackdrop",
|
|
24
24
|
componentId: "sc-mzdjpo-0"
|
|
@@ -10,7 +10,7 @@ import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-t
|
|
|
10
10
|
const COMPONENT_ID = 'modals.body';
|
|
11
11
|
const StyledBody = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-version': '9.12.3'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledBody",
|
|
16
16
|
componentId: "sc-14rzecg-0"
|
|
@@ -16,7 +16,7 @@ const BASE_MULTIPLIERS = {
|
|
|
16
16
|
};
|
|
17
17
|
const StyledClose = styled(IconButton).attrs({
|
|
18
18
|
'data-garden-id': COMPONENT_ID,
|
|
19
|
-
'data-garden-version': '9.12.
|
|
19
|
+
'data-garden-version': '9.12.3'
|
|
20
20
|
}).withConfig({
|
|
21
21
|
displayName: "StyledClose",
|
|
22
22
|
componentId: "sc-iseudj-0"
|
|
@@ -32,7 +32,7 @@ const colorStyles = _ref => {
|
|
|
32
32
|
};
|
|
33
33
|
const StyledDrawer = styled.div.attrs({
|
|
34
34
|
'data-garden-id': COMPONENT_ID,
|
|
35
|
-
'data-garden-version': '9.12.
|
|
35
|
+
'data-garden-version': '9.12.3'
|
|
36
36
|
}).withConfig({
|
|
37
37
|
displayName: "StyledDrawer",
|
|
38
38
|
componentId: "sc-zp66t3-0"
|
|
@@ -11,7 +11,7 @@ import { StyledBody } from './StyledBody.js';
|
|
|
11
11
|
const COMPONENT_ID = 'modals.drawer_modal.body';
|
|
12
12
|
const StyledDrawerBody = styled(StyledBody).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.12.
|
|
14
|
+
'data-garden-version': '9.12.3'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledDrawerBody",
|
|
17
17
|
componentId: "sc-13qufyn-0"
|
|
@@ -16,7 +16,7 @@ const BASE_MULTIPLIERS = {
|
|
|
16
16
|
};
|
|
17
17
|
const StyledDrawerClose = styled(StyledClose).attrs({
|
|
18
18
|
'data-garden-id': COMPONENT_ID,
|
|
19
|
-
'data-garden-version': '9.12.
|
|
19
|
+
'data-garden-version': '9.12.3'
|
|
20
20
|
}).withConfig({
|
|
21
21
|
displayName: "StyledDrawerClose",
|
|
22
22
|
componentId: "sc-1a0xt3x-0"
|
|
@@ -10,7 +10,7 @@ import { getColor, componentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'modals.drawer_modal.footer';
|
|
11
11
|
const StyledDrawerFooter = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-version': '9.12.3'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledDrawerFooter",
|
|
16
16
|
componentId: "sc-kc7e6p-0"
|
|
@@ -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.12.
|
|
14
|
+
'data-garden-version': '9.12.3'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledDrawerFooterItem",
|
|
17
17
|
componentId: "sc-m2yul4-0"
|
|
@@ -12,7 +12,7 @@ import { BASE_MULTIPLIERS } from './StyledDrawerClose.js';
|
|
|
12
12
|
const COMPONENT_ID = 'modals.drawer_modal.header';
|
|
13
13
|
const StyledDrawerHeader = styled(StyledHeader).attrs({
|
|
14
14
|
'data-garden-id': COMPONENT_ID,
|
|
15
|
-
'data-garden-version': '9.12.
|
|
15
|
+
'data-garden-version': '9.12.3'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledDrawerHeader",
|
|
18
18
|
componentId: "sc-y4mgkj-0"
|
|
@@ -10,7 +10,7 @@ import { getColor, componentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'modals.footer';
|
|
11
11
|
const StyledFooter = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-version': '9.12.3'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledFooter",
|
|
16
16
|
componentId: "sc-d8pfdu-0"
|
|
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'modals.footer_item';
|
|
11
11
|
const StyledFooterItem = styled.span.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-version': '9.12.3'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledFooterItem",
|
|
16
16
|
componentId: "sc-1mb76hl-0"
|
|
@@ -26,7 +26,7 @@ const colorStyles = _ref => {
|
|
|
26
26
|
};
|
|
27
27
|
const StyledHeader = styled.div.attrs({
|
|
28
28
|
'data-garden-id': COMPONENT_ID,
|
|
29
|
-
'data-garden-version': '9.12.
|
|
29
|
+
'data-garden-version': '9.12.3'
|
|
30
30
|
}).withConfig({
|
|
31
31
|
displayName: "StyledHeader",
|
|
32
32
|
componentId: "sc-1787r9v-0"
|
|
@@ -42,7 +42,7 @@ const sizeStyles = props => {
|
|
|
42
42
|
};
|
|
43
43
|
const StyledModal = styled.div.attrs({
|
|
44
44
|
'data-garden-id': COMPONENT_ID,
|
|
45
|
-
'data-garden-version': '9.12.
|
|
45
|
+
'data-garden-version': '9.12.3'
|
|
46
46
|
}).withConfig({
|
|
47
47
|
displayName: "StyledModal",
|
|
48
48
|
componentId: "sc-1pe1axu-0"
|
|
@@ -19,7 +19,7 @@ const sizeStyles = props => `
|
|
|
19
19
|
`;
|
|
20
20
|
const StyledTooltipDialog = styled.div.attrs(props => ({
|
|
21
21
|
'data-garden-id': COMPONENT_ID,
|
|
22
|
-
'data-garden-version': '9.12.
|
|
22
|
+
'data-garden-version': '9.12.3',
|
|
23
23
|
className: props.$isAnimated ? 'is-animated' : undefined
|
|
24
24
|
})).withConfig({
|
|
25
25
|
displayName: "StyledTooltipDialog",
|
|
@@ -11,7 +11,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
|
|
|
11
11
|
const COMPONENT_ID = 'modals.tooltip_dialog.backdrop';
|
|
12
12
|
const StyledTooltipDialogBackdrop = styled.div.attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.12.
|
|
14
|
+
'data-garden-version': '9.12.3'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledTooltipDialogBackdrop",
|
|
17
17
|
componentId: "sc-zrk625-0"
|
|
@@ -10,7 +10,7 @@ import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-t
|
|
|
10
10
|
const COMPONENT_ID = 'modals.tooltip_dialog.body';
|
|
11
11
|
const StyledTooltipDialogBody = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-version': '9.12.3'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTooltipDialogBody",
|
|
16
16
|
componentId: "sc-132lcoq-0"
|
|
@@ -11,7 +11,7 @@ import { StyledClose } from './StyledClose.js';
|
|
|
11
11
|
const COMPONENT_ID = 'modals.tooltip_dialog.close';
|
|
12
12
|
const StyledTooltipDialogClose = styled(StyledClose).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.12.
|
|
14
|
+
'data-garden-version': '9.12.3'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledTooltipDialogClose",
|
|
17
17
|
componentId: "sc-18xlgfi-0"
|
|
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'modals.tooltip_dialog.footer';
|
|
11
11
|
const StyledTooltipDialogFooter = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-version': '9.12.3'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTooltipDialogFooter",
|
|
16
16
|
componentId: "sc-kjomsm-0"
|
|
@@ -11,7 +11,7 @@ import { StyledFooterItem } from './StyledFooterItem.js';
|
|
|
11
11
|
const COMPONENT_ID = 'modals.tooltip_dialog.footer_item';
|
|
12
12
|
const StyledTooltipDialogFooterItem = styled(StyledFooterItem).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.12.
|
|
14
|
+
'data-garden-version': '9.12.3'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledTooltipDialogFooterItem",
|
|
17
17
|
componentId: "sc-u2rmo8-0"
|
|
@@ -15,7 +15,7 @@ const sizeStyles = props => `
|
|
|
15
15
|
`;
|
|
16
16
|
const StyledTooltipDialogTitle = styled.div.attrs({
|
|
17
17
|
'data-garden-id': COMPONENT_ID,
|
|
18
|
-
'data-garden-version': '9.12.
|
|
18
|
+
'data-garden-version': '9.12.3'
|
|
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.12.
|
|
67
|
+
'data-garden-version': '9.12.3'
|
|
68
68
|
}).withConfig({
|
|
69
69
|
displayName: "StyledBackdrop",
|
|
70
70
|
componentId: "sc-mzdjpo-0"
|
|
@@ -92,7 +92,7 @@ StyledBackdrop.propTypes = {
|
|
|
92
92
|
const COMPONENT_ID$i = 'modals.body';
|
|
93
93
|
const StyledBody = styled__default.default.div.attrs({
|
|
94
94
|
'data-garden-id': COMPONENT_ID$i,
|
|
95
|
-
'data-garden-version': '9.12.
|
|
95
|
+
'data-garden-version': '9.12.3'
|
|
96
96
|
}).withConfig({
|
|
97
97
|
displayName: "StyledBody",
|
|
98
98
|
componentId: "sc-14rzecg-0"
|
|
@@ -114,7 +114,7 @@ const BASE_MULTIPLIERS$1 = {
|
|
|
114
114
|
};
|
|
115
115
|
const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
|
|
116
116
|
'data-garden-id': COMPONENT_ID$h,
|
|
117
|
-
'data-garden-version': '9.12.
|
|
117
|
+
'data-garden-version': '9.12.3'
|
|
118
118
|
}).withConfig({
|
|
119
119
|
displayName: "StyledClose",
|
|
120
120
|
componentId: "sc-iseudj-0"
|
|
@@ -123,7 +123,7 @@ const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
|
|
|
123
123
|
const COMPONENT_ID$g = 'modals.footer';
|
|
124
124
|
const StyledFooter = styled__default.default.div.attrs({
|
|
125
125
|
'data-garden-id': COMPONENT_ID$g,
|
|
126
|
-
'data-garden-version': '9.12.
|
|
126
|
+
'data-garden-version': '9.12.3'
|
|
127
127
|
}).withConfig({
|
|
128
128
|
displayName: "StyledFooter",
|
|
129
129
|
componentId: "sc-d8pfdu-0"
|
|
@@ -135,7 +135,7 @@ const StyledFooter = styled__default.default.div.attrs({
|
|
|
135
135
|
const COMPONENT_ID$f = 'modals.footer_item';
|
|
136
136
|
const StyledFooterItem = styled__default.default.span.attrs({
|
|
137
137
|
'data-garden-id': COMPONENT_ID$f,
|
|
138
|
-
'data-garden-version': '9.12.
|
|
138
|
+
'data-garden-version': '9.12.3'
|
|
139
139
|
}).withConfig({
|
|
140
140
|
displayName: "StyledFooterItem",
|
|
141
141
|
componentId: "sc-1mb76hl-0"
|
|
@@ -159,7 +159,7 @@ const colorStyles$2 = _ref => {
|
|
|
159
159
|
};
|
|
160
160
|
const StyledHeader = styled__default.default.div.attrs({
|
|
161
161
|
'data-garden-id': COMPONENT_ID$e,
|
|
162
|
-
'data-garden-version': '9.12.
|
|
162
|
+
'data-garden-version': '9.12.3'
|
|
163
163
|
}).withConfig({
|
|
164
164
|
displayName: "StyledHeader",
|
|
165
165
|
componentId: "sc-1787r9v-0"
|
|
@@ -232,7 +232,7 @@ const sizeStyles$2 = props => {
|
|
|
232
232
|
};
|
|
233
233
|
const StyledModal = styled__default.default.div.attrs({
|
|
234
234
|
'data-garden-id': COMPONENT_ID$d,
|
|
235
|
-
'data-garden-version': '9.12.
|
|
235
|
+
'data-garden-version': '9.12.3'
|
|
236
236
|
}).withConfig({
|
|
237
237
|
displayName: "StyledModal",
|
|
238
238
|
componentId: "sc-1pe1axu-0"
|
|
@@ -1006,7 +1006,7 @@ curry (transparentize);
|
|
|
1006
1006
|
const COMPONENT_ID$c = 'modals.tooltip_dialog.backdrop';
|
|
1007
1007
|
const StyledTooltipDialogBackdrop = styled__default.default.div.attrs({
|
|
1008
1008
|
'data-garden-id': COMPONENT_ID$c,
|
|
1009
|
-
'data-garden-version': '9.12.
|
|
1009
|
+
'data-garden-version': '9.12.3'
|
|
1010
1010
|
}).withConfig({
|
|
1011
1011
|
displayName: "StyledTooltipDialogBackdrop",
|
|
1012
1012
|
componentId: "sc-zrk625-0"
|
|
@@ -1027,7 +1027,7 @@ const StyledTooltipWrapper = styled__default.default.div.attrs(props => ({
|
|
|
1027
1027
|
const COMPONENT_ID$b = 'modals.tooltip_dialog.close';
|
|
1028
1028
|
const StyledTooltipDialogClose = styled__default.default(StyledClose).attrs({
|
|
1029
1029
|
'data-garden-id': COMPONENT_ID$b,
|
|
1030
|
-
'data-garden-version': '9.12.
|
|
1030
|
+
'data-garden-version': '9.12.3'
|
|
1031
1031
|
}).withConfig({
|
|
1032
1032
|
displayName: "StyledTooltipDialogClose",
|
|
1033
1033
|
componentId: "sc-18xlgfi-0"
|
|
@@ -1044,7 +1044,7 @@ const sizeStyles$1 = props => `
|
|
|
1044
1044
|
`;
|
|
1045
1045
|
const StyledTooltipDialog = styled__default.default.div.attrs(props => ({
|
|
1046
1046
|
'data-garden-id': COMPONENT_ID$a,
|
|
1047
|
-
'data-garden-version': '9.12.
|
|
1047
|
+
'data-garden-version': '9.12.3',
|
|
1048
1048
|
className: props.$isAnimated ? 'is-animated' : undefined
|
|
1049
1049
|
})).withConfig({
|
|
1050
1050
|
displayName: "StyledTooltipDialog",
|
|
@@ -1069,7 +1069,7 @@ const sizeStyles = props => `
|
|
|
1069
1069
|
`;
|
|
1070
1070
|
const StyledTooltipDialogTitle = styled__default.default.div.attrs({
|
|
1071
1071
|
'data-garden-id': COMPONENT_ID$9,
|
|
1072
|
-
'data-garden-version': '9.12.
|
|
1072
|
+
'data-garden-version': '9.12.3'
|
|
1073
1073
|
}).withConfig({
|
|
1074
1074
|
displayName: "StyledTooltipDialogTitle",
|
|
1075
1075
|
componentId: "sc-1rceixg-0"
|
|
@@ -1086,7 +1086,7 @@ const StyledTooltipDialogTitle = styled__default.default.div.attrs({
|
|
|
1086
1086
|
const COMPONENT_ID$8 = 'modals.tooltip_dialog.body';
|
|
1087
1087
|
const StyledTooltipDialogBody = styled__default.default.div.attrs({
|
|
1088
1088
|
'data-garden-id': COMPONENT_ID$8,
|
|
1089
|
-
'data-garden-version': '9.12.
|
|
1089
|
+
'data-garden-version': '9.12.3'
|
|
1090
1090
|
}).withConfig({
|
|
1091
1091
|
displayName: "StyledTooltipDialogBody",
|
|
1092
1092
|
componentId: "sc-132lcoq-0"
|
|
@@ -1103,7 +1103,7 @@ const StyledTooltipDialogBody = styled__default.default.div.attrs({
|
|
|
1103
1103
|
const COMPONENT_ID$7 = 'modals.tooltip_dialog.footer';
|
|
1104
1104
|
const StyledTooltipDialogFooter = styled__default.default.div.attrs({
|
|
1105
1105
|
'data-garden-id': COMPONENT_ID$7,
|
|
1106
|
-
'data-garden-version': '9.12.
|
|
1106
|
+
'data-garden-version': '9.12.3'
|
|
1107
1107
|
}).withConfig({
|
|
1108
1108
|
displayName: "StyledTooltipDialogFooter",
|
|
1109
1109
|
componentId: "sc-kjomsm-0"
|
|
@@ -1112,7 +1112,7 @@ const StyledTooltipDialogFooter = styled__default.default.div.attrs({
|
|
|
1112
1112
|
const COMPONENT_ID$6 = 'modals.tooltip_dialog.footer_item';
|
|
1113
1113
|
const StyledTooltipDialogFooterItem = styled__default.default(StyledFooterItem).attrs({
|
|
1114
1114
|
'data-garden-id': COMPONENT_ID$6,
|
|
1115
|
-
'data-garden-version': '9.12.
|
|
1115
|
+
'data-garden-version': '9.12.3'
|
|
1116
1116
|
}).withConfig({
|
|
1117
1117
|
displayName: "StyledTooltipDialogFooterItem",
|
|
1118
1118
|
componentId: "sc-u2rmo8-0"
|
|
@@ -1143,7 +1143,7 @@ const colorStyles = _ref => {
|
|
|
1143
1143
|
};
|
|
1144
1144
|
const StyledDrawer = styled__default.default.div.attrs({
|
|
1145
1145
|
'data-garden-id': COMPONENT_ID$5,
|
|
1146
|
-
'data-garden-version': '9.12.
|
|
1146
|
+
'data-garden-version': '9.12.3'
|
|
1147
1147
|
}).withConfig({
|
|
1148
1148
|
displayName: "StyledDrawer",
|
|
1149
1149
|
componentId: "sc-zp66t3-0"
|
|
@@ -1157,7 +1157,7 @@ const BASE_MULTIPLIERS = {
|
|
|
1157
1157
|
};
|
|
1158
1158
|
const StyledDrawerClose = styled__default.default(StyledClose).attrs({
|
|
1159
1159
|
'data-garden-id': COMPONENT_ID$4,
|
|
1160
|
-
'data-garden-version': '9.12.
|
|
1160
|
+
'data-garden-version': '9.12.3'
|
|
1161
1161
|
}).withConfig({
|
|
1162
1162
|
displayName: "StyledDrawerClose",
|
|
1163
1163
|
componentId: "sc-1a0xt3x-0"
|
|
@@ -1166,7 +1166,7 @@ const StyledDrawerClose = styled__default.default(StyledClose).attrs({
|
|
|
1166
1166
|
const COMPONENT_ID$3 = 'modals.drawer_modal.header';
|
|
1167
1167
|
const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
|
|
1168
1168
|
'data-garden-id': COMPONENT_ID$3,
|
|
1169
|
-
'data-garden-version': '9.12.
|
|
1169
|
+
'data-garden-version': '9.12.3'
|
|
1170
1170
|
}).withConfig({
|
|
1171
1171
|
displayName: "StyledDrawerHeader",
|
|
1172
1172
|
componentId: "sc-y4mgkj-0"
|
|
@@ -1175,7 +1175,7 @@ const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
|
|
|
1175
1175
|
const COMPONENT_ID$2 = 'modals.drawer_modal.body';
|
|
1176
1176
|
const StyledDrawerBody = styled__default.default(StyledBody).attrs({
|
|
1177
1177
|
'data-garden-id': COMPONENT_ID$2,
|
|
1178
|
-
'data-garden-version': '9.12.
|
|
1178
|
+
'data-garden-version': '9.12.3'
|
|
1179
1179
|
}).withConfig({
|
|
1180
1180
|
displayName: "StyledDrawerBody",
|
|
1181
1181
|
componentId: "sc-13qufyn-0"
|
|
@@ -1184,7 +1184,7 @@ const StyledDrawerBody = styled__default.default(StyledBody).attrs({
|
|
|
1184
1184
|
const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
|
|
1185
1185
|
const StyledDrawerFooter = styled__default.default.div.attrs({
|
|
1186
1186
|
'data-garden-id': COMPONENT_ID$1,
|
|
1187
|
-
'data-garden-version': '9.12.
|
|
1187
|
+
'data-garden-version': '9.12.3'
|
|
1188
1188
|
}).withConfig({
|
|
1189
1189
|
displayName: "StyledDrawerFooter",
|
|
1190
1190
|
componentId: "sc-kc7e6p-0"
|
|
@@ -1201,7 +1201,7 @@ const StyledDrawerFooter = styled__default.default.div.attrs({
|
|
|
1201
1201
|
const COMPONENT_ID = 'modals.drawer_modal.footer_item';
|
|
1202
1202
|
const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
|
|
1203
1203
|
'data-garden-id': COMPONENT_ID,
|
|
1204
|
-
'data-garden-version': '9.12.
|
|
1204
|
+
'data-garden-version': '9.12.3'
|
|
1205
1205
|
}).withConfig({
|
|
1206
1206
|
displayName: "StyledDrawerFooterItem",
|
|
1207
1207
|
componentId: "sc-m2yul4-0"
|
|
@@ -1356,7 +1356,8 @@ const ModalComponent = React.forwardRef((_ref, ref) => {
|
|
|
1356
1356
|
onClose,
|
|
1357
1357
|
modalRef,
|
|
1358
1358
|
focusOnMount,
|
|
1359
|
-
restoreFocus
|
|
1359
|
+
restoreFocus,
|
|
1360
|
+
environment
|
|
1360
1361
|
});
|
|
1361
1362
|
React.useEffect(() => {
|
|
1362
1363
|
if (!environment) {
|
|
@@ -1555,6 +1556,7 @@ const TooltipDialogComponent = React__namespace.default.forwardRef((_ref, ref) =
|
|
|
1555
1556
|
...props
|
|
1556
1557
|
} = _ref;
|
|
1557
1558
|
const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
|
|
1559
|
+
const environment = reactTheming.useDocument(theme);
|
|
1558
1560
|
const previousReferenceElementRef = React.useRef();
|
|
1559
1561
|
const modalRef = React.useRef(null);
|
|
1560
1562
|
const transitionRef = React.useRef(null);
|
|
@@ -1571,7 +1573,8 @@ const TooltipDialogComponent = React__namespace.default.forwardRef((_ref, ref) =
|
|
|
1571
1573
|
onClose,
|
|
1572
1574
|
modalRef,
|
|
1573
1575
|
focusOnMount,
|
|
1574
|
-
restoreFocus: false
|
|
1576
|
+
restoreFocus: false,
|
|
1577
|
+
environment
|
|
1575
1578
|
});
|
|
1576
1579
|
const [floatingPlacement, fallbackPlacements] = reactTheming.getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement, _fallbackPlacements);
|
|
1577
1580
|
const {
|
|
@@ -1661,7 +1664,8 @@ const TooltipDialogComponent = React__namespace.default.forwardRef((_ref, ref) =
|
|
|
1661
1664
|
$transitionState: transitionState,
|
|
1662
1665
|
$placement: placement,
|
|
1663
1666
|
$hasArrow: hasArrow,
|
|
1664
|
-
$isAnimated: isAnimated
|
|
1667
|
+
$isAnimated: isAnimated,
|
|
1668
|
+
inert: isHidden ? '' : undefined
|
|
1665
1669
|
}, modalProps, ariaProps, props, {
|
|
1666
1670
|
ref: reactMergeRefs.mergeRefs([modalRef, ref])
|
|
1667
1671
|
})))));
|
|
@@ -11,6 +11,7 @@ export interface IStyledTooltipDialogProps {
|
|
|
11
11
|
$isAnimated?: boolean;
|
|
12
12
|
$placement: Placement;
|
|
13
13
|
$transitionState?: TransitionStatus;
|
|
14
|
+
inert?: string;
|
|
14
15
|
}
|
|
15
16
|
export declare const StyledTooltipDialog: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
16
17
|
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-modals",
|
|
3
|
-
"version": "9.12.
|
|
3
|
+
"version": "9.12.3",
|
|
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.
|
|
26
|
-
"@zendeskgarden/container-utilities": "^2.0.
|
|
27
|
-
"@zendeskgarden/react-buttons": "^9.12.
|
|
25
|
+
"@zendeskgarden/container-modal": "^1.0.22",
|
|
26
|
+
"@zendeskgarden/container-utilities": "^2.0.4",
|
|
27
|
+
"@zendeskgarden/react-buttons": "^9.12.3",
|
|
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.12.
|
|
41
|
+
"@zendeskgarden/react-theming": "^9.12.3",
|
|
42
42
|
"@zendeskgarden/svg-icons": "7.5.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": "
|
|
54
|
+
"gitHead": "2780bf3aea7009ed84ef10d85e290947d7d8f97e"
|
|
55
55
|
}
|