@zendeskgarden/react-modals 9.0.0-next.2 → 9.0.0-next.20

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 (61) hide show
  1. package/README.md +10 -10
  2. package/dist/esm/elements/Body.js +42 -0
  3. package/dist/esm/elements/Close.js +53 -0
  4. package/dist/esm/elements/Drawer/Body.js +43 -0
  5. package/dist/esm/elements/Drawer/Close.js +54 -0
  6. package/dist/esm/elements/Drawer/Drawer.js +182 -0
  7. package/dist/esm/elements/Drawer/Footer.js +37 -0
  8. package/dist/esm/elements/Drawer/FooterItem.js +37 -0
  9. package/dist/esm/elements/Drawer/Header.js +69 -0
  10. package/dist/esm/elements/Footer.js +43 -0
  11. package/dist/esm/elements/FooterItem.js +36 -0
  12. package/dist/esm/elements/Header.js +70 -0
  13. package/dist/esm/elements/Modal.js +191 -0
  14. package/dist/esm/elements/TooltipModal/Body.js +43 -0
  15. package/dist/esm/elements/TooltipModal/Close.js +50 -0
  16. package/dist/esm/elements/TooltipModal/Footer.js +37 -0
  17. package/dist/esm/elements/TooltipModal/FooterItem.js +37 -0
  18. package/dist/esm/elements/TooltipModal/Title.js +68 -0
  19. package/dist/esm/elements/TooltipModal/TooltipModal.js +192 -0
  20. package/dist/esm/index.js +15 -0
  21. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js +37 -0
  22. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js +26 -0
  23. package/dist/esm/styled/StyledBackdrop.js +49 -0
  24. package/dist/esm/styled/StyledBody.js +30 -0
  25. package/dist/esm/styled/StyledClose.js +28 -0
  26. package/dist/esm/styled/StyledDangerIcon.js +19 -0
  27. package/dist/esm/styled/StyledDrawer.js +44 -0
  28. package/dist/esm/styled/StyledDrawerBody.js +23 -0
  29. package/dist/esm/styled/StyledDrawerClose.js +28 -0
  30. package/dist/esm/styled/StyledDrawerFooter.js +30 -0
  31. package/dist/esm/styled/StyledDrawerFooterItem.js +23 -0
  32. package/dist/esm/styled/StyledDrawerHeader.js +24 -0
  33. package/dist/esm/styled/StyledFooter.js +22 -0
  34. package/dist/esm/styled/StyledFooterItem.js +22 -0
  35. package/dist/esm/styled/StyledHeader.js +38 -0
  36. package/dist/esm/styled/StyledModal.js +58 -0
  37. package/dist/esm/styled/StyledTooltipModal.js +33 -0
  38. package/dist/esm/styled/StyledTooltipModalBackdrop.js +22 -0
  39. package/dist/esm/styled/StyledTooltipModalBody.js +30 -0
  40. package/dist/esm/styled/StyledTooltipModalClose.js +23 -0
  41. package/dist/esm/styled/StyledTooltipModalFooter.js +22 -0
  42. package/dist/esm/styled/StyledTooltipModalFooterItem.js +23 -0
  43. package/dist/esm/styled/StyledTooltipModalTitle.js +36 -0
  44. package/dist/esm/styled/StyledTooltipWrapper.js +25 -0
  45. package/dist/esm/types/index.js +11 -0
  46. package/dist/esm/utils/useModalContext.js +18 -0
  47. package/dist/esm/utils/useTooltipModalContext.js +18 -0
  48. package/dist/index.cjs.js +272 -215
  49. package/dist/typings/elements/Body.d.ts +2 -0
  50. package/dist/typings/elements/Close.d.ts +2 -0
  51. package/dist/typings/elements/Footer.d.ts +2 -0
  52. package/dist/typings/elements/FooterItem.d.ts +2 -0
  53. package/dist/typings/elements/Header.d.ts +2 -0
  54. package/dist/typings/elements/Modal.d.ts +13 -1
  55. package/dist/typings/index.d.ts +1 -1
  56. package/dist/typings/styled/StyledClose.d.ts +2 -5
  57. package/dist/typings/styled/StyledDrawerClose.d.ts +2 -1
  58. package/dist/typings/styled/StyledHeader.d.ts +2 -1
  59. package/dist/typings/styled/StyledTooltipModalClose.d.ts +2 -1
  60. package/package.json +9 -9
  61. package/dist/index.esm.js +0 -1115
