@zendeskgarden/react-modals 9.0.0-next.6 → 9.0.0-next.8

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 (49) hide show
  1. package/dist/esm/elements/Body.js +42 -0
  2. package/dist/esm/elements/Close.js +53 -0
  3. package/dist/esm/elements/Drawer/Body.js +43 -0
  4. package/dist/esm/elements/Drawer/Close.js +54 -0
  5. package/dist/esm/elements/Drawer/Drawer.js +182 -0
  6. package/dist/esm/elements/Drawer/Footer.js +37 -0
  7. package/dist/esm/elements/Drawer/FooterItem.js +37 -0
  8. package/dist/esm/elements/Drawer/Header.js +69 -0
  9. package/dist/esm/elements/Footer.js +43 -0
  10. package/dist/esm/elements/FooterItem.js +36 -0
  11. package/dist/esm/elements/Header.js +70 -0
  12. package/dist/esm/elements/Modal.js +191 -0
  13. package/dist/esm/elements/TooltipModal/Body.js +43 -0
  14. package/dist/esm/elements/TooltipModal/Close.js +49 -0
  15. package/dist/esm/elements/TooltipModal/Footer.js +37 -0
  16. package/dist/esm/elements/TooltipModal/FooterItem.js +37 -0
  17. package/dist/esm/elements/TooltipModal/Title.js +68 -0
  18. package/dist/esm/elements/TooltipModal/TooltipModal.js +192 -0
  19. package/dist/esm/index.js +15 -0
  20. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js +37 -0
  21. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js +26 -0
  22. package/dist/esm/styled/StyledBackdrop.js +34 -0
  23. package/dist/esm/styled/StyledBody.js +22 -0
  24. package/dist/esm/styled/StyledClose.js +37 -0
  25. package/dist/esm/styled/StyledDangerIcon.js +19 -0
  26. package/dist/esm/styled/StyledDrawer.js +36 -0
  27. package/dist/esm/styled/StyledDrawerBody.js +23 -0
  28. package/dist/esm/styled/StyledDrawerClose.js +28 -0
  29. package/dist/esm/styled/StyledDrawerFooter.js +22 -0
  30. package/dist/esm/styled/StyledDrawerFooterItem.js +23 -0
  31. package/dist/esm/styled/StyledDrawerHeader.js +24 -0
  32. package/dist/esm/styled/StyledFooter.js +22 -0
  33. package/dist/esm/styled/StyledFooterItem.js +22 -0
  34. package/dist/esm/styled/StyledHeader.js +23 -0
  35. package/dist/esm/styled/StyledModal.js +50 -0
  36. package/dist/esm/styled/StyledTooltipModal.js +33 -0
  37. package/dist/esm/styled/StyledTooltipModalBackdrop.js +22 -0
  38. package/dist/esm/styled/StyledTooltipModalBody.js +22 -0
  39. package/dist/esm/styled/StyledTooltipModalClose.js +23 -0
  40. package/dist/esm/styled/StyledTooltipModalFooter.js +22 -0
  41. package/dist/esm/styled/StyledTooltipModalFooterItem.js +23 -0
  42. package/dist/esm/styled/StyledTooltipModalTitle.js +28 -0
  43. package/dist/esm/styled/StyledTooltipWrapper.js +25 -0
  44. package/dist/esm/types/index.js +11 -0
  45. package/dist/esm/utils/useModalContext.js +18 -0
  46. package/dist/esm/utils/useTooltipModalContext.js +18 -0
  47. package/dist/index.cjs.js +49 -72
  48. package/package.json +5 -6
  49. package/dist/index.esm.js +0 -1125
