@zendeskgarden/react-modals 9.0.0-next.25 → 9.0.0-next.26
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/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 +12 -3
- 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 -2
- package/dist/index.cjs.js +54 -47
- package/dist/typings/styled/StyledTooltipDialog.d.ts +2 -1
- package/package.json +4 -4
|
@@ -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.0.0-next.
|
|
21
|
+
'data-garden-version': '9.0.0-next.26'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledBackdrop",
|
|
24
24
|
componentId: "sc-mzdjpo-0"
|
|
@@ -10,7 +10,7 @@ import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden
|
|
|
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.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
19
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
35
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
19
|
+
'data-garden-version': '9.0.0-next.26'
|
|
20
20
|
}).withConfig({
|
|
21
21
|
displayName: "StyledDrawerClose",
|
|
22
22
|
componentId: "sc-1a0xt3x-0"
|
|
@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles } 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.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
15
|
+
'data-garden-version': '9.0.0-next.26'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledDrawerHeader",
|
|
18
18
|
componentId: "sc-y4mgkj-0"
|
|
@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles } 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.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledFooter",
|
|
16
16
|
componentId: "sc-d8pfdu-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } 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.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
29
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
45
|
+
'data-garden-version': '9.0.0-next.26'
|
|
46
46
|
}).withConfig({
|
|
47
47
|
displayName: "StyledModal",
|
|
48
48
|
componentId: "sc-1pe1axu-0"
|
|
@@ -6,16 +6,25 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { arrowStyles, getArrowPosition, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
|
+
import { StyledTooltipDialogClose } from './StyledTooltipDialogClose.js';
|
|
9
10
|
|
|
10
11
|
const COMPONENT_ID = 'modals.tooltip_dialog';
|
|
12
|
+
const sizeStyles = props => `
|
|
13
|
+
padding: ${props.theme.space.base * 5}px;
|
|
14
|
+
width: 400px;
|
|
15
|
+
|
|
16
|
+
&:has(${StyledTooltipDialogClose}) > :first-child {
|
|
17
|
+
padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
|
|
18
|
+
}
|
|
19
|
+
`;
|
|
11
20
|
const StyledTooltipDialog = styled.div.attrs(props => ({
|
|
12
21
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
22
|
+
'data-garden-version': '9.0.0-next.26',
|
|
14
23
|
className: props.isAnimated && 'is-animated'
|
|
15
24
|
})).withConfig({
|
|
16
25
|
displayName: "StyledTooltipDialog",
|
|
17
26
|
componentId: "sc-iv3db-0"
|
|
18
|
-
})(["
|
|
27
|
+
})(["", ";", " ", ";"], props => {
|
|
19
28
|
const computedArrowStyles = arrowStyles(getArrowPosition(props.theme, props.placement), {
|
|
20
29
|
size: `${props.theme.space.base * 2}px`,
|
|
21
30
|
inset: '1px',
|
|
@@ -25,6 +34,6 @@ const StyledTooltipDialog = styled.div.attrs(props => ({
|
|
|
25
34
|
return props.hasArrow && props.transitionState === 'entered' && computedArrowStyles;
|
|
26
35
|
}
|
|
27
36
|
return props.hasArrow && computedArrowStyles;
|
|
28
|
-
}, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
37
|
+
}, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
29
38
|
|
|
30
39
|
export { StyledTooltipDialog };
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'modals.tooltip_dialog.backdrop';
|
|
11
11
|
const StyledTooltipDialogBackdrop = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTooltipDialogBackdrop",
|
|
16
16
|
componentId: "sc-zrk625-0"
|
|
@@ -10,7 +10,7 @@ import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden
|
|
|
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.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledTooltipDialogClose",
|
|
17
17
|
componentId: "sc-18xlgfi-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } 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.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledTooltipDialogFooterItem",
|
|
17
17
|
componentId: "sc-u2rmo8-0"
|
|
@@ -10,13 +10,12 @@ import { getColor, retrieveComponentStyles, getLineHeight } from '@zendeskgarden
|
|
|
10
10
|
const COMPONENT_ID = 'modals.tooltip_dialog.title';
|
|
11
11
|
const sizeStyles = props => `
|
|
12
12
|
/* stylelint-disable-next-line property-no-unknown */
|
|
13
|
-
padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
|
|
14
13
|
line-height: ${getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
|
|
15
14
|
font-size: ${props.theme.fontSizes.md};
|
|
16
15
|
`;
|
|
17
16
|
const StyledTooltipDialogTitle = styled.div.attrs({
|
|
18
17
|
'data-garden-id': COMPONENT_ID,
|
|
19
|
-
'data-garden-version': '9.0.0-next.
|
|
18
|
+
'data-garden-version': '9.0.0-next.26'
|
|
20
19
|
}).withConfig({
|
|
21
20
|
displayName: "StyledTooltipDialogTitle",
|
|
22
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.0.0-next.
|
|
67
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
95
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
117
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
126
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
138
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
162
|
+
'data-garden-version': '9.0.0-next.26'
|
|
163
163
|
}).withConfig({
|
|
164
164
|
displayName: "StyledHeader",
|
|
165
165
|
componentId: "sc-1787r9v-0"
|
|
@@ -227,16 +227,16 @@ const colorStyles$1 = _ref => {
|
|
|
227
227
|
});
|
|
228
228
|
return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";"], borderColor, shadow, backgroundColor);
|
|
229
229
|
};
|
|
230
|
-
const sizeStyles$
|
|
230
|
+
const sizeStyles$2 = props => {
|
|
231
231
|
return styled.css(["", "{width:", ";}"], reactTheming.mediaQuery('up', props.isLarge ? 'md' : 'sm', props.theme), props.isLarge ? props.theme.breakpoints.md : props.theme.breakpoints.sm);
|
|
232
232
|
};
|
|
233
233
|
const StyledModal = styled__default.default.div.attrs({
|
|
234
234
|
'data-garden-id': COMPONENT_ID$d,
|
|
235
|
-
'data-garden-version': '9.0.0-next.
|
|
235
|
+
'data-garden-version': '9.0.0-next.26'
|
|
236
236
|
}).withConfig({
|
|
237
237
|
displayName: "StyledModal",
|
|
238
238
|
componentId: "sc-1pe1axu-0"
|
|
239
|
-
})(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border:", ";border-radius:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$
|
|
239
|
+
})(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border:", ";border-radius:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$2, colorStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
|
|
240
240
|
StyledModal.propTypes = {
|
|
241
241
|
isLarge: PropTypes__default.default.bool,
|
|
242
242
|
isAnimated: PropTypes__default.default.bool
|
|
@@ -245,7 +245,7 @@ StyledModal.propTypes = {
|
|
|
245
245
|
const COMPONENT_ID$c = 'modals.tooltip_dialog.backdrop';
|
|
246
246
|
const StyledTooltipDialogBackdrop = styled__default.default.div.attrs({
|
|
247
247
|
'data-garden-id': COMPONENT_ID$c,
|
|
248
|
-
'data-garden-version': '9.0.0-next.
|
|
248
|
+
'data-garden-version': '9.0.0-next.26'
|
|
249
249
|
}).withConfig({
|
|
250
250
|
displayName: "StyledTooltipDialogBackdrop",
|
|
251
251
|
componentId: "sc-zrk625-0"
|
|
@@ -263,15 +263,32 @@ const StyledTooltipWrapper = styled__default.default.div.attrs(props => ({
|
|
|
263
263
|
animationModifier: '.is-animated'
|
|
264
264
|
}));
|
|
265
265
|
|
|
266
|
-
const COMPONENT_ID$b = 'modals.tooltip_dialog';
|
|
267
|
-
const
|
|
266
|
+
const COMPONENT_ID$b = 'modals.tooltip_dialog.close';
|
|
267
|
+
const StyledTooltipDialogClose = styled__default.default(StyledClose).attrs({
|
|
268
268
|
'data-garden-id': COMPONENT_ID$b,
|
|
269
|
-
'data-garden-version': '9.0.0-next.
|
|
269
|
+
'data-garden-version': '9.0.0-next.26'
|
|
270
|
+
}).withConfig({
|
|
271
|
+
displayName: "StyledTooltipDialogClose",
|
|
272
|
+
componentId: "sc-18xlgfi-0"
|
|
273
|
+
})(["top:", "px;", ":", ";", ";"], props => props.theme.space.base * 3.5, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * 3}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
|
|
274
|
+
|
|
275
|
+
const COMPONENT_ID$a = 'modals.tooltip_dialog';
|
|
276
|
+
const sizeStyles$1 = props => `
|
|
277
|
+
padding: ${props.theme.space.base * 5}px;
|
|
278
|
+
width: 400px;
|
|
279
|
+
|
|
280
|
+
&:has(${StyledTooltipDialogClose}) > :first-child {
|
|
281
|
+
padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
|
|
282
|
+
}
|
|
283
|
+
`;
|
|
284
|
+
const StyledTooltipDialog = styled__default.default.div.attrs(props => ({
|
|
285
|
+
'data-garden-id': COMPONENT_ID$a,
|
|
286
|
+
'data-garden-version': '9.0.0-next.26',
|
|
270
287
|
className: props.isAnimated && 'is-animated'
|
|
271
288
|
})).withConfig({
|
|
272
289
|
displayName: "StyledTooltipDialog",
|
|
273
290
|
componentId: "sc-iv3db-0"
|
|
274
|
-
})(["
|
|
291
|
+
})(["", ";", " ", ";"], props => {
|
|
275
292
|
const computedArrowStyles = reactTheming.arrowStyles(reactTheming.getArrowPosition(props.theme, props.placement), {
|
|
276
293
|
size: `${props.theme.space.base * 2}px`,
|
|
277
294
|
inset: '1px',
|
|
@@ -281,18 +298,17 @@ const StyledTooltipDialog = styled__default.default.div.attrs(props => ({
|
|
|
281
298
|
return props.hasArrow && props.transitionState === 'entered' && computedArrowStyles;
|
|
282
299
|
}
|
|
283
300
|
return props.hasArrow && computedArrowStyles;
|
|
284
|
-
}, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$
|
|
301
|
+
}, sizeStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
|
|
285
302
|
|
|
286
|
-
const COMPONENT_ID$
|
|
303
|
+
const COMPONENT_ID$9 = 'modals.tooltip_dialog.title';
|
|
287
304
|
const sizeStyles = props => `
|
|
288
305
|
/* stylelint-disable-next-line property-no-unknown */
|
|
289
|
-
padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
|
|
290
306
|
line-height: ${reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
|
|
291
307
|
font-size: ${props.theme.fontSizes.md};
|
|
292
308
|
`;
|
|
293
309
|
const StyledTooltipDialogTitle = styled__default.default.div.attrs({
|
|
294
|
-
'data-garden-id': COMPONENT_ID$
|
|
295
|
-
'data-garden-version': '9.0.0-next.
|
|
310
|
+
'data-garden-id': COMPONENT_ID$9,
|
|
311
|
+
'data-garden-version': '9.0.0-next.26'
|
|
296
312
|
}).withConfig({
|
|
297
313
|
displayName: "StyledTooltipDialogTitle",
|
|
298
314
|
componentId: "sc-1rceixg-0"
|
|
@@ -304,12 +320,12 @@ const StyledTooltipDialogTitle = styled__default.default.div.attrs({
|
|
|
304
320
|
variable: 'foreground.default',
|
|
305
321
|
theme
|
|
306
322
|
});
|
|
307
|
-
}, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$
|
|
323
|
+
}, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
|
|
308
324
|
|
|
309
|
-
const COMPONENT_ID$
|
|
325
|
+
const COMPONENT_ID$8 = 'modals.tooltip_dialog.body';
|
|
310
326
|
const StyledTooltipDialogBody = styled__default.default.div.attrs({
|
|
311
|
-
'data-garden-id': COMPONENT_ID$
|
|
312
|
-
'data-garden-version': '9.0.0-next.
|
|
327
|
+
'data-garden-id': COMPONENT_ID$8,
|
|
328
|
+
'data-garden-version': '9.0.0-next.26'
|
|
313
329
|
}).withConfig({
|
|
314
330
|
displayName: "StyledTooltipDialogBody",
|
|
315
331
|
componentId: "sc-132lcoq-0"
|
|
@@ -321,34 +337,25 @@ const StyledTooltipDialogBody = styled__default.default.div.attrs({
|
|
|
321
337
|
variable: 'foreground.default',
|
|
322
338
|
theme
|
|
323
339
|
});
|
|
324
|
-
}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$
|
|
340
|
+
}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
|
|
325
341
|
|
|
326
|
-
const COMPONENT_ID$
|
|
342
|
+
const COMPONENT_ID$7 = 'modals.tooltip_dialog.footer';
|
|
327
343
|
const StyledTooltipDialogFooter = styled__default.default.div.attrs({
|
|
328
|
-
'data-garden-id': COMPONENT_ID$
|
|
329
|
-
'data-garden-version': '9.0.0-next.
|
|
344
|
+
'data-garden-id': COMPONENT_ID$7,
|
|
345
|
+
'data-garden-version': '9.0.0-next.26'
|
|
330
346
|
}).withConfig({
|
|
331
347
|
displayName: "StyledTooltipDialogFooter",
|
|
332
348
|
componentId: "sc-kjomsm-0"
|
|
333
|
-
})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:", "px;", ";"], p => p.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$
|
|
349
|
+
})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:", "px;", ";"], p => p.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
334
350
|
|
|
335
|
-
const COMPONENT_ID$
|
|
351
|
+
const COMPONENT_ID$6 = 'modals.tooltip_dialog.footer_item';
|
|
336
352
|
const StyledTooltipDialogFooterItem = styled__default.default(StyledFooterItem).attrs({
|
|
337
|
-
'data-garden-id': COMPONENT_ID$
|
|
338
|
-
'data-garden-version': '9.0.0-next.
|
|
353
|
+
'data-garden-id': COMPONENT_ID$6,
|
|
354
|
+
'data-garden-version': '9.0.0-next.26'
|
|
339
355
|
}).withConfig({
|
|
340
356
|
displayName: "StyledTooltipDialogFooterItem",
|
|
341
357
|
componentId: "sc-u2rmo8-0"
|
|
342
|
-
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$
|
|
343
|
-
|
|
344
|
-
const COMPONENT_ID$6 = 'modals.tooltip_dialog.close';
|
|
345
|
-
const StyledTooltipDialogClose = styled__default.default(StyledClose).attrs({
|
|
346
|
-
'data-garden-id': COMPONENT_ID$6,
|
|
347
|
-
'data-garden-version': '9.0.0-next.25'
|
|
348
|
-
}).withConfig({
|
|
349
|
-
displayName: "StyledTooltipDialogClose",
|
|
350
|
-
componentId: "sc-18xlgfi-0"
|
|
351
|
-
})(["top:", "px;", ":", ";", ";"], props => props.theme.space.base * 3.5, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * 3}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
|
|
358
|
+
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
|
|
352
359
|
|
|
353
360
|
const COMPONENT_ID$5 = 'modals.drawer_modal';
|
|
354
361
|
const DRAWER_WIDTH = 380;
|
|
@@ -375,7 +382,7 @@ const colorStyles = _ref => {
|
|
|
375
382
|
};
|
|
376
383
|
const StyledDrawer = styled__default.default.div.attrs({
|
|
377
384
|
'data-garden-id': COMPONENT_ID$5,
|
|
378
|
-
'data-garden-version': '9.0.0-next.
|
|
385
|
+
'data-garden-version': '9.0.0-next.26'
|
|
379
386
|
}).withConfig({
|
|
380
387
|
displayName: "StyledDrawer",
|
|
381
388
|
componentId: "sc-zp66t3-0"
|
|
@@ -389,7 +396,7 @@ const BASE_MULTIPLIERS = {
|
|
|
389
396
|
};
|
|
390
397
|
const StyledDrawerClose = styled__default.default(StyledClose).attrs({
|
|
391
398
|
'data-garden-id': COMPONENT_ID$4,
|
|
392
|
-
'data-garden-version': '9.0.0-next.
|
|
399
|
+
'data-garden-version': '9.0.0-next.26'
|
|
393
400
|
}).withConfig({
|
|
394
401
|
displayName: "StyledDrawerClose",
|
|
395
402
|
componentId: "sc-1a0xt3x-0"
|
|
@@ -398,7 +405,7 @@ const StyledDrawerClose = styled__default.default(StyledClose).attrs({
|
|
|
398
405
|
const COMPONENT_ID$3 = 'modals.drawer_modal.header';
|
|
399
406
|
const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
|
|
400
407
|
'data-garden-id': COMPONENT_ID$3,
|
|
401
|
-
'data-garden-version': '9.0.0-next.
|
|
408
|
+
'data-garden-version': '9.0.0-next.26'
|
|
402
409
|
}).withConfig({
|
|
403
410
|
displayName: "StyledDrawerHeader",
|
|
404
411
|
componentId: "sc-y4mgkj-0"
|
|
@@ -407,7 +414,7 @@ const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
|
|
|
407
414
|
const COMPONENT_ID$2 = 'modals.drawer_modal.body';
|
|
408
415
|
const StyledDrawerBody = styled__default.default(StyledBody).attrs({
|
|
409
416
|
'data-garden-id': COMPONENT_ID$2,
|
|
410
|
-
'data-garden-version': '9.0.0-next.
|
|
417
|
+
'data-garden-version': '9.0.0-next.26'
|
|
411
418
|
}).withConfig({
|
|
412
419
|
displayName: "StyledDrawerBody",
|
|
413
420
|
componentId: "sc-13qufyn-0"
|
|
@@ -416,7 +423,7 @@ const StyledDrawerBody = styled__default.default(StyledBody).attrs({
|
|
|
416
423
|
const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
|
|
417
424
|
const StyledDrawerFooter = styled__default.default.div.attrs({
|
|
418
425
|
'data-garden-id': COMPONENT_ID$1,
|
|
419
|
-
'data-garden-version': '9.0.0-next.
|
|
426
|
+
'data-garden-version': '9.0.0-next.26'
|
|
420
427
|
}).withConfig({
|
|
421
428
|
displayName: "StyledDrawerFooter",
|
|
422
429
|
componentId: "sc-kc7e6p-0"
|
|
@@ -433,7 +440,7 @@ const StyledDrawerFooter = styled__default.default.div.attrs({
|
|
|
433
440
|
const COMPONENT_ID = 'modals.drawer_modal.footer_item';
|
|
434
441
|
const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
|
|
435
442
|
'data-garden-id': COMPONENT_ID,
|
|
436
|
-
'data-garden-version': '9.0.0-next.
|
|
443
|
+
'data-garden-version': '9.0.0-next.26'
|
|
437
444
|
}).withConfig({
|
|
438
445
|
displayName: "StyledDrawerFooterItem",
|
|
439
446
|
componentId: "sc-m2yul4-0"
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
+
import { DefaultTheme } from 'styled-components';
|
|
7
8
|
import { Placement } from '@floating-ui/react-dom';
|
|
8
9
|
import { TransitionStatus } from 'react-transition-group';
|
|
9
10
|
import { ITooltipDialogProps } from '../types';
|
|
@@ -11,4 +12,4 @@ export interface IStyledTooltipDialogProps extends Pick<ITooltipDialogProps, 'ha
|
|
|
11
12
|
placement: Placement;
|
|
12
13
|
transitionState?: TransitionStatus;
|
|
13
14
|
}
|
|
14
|
-
export declare const StyledTooltipDialog: import("styled-components").StyledComponent<"div",
|
|
15
|
+
export declare const StyledTooltipDialog: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledTooltipDialogProps, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-modals",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.26",
|
|
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": "^1.0.15",
|
|
26
26
|
"@zendeskgarden/container-utilities": "^2.0.0",
|
|
27
|
-
"@zendeskgarden/react-buttons": "^9.0.0-next.
|
|
27
|
+
"@zendeskgarden/react-buttons": "^9.0.0-next.26",
|
|
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.11",
|
|
41
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
41
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.26",
|
|
42
42
|
"@zendeskgarden/svg-icons": "7.2.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": "049dd7bd143029147de333f78bd879dc7d7251f2"
|
|
55
55
|
}
|