@zendeskgarden/react-modals 9.0.0-next.9 → 9.1.0
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/README.md +11 -11
- package/dist/esm/elements/Body.js +8 -8
- package/dist/esm/elements/Close.js +8 -8
- package/dist/esm/elements/Drawer/Body.js +7 -7
- package/dist/esm/elements/Drawer/Close.js +7 -7
- package/dist/esm/elements/Drawer/Drawer.js +8 -8
- package/dist/esm/elements/Drawer/Footer.js +7 -7
- package/dist/esm/elements/Drawer/FooterItem.js +7 -7
- package/dist/esm/elements/Drawer/Header.js +7 -7
- package/dist/esm/elements/Footer.js +8 -8
- package/dist/esm/elements/FooterItem.js +8 -8
- package/dist/esm/elements/Header.js +9 -9
- package/dist/esm/elements/Modal.js +8 -8
- package/dist/esm/elements/{TooltipModal → TooltipDialog}/Body.js +11 -11
- package/dist/esm/elements/{TooltipModal → TooltipDialog}/Close.js +13 -12
- package/dist/esm/elements/{TooltipModal → TooltipDialog}/Footer.js +9 -9
- package/dist/esm/elements/{TooltipModal → TooltipDialog}/FooterItem.js +9 -9
- package/dist/esm/elements/{TooltipModal → TooltipDialog}/Title.js +11 -11
- package/dist/esm/elements/{TooltipModal/TooltipModal.js → TooltipDialog/TooltipDialog.js} +25 -24
- package/dist/esm/index.js +1 -1
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js +1 -1
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js +1 -1
- package/dist/esm/styled/StyledBackdrop.js +18 -6
- package/dist/esm/styled/StyledBody.js +11 -6
- package/dist/esm/styled/StyledClose.js +6 -18
- package/dist/esm/styled/StyledDangerIcon.js +0 -4
- package/dist/esm/styled/StyledDrawer.js +23 -18
- package/dist/esm/styled/StyledDrawerBody.js +3 -6
- package/dist/esm/styled/StyledDrawerClose.js +2 -5
- package/dist/esm/styled/StyledDrawerFooter.js +11 -6
- package/dist/esm/styled/StyledDrawerFooterItem.js +2 -5
- package/dist/esm/styled/StyledDrawerHeader.js +2 -5
- package/dist/esm/styled/StyledFooter.js +6 -6
- package/dist/esm/styled/StyledFooterItem.js +2 -5
- package/dist/esm/styled/StyledHeader.js +19 -7
- package/dist/esm/styled/StyledModal.js +22 -17
- package/dist/esm/styled/StyledTooltipDialog.js +39 -0
- package/dist/esm/styled/{StyledTooltipModalBackdrop.js → StyledTooltipDialogBackdrop.js} +7 -10
- package/dist/esm/styled/StyledTooltipDialogBody.js +27 -0
- package/dist/esm/styled/StyledTooltipDialogClose.js +20 -0
- package/dist/esm/styled/{StyledTooltipModalFooter.js → StyledTooltipDialogFooter.js} +7 -10
- package/dist/esm/styled/StyledTooltipDialogFooterItem.js +20 -0
- package/dist/esm/styled/StyledTooltipDialogTitle.js +32 -0
- package/dist/esm/styled/StyledTooltipWrapper.js +1 -4
- package/dist/esm/utils/useTooltipDialogContext.js +18 -0
- package/dist/index.cjs.js +227 -212
- package/dist/typings/elements/Drawer/Drawer.d.ts +10 -1
- package/dist/typings/elements/Modal.d.ts +1 -1
- package/dist/typings/elements/{TooltipModal → TooltipDialog}/Title.d.ts +2 -2
- package/dist/typings/elements/{TooltipModal/TooltipModal.d.ts → TooltipDialog/TooltipDialog.d.ts} +4 -2
- package/dist/typings/index.d.ts +2 -2
- package/dist/typings/styled/StyledClose.d.ts +1 -5
- package/dist/typings/styled/StyledDrawerClose.d.ts +1 -1
- package/dist/typings/styled/StyledHeader.d.ts +2 -1
- package/dist/typings/styled/{StyledTooltipModal.d.ts → StyledTooltipDialog.d.ts} +4 -3
- package/dist/typings/styled/{StyledTooltipModalBackdrop.d.ts → StyledTooltipDialogBackdrop.d.ts} +1 -1
- package/dist/typings/styled/{StyledTooltipModalBody.d.ts → StyledTooltipDialogBody.d.ts} +1 -1
- package/dist/typings/styled/{StyledTooltipModalClose.d.ts → StyledTooltipDialogClose.d.ts} +1 -1
- package/dist/typings/styled/{StyledTooltipModalFooter.d.ts → StyledTooltipDialogFooter.d.ts} +1 -1
- package/dist/typings/styled/{StyledTooltipModalFooterItem.d.ts → StyledTooltipDialogFooterItem.d.ts} +1 -1
- package/dist/typings/styled/{StyledTooltipModalTitle.d.ts → StyledTooltipDialogTitle.d.ts} +1 -1
- package/dist/typings/styled/StyledTooltipWrapper.d.ts +2 -2
- package/dist/typings/styled/index.d.ts +7 -7
- package/dist/typings/types/index.d.ts +4 -2
- package/dist/typings/utils/useModalContext.d.ts +0 -1
- package/dist/typings/utils/{useTooltipModalContext.d.ts → useTooltipDialogContext.d.ts} +2 -3
- package/package.json +9 -8
- package/dist/esm/styled/StyledTooltipModal.js +0 -33
- package/dist/esm/styled/StyledTooltipModalBody.js +0 -22
- package/dist/esm/styled/StyledTooltipModalClose.js +0 -23
- package/dist/esm/styled/StyledTooltipModalFooterItem.js +0 -23
- package/dist/esm/styled/StyledTooltipModalTitle.js +0 -28
- package/dist/esm/utils/useTooltipModalContext.js +0 -18
- /package/dist/typings/elements/{TooltipModal → TooltipDialog}/Body.d.ts +0 -0
- /package/dist/typings/elements/{TooltipModal → TooltipDialog}/Close.d.ts +0 -0
- /package/dist/typings/elements/{TooltipModal → TooltipDialog}/Footer.d.ts +0 -0
- /package/dist/typings/elements/{TooltipModal → TooltipDialog}/FooterItem.d.ts +0 -0
package/README.md
CHANGED
|
@@ -67,11 +67,11 @@ const [isOpen, setIsOpen] = useState(false)
|
|
|
67
67
|
</ThemeProvider>
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
-
###
|
|
70
|
+
### TooltipDialog
|
|
71
71
|
|
|
72
72
|
```jsx
|
|
73
73
|
import { ThemeProvider } from '@zendeskgarden/react-theming';
|
|
74
|
-
import {
|
|
74
|
+
import { TooltipDialog } from '@zendeskgarden/react-modals';
|
|
75
75
|
import { Button } from '@zendeskgarden/react-buttons';
|
|
76
76
|
|
|
77
77
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -81,18 +81,18 @@ const buttonRef = useRef(null);
|
|
|
81
81
|
<Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
|
|
82
82
|
Open
|
|
83
83
|
</Button>
|
|
84
|
-
<
|
|
84
|
+
<TooltipDialog
|
|
85
85
|
onClose={() => setIsOpen(false)}
|
|
86
86
|
referenceElement={isOpen && buttonRef.current ? buttonRef.current : undefined}
|
|
87
87
|
>
|
|
88
|
-
<
|
|
89
|
-
<
|
|
90
|
-
<
|
|
91
|
-
<
|
|
88
|
+
<TooltipDialog.Title>Example Title</TooltipDialog.Title>
|
|
89
|
+
<TooltipDialog.Body>Some content</TooltipDialog.Body>
|
|
90
|
+
<TooltipDialog.Footer>
|
|
91
|
+
<TooltipDialog.FooterItem>
|
|
92
92
|
<Button>Click</Button>
|
|
93
|
-
</
|
|
94
|
-
</
|
|
95
|
-
<
|
|
96
|
-
</
|
|
93
|
+
</TooltipDialog.FooterItem>
|
|
94
|
+
</TooltipDialog.Footer>
|
|
95
|
+
<TooltipDialog.Close aria-label="Close" />
|
|
96
|
+
</TooltipDialog>
|
|
97
97
|
</ThemeProvider>;
|
|
98
98
|
```
|
|
@@ -13,14 +13,14 @@ import '../styled/StyledFooterItem.js';
|
|
|
13
13
|
import '../styled/StyledHeader.js';
|
|
14
14
|
import '../styled/StyledDangerIcon.js';
|
|
15
15
|
import '../styled/StyledModal.js';
|
|
16
|
-
import '../styled/
|
|
16
|
+
import '../styled/StyledTooltipDialogBackdrop.js';
|
|
17
17
|
import '../styled/StyledTooltipWrapper.js';
|
|
18
|
-
import '../styled/
|
|
19
|
-
import '../styled/
|
|
20
|
-
import '../styled/
|
|
21
|
-
import '../styled/
|
|
22
|
-
import '../styled/
|
|
23
|
-
import '../styled/
|
|
18
|
+
import '../styled/StyledTooltipDialog.js';
|
|
19
|
+
import '../styled/StyledTooltipDialogTitle.js';
|
|
20
|
+
import '../styled/StyledTooltipDialogBody.js';
|
|
21
|
+
import '../styled/StyledTooltipDialogFooter.js';
|
|
22
|
+
import '../styled/StyledTooltipDialogFooterItem.js';
|
|
23
|
+
import '../styled/StyledTooltipDialogClose.js';
|
|
24
24
|
import '../styled/StyledDrawer.js';
|
|
25
25
|
import '../styled/StyledDrawerHeader.js';
|
|
26
26
|
import '../styled/StyledDrawerClose.js';
|
|
@@ -37,6 +37,6 @@ const Body = forwardRef((props, ref) => {
|
|
|
37
37
|
ref: ref
|
|
38
38
|
}));
|
|
39
39
|
});
|
|
40
|
-
Body.displayName = 'Body';
|
|
40
|
+
Body.displayName = 'Modal.Body';
|
|
41
41
|
|
|
42
42
|
export { Body };
|
|
@@ -13,14 +13,14 @@ import '../styled/StyledFooterItem.js';
|
|
|
13
13
|
import '../styled/StyledHeader.js';
|
|
14
14
|
import '../styled/StyledDangerIcon.js';
|
|
15
15
|
import '../styled/StyledModal.js';
|
|
16
|
-
import '../styled/
|
|
16
|
+
import '../styled/StyledTooltipDialogBackdrop.js';
|
|
17
17
|
import '../styled/StyledTooltipWrapper.js';
|
|
18
|
-
import '../styled/
|
|
19
|
-
import '../styled/
|
|
20
|
-
import '../styled/
|
|
21
|
-
import '../styled/
|
|
22
|
-
import '../styled/
|
|
23
|
-
import '../styled/
|
|
18
|
+
import '../styled/StyledTooltipDialog.js';
|
|
19
|
+
import '../styled/StyledTooltipDialogTitle.js';
|
|
20
|
+
import '../styled/StyledTooltipDialogBody.js';
|
|
21
|
+
import '../styled/StyledTooltipDialogFooter.js';
|
|
22
|
+
import '../styled/StyledTooltipDialogFooterItem.js';
|
|
23
|
+
import '../styled/StyledTooltipDialogClose.js';
|
|
24
24
|
import '../styled/StyledDrawer.js';
|
|
25
25
|
import '../styled/StyledDrawerHeader.js';
|
|
26
26
|
import '../styled/StyledDrawerClose.js';
|
|
@@ -48,6 +48,6 @@ const Close = forwardRef((props, ref) => {
|
|
|
48
48
|
ref: ref
|
|
49
49
|
}), React__default.createElement(SvgXStroke, null));
|
|
50
50
|
});
|
|
51
|
-
Close.displayName = 'Close';
|
|
51
|
+
Close.displayName = 'Modal.Close';
|
|
52
52
|
|
|
53
53
|
export { Close };
|
|
@@ -14,14 +14,14 @@ import '../../styled/StyledFooterItem.js';
|
|
|
14
14
|
import '../../styled/StyledHeader.js';
|
|
15
15
|
import '../../styled/StyledDangerIcon.js';
|
|
16
16
|
import '../../styled/StyledModal.js';
|
|
17
|
-
import '../../styled/
|
|
17
|
+
import '../../styled/StyledTooltipDialogBackdrop.js';
|
|
18
18
|
import '../../styled/StyledTooltipWrapper.js';
|
|
19
|
-
import '../../styled/
|
|
20
|
-
import '../../styled/
|
|
21
|
-
import '../../styled/
|
|
22
|
-
import '../../styled/
|
|
23
|
-
import '../../styled/
|
|
24
|
-
import '../../styled/
|
|
19
|
+
import '../../styled/StyledTooltipDialog.js';
|
|
20
|
+
import '../../styled/StyledTooltipDialogTitle.js';
|
|
21
|
+
import '../../styled/StyledTooltipDialogBody.js';
|
|
22
|
+
import '../../styled/StyledTooltipDialogFooter.js';
|
|
23
|
+
import '../../styled/StyledTooltipDialogFooterItem.js';
|
|
24
|
+
import '../../styled/StyledTooltipDialogClose.js';
|
|
25
25
|
import '../../styled/StyledDrawer.js';
|
|
26
26
|
import '../../styled/StyledDrawerHeader.js';
|
|
27
27
|
import '../../styled/StyledDrawerClose.js';
|
|
@@ -13,14 +13,14 @@ import '../../styled/StyledFooterItem.js';
|
|
|
13
13
|
import '../../styled/StyledHeader.js';
|
|
14
14
|
import '../../styled/StyledDangerIcon.js';
|
|
15
15
|
import '../../styled/StyledModal.js';
|
|
16
|
-
import '../../styled/
|
|
16
|
+
import '../../styled/StyledTooltipDialogBackdrop.js';
|
|
17
17
|
import '../../styled/StyledTooltipWrapper.js';
|
|
18
|
-
import '../../styled/
|
|
19
|
-
import '../../styled/
|
|
20
|
-
import '../../styled/
|
|
21
|
-
import '../../styled/
|
|
22
|
-
import '../../styled/
|
|
23
|
-
import '../../styled/
|
|
18
|
+
import '../../styled/StyledTooltipDialog.js';
|
|
19
|
+
import '../../styled/StyledTooltipDialogTitle.js';
|
|
20
|
+
import '../../styled/StyledTooltipDialogBody.js';
|
|
21
|
+
import '../../styled/StyledTooltipDialogFooter.js';
|
|
22
|
+
import '../../styled/StyledTooltipDialogFooterItem.js';
|
|
23
|
+
import '../../styled/StyledTooltipDialogClose.js';
|
|
24
24
|
import '../../styled/StyledDrawer.js';
|
|
25
25
|
import '../../styled/StyledDrawerHeader.js';
|
|
26
26
|
import { StyledDrawerClose } from '../../styled/StyledDrawerClose.js';
|
|
@@ -22,14 +22,14 @@ import '../../styled/StyledFooterItem.js';
|
|
|
22
22
|
import '../../styled/StyledHeader.js';
|
|
23
23
|
import '../../styled/StyledDangerIcon.js';
|
|
24
24
|
import '../../styled/StyledModal.js';
|
|
25
|
-
import '../../styled/
|
|
25
|
+
import '../../styled/StyledTooltipDialogBackdrop.js';
|
|
26
26
|
import '../../styled/StyledTooltipWrapper.js';
|
|
27
|
-
import '../../styled/
|
|
28
|
-
import '../../styled/
|
|
29
|
-
import '../../styled/
|
|
30
|
-
import '../../styled/
|
|
31
|
-
import '../../styled/
|
|
32
|
-
import '../../styled/
|
|
27
|
+
import '../../styled/StyledTooltipDialog.js';
|
|
28
|
+
import '../../styled/StyledTooltipDialogTitle.js';
|
|
29
|
+
import '../../styled/StyledTooltipDialogBody.js';
|
|
30
|
+
import '../../styled/StyledTooltipDialogFooter.js';
|
|
31
|
+
import '../../styled/StyledTooltipDialogFooterItem.js';
|
|
32
|
+
import '../../styled/StyledTooltipDialogClose.js';
|
|
33
33
|
import { StyledDrawer } from '../../styled/StyledDrawer.js';
|
|
34
34
|
import '../../styled/StyledDrawerHeader.js';
|
|
35
35
|
import '../../styled/StyledDrawerClose.js';
|
|
@@ -145,7 +145,7 @@ const DrawerComponent = forwardRef((_ref, ref) => {
|
|
|
145
145
|
if (!rootNode) {
|
|
146
146
|
return null;
|
|
147
147
|
}
|
|
148
|
-
return ReactDOM.createPortal(
|
|
148
|
+
return ReactDOM.createPortal(React__default.createElement(ModalsContext.Provider, {
|
|
149
149
|
value: value
|
|
150
150
|
}, React__default.createElement(CSSTransition, {
|
|
151
151
|
in: isOpen,
|
|
@@ -13,14 +13,14 @@ import '../../styled/StyledFooterItem.js';
|
|
|
13
13
|
import '../../styled/StyledHeader.js';
|
|
14
14
|
import '../../styled/StyledDangerIcon.js';
|
|
15
15
|
import '../../styled/StyledModal.js';
|
|
16
|
-
import '../../styled/
|
|
16
|
+
import '../../styled/StyledTooltipDialogBackdrop.js';
|
|
17
17
|
import '../../styled/StyledTooltipWrapper.js';
|
|
18
|
-
import '../../styled/
|
|
19
|
-
import '../../styled/
|
|
20
|
-
import '../../styled/
|
|
21
|
-
import '../../styled/
|
|
22
|
-
import '../../styled/
|
|
23
|
-
import '../../styled/
|
|
18
|
+
import '../../styled/StyledTooltipDialog.js';
|
|
19
|
+
import '../../styled/StyledTooltipDialogTitle.js';
|
|
20
|
+
import '../../styled/StyledTooltipDialogBody.js';
|
|
21
|
+
import '../../styled/StyledTooltipDialogFooter.js';
|
|
22
|
+
import '../../styled/StyledTooltipDialogFooterItem.js';
|
|
23
|
+
import '../../styled/StyledTooltipDialogClose.js';
|
|
24
24
|
import '../../styled/StyledDrawer.js';
|
|
25
25
|
import '../../styled/StyledDrawerHeader.js';
|
|
26
26
|
import '../../styled/StyledDrawerClose.js';
|
|
@@ -13,14 +13,14 @@ import '../../styled/StyledFooterItem.js';
|
|
|
13
13
|
import '../../styled/StyledHeader.js';
|
|
14
14
|
import '../../styled/StyledDangerIcon.js';
|
|
15
15
|
import '../../styled/StyledModal.js';
|
|
16
|
-
import '../../styled/
|
|
16
|
+
import '../../styled/StyledTooltipDialogBackdrop.js';
|
|
17
17
|
import '../../styled/StyledTooltipWrapper.js';
|
|
18
|
-
import '../../styled/
|
|
19
|
-
import '../../styled/
|
|
20
|
-
import '../../styled/
|
|
21
|
-
import '../../styled/
|
|
22
|
-
import '../../styled/
|
|
23
|
-
import '../../styled/
|
|
18
|
+
import '../../styled/StyledTooltipDialog.js';
|
|
19
|
+
import '../../styled/StyledTooltipDialogTitle.js';
|
|
20
|
+
import '../../styled/StyledTooltipDialogBody.js';
|
|
21
|
+
import '../../styled/StyledTooltipDialogFooter.js';
|
|
22
|
+
import '../../styled/StyledTooltipDialogFooterItem.js';
|
|
23
|
+
import '../../styled/StyledTooltipDialogClose.js';
|
|
24
24
|
import '../../styled/StyledDrawer.js';
|
|
25
25
|
import '../../styled/StyledDrawerHeader.js';
|
|
26
26
|
import '../../styled/StyledDrawerClose.js';
|
|
@@ -15,14 +15,14 @@ import '../../styled/StyledFooterItem.js';
|
|
|
15
15
|
import '../../styled/StyledHeader.js';
|
|
16
16
|
import '../../styled/StyledDangerIcon.js';
|
|
17
17
|
import '../../styled/StyledModal.js';
|
|
18
|
-
import '../../styled/
|
|
18
|
+
import '../../styled/StyledTooltipDialogBackdrop.js';
|
|
19
19
|
import '../../styled/StyledTooltipWrapper.js';
|
|
20
|
-
import '../../styled/
|
|
21
|
-
import '../../styled/
|
|
22
|
-
import '../../styled/
|
|
23
|
-
import '../../styled/
|
|
24
|
-
import '../../styled/
|
|
25
|
-
import '../../styled/
|
|
20
|
+
import '../../styled/StyledTooltipDialog.js';
|
|
21
|
+
import '../../styled/StyledTooltipDialogTitle.js';
|
|
22
|
+
import '../../styled/StyledTooltipDialogBody.js';
|
|
23
|
+
import '../../styled/StyledTooltipDialogFooter.js';
|
|
24
|
+
import '../../styled/StyledTooltipDialogFooterItem.js';
|
|
25
|
+
import '../../styled/StyledTooltipDialogClose.js';
|
|
26
26
|
import '../../styled/StyledDrawer.js';
|
|
27
27
|
import { StyledDrawerHeader } from '../../styled/StyledDrawerHeader.js';
|
|
28
28
|
import '../../styled/StyledDrawerClose.js';
|
|
@@ -13,14 +13,14 @@ import '../styled/StyledFooterItem.js';
|
|
|
13
13
|
import '../styled/StyledHeader.js';
|
|
14
14
|
import '../styled/StyledDangerIcon.js';
|
|
15
15
|
import '../styled/StyledModal.js';
|
|
16
|
-
import '../styled/
|
|
16
|
+
import '../styled/StyledTooltipDialogBackdrop.js';
|
|
17
17
|
import '../styled/StyledTooltipWrapper.js';
|
|
18
|
-
import '../styled/
|
|
19
|
-
import '../styled/
|
|
20
|
-
import '../styled/
|
|
21
|
-
import '../styled/
|
|
22
|
-
import '../styled/
|
|
23
|
-
import '../styled/
|
|
18
|
+
import '../styled/StyledTooltipDialog.js';
|
|
19
|
+
import '../styled/StyledTooltipDialogTitle.js';
|
|
20
|
+
import '../styled/StyledTooltipDialogBody.js';
|
|
21
|
+
import '../styled/StyledTooltipDialogFooter.js';
|
|
22
|
+
import '../styled/StyledTooltipDialogFooterItem.js';
|
|
23
|
+
import '../styled/StyledTooltipDialogClose.js';
|
|
24
24
|
import '../styled/StyledDrawer.js';
|
|
25
25
|
import '../styled/StyledDrawerHeader.js';
|
|
26
26
|
import '../styled/StyledDrawerClose.js';
|
|
@@ -38,6 +38,6 @@ const Footer = React__default.forwardRef((props, ref) => {
|
|
|
38
38
|
isLarge: isLarge
|
|
39
39
|
}, props));
|
|
40
40
|
});
|
|
41
|
-
Footer.displayName = 'Footer';
|
|
41
|
+
Footer.displayName = 'Modal.Footer';
|
|
42
42
|
|
|
43
43
|
export { Footer };
|
|
@@ -13,14 +13,14 @@ import { StyledFooterItem } from '../styled/StyledFooterItem.js';
|
|
|
13
13
|
import '../styled/StyledHeader.js';
|
|
14
14
|
import '../styled/StyledDangerIcon.js';
|
|
15
15
|
import '../styled/StyledModal.js';
|
|
16
|
-
import '../styled/
|
|
16
|
+
import '../styled/StyledTooltipDialogBackdrop.js';
|
|
17
17
|
import '../styled/StyledTooltipWrapper.js';
|
|
18
|
-
import '../styled/
|
|
19
|
-
import '../styled/
|
|
20
|
-
import '../styled/
|
|
21
|
-
import '../styled/
|
|
22
|
-
import '../styled/
|
|
23
|
-
import '../styled/
|
|
18
|
+
import '../styled/StyledTooltipDialog.js';
|
|
19
|
+
import '../styled/StyledTooltipDialogTitle.js';
|
|
20
|
+
import '../styled/StyledTooltipDialogBody.js';
|
|
21
|
+
import '../styled/StyledTooltipDialogFooter.js';
|
|
22
|
+
import '../styled/StyledTooltipDialogFooterItem.js';
|
|
23
|
+
import '../styled/StyledTooltipDialogClose.js';
|
|
24
24
|
import '../styled/StyledDrawer.js';
|
|
25
25
|
import '../styled/StyledDrawerHeader.js';
|
|
26
26
|
import '../styled/StyledDrawerClose.js';
|
|
@@ -31,6 +31,6 @@ import '../styled/StyledDrawerFooterItem.js';
|
|
|
31
31
|
const FooterItem = React__default.forwardRef((props, ref) => React__default.createElement(StyledFooterItem, Object.assign({
|
|
32
32
|
ref: ref
|
|
33
33
|
}, props)));
|
|
34
|
-
FooterItem.displayName = 'FooterItem';
|
|
34
|
+
FooterItem.displayName = 'Modal.FooterItem';
|
|
35
35
|
|
|
36
36
|
export { FooterItem };
|
|
@@ -15,14 +15,14 @@ import '../styled/StyledFooterItem.js';
|
|
|
15
15
|
import { StyledHeader } from '../styled/StyledHeader.js';
|
|
16
16
|
import { StyledDangerIcon } from '../styled/StyledDangerIcon.js';
|
|
17
17
|
import '../styled/StyledModal.js';
|
|
18
|
-
import '../styled/
|
|
18
|
+
import '../styled/StyledTooltipDialogBackdrop.js';
|
|
19
19
|
import '../styled/StyledTooltipWrapper.js';
|
|
20
|
-
import '../styled/
|
|
21
|
-
import '../styled/
|
|
22
|
-
import '../styled/
|
|
23
|
-
import '../styled/
|
|
24
|
-
import '../styled/
|
|
25
|
-
import '../styled/
|
|
20
|
+
import '../styled/StyledTooltipDialog.js';
|
|
21
|
+
import '../styled/StyledTooltipDialogTitle.js';
|
|
22
|
+
import '../styled/StyledTooltipDialogBody.js';
|
|
23
|
+
import '../styled/StyledTooltipDialogFooter.js';
|
|
24
|
+
import '../styled/StyledTooltipDialogFooterItem.js';
|
|
25
|
+
import '../styled/StyledTooltipDialogClose.js';
|
|
26
26
|
import '../styled/StyledDrawer.js';
|
|
27
27
|
import '../styled/StyledDrawerHeader.js';
|
|
28
28
|
import '../styled/StyledDrawerClose.js';
|
|
@@ -56,9 +56,9 @@ const Header = forwardRef((_ref, ref) => {
|
|
|
56
56
|
as: tag,
|
|
57
57
|
isCloseButtonPresent: isCloseButtonPresent,
|
|
58
58
|
ref: ref
|
|
59
|
-
}), other.isDanger && React__default.createElement(StyledDangerIcon, null), children);
|
|
59
|
+
}), !!other.isDanger && React__default.createElement(StyledDangerIcon, null), children);
|
|
60
60
|
});
|
|
61
|
-
Header.displayName = 'Header';
|
|
61
|
+
Header.displayName = 'Modal.Header';
|
|
62
62
|
Header.propTypes = {
|
|
63
63
|
isDanger: PropTypes.bool,
|
|
64
64
|
tag: PropTypes.any
|
|
@@ -24,14 +24,14 @@ import '../styled/StyledFooterItem.js';
|
|
|
24
24
|
import '../styled/StyledHeader.js';
|
|
25
25
|
import '../styled/StyledDangerIcon.js';
|
|
26
26
|
import { StyledModal } from '../styled/StyledModal.js';
|
|
27
|
-
import '../styled/
|
|
27
|
+
import '../styled/StyledTooltipDialogBackdrop.js';
|
|
28
28
|
import '../styled/StyledTooltipWrapper.js';
|
|
29
|
-
import '../styled/
|
|
30
|
-
import '../styled/
|
|
31
|
-
import '../styled/
|
|
32
|
-
import '../styled/
|
|
33
|
-
import '../styled/
|
|
34
|
-
import '../styled/
|
|
29
|
+
import '../styled/StyledTooltipDialog.js';
|
|
30
|
+
import '../styled/StyledTooltipDialogTitle.js';
|
|
31
|
+
import '../styled/StyledTooltipDialogBody.js';
|
|
32
|
+
import '../styled/StyledTooltipDialogFooter.js';
|
|
33
|
+
import '../styled/StyledTooltipDialogFooterItem.js';
|
|
34
|
+
import '../styled/StyledTooltipDialogClose.js';
|
|
35
35
|
import '../styled/StyledDrawer.js';
|
|
36
36
|
import '../styled/StyledDrawerHeader.js';
|
|
37
37
|
import '../styled/StyledDrawerClose.js';
|
|
@@ -153,7 +153,7 @@ const ModalComponent = forwardRef((_ref, ref) => {
|
|
|
153
153
|
if (!rootNode) {
|
|
154
154
|
return null;
|
|
155
155
|
}
|
|
156
|
-
return createPortal(
|
|
156
|
+
return createPortal(React__default.createElement(ModalsContext.Provider, {
|
|
157
157
|
value: value
|
|
158
158
|
}, React__default.createElement(StyledBackdrop, Object.assign({
|
|
159
159
|
isCentered: isCentered,
|
|
@@ -13,31 +13,31 @@ import '../../styled/StyledFooterItem.js';
|
|
|
13
13
|
import '../../styled/StyledHeader.js';
|
|
14
14
|
import '../../styled/StyledDangerIcon.js';
|
|
15
15
|
import '../../styled/StyledModal.js';
|
|
16
|
-
import '../../styled/
|
|
16
|
+
import '../../styled/StyledTooltipDialogBackdrop.js';
|
|
17
17
|
import '../../styled/StyledTooltipWrapper.js';
|
|
18
|
-
import '../../styled/
|
|
19
|
-
import '../../styled/
|
|
20
|
-
import {
|
|
21
|
-
import '../../styled/
|
|
22
|
-
import '../../styled/
|
|
23
|
-
import '../../styled/
|
|
18
|
+
import '../../styled/StyledTooltipDialog.js';
|
|
19
|
+
import '../../styled/StyledTooltipDialogTitle.js';
|
|
20
|
+
import { StyledTooltipDialogBody } from '../../styled/StyledTooltipDialogBody.js';
|
|
21
|
+
import '../../styled/StyledTooltipDialogFooter.js';
|
|
22
|
+
import '../../styled/StyledTooltipDialogFooterItem.js';
|
|
23
|
+
import '../../styled/StyledTooltipDialogClose.js';
|
|
24
24
|
import '../../styled/StyledDrawer.js';
|
|
25
25
|
import '../../styled/StyledDrawerHeader.js';
|
|
26
26
|
import '../../styled/StyledDrawerClose.js';
|
|
27
27
|
import '../../styled/StyledDrawerBody.js';
|
|
28
28
|
import '../../styled/StyledDrawerFooter.js';
|
|
29
29
|
import '../../styled/StyledDrawerFooterItem.js';
|
|
30
|
-
import {
|
|
30
|
+
import { useTooltipDialogContext } from '../../utils/useTooltipDialogContext.js';
|
|
31
31
|
|
|
32
32
|
const BodyComponent = forwardRef((props, ref) => {
|
|
33
33
|
const {
|
|
34
34
|
getContentProps
|
|
35
|
-
} =
|
|
36
|
-
return React__default.createElement(
|
|
35
|
+
} = useTooltipDialogContext();
|
|
36
|
+
return React__default.createElement(StyledTooltipDialogBody, Object.assign({}, getContentProps(props), {
|
|
37
37
|
ref: ref
|
|
38
38
|
}));
|
|
39
39
|
});
|
|
40
|
-
BodyComponent.displayName = '
|
|
40
|
+
BodyComponent.displayName = 'TooltipDialog.Body';
|
|
41
41
|
const Body = BodyComponent;
|
|
42
42
|
|
|
43
43
|
export { Body };
|
|
@@ -13,14 +13,14 @@ import '../../styled/StyledFooterItem.js';
|
|
|
13
13
|
import '../../styled/StyledHeader.js';
|
|
14
14
|
import '../../styled/StyledDangerIcon.js';
|
|
15
15
|
import '../../styled/StyledModal.js';
|
|
16
|
-
import '../../styled/
|
|
16
|
+
import '../../styled/StyledTooltipDialogBackdrop.js';
|
|
17
17
|
import '../../styled/StyledTooltipWrapper.js';
|
|
18
|
-
import '../../styled/
|
|
19
|
-
import '../../styled/
|
|
20
|
-
import '../../styled/
|
|
21
|
-
import '../../styled/
|
|
22
|
-
import '../../styled/
|
|
23
|
-
import {
|
|
18
|
+
import '../../styled/StyledTooltipDialog.js';
|
|
19
|
+
import '../../styled/StyledTooltipDialogTitle.js';
|
|
20
|
+
import '../../styled/StyledTooltipDialogBody.js';
|
|
21
|
+
import '../../styled/StyledTooltipDialogFooter.js';
|
|
22
|
+
import '../../styled/StyledTooltipDialogFooterItem.js';
|
|
23
|
+
import { StyledTooltipDialogClose } from '../../styled/StyledTooltipDialogClose.js';
|
|
24
24
|
import '../../styled/StyledDrawer.js';
|
|
25
25
|
import '../../styled/StyledDrawerHeader.js';
|
|
26
26
|
import '../../styled/StyledDrawerClose.js';
|
|
@@ -28,22 +28,23 @@ import '../../styled/StyledDrawerBody.js';
|
|
|
28
28
|
import '../../styled/StyledDrawerFooter.js';
|
|
29
29
|
import '../../styled/StyledDrawerFooterItem.js';
|
|
30
30
|
import { useText } from '@zendeskgarden/react-theming';
|
|
31
|
-
import {
|
|
31
|
+
import { useTooltipDialogContext } from '../../utils/useTooltipDialogContext.js';
|
|
32
32
|
import SvgXStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
|
|
33
33
|
|
|
34
34
|
const CloseComponent = forwardRef((props, ref) => {
|
|
35
35
|
const {
|
|
36
36
|
getCloseProps
|
|
37
|
-
} =
|
|
37
|
+
} = useTooltipDialogContext();
|
|
38
38
|
const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close tooltip');
|
|
39
|
-
return React__default.createElement(
|
|
39
|
+
return React__default.createElement(StyledTooltipDialogClose, Object.assign({}, getCloseProps({
|
|
40
40
|
...props,
|
|
41
41
|
'aria-label': ariaLabel
|
|
42
42
|
}), {
|
|
43
|
-
ref: ref
|
|
43
|
+
ref: ref,
|
|
44
|
+
size: "small"
|
|
44
45
|
}), React__default.createElement(SvgXStroke, null));
|
|
45
46
|
});
|
|
46
|
-
CloseComponent.displayName = '
|
|
47
|
+
CloseComponent.displayName = 'TooltipDialog.Close';
|
|
47
48
|
const Close = CloseComponent;
|
|
48
49
|
|
|
49
50
|
export { Close };
|
|
@@ -13,14 +13,14 @@ import '../../styled/StyledFooterItem.js';
|
|
|
13
13
|
import '../../styled/StyledHeader.js';
|
|
14
14
|
import '../../styled/StyledDangerIcon.js';
|
|
15
15
|
import '../../styled/StyledModal.js';
|
|
16
|
-
import '../../styled/
|
|
16
|
+
import '../../styled/StyledTooltipDialogBackdrop.js';
|
|
17
17
|
import '../../styled/StyledTooltipWrapper.js';
|
|
18
|
-
import '../../styled/
|
|
19
|
-
import '../../styled/
|
|
20
|
-
import '../../styled/
|
|
21
|
-
import {
|
|
22
|
-
import '../../styled/
|
|
23
|
-
import '../../styled/
|
|
18
|
+
import '../../styled/StyledTooltipDialog.js';
|
|
19
|
+
import '../../styled/StyledTooltipDialogTitle.js';
|
|
20
|
+
import '../../styled/StyledTooltipDialogBody.js';
|
|
21
|
+
import { StyledTooltipDialogFooter } from '../../styled/StyledTooltipDialogFooter.js';
|
|
22
|
+
import '../../styled/StyledTooltipDialogFooterItem.js';
|
|
23
|
+
import '../../styled/StyledTooltipDialogClose.js';
|
|
24
24
|
import '../../styled/StyledDrawer.js';
|
|
25
25
|
import '../../styled/StyledDrawerHeader.js';
|
|
26
26
|
import '../../styled/StyledDrawerClose.js';
|
|
@@ -28,10 +28,10 @@ import '../../styled/StyledDrawerBody.js';
|
|
|
28
28
|
import '../../styled/StyledDrawerFooter.js';
|
|
29
29
|
import '../../styled/StyledDrawerFooterItem.js';
|
|
30
30
|
|
|
31
|
-
const FooterComponent = forwardRef((props, ref) => React__default.createElement(
|
|
31
|
+
const FooterComponent = forwardRef((props, ref) => React__default.createElement(StyledTooltipDialogFooter, Object.assign({
|
|
32
32
|
ref: ref
|
|
33
33
|
}, props)));
|
|
34
|
-
FooterComponent.displayName = '
|
|
34
|
+
FooterComponent.displayName = 'TooltipDialog.Footer';
|
|
35
35
|
const Footer = FooterComponent;
|
|
36
36
|
|
|
37
37
|
export { Footer };
|
|
@@ -13,14 +13,14 @@ import '../../styled/StyledFooterItem.js';
|
|
|
13
13
|
import '../../styled/StyledHeader.js';
|
|
14
14
|
import '../../styled/StyledDangerIcon.js';
|
|
15
15
|
import '../../styled/StyledModal.js';
|
|
16
|
-
import '../../styled/
|
|
16
|
+
import '../../styled/StyledTooltipDialogBackdrop.js';
|
|
17
17
|
import '../../styled/StyledTooltipWrapper.js';
|
|
18
|
-
import '../../styled/
|
|
19
|
-
import '../../styled/
|
|
20
|
-
import '../../styled/
|
|
21
|
-
import '../../styled/
|
|
22
|
-
import {
|
|
23
|
-
import '../../styled/
|
|
18
|
+
import '../../styled/StyledTooltipDialog.js';
|
|
19
|
+
import '../../styled/StyledTooltipDialogTitle.js';
|
|
20
|
+
import '../../styled/StyledTooltipDialogBody.js';
|
|
21
|
+
import '../../styled/StyledTooltipDialogFooter.js';
|
|
22
|
+
import { StyledTooltipDialogFooterItem } from '../../styled/StyledTooltipDialogFooterItem.js';
|
|
23
|
+
import '../../styled/StyledTooltipDialogClose.js';
|
|
24
24
|
import '../../styled/StyledDrawer.js';
|
|
25
25
|
import '../../styled/StyledDrawerHeader.js';
|
|
26
26
|
import '../../styled/StyledDrawerClose.js';
|
|
@@ -28,10 +28,10 @@ import '../../styled/StyledDrawerBody.js';
|
|
|
28
28
|
import '../../styled/StyledDrawerFooter.js';
|
|
29
29
|
import '../../styled/StyledDrawerFooterItem.js';
|
|
30
30
|
|
|
31
|
-
const FooterItemComponent = forwardRef((props, ref) => React__default.createElement(
|
|
31
|
+
const FooterItemComponent = forwardRef((props, ref) => React__default.createElement(StyledTooltipDialogFooterItem, Object.assign({
|
|
32
32
|
ref: ref
|
|
33
33
|
}, props)));
|
|
34
|
-
FooterItemComponent.displayName = '
|
|
34
|
+
FooterItemComponent.displayName = 'TooltipDialog.FooterItem';
|
|
35
35
|
const FooterItem = FooterItemComponent;
|
|
36
36
|
|
|
37
37
|
export { FooterItem };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import React__default, { forwardRef, useEffect } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
import {
|
|
9
|
+
import { useTooltipDialogContext } from '../../utils/useTooltipDialogContext.js';
|
|
10
10
|
import '../../styled/StyledBackdrop.js';
|
|
11
11
|
import '../../styled/StyledBody.js';
|
|
12
12
|
import '../../styled/StyledClose.js';
|
|
@@ -15,14 +15,14 @@ import '../../styled/StyledFooterItem.js';
|
|
|
15
15
|
import '../../styled/StyledHeader.js';
|
|
16
16
|
import '../../styled/StyledDangerIcon.js';
|
|
17
17
|
import '../../styled/StyledModal.js';
|
|
18
|
-
import '../../styled/
|
|
18
|
+
import '../../styled/StyledTooltipDialogBackdrop.js';
|
|
19
19
|
import '../../styled/StyledTooltipWrapper.js';
|
|
20
|
-
import '../../styled/
|
|
21
|
-
import {
|
|
22
|
-
import '../../styled/
|
|
23
|
-
import '../../styled/
|
|
24
|
-
import '../../styled/
|
|
25
|
-
import '../../styled/
|
|
20
|
+
import '../../styled/StyledTooltipDialog.js';
|
|
21
|
+
import { StyledTooltipDialogTitle } from '../../styled/StyledTooltipDialogTitle.js';
|
|
22
|
+
import '../../styled/StyledTooltipDialogBody.js';
|
|
23
|
+
import '../../styled/StyledTooltipDialogFooter.js';
|
|
24
|
+
import '../../styled/StyledTooltipDialogFooterItem.js';
|
|
25
|
+
import '../../styled/StyledTooltipDialogClose.js';
|
|
26
26
|
import '../../styled/StyledDrawer.js';
|
|
27
27
|
import '../../styled/StyledDrawerHeader.js';
|
|
28
28
|
import '../../styled/StyledDrawerClose.js';
|
|
@@ -40,7 +40,7 @@ const TitleComponent = forwardRef((_ref, ref) => {
|
|
|
40
40
|
getTitleProps,
|
|
41
41
|
hasTitle,
|
|
42
42
|
setHasTitle
|
|
43
|
-
} =
|
|
43
|
+
} = useTooltipDialogContext();
|
|
44
44
|
useEffect(() => {
|
|
45
45
|
if (!hasTitle && setHasTitle) {
|
|
46
46
|
setHasTitle(true);
|
|
@@ -51,12 +51,12 @@ const TitleComponent = forwardRef((_ref, ref) => {
|
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
}, [hasTitle, setHasTitle]);
|
|
54
|
-
return React__default.createElement(
|
|
54
|
+
return React__default.createElement(StyledTooltipDialogTitle, Object.assign({}, getTitleProps(other), {
|
|
55
55
|
as: tag,
|
|
56
56
|
ref: ref
|
|
57
57
|
}), children);
|
|
58
58
|
});
|
|
59
|
-
TitleComponent.displayName = '
|
|
59
|
+
TitleComponent.displayName = 'TooltipDialog.Title';
|
|
60
60
|
TitleComponent.propTypes = {
|
|
61
61
|
tag: PropTypes.any
|
|
62
62
|
};
|