package/README.md CHANGED
@@ -18,7 +18,7 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
18
18
 
19
19
  ```jsx
20
20
  import { ThemeProvider } from '@zendeskgarden/react-theming';
21
- import { Modal, Header, Body, Footer, FooterItem, Close } from '@zendeskgarden/react-modals';
21
+ import { Modal } from '@zendeskgarden/react-modals';
22
22
  import { Button } from '@zendeskgarden/react-buttons';
23
23
 
24
24
  /**
@@ -26,17 +26,17 @@ import { Button } from '@zendeskgarden/react-buttons';
26
26
  */
27
27
  <ThemeProvider>
28
28
  <Modal onClose={() => alert('modal closing')}>
29
- <Header>Example Header</Header>
30
- <Body>Some content</Body>
31
- <Footer>
32
- <FooterItem>
29
+ <Modal.Header>Example Header</Modal.Header>
30
+ <Modal.Body>Some content</Modal.Body>
31
+ <Modal.Footer>
32
+ <Modal.FooterItem>
33
33
  <Button isBasic>Cancel</Button>
34
- </FooterItem>
35
- <FooterItem>
34
+ </Modal.FooterItem>
35
+ <Modal.FooterItem>
36
36
  <Button isPrimary>Confirm</Button>
37
- </FooterItem>
38
- </Footer>
39
- <Close aria-label="Close modal" />
37
+ </Modal.FooterItem>
38
+ </Modal.Footer>
39
+ <Modal.Close aria-label="Close modal" />
40
40
  </Modal>
41
41
  </ThemeProvider>;
42
42
  ```