package/dist/index.esm.js DELETED
@@ -1,1125 +0,0 @@
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
-
8
- import * as React from 'react';
9
- import React__default, { createContext, useContext, forwardRef, useEffect, useRef, useState, useMemo } from 'react';
10
- import ReactDOM, { createPortal } from 'react-dom';
11
- import styled, { keyframes, css, ThemeContext } from 'styled-components';
12
- import PropTypes from 'prop-types';
13
- import { getColorV8, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, focusStyles, mediaQuery, menuStyles, getMenuPosition, arrowStyles, getArrowPosition, useText, useDocument, getFloatingPlacements, PLACEMENT as PLACEMENT$1 } from '@zendeskgarden/react-theming';
14
- import { useModal } from '@zendeskgarden/container-modal';
15
- import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
16
- import { mergeRefs } from 'react-merge-refs';
17
- import isWindow from 'dom-helpers/isWindow';
18
- import ownerDocument from 'dom-helpers/ownerDocument';
19
- import ownerWindow from 'dom-helpers/ownerWindow';
20
- import css$1 from 'dom-helpers/css';
21
- import getScrollbarSize from 'dom-helpers/scrollbarSize';
22
- import { CSSTransition } from 'react-transition-group';
23
- import { useFloating, platform, offset, autoPlacement, autoUpdate } from '@floating-ui/react-dom';
24
- import activeElement from 'dom-helpers/activeElement';
25
-
26
- function _extends$2() {
27
- _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
28
- for (var i = 1; i < arguments.length; i++) {
29
- var source = arguments[i];
30
- for (var key in source) {
31
- if (Object.prototype.hasOwnProperty.call(source, key)) {
32
- target[key] = source[key];
33
- }
34
- }
35
- }
36
- return target;
37
- };
38
- return _extends$2.apply(this, arguments);
39
- }
40
-
41
- const COMPONENT_ID$j = 'modals.backdrop';
42
- const animationName$1 = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
43
- const animationStyles$1 = props => {
44
- if (props.isAnimated) {
45
- return css(["animation:", " 0.15s ease-in;"], animationName$1);
46
- }
47
- return '';
48
- };
49
- const StyledBackdrop = styled.div.attrs({
50
- 'data-garden-id': COMPONENT_ID$j,
51
- 'data-garden-version': '9.0.0-next.6'
52
- }).withConfig({
53
- displayName: "StyledBackdrop",
54
- componentId: "sc-mzdjpo-0"
55
- })(["display:flex;position:fixed;inset:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";", ";", ";"], props => props.isCentered && 'center', props => props.isCentered && 'center', props => getColorV8('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => retrieveComponentStyles(COMPONENT_ID$j, props));
56
- StyledBackdrop.defaultProps = {
57
- theme: DEFAULT_THEME
58
- };
59
- StyledBackdrop.propTypes = {
60
- isCentered: PropTypes.bool,
61
- isAnimated: PropTypes.bool
62
- };
63
-
64
- const COMPONENT_ID$i = 'modals.body';
65
- const StyledBody = styled.div.attrs({
66
- 'data-garden-id': COMPONENT_ID$i,
67
- 'data-garden-version': '9.0.0-next.6'
68
- }).withConfig({
69
- displayName: "StyledBody",
70
- componentId: "sc-14rzecg-0"
71
- })(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$i, props));
72
- StyledBody.defaultProps = {
73
- theme: DEFAULT_THEME
74
- };
75
-
76
- const COMPONENT_ID$h = 'modals.close';
77
- const colorStyles = props => {
78
- const backgroundColor = 'primaryHue';
79
- const foregroundColor = 'neutralHue';
80
- return css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], getColorV8(foregroundColor, 600, props.theme), getColorV8(backgroundColor, 600, props.theme, 0.08), getColorV8(foregroundColor, 700, props.theme), focusStyles({
81
- theme: props.theme,
82
- hue: backgroundColor
83
- }), getColorV8(backgroundColor, 600, props.theme, 0.2), getColorV8(foregroundColor, 800, props.theme));
84
- };
85
- const BASE_MULTIPLIERS$1 = {
86
- top: 2.5,
87
- side: 6.5,
88
- size: 10
89
- };
90
- const StyledClose = styled.button.attrs({
91
- 'data-garden-id': COMPONENT_ID$h,
92
- 'data-garden-version': '9.0.0-next.6'
93
- }).withConfig({
94
- displayName: "StyledClose",
95
- componentId: "sc-iseudj-0"
96
- })(["display:block;position:absolute;top:", "px;", ":", ";transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}", " & > svg{vertical-align:middle;}", ";"], props => props.theme.space.base * BASE_MULTIPLIERS$1.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS$1.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS$1.size, props => props.theme.space.base * BASE_MULTIPLIERS$1.size, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID$h, props));
97
- StyledClose.defaultProps = {
98
- theme: DEFAULT_THEME
99
- };
100
-
101
- const COMPONENT_ID$g = 'modals.footer';
102
- const StyledFooter = styled.div.attrs({
103
- 'data-garden-id': COMPONENT_ID$g,
104
- 'data-garden-version': '9.0.0-next.6'
105
- }).withConfig({
106
- displayName: "StyledFooter",
107
- componentId: "sc-d8pfdu-0"
108
- })(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], props => props.isLarge && `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`, props => props.isLarge ? `${props.theme.space.base * 8}px ${props.theme.space.base * 10}px` : `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px ${props.theme.space.base * 8}px`, props => retrieveComponentStyles(COMPONENT_ID$g, props));
109
- StyledFooter.defaultProps = {
110
- theme: DEFAULT_THEME
111
- };
112
-
113
- const COMPONENT_ID$f = 'modals.footer_item';
114
- const StyledFooterItem = styled.span.attrs({
115
- 'data-garden-id': COMPONENT_ID$f,
116
- 'data-garden-version': '9.0.0-next.6'
117
- }).withConfig({
118
- displayName: "StyledFooterItem",
119
- componentId: "sc-1mb76hl-0"
120
- })(["display:flex;margin-", ":", "px;min-width:0;&:first-child{margin-", ":0;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 5, props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID$f, props));
121
- StyledFooterItem.defaultProps = {
122
- theme: DEFAULT_THEME
123
- };
124
-
125
- const COMPONENT_ID$e = 'modals.header';
126
- const StyledHeader = styled.div.attrs({
127
- 'data-garden-id': COMPONENT_ID$e,
128
- 'data-garden-version': '9.0.0-next.6'
129
- }).withConfig({
130
- displayName: "StyledHeader",
131
- componentId: "sc-1787r9v-0"
132
- })(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", " line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, getColorV8('neutralHue', 200), props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? getColorV8('dangerHue', 600, props.theme) : getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$e, props));
133
- StyledHeader.defaultProps = {
134
- theme: DEFAULT_THEME
135
- };
136
-
137
- var _g, _circle;
138
- function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
139
- var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
140
- return /*#__PURE__*/React.createElement("svg", _extends$1({
141
- xmlns: "http://www.w3.org/2000/svg",
142
- width: 16,
143
- height: 16,
144
- focusable: "false",
145
- viewBox: "0 0 16 16",
146
- "aria-hidden": "true"
147
- }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
148
- fill: "none",
149
- stroke: "currentColor"
150
- }, /*#__PURE__*/React.createElement("circle", {
151
- cx: 7.5,
152
- cy: 8.5,
153
- r: 7
154
- }), /*#__PURE__*/React.createElement("path", {
155
- strokeLinecap: "round",
156
- d: "M7.5 4.5V9"
157
- }))), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
158
- cx: 7.5,
159
- cy: 12,
160
- r: 1,
161
- fill: "currentColor"
162
- })));
163
- };
164
-
165
- const StyledDangerIcon = styled(SvgAlertErrorStroke).withConfig({
166
- displayName: "StyledDangerIcon",
167
- componentId: "sc-1kwbb39-0"
168
- })(["position:absolute;top:", "px;", ":", ";"], props => props.theme.space.base * 5.5, props => props.theme.rtl ? 'right' : 'left', props => `${props.theme.space.base * 4}px`);
169
- StyledDangerIcon.defaultProps = {
170
- theme: DEFAULT_THEME
171
- };
172
-
173
- const COMPONENT_ID$d = 'modals.modal';
174
- const animationName = keyframes(["0%{transform:scale(0);opacity:0;}50%{transform:scale(1.05);}100%{opacity:1;}"]);
175
- const animationStyles = props => {
176
- if (props.isAnimated) {
177
- return css(["animation:", " 0.3s ease-in;"], animationName);
178
- }
179
- return '';
180
- };
181
- const boxShadow$1 = props => {
182
- const {
183
- theme
184
- } = props;
185
- const {
186
- space,
187
- shadows
188
- } = theme;
189
- const offsetY = `${space.base * 5}px`;
190
- const blurRadius = `${space.base * 7}px`;
191
- const color = getColorV8('neutralHue', 800, theme, 0.35);
192
- return shadows.lg(offsetY, blurRadius, color);
193
- };
194
- const sizeStyles$1 = props => {
195
- return css(["", "{width:", ";}"], mediaQuery('up', props.isLarge ? 'md' : 'sm', props.theme), props.isLarge ? props.theme.breakpoints.md : props.theme.breakpoints.sm);
196
- };
197
- const StyledModal = styled.div.attrs({
198
- 'data-garden-id': COMPONENT_ID$d,
199
- 'data-garden-version': '9.0.0-next.6'
200
- }).withConfig({
201
- displayName: "StyledModal",
202
- componentId: "sc-1pe1axu-0"
203
- })(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";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.borderRadii.md, boxShadow$1, props => getColorV8('background', 600 , props.theme), props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$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 => retrieveComponentStyles(COMPONENT_ID$d, props));
204
- StyledModal.propTypes = {
205
- isLarge: PropTypes.bool,
206
- isAnimated: PropTypes.bool
207
- };
208
- StyledModal.defaultProps = {
209
- theme: DEFAULT_THEME
210
- };
211
-
212
- const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
213
- const StyledTooltipModalBackdrop = styled.div.attrs({
214
- 'data-garden-id': COMPONENT_ID$c,
215
- 'data-garden-version': '9.0.0-next.6'
216
- }).withConfig({
217
- displayName: "StyledTooltipModalBackdrop",
218
- componentId: "sc-1yaomgq-0"
219
- })(["position:fixed;inset:0;z-index:400;overflow:hidden;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-tooltip-modal-transition-exit-active{pointer-events:none;}&.garden-tooltip-modal-transition-exit-active div{transition:opacity 200ms;opacity:0;}", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$c, props));
220
- StyledTooltipModalBackdrop.defaultProps = {
221
- theme: DEFAULT_THEME
222
- };
223
-
224
- const StyledTooltipWrapper = styled.div.attrs(props => ({
225
- className: props.isAnimated && 'is-animated'
226
- })).withConfig({
227
- displayName: "StyledTooltipWrapper",
228
- componentId: "sc-1xk05kf-0"
229
- })(["top:0;left:0;", ";"], props => menuStyles(getMenuPosition(props.placement), {
230
- theme: props.theme,
231
- hidden: false,
232
- zIndex: props.zIndex,
233
- animationModifier: '.is-animated'
234
- }));
235
- StyledTooltipWrapper.defaultProps = {
236
- theme: DEFAULT_THEME
237
- };
238
-
239
- const COMPONENT_ID$b = 'modals.tooltip_modal';
240
- const StyledTooltipModal = styled.div.attrs(props => ({
241
- 'data-garden-id': COMPONENT_ID$b,
242
- 'data-garden-version': '9.0.0-next.6',
243
- className: props.isAnimated && 'is-animated'
244
- })).withConfig({
245
- displayName: "StyledTooltipModal",
246
- componentId: "sc-42ubfr-0"
247
- })(["padding:", "px;width:400px;", ";", ";"], props => props.theme.space.base * 5, props => {
248
- const computedArrowStyles = arrowStyles(getArrowPosition(props.theme, props.placement), {
249
- size: `${props.theme.space.base * 2}px`,
250
- inset: '1px',
251
- animationModifier: '.is-animated'
252
- });
253
- if (props.isAnimated) {
254
- return props.hasArrow && props.transitionState === 'entered' && computedArrowStyles;
255
- }
256
- return props.hasArrow && computedArrowStyles;
257
- }, props => retrieveComponentStyles(COMPONENT_ID$b, props));
258
- StyledTooltipModal.defaultProps = {
259
- theme: DEFAULT_THEME
260
- };
261
-
262
- const COMPONENT_ID$a = 'modals.tooltip_modal.title';
263
- const sizeStyles = props => `
264
- /* stylelint-disable-next-line property-no-unknown */
265
- padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
266
- line-height: ${getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
267
- font-size: ${props.theme.fontSizes.md};
268
- `;
269
- const StyledTooltipModalTitle = styled.div.attrs({
270
- 'data-garden-id': COMPONENT_ID$a,
271
- 'data-garden-version': '9.0.0-next.6'
272
- }).withConfig({
273
- displayName: "StyledTooltipModalTitle",
274
- componentId: "sc-11xjgjs-0"
275
- })(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$a, props));
276
- StyledTooltipModalTitle.defaultProps = {
277
- theme: DEFAULT_THEME
278
- };
279
-
280
- const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
281
- const StyledTooltipModalBody = styled.div.attrs({
282
- 'data-garden-id': COMPONENT_ID$9,
283
- 'data-garden-version': '9.0.0-next.6'
284
- }).withConfig({
285
- displayName: "StyledTooltipModalBody",
286
- componentId: "sc-195dkzj-0"
287
- })(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$9, props));
288
- StyledTooltipModalBody.defaultProps = {
289
- theme: DEFAULT_THEME
290
- };
291
-
292
- const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
293
- const StyledTooltipModalFooter = styled.div.attrs({
294
- 'data-garden-id': COMPONENT_ID$8,
295
- 'data-garden-version': '9.0.0-next.6'
296
- }).withConfig({
297
- displayName: "StyledTooltipModalFooter",
298
- componentId: "sc-fm36a9-0"
299
- })(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:", "px;", ";"], p => p.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$8, props));
300
- StyledTooltipModalFooter.defaultProps = {
301
- theme: DEFAULT_THEME
302
- };
303
-
304
- const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
305
- const StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
306
- 'data-garden-id': COMPONENT_ID$7,
307
- 'data-garden-version': '9.0.0-next.6'
308
- }).withConfig({
309
- displayName: "StyledTooltipModalFooterItem",
310
- componentId: "sc-1nahj6p-0"
311
- })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$7, props));
312
- StyledTooltipModalFooterItem.defaultProps = {
313
- theme: DEFAULT_THEME
314
- };
315
-
316
- const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
317
- const StyledTooltipModalClose = styled(StyledClose).attrs({
318
- 'data-garden-id': COMPONENT_ID$6,
319
- 'data-garden-version': '9.0.0-next.6'
320
- }).withConfig({
321
- displayName: "StyledTooltipModalClose",
322
- componentId: "sc-1h2ke3q-0"
323
- })(["top:", "px;", ":", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base * 3.5, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * 3}px`, props => props.theme.space.base * 8, props => props.theme.space.base * 8, props => retrieveComponentStyles(COMPONENT_ID$6, props));
324
- StyledTooltipModalClose.defaultProps = {
325
- theme: DEFAULT_THEME
326
- };
327
-
328
- const COMPONENT_ID$5 = 'modals.drawer_modal';
329
- const DRAWER_WIDTH = 380;
330
- const boxShadow = props => {
331
- const {
332
- theme
333
- } = props;
334
- const {
335
- space,
336
- shadows
337
- } = theme;
338
- const offsetY = `${space.base * 5}px`;
339
- const blurRadius = `${space.base * 7}px`;
340
- const color = getColorV8('neutralHue', 800, theme, 0.35);
341
- return shadows.lg(offsetY, blurRadius, color);
342
- };
343
- const StyledDrawer = styled.div.attrs({
344
- 'data-garden-id': COMPONENT_ID$5,
345
- 'data-garden-version': '9.0.0-next.6'
346
- }).withConfig({
347
- displayName: "StyledDrawer",
348
- componentId: "sc-zp66t3-0"
349
- })(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', boxShadow, props => getColorV8('background', 600 , props.theme), DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => retrieveComponentStyles(COMPONENT_ID$5, props));
350
- StyledDrawer.defaultProps = {
351
- theme: DEFAULT_THEME
352
- };
353
-
354
- const COMPONENT_ID$4 = 'modals.drawer_modal.close';
355
- const BASE_MULTIPLIERS = {
356
- top: BASE_MULTIPLIERS$1.top,
357
- side: 2,
358
- size: BASE_MULTIPLIERS$1.size
359
- };
360
- const StyledDrawerClose = styled(StyledClose).attrs({
361
- 'data-garden-id': COMPONENT_ID$4,
362
- 'data-garden-version': '9.0.0-next.6'
363
- }).withConfig({
364
- displayName: "StyledDrawerClose",
365
- componentId: "sc-1a0xt3x-0"
366
- })(["", ":", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => retrieveComponentStyles(COMPONENT_ID$4, props));
367
- StyledDrawerClose.defaultProps = {
368
- theme: DEFAULT_THEME
369
- };
370
-
371
- const COMPONENT_ID$3 = 'modals.drawer_modal.header';
372
- const StyledDrawerHeader = styled(StyledHeader).attrs({
373
- 'data-garden-id': COMPONENT_ID$3,
374
- 'data-garden-version': '9.0.0-next.6'
375
- }).withConfig({
376
- displayName: "StyledDrawerHeader",
377
- componentId: "sc-y4mgkj-0"
378
- })(["padding:", "px;", " ", ";"], props => props.theme.space.base * 5, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)}px;`, props => retrieveComponentStyles(COMPONENT_ID$3, props));
379
- StyledDrawerHeader.defaultProps = {
380
- theme: DEFAULT_THEME
381
- };
382
-
383
- const COMPONENT_ID$2 = 'modals.drawer_modal.body';
384
- const StyledDrawerBody = styled(StyledBody).attrs({
385
- 'data-garden-id': COMPONENT_ID$2,
386
- 'data-garden-version': '9.0.0-next.6'
387
- }).withConfig({
388
- displayName: "StyledDrawerBody",
389
- componentId: "sc-13qufyn-0"
390
- })(["padding:", "px;", ";"], props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$2, props));
391
- StyledDrawerBody.defaultProps = {
392
- theme: DEFAULT_THEME
393
- };
394
-
395
- const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
396
- const StyledDrawerFooter = styled.div.attrs({
397
- 'data-garden-id': COMPONENT_ID$1,
398
- 'data-garden-version': '9.0.0-next.6'
399
- }).withConfig({
400
- displayName: "StyledDrawerFooter",
401
- componentId: "sc-kc7e6p-0"
402
- })(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$1, props));
403
- StyledDrawerFooter.defaultProps = {
404
- theme: DEFAULT_THEME
405
- };
406
-
407
- const COMPONENT_ID = 'modals.drawer_modal.footer_item';
408
- const StyledDrawerFooterItem = styled(StyledFooterItem).attrs({
409
- 'data-garden-id': COMPONENT_ID,
410
- 'data-garden-version': '9.0.0-next.6'
411
- }).withConfig({
412
- displayName: "StyledDrawerFooterItem",
413
- componentId: "sc-m2yul4-0"
414
- })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
415
- StyledDrawerFooterItem.defaultProps = {
416
- theme: DEFAULT_THEME
417
- };
418
-
419
- const ModalsContext = createContext(undefined);
420
- const useModalContext = () => {
421
- const context = useContext(ModalsContext);
422
- if (context === undefined) {
423
- throw new Error('useModalContext must be used within a ModalsContext.Provider');
424
- }
425
- return context;
426
- };
427
-
428
- const Body$2 = forwardRef((props, ref) => {
429
- const {
430
- getContentProps
431
- } = useModalContext();
432
- return React__default.createElement(StyledBody, _extends$2({}, getContentProps(props), {
433
- ref: ref
434
- }));
435
- });
436
- Body$2.displayName = 'Body';
437
-
438
- var _path;
439
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
440
- var SvgXStroke = function SvgXStroke(props) {
441
- return /*#__PURE__*/React.createElement("svg", _extends({
442
- xmlns: "http://www.w3.org/2000/svg",
443
- width: 16,
444
- height: 16,
445
- focusable: "false",
446
- viewBox: "0 0 16 16",
447
- "aria-hidden": "true"
448
- }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
449
- stroke: "currentColor",
450
- strokeLinecap: "round",
451
- d: "M3 13L13 3m0 10L3 3"
452
- })));
453
- };
454
-
455
- const Close$2 = forwardRef((props, ref) => {
456
- const {
457
- getCloseProps,
458
- setIsCloseButtonPresent
459
- } = useModalContext();
460
- useEffect(() => {
461
- setIsCloseButtonPresent(true);
462
- return () => setIsCloseButtonPresent(false);
463
- });
464
- const ariaLabel = useText(Close$2, props, 'aria-label', 'Close modal');
465
- return React__default.createElement(StyledClose, _extends$2({}, getCloseProps({
466
- ...props,
467
- 'aria-label': ariaLabel
468
- }), {
469
- ref: ref
470
- }), React__default.createElement(SvgXStroke, null));
471
- });
472
- Close$2.displayName = 'Close';
473
-
474
- const Footer$2 = React__default.forwardRef((props, ref) => {
475
- const {
476
- isLarge
477
- } = useModalContext();
478
- return React__default.createElement(StyledFooter, _extends$2({
479
- ref: ref,
480
- isLarge: isLarge
481
- }, props));
482
- });
483
- Footer$2.displayName = 'Footer';
484
-
485
- const FooterItem$2 = React__default.forwardRef((props, ref) => React__default.createElement(StyledFooterItem, _extends$2({
486
- ref: ref
487
- }, props)));
488
- FooterItem$2.displayName = 'FooterItem';
489
-
490
- const Header$1 = forwardRef((_ref, ref) => {
491
- let {
492
- children,
493
- tag,
494
- ...other
495
- } = _ref;
496
- const {
497
- isCloseButtonPresent,
498
- hasHeader,
499
- setHasHeader,
500
- getTitleProps
501
- } = useModalContext();
502
- useEffect(() => {
503
- if (!hasHeader && setHasHeader) {
504
- setHasHeader(true);
505
- }
506
- return () => {
507
- if (hasHeader && setHasHeader) {
508
- setHasHeader(false);
509
- }
510
- };
511
- }, [hasHeader, setHasHeader]);
512
- return React__default.createElement(StyledHeader, _extends$2({}, getTitleProps(other), {
513
- as: tag,
514
- isCloseButtonPresent: isCloseButtonPresent,
515
- ref: ref
516
- }), other.isDanger && React__default.createElement(StyledDangerIcon, null), children);
517
- });
518
- Header$1.displayName = 'Header';
519
- Header$1.propTypes = {
520
- isDanger: PropTypes.bool,
521
- tag: PropTypes.any
522
- };
523
- Header$1.defaultProps = {
524
- tag: 'div'
525
- };
526
-
527
- const isOverflowing = element => {
528
- const doc = ownerDocument(element);
529
- const win = ownerWindow(doc);
530
- const isBody = element && element.tagName.toLowerCase() === 'body';
531
- if (!isWindow(doc) && !isBody) {
532
- return element.scrollHeight > element.clientHeight;
533
- }
534
- const style = win.getComputedStyle(doc.body);
535
- const marginLeft = parseInt(style.getPropertyValue('margin-left'), 10);
536
- const marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
537
- return marginLeft + doc.body.clientWidth + marginRight < win.innerWidth;
538
- };
539
- const ModalComponent = forwardRef((_ref, ref) => {
540
- let {
541
- backdropProps,
542
- children,
543
- onClose,
544
- isLarge,
545
- isCentered,
546
- isAnimated,
547
- id,
548
- appendToNode,
549
- focusOnMount,
550
- restoreFocus,
551
- ...modalProps
552
- } = _ref;
553
- const theme = useContext(ThemeContext);
554
- const modalRef = useRef(null);
555
- const environment = useDocument(theme);
556
- const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
557
- const [hasHeader, setHasHeader] = useState(false);
558
- const {
559
- getBackdropProps,
560
- getModalProps,
561
- getTitleProps,
562
- getContentProps,
563
- getCloseProps
564
- } = useModal({
565
- idPrefix: id,
566
- onClose,
567
- modalRef,
568
- focusOnMount,
569
- restoreFocus
570
- });
571
- useFocusVisible({
572
- scope: modalRef,
573
- relativeDocument: environment
574
- });
575
- useEffect(() => {
576
- if (!environment) {
577
- return undefined;
578
- }
579
- const htmlElement = environment.querySelector('html');
580
- const bodyElement = environment.querySelector('body');
581
- let previousHtmlOverflow;
582
- let previousBodyPaddingRight;
583
- if (bodyElement) {
584
- if (isOverflowing(bodyElement)) {
585
- const scrollbarSize = getScrollbarSize();
586
- const bodyPaddingRight = parseInt(css$1(bodyElement, 'paddingRight') || '0', 10);
587
- previousBodyPaddingRight = bodyElement.style.paddingRight;
588
- bodyElement.style.paddingRight = `${bodyPaddingRight + scrollbarSize}px`;
589
- }
590
- if (htmlElement) {
591
- previousHtmlOverflow = htmlElement.style.overflow;
592
- htmlElement.style.overflow = 'hidden';
593
- }
594
- return () => {
595
- if (htmlElement) {
596
- htmlElement.style.overflow = previousHtmlOverflow;
597
- }
598
- bodyElement.style.paddingRight = previousBodyPaddingRight;
599
- };
600
- }
601
- return undefined;
602
- }, [environment]);
603
- const rootNode = useMemo(() => {
604
- if (appendToNode) {
605
- return appendToNode;
606
- }
607
- if (environment) {
608
- return environment.body;
609
- }
610
- return undefined;
611
- }, [appendToNode, environment]);
612
- const value = useMemo(() => ({
613
- isLarge,
614
- isCloseButtonPresent,
615
- hasHeader,
616
- setHasHeader,
617
- getTitleProps,
618
- getContentProps,
619
- getCloseProps,
620
- setIsCloseButtonPresent
621
- }), [isLarge, hasHeader, isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
622
- const modalContainerProps = getModalProps({
623
- 'aria-describedby': undefined,
624
- ...(hasHeader ? {} : {
625
- 'aria-labelledby': undefined
626
- })
627
- });
628
- const attribute = hasHeader ? 'aria-labelledby' : 'aria-label';
629
- const defaultValue = hasHeader ? modalContainerProps['aria-labelledby'] : 'Modal dialog';
630
- const labelValue = hasHeader ? modalContainerProps['aria-labelledby'] : modalProps['aria-label'];
631
- const ariaProps = {
632
- [attribute]: useText(ModalComponent, {
633
- [attribute]: labelValue
634
- }, attribute, defaultValue)
635
- };
636
- if (!rootNode) {
637
- return null;
638
- }
639
- return createPortal( React__default.createElement(ModalsContext.Provider, {
640
- value: value
641
- }, React__default.createElement(StyledBackdrop, _extends$2({
642
- isCentered: isCentered,
643
- isAnimated: isAnimated
644
- }, getBackdropProps(backdropProps)), React__default.createElement(StyledModal, _extends$2({
645
- isCentered: isCentered,
646
- isAnimated: isAnimated,
647
- isLarge: isLarge
648
- }, modalContainerProps, ariaProps, modalProps, {
649
- ref: mergeRefs([ref, modalRef])
650
- }), children))), rootNode);
651
- });
652
- ModalComponent.displayName = 'Modal';
653
- ModalComponent.propTypes = {
654
- backdropProps: PropTypes.object,
655
- isLarge: PropTypes.bool,
656
- isAnimated: PropTypes.bool,
657
- isCentered: PropTypes.bool,
658
- focusOnMount: PropTypes.bool,
659
- restoreFocus: PropTypes.bool,
660
- onClose: PropTypes.func,
661
- appendToNode: PropTypes.any
662
- };
663
- ModalComponent.defaultProps = {
664
- isAnimated: true,
665
- isCentered: true
666
- };
667
- const Modal = ModalComponent;
668
- Modal.Body = Body$2;
669
- Modal.Close = Close$2;
670
- Modal.Footer = Footer$2;
671
- Modal.FooterItem = FooterItem$2;
672
- Modal.Header = Header$1;
673
-
674
- const TooltipModalContext = createContext(undefined);
675
- const useTooltipModalContext = () => {
676
- const context = useContext(TooltipModalContext);
677
- if (context === undefined) {
678
- throw new Error('Element must be used within a TooltipModal component.');
679
- }
680
- return context;
681
- };
682
-
683
- const TitleComponent = forwardRef((_ref, ref) => {
684
- let {
685
- children,
686
- tag,
687
- ...other
688
- } = _ref;
689
- const {
690
- getTitleProps,
691
- hasTitle,
692
- setHasTitle
693
- } = useTooltipModalContext();
694
- useEffect(() => {
695
- if (!hasTitle && setHasTitle) {
696
- setHasTitle(true);
697
- }
698
- return () => {
699
- if (hasTitle && setHasTitle) {
700
- setHasTitle(false);
701
- }
702
- };
703
- }, [hasTitle, setHasTitle]);
704
- return React__default.createElement(StyledTooltipModalTitle, _extends$2({}, getTitleProps(other), {
705
- as: tag,
706
- ref: ref
707
- }), children);
708
- });
709
- TitleComponent.displayName = 'TooltipModal.Title';
710
- TitleComponent.propTypes = {
711
- tag: PropTypes.any
712
- };
713
- TitleComponent.defaultProps = {
714
- tag: 'div'
715
- };
716
- const Title = TitleComponent;
717
-
718
- const BodyComponent$1 = forwardRef((props, ref) => {
719
- const {
720
- getContentProps
721
- } = useTooltipModalContext();
722
- return React__default.createElement(StyledTooltipModalBody, _extends$2({}, getContentProps(props), {
723
- ref: ref
724
- }));
725
- });
726
- BodyComponent$1.displayName = 'TooltipModal.Body';
727
- const Body$1 = BodyComponent$1;
728
-
729
- const CloseComponent$1 = forwardRef((props, ref) => {
730
- const {
731
- getCloseProps
732
- } = useTooltipModalContext();
733
- const ariaLabel = useText(CloseComponent$1, props, 'aria-label', 'Close tooltip');
734
- return React__default.createElement(StyledTooltipModalClose, _extends$2({}, getCloseProps({
735
- ...props,
736
- 'aria-label': ariaLabel
737
- }), {
738
- ref: ref
739
- }), React__default.createElement(SvgXStroke, null));
740
- });
741
- CloseComponent$1.displayName = 'TooltipModal.Close';
742
- const Close$1 = CloseComponent$1;
743
-
744
- const FooterComponent$1 = forwardRef((props, ref) => React__default.createElement(StyledTooltipModalFooter, _extends$2({
745
- ref: ref
746
- }, props)));
747
- FooterComponent$1.displayName = 'TooltipModal.Footer';
748
- const Footer$1 = FooterComponent$1;
749
-
750
- const FooterItemComponent$1 = forwardRef((props, ref) => React__default.createElement(StyledTooltipModalFooterItem, _extends$2({
751
- ref: ref
752
- }, props)));
753
- FooterItemComponent$1.displayName = 'TooltipModal.FooterItem';
754
- const FooterItem$1 = FooterItemComponent$1;
755
-
756
- const PLACEMENT_DEFAULT = 'top';
757
- const TooltipModalComponent = React__default.forwardRef((_ref, ref) => {
758
- let {
759
- appendToNode,
760
- referenceElement,
761
- placement: _placement,
762
- onClose,
763
- hasArrow,
764
- isAnimated,
765
- zIndex,
766
- backdropProps,
767
- focusOnMount,
768
- restoreFocus,
769
- id,
770
- ...props
771
- } = _ref;
772
- const theme = useContext(ThemeContext) || DEFAULT_THEME;
773
- const previousReferenceElementRef = useRef();
774
- const modalRef = useRef(null);
775
- const transitionRef = useRef(null);
776
- const [floatingElement, setFloatingElement] = useState();
777
- const [hasTitle, setHasTitle] = useState(false);
778
- const {
779
- getTitleProps,
780
- getCloseProps,
781
- getContentProps,
782
- getBackdropProps,
783
- getModalProps
784
- } = useModal({
785
- idPrefix: id,
786
- onClose,
787
- modalRef,
788
- focusOnMount,
789
- restoreFocus: false
790
- });
791
- const [floatingPlacement] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
792
- const {
793
- refs,
794
- placement,
795
- update,
796
- floatingStyles: {
797
- transform
798
- }
799
- } = useFloating({
800
- platform: {
801
- ...platform,
802
- isRTL: () => theme.rtl
803
- },
804
- elements: {
805
- reference: referenceElement,
806
- floating: floatingElement
807
- },
808
- placement: floatingPlacement,
809
- middleware: [offset(theme.space.base * 3), _placement === 'auto' ? autoPlacement() : undefined]
810
- });
811
- useEffect(() => {
812
- let cleanup;
813
- if (referenceElement && floatingElement && refs.reference.current && refs.floating.current) {
814
- cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
815
- elementResize: typeof ResizeObserver === 'function'
816
- });
817
- }
818
- return () => cleanup && cleanup();
819
- }, [referenceElement, floatingElement, refs.reference, refs.floating, update]);
820
- useEffect(() => {
821
- if (!referenceElement && previousReferenceElementRef.current && restoreFocus) {
822
- previousReferenceElementRef.current.focus();
823
- }
824
- previousReferenceElementRef.current = referenceElement;
825
- }, [referenceElement, restoreFocus]);
826
- const modalProps = getModalProps({
827
- 'aria-describedby': undefined,
828
- ...(hasTitle ? {} : {
829
- 'aria-labelledby': undefined
830
- })
831
- });
832
- const attribute = hasTitle ? 'aria-labelledby' : 'aria-label';
833
- const defaultValue = hasTitle ? modalProps['aria-labelledby'] : 'Modal dialog';
834
- const labelValue = hasTitle ? modalProps['aria-labelledby'] : props['aria-label'];
835
- const ariaProps = {
836
- [attribute]: useText(TooltipModalComponent, {
837
- [attribute]: labelValue
838
- }, attribute, defaultValue)
839
- };
840
- const value = {
841
- hasTitle,
842
- setHasTitle,
843
- getTitleProps,
844
- getContentProps,
845
- getCloseProps
846
- };
847
- const Node = React__default.createElement(CSSTransition, {
848
- unmountOnExit: true,
849
- timeout: isAnimated ? 200 : 0,
850
- in: Boolean(referenceElement),
851
- classNames: isAnimated ? 'garden-tooltip-modal-transition' : '',
852
- nodeRef: transitionRef
853
- }, transitionState => {
854
- return React__default.createElement(TooltipModalContext.Provider, {
855
- value: value
856
- }, React__default.createElement(StyledTooltipModalBackdrop, _extends$2({}, getBackdropProps(), backdropProps, {
857
- ref: transitionRef
858
- }), React__default.createElement(StyledTooltipWrapper, {
859
- ref: setFloatingElement,
860
- style: {
861
- transform
862
- },
863
- placement: placement,
864
- zIndex: zIndex,
865
- isAnimated: isAnimated
866
- }, React__default.createElement(StyledTooltipModal, _extends$2({
867
- transitionState: transitionState,
868
- placement: placement,
869
- hasArrow: hasArrow,
870
- isAnimated: isAnimated
871
- }, modalProps, ariaProps, props, {
872
- ref: mergeRefs([modalRef, ref])
873
- })))));
874
- });
875
- return appendToNode ? createPortal(Node, appendToNode) : Node;
876
- });
877
- TooltipModalComponent.displayName = 'TooltipModal';
878
- TooltipModalComponent.defaultProps = {
879
- placement: 'auto',
880
- hasArrow: true,
881
- focusOnMount: true,
882
- restoreFocus: true
883
- };
884
- TooltipModalComponent.propTypes = {
885
- appendToNode: PropTypes.any,
886
- referenceElement: PropTypes.any,
887
- placement: PropTypes.any,
888
- isAnimated: PropTypes.bool,
889
- hasArrow: PropTypes.bool,
890
- zIndex: PropTypes.number,
891
- onClose: PropTypes.func,
892
- backdropProps: PropTypes.any,
893
- focusOnMount: PropTypes.bool,
894
- restoreFocus: PropTypes.bool
895
- };
896
- const TooltipModal = TooltipModalComponent;
897
- TooltipModal.Body = Body$1;
898
- TooltipModal.Close = Close$1;
899
- TooltipModal.Footer = Footer$1;
900
- TooltipModal.FooterItem = FooterItem$1;
901
- TooltipModal.Title = Title;
902
-
903
- const HeaderComponent = forwardRef((_ref, ref) => {
904
- let {
905
- tag,
906
- ...other
907
- } = _ref;
908
- const {
909
- isCloseButtonPresent,
910
- hasHeader,
911
- setHasHeader,
912
- getTitleProps
913
- } = useModalContext();
914
- useEffect(() => {
915
- if (!hasHeader && setHasHeader) {
916
- setHasHeader(true);
917
- }
918
- return () => {
919
- if (hasHeader && setHasHeader) {
920
- setHasHeader(false);
921
- }
922
- };
923
- }, [hasHeader, setHasHeader]);
924
- return React__default.createElement(StyledDrawerHeader, _extends$2({}, getTitleProps(other), {
925
- as: tag,
926
- isCloseButtonPresent: isCloseButtonPresent,
927
- ref: ref
928
- }));
929
- });
930
- HeaderComponent.displayName = 'Drawer.Header';
931
- HeaderComponent.propTypes = {
932
- tag: PropTypes.any
933
- };
934
- HeaderComponent.defaultProps = {
935
- tag: 'div'
936
- };
937
- const Header = HeaderComponent;
938
-
939
- const BodyComponent = forwardRef((props, ref) => {
940
- const {
941
- getContentProps
942
- } = useModalContext();
943
- return React__default.createElement(StyledDrawerBody, _extends$2({}, getContentProps(props), {
944
- ref: ref
945
- }), props.children);
946
- });
947
- BodyComponent.displayName = 'Drawer.Body';
948
- const Body = BodyComponent;
949
-
950
- const CloseComponent = forwardRef((props, ref) => {
951
- const {
952
- getCloseProps,
953
- setIsCloseButtonPresent
954
- } = useModalContext();
955
- useEffect(() => {
956
- setIsCloseButtonPresent(true);
957
- return () => setIsCloseButtonPresent(false);
958
- });
959
- const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close drawer');
960
- return React__default.createElement(StyledDrawerClose, _extends$2({}, getCloseProps({
961
- ...props,
962
- 'aria-label': ariaLabel
963
- }), {
964
- ref: ref
965
- }), React__default.createElement(SvgXStroke, null));
966
- });
967
- CloseComponent.displayName = 'Drawer.Close';
968
- const Close = CloseComponent;
969
-
970
- const FooterComponent = forwardRef((props, ref) => React__default.createElement(StyledDrawerFooter, _extends$2({
971
- ref: ref
972
- }, props)));
973
- FooterComponent.displayName = 'Drawer.Footer';
974
- const Footer = FooterComponent;
975
-
976
- const FooterItemComponent = forwardRef((props, ref) => React__default.createElement(StyledDrawerFooterItem, _extends$2({
977
- ref: ref
978
- }, props)));
979
- FooterItemComponent.displayName = 'Drawer.FooterItem';
980
- const FooterItem = FooterItemComponent;
981
-
982
- const DrawerComponent = forwardRef((_ref, ref) => {
983
- let {
984
- id,
985
- isOpen,
986
- onClose,
987
- backdropProps,
988
- appendToNode,
989
- focusOnMount,
990
- restoreFocus,
991
- ...props
992
- } = _ref;
993
- const modalRef = useRef(null);
994
- const transitionRef = useRef(null);
995
- const triggerRef = useRef(null);
996
- const theme = useContext(ThemeContext);
997
- const environment = useDocument(theme);
998
- const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
999
- const [hasHeader, setHasHeader] = useState(false);
1000
- useFocusVisible({
1001
- scope: modalRef,
1002
- relativeDocument: modalRef.current
1003
- });
1004
- const {
1005
- getTitleProps,
1006
- getCloseProps,
1007
- getContentProps,
1008
- getBackdropProps,
1009
- getModalProps
1010
- } = useModal({
1011
- idPrefix: id,
1012
- modalRef,
1013
- focusOnMount: false ,
1014
- restoreFocus: false ,
1015
- environment,
1016
- onClose
1017
- });
1018
- useEffect(() => {
1019
- if (environment) {
1020
- if (isOpen && modalRef.current) {
1021
- if (restoreFocus) {
1022
- triggerRef.current = activeElement(environment);
1023
- }
1024
- if (focusOnMount) {
1025
- modalRef.current.focus();
1026
- }
1027
- }
1028
- if (!isOpen && triggerRef.current) {
1029
- triggerRef.current.focus();
1030
- }
1031
- }
1032
- return () => {
1033
- if (!(restoreFocus && isOpen)) {
1034
- triggerRef.current = null;
1035
- }
1036
- };
1037
- }, [environment, restoreFocus, focusOnMount, isOpen]);
1038
- useEffect(() => {
1039
- if (!environment) {
1040
- return undefined;
1041
- }
1042
- const htmlElement = environment.querySelector('html');
1043
- let previousHtmlOverflow;
1044
- if (htmlElement && isOpen) {
1045
- previousHtmlOverflow = htmlElement.style.overflow;
1046
- htmlElement.style.overflow = 'hidden';
1047
- }
1048
- return () => {
1049
- if (htmlElement && isOpen) {
1050
- htmlElement.style.overflow = previousHtmlOverflow;
1051
- }
1052
- };
1053
- }, [environment, isOpen]);
1054
- const rootNode = useMemo(() => {
1055
- if (appendToNode) {
1056
- return appendToNode;
1057
- }
1058
- if (environment) {
1059
- return environment.body;
1060
- }
1061
- return undefined;
1062
- }, [appendToNode, environment]);
1063
- const value = useMemo(() => ({
1064
- isCloseButtonPresent,
1065
- hasHeader,
1066
- setHasHeader,
1067
- getTitleProps,
1068
- getContentProps,
1069
- getCloseProps,
1070
- setIsCloseButtonPresent
1071
- }), [isCloseButtonPresent, hasHeader, getTitleProps, getContentProps, getCloseProps]);
1072
- const modalProps = getModalProps({
1073
- 'aria-describedby': undefined,
1074
- ...(hasHeader ? {} : {
1075
- 'aria-labelledby': undefined
1076
- })
1077
- });
1078
- const attribute = hasHeader ? 'aria-labelledby' : 'aria-label';
1079
- const defaultValue = hasHeader ? modalProps['aria-labelledby'] : 'Modal dialog';
1080
- const labelValue = hasHeader ? modalProps['aria-labelledby'] : props['aria-label'];
1081
- const ariaProps = {
1082
- [attribute]: useText(DrawerComponent, {
1083
- [attribute]: labelValue
1084
- }, attribute, defaultValue)
1085
- };
1086
- if (!rootNode) {
1087
- return null;
1088
- }
1089
- return ReactDOM.createPortal( React__default.createElement(ModalsContext.Provider, {
1090
- value: value
1091
- }, React__default.createElement(CSSTransition, {
1092
- in: isOpen,
1093
- timeout: 250,
1094
- unmountOnExit: true,
1095
- classNames: "garden-drawer-transition",
1096
- nodeRef: transitionRef
1097
- }, React__default.createElement(StyledBackdrop, _extends$2({
1098
- isAnimated: true
1099
- }, getBackdropProps(backdropProps)), React__default.createElement(StyledDrawer, _extends$2({}, modalProps, ariaProps, props, {
1100
- ref: mergeRefs([ref, modalRef, transitionRef])
1101
- }))))), rootNode);
1102
- });
1103
- DrawerComponent.displayName = 'Drawer';
1104
- DrawerComponent.propTypes = {
1105
- backdropProps: PropTypes.object,
1106
- focusOnMount: PropTypes.bool,
1107
- restoreFocus: PropTypes.bool,
1108
- onClose: PropTypes.func,
1109
- appendToNode: PropTypes.any,
1110
- isOpen: PropTypes.bool
1111
- };
1112
- DrawerComponent.defaultProps = {
1113
- focusOnMount: true ,
1114
- restoreFocus: true
1115
- };
1116
- const Drawer = DrawerComponent;
1117
- Drawer.Body = Body;
1118
- Drawer.Close = Close;
1119
- Drawer.Footer = Footer;
1120
- Drawer.FooterItem = FooterItem;
1121
- Drawer.Header = Header;
1122
-
1123
- const PLACEMENT = ['auto', ...PLACEMENT$1];
1124
-
1125
- export { Body$2 as Body, Close$2 as Close, Drawer, Footer$2 as Footer, FooterItem$2 as FooterItem, Header$1 as Header, Modal, PLACEMENT, TooltipModal };