package/dist/esm/elements/Body.js ADDED
@@ -0,0 +1,42 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef } from 'react';
8
+ import '../styled/StyledBackdrop.js';
9
+ import { StyledBody } from '../styled/StyledBody.js';
10
+ import '../styled/StyledClose.js';
11
+ import '../styled/StyledFooter.js';
12
+ import '../styled/StyledFooterItem.js';
13
+ import '../styled/StyledHeader.js';
14
+ import '../styled/StyledDangerIcon.js';
15
+ import '../styled/StyledModal.js';
16
+ import '../styled/StyledTooltipModalBackdrop.js';
17
+ import '../styled/StyledTooltipWrapper.js';
18
+ import '../styled/StyledTooltipModal.js';
19
+ import '../styled/StyledTooltipModalTitle.js';
20
+ import '../styled/StyledTooltipModalBody.js';
21
+ import '../styled/StyledTooltipModalFooter.js';
22
+ import '../styled/StyledTooltipModalFooterItem.js';
23
+ import '../styled/StyledTooltipModalClose.js';
24
+ import '../styled/StyledDrawer.js';
25
+ import '../styled/StyledDrawerHeader.js';
26
+ import '../styled/StyledDrawerClose.js';
27
+ import '../styled/StyledDrawerBody.js';
28
+ import '../styled/StyledDrawerFooter.js';
29
+ import '../styled/StyledDrawerFooterItem.js';
30
+ import { useModalContext } from '../utils/useModalContext.js';
31
+
32
+ const Body = forwardRef((props, ref) => {
33
+ const {
34
+ getContentProps
35
+ } = useModalContext();
36
+ return React__default.createElement(StyledBody, Object.assign({}, getContentProps(props), {
37
+ ref: ref
38
+ }));
39
+ });
40
+ Body.displayName = 'Body';
41
+
42
+ export { Body };
package/dist/esm/elements/Close.js ADDED
@@ -0,0 +1,53 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef, useEffect } from 'react';
8
+ import '../styled/StyledBackdrop.js';
9
+ import '../styled/StyledBody.js';
10
+ import { StyledClose } from '../styled/StyledClose.js';
11
+ import '../styled/StyledFooter.js';
12
+ import '../styled/StyledFooterItem.js';
13
+ import '../styled/StyledHeader.js';
14
+ import '../styled/StyledDangerIcon.js';
15
+ import '../styled/StyledModal.js';
16
+ import '../styled/StyledTooltipModalBackdrop.js';
17
+ import '../styled/StyledTooltipWrapper.js';
18
+ import '../styled/StyledTooltipModal.js';
19
+ import '../styled/StyledTooltipModalTitle.js';
20
+ import '../styled/StyledTooltipModalBody.js';
21
+ import '../styled/StyledTooltipModalFooter.js';
22
+ import '../styled/StyledTooltipModalFooterItem.js';
23
+ import '../styled/StyledTooltipModalClose.js';
24
+ import '../styled/StyledDrawer.js';
25
+ import '../styled/StyledDrawerHeader.js';
26
+ import '../styled/StyledDrawerClose.js';
27
+ import '../styled/StyledDrawerBody.js';
28
+ import '../styled/StyledDrawerFooter.js';
29
+ import '../styled/StyledDrawerFooterItem.js';
30
+ import { useText } from '@zendeskgarden/react-theming';
31
+ import { useModalContext } from '../utils/useModalContext.js';
32
+ import SvgXStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
33
+
34
+ const Close = forwardRef((props, ref) => {
35
+ const {
36
+ getCloseProps,
37
+ setIsCloseButtonPresent
38
+ } = useModalContext();
39
+ useEffect(() => {
40
+ setIsCloseButtonPresent(true);
41
+ return () => setIsCloseButtonPresent(false);
42
+ });
43
+ const ariaLabel = useText(Close, props, 'aria-label', 'Close modal');
44
+ return React__default.createElement(StyledClose, Object.assign({}, getCloseProps({
45
+ ...props,
46
+ 'aria-label': ariaLabel
47
+ }), {
48
+ ref: ref
49
+ }), React__default.createElement(SvgXStroke, null));
50
+ });
51
+ Close.displayName = 'Close';
52
+
53
+ export { Close };
package/dist/esm/elements/Drawer/Body.js ADDED
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef } from 'react';
8
+ import { useModalContext } from '../../utils/useModalContext.js';
9
+ import '../../styled/StyledBackdrop.js';
10
+ import '../../styled/StyledBody.js';
11
+ import '../../styled/StyledClose.js';
12
+ import '../../styled/StyledFooter.js';
13
+ import '../../styled/StyledFooterItem.js';
14
+ import '../../styled/StyledHeader.js';
15
+ import '../../styled/StyledDangerIcon.js';
16
+ import '../../styled/StyledModal.js';
17
+ import '../../styled/StyledTooltipModalBackdrop.js';
18
+ import '../../styled/StyledTooltipWrapper.js';
19
+ import '../../styled/StyledTooltipModal.js';
20
+ import '../../styled/StyledTooltipModalTitle.js';
21
+ import '../../styled/StyledTooltipModalBody.js';
22
+ import '../../styled/StyledTooltipModalFooter.js';
23
+ import '../../styled/StyledTooltipModalFooterItem.js';
24
+ import '../../styled/StyledTooltipModalClose.js';
25
+ import '../../styled/StyledDrawer.js';
26
+ import '../../styled/StyledDrawerHeader.js';
27
+ import '../../styled/StyledDrawerClose.js';
28
+ import { StyledDrawerBody } from '../../styled/StyledDrawerBody.js';
29
+ import '../../styled/StyledDrawerFooter.js';
30
+ import '../../styled/StyledDrawerFooterItem.js';
31
+
32
+ const BodyComponent = forwardRef((props, ref) => {
33
+ const {
34
+ getContentProps
35
+ } = useModalContext();
36
+ return React__default.createElement(StyledDrawerBody, Object.assign({}, getContentProps(props), {
37
+ ref: ref
38
+ }), props.children);
39
+ });
40
+ BodyComponent.displayName = 'Drawer.Body';
41
+ const Body = BodyComponent;
42
+
43
+ export { Body };
package/dist/esm/elements/Drawer/Close.js ADDED
@@ -0,0 +1,54 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef, useEffect } from 'react';
8
+ import '../../styled/StyledBackdrop.js';
9
+ import '../../styled/StyledBody.js';
10
+ import '../../styled/StyledClose.js';
11
+ import '../../styled/StyledFooter.js';
12
+ import '../../styled/StyledFooterItem.js';
13
+ import '../../styled/StyledHeader.js';
14
+ import '../../styled/StyledDangerIcon.js';
15
+ import '../../styled/StyledModal.js';
16
+ import '../../styled/StyledTooltipModalBackdrop.js';
17
+ import '../../styled/StyledTooltipWrapper.js';
18
+ import '../../styled/StyledTooltipModal.js';
19
+ import '../../styled/StyledTooltipModalTitle.js';
20
+ import '../../styled/StyledTooltipModalBody.js';
21
+ import '../../styled/StyledTooltipModalFooter.js';
22
+ import '../../styled/StyledTooltipModalFooterItem.js';
23
+ import '../../styled/StyledTooltipModalClose.js';
24
+ import '../../styled/StyledDrawer.js';
25
+ import '../../styled/StyledDrawerHeader.js';
26
+ import { StyledDrawerClose } from '../../styled/StyledDrawerClose.js';
27
+ import '../../styled/StyledDrawerBody.js';
28
+ import '../../styled/StyledDrawerFooter.js';
29
+ import '../../styled/StyledDrawerFooterItem.js';
30
+ import { useText } from '@zendeskgarden/react-theming';
31
+ import { useModalContext } from '../../utils/useModalContext.js';
32
+ import SvgXStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
33
+
34
+ const CloseComponent = forwardRef((props, ref) => {
35
+ const {
36
+ getCloseProps,
37
+ setIsCloseButtonPresent
38
+ } = useModalContext();
39
+ useEffect(() => {
40
+ setIsCloseButtonPresent(true);
41
+ return () => setIsCloseButtonPresent(false);
42
+ });
43
+ const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close drawer');
44
+ return React__default.createElement(StyledDrawerClose, Object.assign({}, getCloseProps({
45
+ ...props,
46
+ 'aria-label': ariaLabel
47
+ }), {
48
+ ref: ref
49
+ }), React__default.createElement(SvgXStroke, null));
50
+ });
51
+ CloseComponent.displayName = 'Drawer.Close';
52
+ const Close = CloseComponent;
53
+
54
+ export { Close };
package/dist/esm/elements/Drawer/Drawer.js ADDED
@@ -0,0 +1,182 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef, useRef, useContext, useState, useEffect, useMemo } from 'react';
8
+ import ReactDOM from 'react-dom';
9
+ import PropTypes from 'prop-types';
10
+ import { mergeRefs } from 'react-merge-refs';
11
+ import { CSSTransition } from 'react-transition-group';
12
+ import { ThemeContext } from 'styled-components';
13
+ import { useModal } from '@zendeskgarden/container-modal';
14
+ import { useDocument, useText } from '@zendeskgarden/react-theming';
15
+ import activeElement from 'dom-helpers/activeElement';
16
+ import { ModalsContext } from '../../utils/useModalContext.js';
17
+ import { StyledBackdrop } from '../../styled/StyledBackdrop.js';
18
+ import '../../styled/StyledBody.js';
19
+ import '../../styled/StyledClose.js';
20
+ import '../../styled/StyledFooter.js';
21
+ import '../../styled/StyledFooterItem.js';
22
+ import '../../styled/StyledHeader.js';
23
+ import '../../styled/StyledDangerIcon.js';
24
+ import '../../styled/StyledModal.js';
25
+ import '../../styled/StyledTooltipModalBackdrop.js';
26
+ import '../../styled/StyledTooltipWrapper.js';
27
+ import '../../styled/StyledTooltipModal.js';
28
+ import '../../styled/StyledTooltipModalTitle.js';
29
+ import '../../styled/StyledTooltipModalBody.js';
30
+ import '../../styled/StyledTooltipModalFooter.js';
31
+ import '../../styled/StyledTooltipModalFooterItem.js';
32
+ import '../../styled/StyledTooltipModalClose.js';
33
+ import { StyledDrawer } from '../../styled/StyledDrawer.js';
34
+ import '../../styled/StyledDrawerHeader.js';
35
+ import '../../styled/StyledDrawerClose.js';
36
+ import '../../styled/StyledDrawerBody.js';
37
+ import '../../styled/StyledDrawerFooter.js';
38
+ import '../../styled/StyledDrawerFooterItem.js';
39
+ import { Header } from './Header.js';
40
+ import { Body } from './Body.js';
41
+ import { Close } from './Close.js';
42
+ import { Footer } from './Footer.js';
43
+ import { FooterItem } from './FooterItem.js';
44
+
45
+ const DrawerComponent = forwardRef((_ref, ref) => {
46
+ let {
47
+ id,
48
+ isOpen,
49
+ onClose,
50
+ backdropProps,
51
+ appendToNode,
52
+ focusOnMount,
53
+ restoreFocus,
54
+ ...props
55
+ } = _ref;
56
+ const modalRef = useRef(null);
57
+ const transitionRef = useRef(null);
58
+ const triggerRef = useRef(null);
59
+ const theme = useContext(ThemeContext);
60
+ const environment = useDocument(theme);
61
+ const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
62
+ const [hasHeader, setHasHeader] = useState(false);
63
+ const {
64
+ getTitleProps,
65
+ getCloseProps,
66
+ getContentProps,
67
+ getBackdropProps,
68
+ getModalProps
69
+ } = useModal({
70
+ idPrefix: id,
71
+ modalRef,
72
+ focusOnMount: false ,
73
+ restoreFocus: false ,
74
+ environment,
75
+ onClose
76
+ });
77
+ useEffect(() => {
78
+ if (environment) {
79
+ if (isOpen && modalRef.current) {
80
+ if (restoreFocus) {
81
+ triggerRef.current = activeElement(environment);
82
+ }
83
+ if (focusOnMount) {
84
+ modalRef.current.focus();
85
+ }
86
+ }
87
+ if (!isOpen && triggerRef.current) {
88
+ triggerRef.current.focus();
89
+ }
90
+ }
91
+ return () => {
92
+ if (!(restoreFocus && isOpen)) {
93
+ triggerRef.current = null;
94
+ }
95
+ };
96
+ }, [environment, restoreFocus, focusOnMount, isOpen]);
97
+ useEffect(() => {
98
+ if (!environment) {
99
+ return undefined;
100
+ }
101
+ const htmlElement = environment.querySelector('html');
102
+ let previousHtmlOverflow;
103
+ if (htmlElement && isOpen) {
104
+ previousHtmlOverflow = htmlElement.style.overflow;
105
+ htmlElement.style.overflow = 'hidden';
106
+ }
107
+ return () => {
108
+ if (htmlElement && isOpen) {
109
+ htmlElement.style.overflow = previousHtmlOverflow;
110
+ }
111
+ };
112
+ }, [environment, isOpen]);
113
+ const rootNode = useMemo(() => {
114
+ if (appendToNode) {
115
+ return appendToNode;
116
+ }
117
+ if (environment) {
118
+ return environment.body;
119
+ }
120
+ return undefined;
121
+ }, [appendToNode, environment]);
122
+ const value = useMemo(() => ({
123
+ isCloseButtonPresent,
124
+ hasHeader,
125
+ setHasHeader,
126
+ getTitleProps,
127
+ getContentProps,
128
+ getCloseProps,
129
+ setIsCloseButtonPresent
130
+ }), [isCloseButtonPresent, hasHeader, getTitleProps, getContentProps, getCloseProps]);
131
+ const modalProps = getModalProps({
132
+ 'aria-describedby': undefined,
133
+ ...(hasHeader ? {} : {
134
+ 'aria-labelledby': undefined
135
+ })
136
+ });
137
+ const attribute = hasHeader ? 'aria-labelledby' : 'aria-label';
138
+ const defaultValue = hasHeader ? modalProps['aria-labelledby'] : 'Modal dialog';
139
+ const labelValue = hasHeader ? modalProps['aria-labelledby'] : props['aria-label'];
140
+ const ariaProps = {
141
+ [attribute]: useText(DrawerComponent, {
142
+ [attribute]: labelValue
143
+ }, attribute, defaultValue)
144
+ };
145
+ if (!rootNode) {
146
+ return null;
147
+ }
148
+ return ReactDOM.createPortal( React__default.createElement(ModalsContext.Provider, {
149
+ value: value
150
+ }, React__default.createElement(CSSTransition, {
151
+ in: isOpen,
152
+ timeout: 250,
153
+ unmountOnExit: true,
154
+ classNames: "garden-drawer-transition",
155
+ nodeRef: transitionRef
156
+ }, React__default.createElement(StyledBackdrop, Object.assign({
157
+ isAnimated: true
158
+ }, getBackdropProps(backdropProps)), React__default.createElement(StyledDrawer, Object.assign({}, modalProps, ariaProps, props, {
159
+ ref: mergeRefs([ref, modalRef, transitionRef])
160
+ }))))), rootNode);
161
+ });
162
+ DrawerComponent.displayName = 'Drawer';
163
+ DrawerComponent.propTypes = {
164
+ backdropProps: PropTypes.object,
165
+ focusOnMount: PropTypes.bool,
166
+ restoreFocus: PropTypes.bool,
167
+ onClose: PropTypes.func,
168
+ appendToNode: PropTypes.any,
169
+ isOpen: PropTypes.bool
170
+ };
171
+ DrawerComponent.defaultProps = {
172
+ focusOnMount: true ,
173
+ restoreFocus: true
174
+ };
175
+ const Drawer = DrawerComponent;
176
+ Drawer.Body = Body;
177
+ Drawer.Close = Close;
178
+ Drawer.Footer = Footer;
179
+ Drawer.FooterItem = FooterItem;
180
+ Drawer.Header = Header;
181
+
182
+ export { Drawer };
package/dist/esm/elements/Drawer/Footer.js ADDED
@@ -0,0 +1,37 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef } from 'react';
8
+ import '../../styled/StyledBackdrop.js';
9
+ import '../../styled/StyledBody.js';
10
+ import '../../styled/StyledClose.js';
11
+ import '../../styled/StyledFooter.js';
12
+ import '../../styled/StyledFooterItem.js';
13
+ import '../../styled/StyledHeader.js';
14
+ import '../../styled/StyledDangerIcon.js';
15
+ import '../../styled/StyledModal.js';
16
+ import '../../styled/StyledTooltipModalBackdrop.js';
17
+ import '../../styled/StyledTooltipWrapper.js';
18
+ import '../../styled/StyledTooltipModal.js';
19
+ import '../../styled/StyledTooltipModalTitle.js';
20
+ import '../../styled/StyledTooltipModalBody.js';
21
+ import '../../styled/StyledTooltipModalFooter.js';
22
+ import '../../styled/StyledTooltipModalFooterItem.js';
23
+ import '../../styled/StyledTooltipModalClose.js';
24
+ import '../../styled/StyledDrawer.js';
25
+ import '../../styled/StyledDrawerHeader.js';
26
+ import '../../styled/StyledDrawerClose.js';
27
+ import '../../styled/StyledDrawerBody.js';
28
+ import { StyledDrawerFooter } from '../../styled/StyledDrawerFooter.js';
29
+ import '../../styled/StyledDrawerFooterItem.js';
30
+
31
+ const FooterComponent = forwardRef((props, ref) => React__default.createElement(StyledDrawerFooter, Object.assign({
32
+ ref: ref
33
+ }, props)));
34
+ FooterComponent.displayName = 'Drawer.Footer';
35
+ const Footer = FooterComponent;
36
+
37
+ export { Footer };
package/dist/esm/elements/Drawer/FooterItem.js ADDED
@@ -0,0 +1,37 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef } from 'react';
8
+ import '../../styled/StyledBackdrop.js';
9
+ import '../../styled/StyledBody.js';
10
+ import '../../styled/StyledClose.js';
11
+ import '../../styled/StyledFooter.js';
12
+ import '../../styled/StyledFooterItem.js';
13
+ import '../../styled/StyledHeader.js';
14
+ import '../../styled/StyledDangerIcon.js';
15
+ import '../../styled/StyledModal.js';
16
+ import '../../styled/StyledTooltipModalBackdrop.js';
17
+ import '../../styled/StyledTooltipWrapper.js';
18
+ import '../../styled/StyledTooltipModal.js';
19
+ import '../../styled/StyledTooltipModalTitle.js';
20
+ import '../../styled/StyledTooltipModalBody.js';
21
+ import '../../styled/StyledTooltipModalFooter.js';
22
+ import '../../styled/StyledTooltipModalFooterItem.js';
23
+ import '../../styled/StyledTooltipModalClose.js';
24
+ import '../../styled/StyledDrawer.js';
25
+ import '../../styled/StyledDrawerHeader.js';
26
+ import '../../styled/StyledDrawerClose.js';
27
+ import '../../styled/StyledDrawerBody.js';
28
+ import '../../styled/StyledDrawerFooter.js';
29
+ import { StyledDrawerFooterItem } from '../../styled/StyledDrawerFooterItem.js';
30
+
31
+ const FooterItemComponent = forwardRef((props, ref) => React__default.createElement(StyledDrawerFooterItem, Object.assign({
32
+ ref: ref
33
+ }, props)));
34
+ FooterItemComponent.displayName = 'Drawer.FooterItem';
35
+ const FooterItem = FooterItemComponent;
36
+
37
+ export { FooterItem };
package/dist/esm/elements/Drawer/Header.js ADDED
@@ -0,0 +1,69 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef, useEffect } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import { useModalContext } from '../../utils/useModalContext.js';
10
+ import '../../styled/StyledBackdrop.js';
11
+ import '../../styled/StyledBody.js';
12
+ import '../../styled/StyledClose.js';
13
+ import '../../styled/StyledFooter.js';
14
+ import '../../styled/StyledFooterItem.js';
15
+ import '../../styled/StyledHeader.js';
16
+ import '../../styled/StyledDangerIcon.js';
17
+ import '../../styled/StyledModal.js';
18
+ import '../../styled/StyledTooltipModalBackdrop.js';
19
+ import '../../styled/StyledTooltipWrapper.js';
20
+ import '../../styled/StyledTooltipModal.js';
21
+ import '../../styled/StyledTooltipModalTitle.js';
22
+ import '../../styled/StyledTooltipModalBody.js';
23
+ import '../../styled/StyledTooltipModalFooter.js';
24
+ import '../../styled/StyledTooltipModalFooterItem.js';
25
+ import '../../styled/StyledTooltipModalClose.js';
26
+ import '../../styled/StyledDrawer.js';
27
+ import { StyledDrawerHeader } from '../../styled/StyledDrawerHeader.js';
28
+ import '../../styled/StyledDrawerClose.js';
29
+ import '../../styled/StyledDrawerBody.js';
30
+ import '../../styled/StyledDrawerFooter.js';
31
+ import '../../styled/StyledDrawerFooterItem.js';
32
+
33
+ const HeaderComponent = forwardRef((_ref, ref) => {
34
+ let {
35
+ tag,
36
+ ...other
37
+ } = _ref;
38
+ const {
39
+ isCloseButtonPresent,
40
+ hasHeader,
41
+ setHasHeader,
42
+ getTitleProps
43
+ } = useModalContext();
44
+ useEffect(() => {
45
+ if (!hasHeader && setHasHeader) {
46
+ setHasHeader(true);
47
+ }
48
+ return () => {
49
+ if (hasHeader && setHasHeader) {
50
+ setHasHeader(false);
51
+ }
52
+ };
53
+ }, [hasHeader, setHasHeader]);
54
+ return React__default.createElement(StyledDrawerHeader, Object.assign({}, getTitleProps(other), {
55
+ as: tag,
56
+ isCloseButtonPresent: isCloseButtonPresent,
57
+ ref: ref
58
+ }));
59
+ });
60
+ HeaderComponent.displayName = 'Drawer.Header';
61
+ HeaderComponent.propTypes = {
62
+ tag: PropTypes.any
63
+ };
64
+ HeaderComponent.defaultProps = {
65
+ tag: 'div'
66
+ };
67
+ const Header = HeaderComponent;
68
+
69
+ export { Header };
package/dist/esm/elements/Footer.js ADDED
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default from 'react';
8
+ import '../styled/StyledBackdrop.js';
9
+ import '../styled/StyledBody.js';
10
+ import '../styled/StyledClose.js';
11
+ import { StyledFooter } from '../styled/StyledFooter.js';
12
+ import '../styled/StyledFooterItem.js';
13
+ import '../styled/StyledHeader.js';
14
+ import '../styled/StyledDangerIcon.js';
15
+ import '../styled/StyledModal.js';
16
+ import '../styled/StyledTooltipModalBackdrop.js';
17
+ import '../styled/StyledTooltipWrapper.js';
18
+ import '../styled/StyledTooltipModal.js';
19
+ import '../styled/StyledTooltipModalTitle.js';
20
+ import '../styled/StyledTooltipModalBody.js';
21
+ import '../styled/StyledTooltipModalFooter.js';
22
+ import '../styled/StyledTooltipModalFooterItem.js';
23
+ import '../styled/StyledTooltipModalClose.js';
24
+ import '../styled/StyledDrawer.js';
25
+ import '../styled/StyledDrawerHeader.js';
26
+ import '../styled/StyledDrawerClose.js';
27
+ import '../styled/StyledDrawerBody.js';
28
+ import '../styled/StyledDrawerFooter.js';
29
+ import '../styled/StyledDrawerFooterItem.js';
30
+ import { useModalContext } from '../utils/useModalContext.js';
31
+
32
+ const Footer = React__default.forwardRef((props, ref) => {
33
+ const {
34
+ isLarge
35
+ } = useModalContext();
36
+ return React__default.createElement(StyledFooter, Object.assign({
37
+ ref: ref,
38
+ isLarge: isLarge
39
+ }, props));
40
+ });
41
+ Footer.displayName = 'Footer';
42
+
43
+ export { Footer };
package/dist/esm/elements/FooterItem.js ADDED
@@ -0,0 +1,36 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default from 'react';
8
+ import '../styled/StyledBackdrop.js';
9
+ import '../styled/StyledBody.js';
10
+ import '../styled/StyledClose.js';
11
+ import '../styled/StyledFooter.js';
12
+ import { StyledFooterItem } from '../styled/StyledFooterItem.js';
13
+ import '../styled/StyledHeader.js';
14
+ import '../styled/StyledDangerIcon.js';
15
+ import '../styled/StyledModal.js';
16
+ import '../styled/StyledTooltipModalBackdrop.js';
17
+ import '../styled/StyledTooltipWrapper.js';
18
+ import '../styled/StyledTooltipModal.js';
19
+ import '../styled/StyledTooltipModalTitle.js';
20
+ import '../styled/StyledTooltipModalBody.js';
21
+ import '../styled/StyledTooltipModalFooter.js';
22
+ import '../styled/StyledTooltipModalFooterItem.js';
23
+ import '../styled/StyledTooltipModalClose.js';
24
+ import '../styled/StyledDrawer.js';
25
+ import '../styled/StyledDrawerHeader.js';
26
+ import '../styled/StyledDrawerClose.js';
27
+ import '../styled/StyledDrawerBody.js';
28
+ import '../styled/StyledDrawerFooter.js';
29
+ import '../styled/StyledDrawerFooterItem.js';
30
+
31
+ const FooterItem = React__default.forwardRef((props, ref) => React__default.createElement(StyledFooterItem, Object.assign({
32
+ ref: ref
33
+ }, props)));
34
+ FooterItem.displayName = 'FooterItem';
35
+
36
+ export { FooterItem };