@zendeskgarden/react-modals 8.69.2 → 8.69.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +39 -120
- package/dist/index.esm.js +29 -116
- package/dist/typings/elements/Body.d.ts +11 -11
- package/dist/typings/elements/Close.d.ts +11 -11
- package/dist/typings/elements/DrawerModal/Body.d.ts +11 -11
- package/dist/typings/elements/DrawerModal/Close.d.ts +11 -11
- package/dist/typings/elements/DrawerModal/DrawerModal.d.ts +23 -23
- package/dist/typings/elements/DrawerModal/Footer.d.ts +11 -11
- package/dist/typings/elements/DrawerModal/FooterItem.d.ts +11 -11
- package/dist/typings/elements/DrawerModal/Header.d.ts +12 -12
- package/dist/typings/elements/Footer.d.ts +11 -11
- package/dist/typings/elements/FooterItem.d.ts +11 -11
- package/dist/typings/elements/Header.d.ts +12 -12
- package/dist/typings/elements/Modal.d.ts +12 -12
- package/dist/typings/elements/TooltipModal/Body.d.ts +11 -11
- package/dist/typings/elements/TooltipModal/Close.d.ts +11 -11
- package/dist/typings/elements/TooltipModal/Footer.d.ts +11 -11
- package/dist/typings/elements/TooltipModal/FooterItem.d.ts +11 -11
- package/dist/typings/elements/TooltipModal/Title.d.ts +12 -12
- package/dist/typings/elements/TooltipModal/TooltipModal.d.ts +23 -23
- package/dist/typings/index.d.ts +16 -16
- package/dist/typings/styled/StyledBackdrop.d.ts +14 -14
- package/dist/typings/styled/StyledBody.d.ts +10 -10
- package/dist/typings/styled/StyledClose.d.ts +19 -19
- package/dist/typings/styled/StyledDangerIcon.d.ts +7 -7
- package/dist/typings/styled/StyledDrawerModal.d.ts +14 -14
- package/dist/typings/styled/StyledDrawerModalBody.d.ts +13 -13
- package/dist/typings/styled/StyledDrawerModalClose.d.ts +18 -18
- package/dist/typings/styled/StyledDrawerModalFooter.d.ts +10 -10
- package/dist/typings/styled/StyledDrawerModalFooterItem.d.ts +10 -10
- package/dist/typings/styled/StyledDrawerModalHeader.d.ts +14 -14
- package/dist/typings/styled/StyledFooter.d.ts +11 -11
- package/dist/typings/styled/StyledFooterItem.d.ts +10 -10
- package/dist/typings/styled/StyledHeader.d.ts +15 -15
- package/dist/typings/styled/StyledModal.d.ts +16 -16
- package/dist/typings/styled/StyledTooltipModal.d.ts +14 -14
- package/dist/typings/styled/StyledTooltipModalBackdrop.d.ts +13 -13
- package/dist/typings/styled/StyledTooltipModalBody.d.ts +10 -10
- package/dist/typings/styled/StyledTooltipModalClose.d.ts +13 -13
- package/dist/typings/styled/StyledTooltipModalFooter.d.ts +10 -10
- package/dist/typings/styled/StyledTooltipModalFooterItem.d.ts +13 -13
- package/dist/typings/styled/StyledTooltipModalTitle.d.ts +11 -11
- package/dist/typings/styled/StyledTooltipWrapper.d.ts +13 -13
- package/dist/typings/styled/index.d.ts +28 -28
- package/dist/typings/types/index.d.ts +96 -96
- package/dist/typings/utils/gardenPlacements.d.ts +28 -28
- package/dist/typings/utils/useModalContext.d.ts +20 -20
- package/dist/typings/utils/useTooltipModalContext.d.ts +17 -17
- package/package.json +4 -4
package/dist/index.cjs.js
CHANGED
|
@@ -15,8 +15,14 @@ var reactTheming = require('@zendeskgarden/react-theming');
|
|
|
15
15
|
var containerModal = require('@zendeskgarden/container-modal');
|
|
16
16
|
var containerFocusvisible = require('@zendeskgarden/container-focusvisible');
|
|
17
17
|
var mergeRefs = require('react-merge-refs');
|
|
18
|
+
var isWindow = require('dom-helpers/isWindow');
|
|
19
|
+
var ownerDocument = require('dom-helpers/ownerDocument');
|
|
20
|
+
var ownerWindow = require('dom-helpers/ownerWindow');
|
|
21
|
+
var css = require('dom-helpers/css');
|
|
22
|
+
var getScrollbarSize = require('dom-helpers/scrollbarSize');
|
|
18
23
|
var reactPopper = require('react-popper');
|
|
19
24
|
var reactTransitionGroup = require('react-transition-group');
|
|
25
|
+
var activeElement = require('dom-helpers/activeElement');
|
|
20
26
|
|
|
21
27
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
22
28
|
|
|
@@ -43,6 +49,12 @@ var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
|
|
|
43
49
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
44
50
|
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
45
51
|
var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
|
|
52
|
+
var isWindow__default = /*#__PURE__*/_interopDefault(isWindow);
|
|
53
|
+
var ownerDocument__default = /*#__PURE__*/_interopDefault(ownerDocument);
|
|
54
|
+
var ownerWindow__default = /*#__PURE__*/_interopDefault(ownerWindow);
|
|
55
|
+
var css__default = /*#__PURE__*/_interopDefault(css);
|
|
56
|
+
var getScrollbarSize__default = /*#__PURE__*/_interopDefault(getScrollbarSize);
|
|
57
|
+
var activeElement__default = /*#__PURE__*/_interopDefault(activeElement);
|
|
46
58
|
|
|
47
59
|
function _extends$2() {
|
|
48
60
|
_extends$2 = Object.assign ? Object.assign.bind() : function (target) {
|
|
@@ -59,91 +71,11 @@ function _extends$2() {
|
|
|
59
71
|
return _extends$2.apply(this, arguments);
|
|
60
72
|
}
|
|
61
73
|
|
|
62
|
-
function isDocument(element) {
|
|
63
|
-
return 'nodeType' in element && element.nodeType === document.DOCUMENT_NODE;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
function isWindow(node) {
|
|
67
|
-
if ('window' in node && node.window === node) return node;
|
|
68
|
-
if (isDocument(node)) return node.defaultView || false;
|
|
69
|
-
return false;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
function ownerDocument(node) {
|
|
73
|
-
return node && node.ownerDocument || document;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
function ownerWindow(node) {
|
|
77
|
-
var doc = ownerDocument(node);
|
|
78
|
-
return doc && doc.defaultView || window;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
function getComputedStyle(node, psuedoElement) {
|
|
82
|
-
return ownerWindow(node).getComputedStyle(node, psuedoElement);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
var rUpper = /([A-Z])/g;
|
|
86
|
-
function hyphenate(string) {
|
|
87
|
-
return string.replace(rUpper, '-$1').toLowerCase();
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
var msPattern = /^ms-/;
|
|
91
|
-
function hyphenateStyleName(string) {
|
|
92
|
-
return hyphenate(string).replace(msPattern, '-ms-');
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
var supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i;
|
|
96
|
-
function isTransform(value) {
|
|
97
|
-
return !!(value && supportedTransforms.test(value));
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
function style(node, property) {
|
|
101
|
-
var css = '';
|
|
102
|
-
var transforms = '';
|
|
103
|
-
if (typeof property === 'string') {
|
|
104
|
-
return node.style.getPropertyValue(hyphenateStyleName(property)) || getComputedStyle(node).getPropertyValue(hyphenateStyleName(property));
|
|
105
|
-
}
|
|
106
|
-
Object.keys(property).forEach(function (key) {
|
|
107
|
-
var value = property[key];
|
|
108
|
-
if (!value && value !== 0) {
|
|
109
|
-
node.style.removeProperty(hyphenateStyleName(key));
|
|
110
|
-
} else if (isTransform(key)) {
|
|
111
|
-
transforms += key + "(" + value + ") ";
|
|
112
|
-
} else {
|
|
113
|
-
css += hyphenateStyleName(key) + ": " + value + ";";
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
if (transforms) {
|
|
117
|
-
css += "transform: " + transforms + ";";
|
|
118
|
-
}
|
|
119
|
-
node.style.cssText += ";" + css;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
|
|
123
|
-
|
|
124
|
-
var size;
|
|
125
|
-
function scrollbarSize(recalc) {
|
|
126
|
-
if (!size && size !== 0 || recalc) {
|
|
127
|
-
if (canUseDOM) {
|
|
128
|
-
var scrollDiv = document.createElement('div');
|
|
129
|
-
scrollDiv.style.position = 'absolute';
|
|
130
|
-
scrollDiv.style.top = '-9999px';
|
|
131
|
-
scrollDiv.style.width = '50px';
|
|
132
|
-
scrollDiv.style.height = '50px';
|
|
133
|
-
scrollDiv.style.overflow = 'scroll';
|
|
134
|
-
document.body.appendChild(scrollDiv);
|
|
135
|
-
size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
|
136
|
-
document.body.removeChild(scrollDiv);
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
return size;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
74
|
const COMPONENT_ID$j = 'modals.backdrop';
|
|
143
75
|
const animationName$1 = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
|
|
144
76
|
const StyledBackdrop = styled__default.default.div.attrs({
|
|
145
77
|
'data-garden-id': COMPONENT_ID$j,
|
|
146
|
-
'data-garden-version': '8.69.
|
|
78
|
+
'data-garden-version': '8.69.3'
|
|
147
79
|
}).withConfig({
|
|
148
80
|
displayName: "StyledBackdrop",
|
|
149
81
|
componentId: "sc-mzdjpo-0"
|
|
@@ -159,7 +91,7 @@ StyledBackdrop.propTypes = {
|
|
|
159
91
|
const COMPONENT_ID$i = 'modals.body';
|
|
160
92
|
const StyledBody = styled__default.default.div.attrs({
|
|
161
93
|
'data-garden-id': COMPONENT_ID$i,
|
|
162
|
-
'data-garden-version': '8.69.
|
|
94
|
+
'data-garden-version': '8.69.3'
|
|
163
95
|
}).withConfig({
|
|
164
96
|
displayName: "StyledBody",
|
|
165
97
|
componentId: "sc-14rzecg-0"
|
|
@@ -184,7 +116,7 @@ const BASE_MULTIPLIERS$1 = {
|
|
|
184
116
|
};
|
|
185
117
|
const StyledClose = styled__default.default.button.attrs({
|
|
186
118
|
'data-garden-id': COMPONENT_ID$h,
|
|
187
|
-
'data-garden-version': '8.69.
|
|
119
|
+
'data-garden-version': '8.69.3'
|
|
188
120
|
}).withConfig({
|
|
189
121
|
displayName: "StyledClose",
|
|
190
122
|
componentId: "sc-iseudj-0"
|
|
@@ -196,7 +128,7 @@ StyledClose.defaultProps = {
|
|
|
196
128
|
const COMPONENT_ID$g = 'modals.footer';
|
|
197
129
|
const StyledFooter = styled__default.default.div.attrs({
|
|
198
130
|
'data-garden-id': COMPONENT_ID$g,
|
|
199
|
-
'data-garden-version': '8.69.
|
|
131
|
+
'data-garden-version': '8.69.3'
|
|
200
132
|
}).withConfig({
|
|
201
133
|
displayName: "StyledFooter",
|
|
202
134
|
componentId: "sc-d8pfdu-0"
|
|
@@ -208,7 +140,7 @@ StyledFooter.defaultProps = {
|
|
|
208
140
|
const COMPONENT_ID$f = 'modals.footer_item';
|
|
209
141
|
const StyledFooterItem = styled__default.default.span.attrs({
|
|
210
142
|
'data-garden-id': COMPONENT_ID$f,
|
|
211
|
-
'data-garden-version': '8.69.
|
|
143
|
+
'data-garden-version': '8.69.3'
|
|
212
144
|
}).withConfig({
|
|
213
145
|
displayName: "StyledFooterItem",
|
|
214
146
|
componentId: "sc-1mb76hl-0"
|
|
@@ -220,7 +152,7 @@ StyledFooterItem.defaultProps = {
|
|
|
220
152
|
const COMPONENT_ID$e = 'modals.header';
|
|
221
153
|
const StyledHeader = styled__default.default.div.attrs({
|
|
222
154
|
'data-garden-id': COMPONENT_ID$e,
|
|
223
|
-
'data-garden-version': '8.69.
|
|
155
|
+
'data-garden-version': '8.69.3'
|
|
224
156
|
}).withConfig({
|
|
225
157
|
displayName: "StyledHeader",
|
|
226
158
|
componentId: "sc-1787r9v-0"
|
|
@@ -285,7 +217,7 @@ const sizeStyles$1 = props => {
|
|
|
285
217
|
};
|
|
286
218
|
const StyledModal = styled__default.default.div.attrs({
|
|
287
219
|
'data-garden-id': COMPONENT_ID$d,
|
|
288
|
-
'data-garden-version': '8.69.
|
|
220
|
+
'data-garden-version': '8.69.3'
|
|
289
221
|
}).withConfig({
|
|
290
222
|
displayName: "StyledModal",
|
|
291
223
|
componentId: "sc-1pe1axu-0"
|
|
@@ -301,7 +233,7 @@ StyledModal.defaultProps = {
|
|
|
301
233
|
const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
|
|
302
234
|
const StyledTooltipModalBackdrop = styled__default.default.div.attrs({
|
|
303
235
|
'data-garden-id': COMPONENT_ID$c,
|
|
304
|
-
'data-garden-version': '8.69.
|
|
236
|
+
'data-garden-version': '8.69.3'
|
|
305
237
|
}).withConfig({
|
|
306
238
|
displayName: "StyledTooltipModalBackdrop",
|
|
307
239
|
componentId: "sc-1yaomgq-0"
|
|
@@ -384,7 +316,7 @@ StyledTooltipWrapper.defaultProps = {
|
|
|
384
316
|
const COMPONENT_ID$b = 'modals.tooltip_modal';
|
|
385
317
|
const StyledTooltipModal = styled__default.default.div.attrs(props => ({
|
|
386
318
|
'data-garden-id': COMPONENT_ID$b,
|
|
387
|
-
'data-garden-version': '8.69.
|
|
319
|
+
'data-garden-version': '8.69.3',
|
|
388
320
|
className: props.isAnimated && 'is-animated'
|
|
389
321
|
})).withConfig({
|
|
390
322
|
displayName: "StyledTooltipModal",
|
|
@@ -413,7 +345,7 @@ const sizeStyles = props => `
|
|
|
413
345
|
`;
|
|
414
346
|
const StyledTooltipModalTitle = styled__default.default.div.attrs({
|
|
415
347
|
'data-garden-id': COMPONENT_ID$a,
|
|
416
|
-
'data-garden-version': '8.69.
|
|
348
|
+
'data-garden-version': '8.69.3'
|
|
417
349
|
}).withConfig({
|
|
418
350
|
displayName: "StyledTooltipModalTitle",
|
|
419
351
|
componentId: "sc-11xjgjs-0"
|
|
@@ -425,7 +357,7 @@ StyledTooltipModalTitle.defaultProps = {
|
|
|
425
357
|
const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
|
|
426
358
|
const StyledTooltipModalBody = styled__default.default.div.attrs({
|
|
427
359
|
'data-garden-id': COMPONENT_ID$9,
|
|
428
|
-
'data-garden-version': '8.69.
|
|
360
|
+
'data-garden-version': '8.69.3'
|
|
429
361
|
}).withConfig({
|
|
430
362
|
displayName: "StyledTooltipModalBody",
|
|
431
363
|
componentId: "sc-195dkzj-0"
|
|
@@ -437,7 +369,7 @@ StyledTooltipModalBody.defaultProps = {
|
|
|
437
369
|
const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
|
|
438
370
|
const StyledTooltipModalFooter = styled__default.default.div.attrs({
|
|
439
371
|
'data-garden-id': COMPONENT_ID$8,
|
|
440
|
-
'data-garden-version': '8.69.
|
|
372
|
+
'data-garden-version': '8.69.3'
|
|
441
373
|
}).withConfig({
|
|
442
374
|
displayName: "StyledTooltipModalFooter",
|
|
443
375
|
componentId: "sc-fm36a9-0"
|
|
@@ -449,7 +381,7 @@ StyledTooltipModalFooter.defaultProps = {
|
|
|
449
381
|
const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
|
|
450
382
|
const StyledTooltipModalFooterItem = styled__default.default(StyledFooterItem).attrs({
|
|
451
383
|
'data-garden-id': COMPONENT_ID$7,
|
|
452
|
-
'data-garden-version': '8.69.
|
|
384
|
+
'data-garden-version': '8.69.3'
|
|
453
385
|
}).withConfig({
|
|
454
386
|
displayName: "StyledTooltipModalFooterItem",
|
|
455
387
|
componentId: "sc-1nahj6p-0"
|
|
@@ -461,7 +393,7 @@ StyledTooltipModalFooterItem.defaultProps = {
|
|
|
461
393
|
const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
|
|
462
394
|
const StyledTooltipModalClose = styled__default.default(StyledClose).attrs({
|
|
463
395
|
'data-garden-id': COMPONENT_ID$6,
|
|
464
|
-
'data-garden-version': '8.69.
|
|
396
|
+
'data-garden-version': '8.69.3'
|
|
465
397
|
}).withConfig({
|
|
466
398
|
displayName: "StyledTooltipModalClose",
|
|
467
399
|
componentId: "sc-1h2ke3q-0"
|
|
@@ -487,7 +419,7 @@ const boxShadow = props => {
|
|
|
487
419
|
};
|
|
488
420
|
const StyledDrawerModal = styled__default.default.div.attrs({
|
|
489
421
|
'data-garden-id': COMPONENT_ID$5,
|
|
490
|
-
'data-garden-version': '8.69.
|
|
422
|
+
'data-garden-version': '8.69.3'
|
|
491
423
|
}).withConfig({
|
|
492
424
|
displayName: "StyledDrawerModal",
|
|
493
425
|
componentId: "sc-i1sake-0"
|
|
@@ -504,7 +436,7 @@ const BASE_MULTIPLIERS = {
|
|
|
504
436
|
};
|
|
505
437
|
const StyledDrawerModalClose = styled__default.default(StyledClose).attrs({
|
|
506
438
|
'data-garden-id': COMPONENT_ID$4,
|
|
507
|
-
'data-garden-version': '8.69.
|
|
439
|
+
'data-garden-version': '8.69.3'
|
|
508
440
|
}).withConfig({
|
|
509
441
|
displayName: "StyledDrawerModalClose",
|
|
510
442
|
componentId: "sc-hrnaom-0"
|
|
@@ -516,7 +448,7 @@ StyledDrawerModalClose.defaultProps = {
|
|
|
516
448
|
const COMPONENT_ID$3 = 'modals.drawer_modal.header';
|
|
517
449
|
const StyledDrawerModalHeader = styled__default.default(StyledHeader).attrs({
|
|
518
450
|
'data-garden-id': COMPONENT_ID$3,
|
|
519
|
-
'data-garden-version': '8.69.
|
|
451
|
+
'data-garden-version': '8.69.3'
|
|
520
452
|
}).withConfig({
|
|
521
453
|
displayName: "StyledDrawerModalHeader",
|
|
522
454
|
componentId: "sc-1u04rqw-0"
|
|
@@ -528,7 +460,7 @@ StyledDrawerModalHeader.defaultProps = {
|
|
|
528
460
|
const COMPONENT_ID$2 = 'modals.drawer_modal.body';
|
|
529
461
|
const StyledDrawerModalBody = styled__default.default(StyledBody).attrs({
|
|
530
462
|
'data-garden-id': COMPONENT_ID$2,
|
|
531
|
-
'data-garden-version': '8.69.
|
|
463
|
+
'data-garden-version': '8.69.3'
|
|
532
464
|
}).withConfig({
|
|
533
465
|
displayName: "StyledDrawerModalBody",
|
|
534
466
|
componentId: "sc-yafe2y-0"
|
|
@@ -540,7 +472,7 @@ StyledDrawerModalBody.defaultProps = {
|
|
|
540
472
|
const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
|
|
541
473
|
const StyledDrawerModalFooter = styled__default.default.div.attrs({
|
|
542
474
|
'data-garden-id': COMPONENT_ID$1,
|
|
543
|
-
'data-garden-version': '8.69.
|
|
475
|
+
'data-garden-version': '8.69.3'
|
|
544
476
|
}).withConfig({
|
|
545
477
|
displayName: "StyledDrawerModalFooter",
|
|
546
478
|
componentId: "sc-17if4ka-0"
|
|
@@ -552,7 +484,7 @@ StyledDrawerModalFooter.defaultProps = {
|
|
|
552
484
|
const COMPONENT_ID = 'modals.drawer_modal.footer_item';
|
|
553
485
|
const StyledDrawerModalFooterItem = styled__default.default(StyledFooterItem).attrs({
|
|
554
486
|
'data-garden-id': COMPONENT_ID,
|
|
555
|
-
'data-garden-version': '8.69.
|
|
487
|
+
'data-garden-version': '8.69.3'
|
|
556
488
|
}).withConfig({
|
|
557
489
|
displayName: "StyledDrawerModalFooterItem",
|
|
558
490
|
componentId: "sc-1vbl885-0"
|
|
@@ -571,10 +503,10 @@ const useModalContext = () => {
|
|
|
571
503
|
};
|
|
572
504
|
|
|
573
505
|
const isOverflowing = element => {
|
|
574
|
-
const doc =
|
|
575
|
-
const win =
|
|
506
|
+
const doc = ownerDocument__default.default(element);
|
|
507
|
+
const win = ownerWindow__default.default(doc);
|
|
576
508
|
const isBody = element && element.tagName.toLowerCase() === 'body';
|
|
577
|
-
if (!
|
|
509
|
+
if (!isWindow__default.default(doc) && !isBody) {
|
|
578
510
|
return element.scrollHeight > element.clientHeight;
|
|
579
511
|
}
|
|
580
512
|
const style = win.getComputedStyle(doc.body);
|
|
@@ -628,10 +560,10 @@ const Modal = React.forwardRef((_ref, ref) => {
|
|
|
628
560
|
let previousBodyPaddingRight;
|
|
629
561
|
if (bodyElement) {
|
|
630
562
|
if (isOverflowing(bodyElement)) {
|
|
631
|
-
const scrollbarSize
|
|
632
|
-
const bodyPaddingRight = parseInt(
|
|
563
|
+
const scrollbarSize = getScrollbarSize__default.default();
|
|
564
|
+
const bodyPaddingRight = parseInt(css__default.default(bodyElement, 'paddingRight') || '0', 10);
|
|
633
565
|
previousBodyPaddingRight = bodyElement.style.paddingRight;
|
|
634
|
-
bodyElement.style.paddingRight = `${bodyPaddingRight + scrollbarSize
|
|
566
|
+
bodyElement.style.paddingRight = `${bodyPaddingRight + scrollbarSize}px`;
|
|
635
567
|
}
|
|
636
568
|
if (htmlElement) {
|
|
637
569
|
previousHtmlOverflow = htmlElement.style.overflow;
|
|
@@ -1020,19 +952,6 @@ TooltipModal.Footer = Footer$1;
|
|
|
1020
952
|
TooltipModal.FooterItem = FooterItem$1;
|
|
1021
953
|
TooltipModal.Title = Title;
|
|
1022
954
|
|
|
1023
|
-
function activeElement(doc) {
|
|
1024
|
-
if (doc === void 0) {
|
|
1025
|
-
doc = ownerDocument();
|
|
1026
|
-
}
|
|
1027
|
-
try {
|
|
1028
|
-
var active = doc.activeElement;
|
|
1029
|
-
if (!active || !active.nodeName) return null;
|
|
1030
|
-
return active;
|
|
1031
|
-
} catch (e) {
|
|
1032
|
-
return doc.body;
|
|
1033
|
-
}
|
|
1034
|
-
}
|
|
1035
|
-
|
|
1036
955
|
const HeaderComponent = React.forwardRef((_ref, ref) => {
|
|
1037
956
|
let {
|
|
1038
957
|
tag,
|
|
@@ -1152,7 +1071,7 @@ const DrawerModalComponent = React.forwardRef((_ref, ref) => {
|
|
|
1152
1071
|
if (environment) {
|
|
1153
1072
|
if (isOpen && modalRef.current) {
|
|
1154
1073
|
if (restoreFocus) {
|
|
1155
|
-
triggerRef.current =
|
|
1074
|
+
triggerRef.current = activeElement__default.default(environment);
|
|
1156
1075
|
}
|
|
1157
1076
|
if (focusOnMount) {
|
|
1158
1077
|
modalRef.current.focus();
|
package/dist/index.esm.js
CHANGED
|
@@ -14,8 +14,14 @@ import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, focusS
|
|
|
14
14
|
import { useModal } from '@zendeskgarden/container-modal';
|
|
15
15
|
import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
|
|
16
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';
|
|
17
22
|
import { usePopper } from 'react-popper';
|
|
18
23
|
import { CSSTransition } from 'react-transition-group';
|
|
24
|
+
import activeElement from 'dom-helpers/activeElement';
|
|
19
25
|
|
|
20
26
|
function _extends$2() {
|
|
21
27
|
_extends$2 = Object.assign ? Object.assign.bind() : function (target) {
|
|
@@ -32,91 +38,11 @@ function _extends$2() {
|
|
|
32
38
|
return _extends$2.apply(this, arguments);
|
|
33
39
|
}
|
|
34
40
|
|
|
35
|
-
function isDocument(element) {
|
|
36
|
-
return 'nodeType' in element && element.nodeType === document.DOCUMENT_NODE;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
function isWindow(node) {
|
|
40
|
-
if ('window' in node && node.window === node) return node;
|
|
41
|
-
if (isDocument(node)) return node.defaultView || false;
|
|
42
|
-
return false;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
function ownerDocument(node) {
|
|
46
|
-
return node && node.ownerDocument || document;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
function ownerWindow(node) {
|
|
50
|
-
var doc = ownerDocument(node);
|
|
51
|
-
return doc && doc.defaultView || window;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function getComputedStyle(node, psuedoElement) {
|
|
55
|
-
return ownerWindow(node).getComputedStyle(node, psuedoElement);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
var rUpper = /([A-Z])/g;
|
|
59
|
-
function hyphenate(string) {
|
|
60
|
-
return string.replace(rUpper, '-$1').toLowerCase();
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
var msPattern = /^ms-/;
|
|
64
|
-
function hyphenateStyleName(string) {
|
|
65
|
-
return hyphenate(string).replace(msPattern, '-ms-');
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
var supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i;
|
|
69
|
-
function isTransform(value) {
|
|
70
|
-
return !!(value && supportedTransforms.test(value));
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
function style(node, property) {
|
|
74
|
-
var css = '';
|
|
75
|
-
var transforms = '';
|
|
76
|
-
if (typeof property === 'string') {
|
|
77
|
-
return node.style.getPropertyValue(hyphenateStyleName(property)) || getComputedStyle(node).getPropertyValue(hyphenateStyleName(property));
|
|
78
|
-
}
|
|
79
|
-
Object.keys(property).forEach(function (key) {
|
|
80
|
-
var value = property[key];
|
|
81
|
-
if (!value && value !== 0) {
|
|
82
|
-
node.style.removeProperty(hyphenateStyleName(key));
|
|
83
|
-
} else if (isTransform(key)) {
|
|
84
|
-
transforms += key + "(" + value + ") ";
|
|
85
|
-
} else {
|
|
86
|
-
css += hyphenateStyleName(key) + ": " + value + ";";
|
|
87
|
-
}
|
|
88
|
-
});
|
|
89
|
-
if (transforms) {
|
|
90
|
-
css += "transform: " + transforms + ";";
|
|
91
|
-
}
|
|
92
|
-
node.style.cssText += ";" + css;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
|
|
96
|
-
|
|
97
|
-
var size;
|
|
98
|
-
function scrollbarSize(recalc) {
|
|
99
|
-
if (!size && size !== 0 || recalc) {
|
|
100
|
-
if (canUseDOM) {
|
|
101
|
-
var scrollDiv = document.createElement('div');
|
|
102
|
-
scrollDiv.style.position = 'absolute';
|
|
103
|
-
scrollDiv.style.top = '-9999px';
|
|
104
|
-
scrollDiv.style.width = '50px';
|
|
105
|
-
scrollDiv.style.height = '50px';
|
|
106
|
-
scrollDiv.style.overflow = 'scroll';
|
|
107
|
-
document.body.appendChild(scrollDiv);
|
|
108
|
-
size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
|
109
|
-
document.body.removeChild(scrollDiv);
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
return size;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
41
|
const COMPONENT_ID$j = 'modals.backdrop';
|
|
116
42
|
const animationName$1 = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
|
|
117
43
|
const StyledBackdrop = styled.div.attrs({
|
|
118
44
|
'data-garden-id': COMPONENT_ID$j,
|
|
119
|
-
'data-garden-version': '8.69.
|
|
45
|
+
'data-garden-version': '8.69.3'
|
|
120
46
|
}).withConfig({
|
|
121
47
|
displayName: "StyledBackdrop",
|
|
122
48
|
componentId: "sc-mzdjpo-0"
|
|
@@ -132,7 +58,7 @@ StyledBackdrop.propTypes = {
|
|
|
132
58
|
const COMPONENT_ID$i = 'modals.body';
|
|
133
59
|
const StyledBody = styled.div.attrs({
|
|
134
60
|
'data-garden-id': COMPONENT_ID$i,
|
|
135
|
-
'data-garden-version': '8.69.
|
|
61
|
+
'data-garden-version': '8.69.3'
|
|
136
62
|
}).withConfig({
|
|
137
63
|
displayName: "StyledBody",
|
|
138
64
|
componentId: "sc-14rzecg-0"
|
|
@@ -157,7 +83,7 @@ const BASE_MULTIPLIERS$1 = {
|
|
|
157
83
|
};
|
|
158
84
|
const StyledClose = styled.button.attrs({
|
|
159
85
|
'data-garden-id': COMPONENT_ID$h,
|
|
160
|
-
'data-garden-version': '8.69.
|
|
86
|
+
'data-garden-version': '8.69.3'
|
|
161
87
|
}).withConfig({
|
|
162
88
|
displayName: "StyledClose",
|
|
163
89
|
componentId: "sc-iseudj-0"
|
|
@@ -169,7 +95,7 @@ StyledClose.defaultProps = {
|
|
|
169
95
|
const COMPONENT_ID$g = 'modals.footer';
|
|
170
96
|
const StyledFooter = styled.div.attrs({
|
|
171
97
|
'data-garden-id': COMPONENT_ID$g,
|
|
172
|
-
'data-garden-version': '8.69.
|
|
98
|
+
'data-garden-version': '8.69.3'
|
|
173
99
|
}).withConfig({
|
|
174
100
|
displayName: "StyledFooter",
|
|
175
101
|
componentId: "sc-d8pfdu-0"
|
|
@@ -181,7 +107,7 @@ StyledFooter.defaultProps = {
|
|
|
181
107
|
const COMPONENT_ID$f = 'modals.footer_item';
|
|
182
108
|
const StyledFooterItem = styled.span.attrs({
|
|
183
109
|
'data-garden-id': COMPONENT_ID$f,
|
|
184
|
-
'data-garden-version': '8.69.
|
|
110
|
+
'data-garden-version': '8.69.3'
|
|
185
111
|
}).withConfig({
|
|
186
112
|
displayName: "StyledFooterItem",
|
|
187
113
|
componentId: "sc-1mb76hl-0"
|
|
@@ -193,7 +119,7 @@ StyledFooterItem.defaultProps = {
|
|
|
193
119
|
const COMPONENT_ID$e = 'modals.header';
|
|
194
120
|
const StyledHeader = styled.div.attrs({
|
|
195
121
|
'data-garden-id': COMPONENT_ID$e,
|
|
196
|
-
'data-garden-version': '8.69.
|
|
122
|
+
'data-garden-version': '8.69.3'
|
|
197
123
|
}).withConfig({
|
|
198
124
|
displayName: "StyledHeader",
|
|
199
125
|
componentId: "sc-1787r9v-0"
|
|
@@ -258,7 +184,7 @@ const sizeStyles$1 = props => {
|
|
|
258
184
|
};
|
|
259
185
|
const StyledModal = styled.div.attrs({
|
|
260
186
|
'data-garden-id': COMPONENT_ID$d,
|
|
261
|
-
'data-garden-version': '8.69.
|
|
187
|
+
'data-garden-version': '8.69.3'
|
|
262
188
|
}).withConfig({
|
|
263
189
|
displayName: "StyledModal",
|
|
264
190
|
componentId: "sc-1pe1axu-0"
|
|
@@ -274,7 +200,7 @@ StyledModal.defaultProps = {
|
|
|
274
200
|
const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
|
|
275
201
|
const StyledTooltipModalBackdrop = styled.div.attrs({
|
|
276
202
|
'data-garden-id': COMPONENT_ID$c,
|
|
277
|
-
'data-garden-version': '8.69.
|
|
203
|
+
'data-garden-version': '8.69.3'
|
|
278
204
|
}).withConfig({
|
|
279
205
|
displayName: "StyledTooltipModalBackdrop",
|
|
280
206
|
componentId: "sc-1yaomgq-0"
|
|
@@ -357,7 +283,7 @@ StyledTooltipWrapper.defaultProps = {
|
|
|
357
283
|
const COMPONENT_ID$b = 'modals.tooltip_modal';
|
|
358
284
|
const StyledTooltipModal = styled.div.attrs(props => ({
|
|
359
285
|
'data-garden-id': COMPONENT_ID$b,
|
|
360
|
-
'data-garden-version': '8.69.
|
|
286
|
+
'data-garden-version': '8.69.3',
|
|
361
287
|
className: props.isAnimated && 'is-animated'
|
|
362
288
|
})).withConfig({
|
|
363
289
|
displayName: "StyledTooltipModal",
|
|
@@ -386,7 +312,7 @@ const sizeStyles = props => `
|
|
|
386
312
|
`;
|
|
387
313
|
const StyledTooltipModalTitle = styled.div.attrs({
|
|
388
314
|
'data-garden-id': COMPONENT_ID$a,
|
|
389
|
-
'data-garden-version': '8.69.
|
|
315
|
+
'data-garden-version': '8.69.3'
|
|
390
316
|
}).withConfig({
|
|
391
317
|
displayName: "StyledTooltipModalTitle",
|
|
392
318
|
componentId: "sc-11xjgjs-0"
|
|
@@ -398,7 +324,7 @@ StyledTooltipModalTitle.defaultProps = {
|
|
|
398
324
|
const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
|
|
399
325
|
const StyledTooltipModalBody = styled.div.attrs({
|
|
400
326
|
'data-garden-id': COMPONENT_ID$9,
|
|
401
|
-
'data-garden-version': '8.69.
|
|
327
|
+
'data-garden-version': '8.69.3'
|
|
402
328
|
}).withConfig({
|
|
403
329
|
displayName: "StyledTooltipModalBody",
|
|
404
330
|
componentId: "sc-195dkzj-0"
|
|
@@ -410,7 +336,7 @@ StyledTooltipModalBody.defaultProps = {
|
|
|
410
336
|
const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
|
|
411
337
|
const StyledTooltipModalFooter = styled.div.attrs({
|
|
412
338
|
'data-garden-id': COMPONENT_ID$8,
|
|
413
|
-
'data-garden-version': '8.69.
|
|
339
|
+
'data-garden-version': '8.69.3'
|
|
414
340
|
}).withConfig({
|
|
415
341
|
displayName: "StyledTooltipModalFooter",
|
|
416
342
|
componentId: "sc-fm36a9-0"
|
|
@@ -422,7 +348,7 @@ StyledTooltipModalFooter.defaultProps = {
|
|
|
422
348
|
const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
|
|
423
349
|
const StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
|
|
424
350
|
'data-garden-id': COMPONENT_ID$7,
|
|
425
|
-
'data-garden-version': '8.69.
|
|
351
|
+
'data-garden-version': '8.69.3'
|
|
426
352
|
}).withConfig({
|
|
427
353
|
displayName: "StyledTooltipModalFooterItem",
|
|
428
354
|
componentId: "sc-1nahj6p-0"
|
|
@@ -434,7 +360,7 @@ StyledTooltipModalFooterItem.defaultProps = {
|
|
|
434
360
|
const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
|
|
435
361
|
const StyledTooltipModalClose = styled(StyledClose).attrs({
|
|
436
362
|
'data-garden-id': COMPONENT_ID$6,
|
|
437
|
-
'data-garden-version': '8.69.
|
|
363
|
+
'data-garden-version': '8.69.3'
|
|
438
364
|
}).withConfig({
|
|
439
365
|
displayName: "StyledTooltipModalClose",
|
|
440
366
|
componentId: "sc-1h2ke3q-0"
|
|
@@ -460,7 +386,7 @@ const boxShadow = props => {
|
|
|
460
386
|
};
|
|
461
387
|
const StyledDrawerModal = styled.div.attrs({
|
|
462
388
|
'data-garden-id': COMPONENT_ID$5,
|
|
463
|
-
'data-garden-version': '8.69.
|
|
389
|
+
'data-garden-version': '8.69.3'
|
|
464
390
|
}).withConfig({
|
|
465
391
|
displayName: "StyledDrawerModal",
|
|
466
392
|
componentId: "sc-i1sake-0"
|
|
@@ -477,7 +403,7 @@ const BASE_MULTIPLIERS = {
|
|
|
477
403
|
};
|
|
478
404
|
const StyledDrawerModalClose = styled(StyledClose).attrs({
|
|
479
405
|
'data-garden-id': COMPONENT_ID$4,
|
|
480
|
-
'data-garden-version': '8.69.
|
|
406
|
+
'data-garden-version': '8.69.3'
|
|
481
407
|
}).withConfig({
|
|
482
408
|
displayName: "StyledDrawerModalClose",
|
|
483
409
|
componentId: "sc-hrnaom-0"
|
|
@@ -489,7 +415,7 @@ StyledDrawerModalClose.defaultProps = {
|
|
|
489
415
|
const COMPONENT_ID$3 = 'modals.drawer_modal.header';
|
|
490
416
|
const StyledDrawerModalHeader = styled(StyledHeader).attrs({
|
|
491
417
|
'data-garden-id': COMPONENT_ID$3,
|
|
492
|
-
'data-garden-version': '8.69.
|
|
418
|
+
'data-garden-version': '8.69.3'
|
|
493
419
|
}).withConfig({
|
|
494
420
|
displayName: "StyledDrawerModalHeader",
|
|
495
421
|
componentId: "sc-1u04rqw-0"
|
|
@@ -501,7 +427,7 @@ StyledDrawerModalHeader.defaultProps = {
|
|
|
501
427
|
const COMPONENT_ID$2 = 'modals.drawer_modal.body';
|
|
502
428
|
const StyledDrawerModalBody = styled(StyledBody).attrs({
|
|
503
429
|
'data-garden-id': COMPONENT_ID$2,
|
|
504
|
-
'data-garden-version': '8.69.
|
|
430
|
+
'data-garden-version': '8.69.3'
|
|
505
431
|
}).withConfig({
|
|
506
432
|
displayName: "StyledDrawerModalBody",
|
|
507
433
|
componentId: "sc-yafe2y-0"
|
|
@@ -513,7 +439,7 @@ StyledDrawerModalBody.defaultProps = {
|
|
|
513
439
|
const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
|
|
514
440
|
const StyledDrawerModalFooter = styled.div.attrs({
|
|
515
441
|
'data-garden-id': COMPONENT_ID$1,
|
|
516
|
-
'data-garden-version': '8.69.
|
|
442
|
+
'data-garden-version': '8.69.3'
|
|
517
443
|
}).withConfig({
|
|
518
444
|
displayName: "StyledDrawerModalFooter",
|
|
519
445
|
componentId: "sc-17if4ka-0"
|
|
@@ -525,7 +451,7 @@ StyledDrawerModalFooter.defaultProps = {
|
|
|
525
451
|
const COMPONENT_ID = 'modals.drawer_modal.footer_item';
|
|
526
452
|
const StyledDrawerModalFooterItem = styled(StyledFooterItem).attrs({
|
|
527
453
|
'data-garden-id': COMPONENT_ID,
|
|
528
|
-
'data-garden-version': '8.69.
|
|
454
|
+
'data-garden-version': '8.69.3'
|
|
529
455
|
}).withConfig({
|
|
530
456
|
displayName: "StyledDrawerModalFooterItem",
|
|
531
457
|
componentId: "sc-1vbl885-0"
|
|
@@ -601,10 +527,10 @@ const Modal = forwardRef((_ref, ref) => {
|
|
|
601
527
|
let previousBodyPaddingRight;
|
|
602
528
|
if (bodyElement) {
|
|
603
529
|
if (isOverflowing(bodyElement)) {
|
|
604
|
-
const scrollbarSize
|
|
605
|
-
const bodyPaddingRight = parseInt(
|
|
530
|
+
const scrollbarSize = getScrollbarSize();
|
|
531
|
+
const bodyPaddingRight = parseInt(css$1(bodyElement, 'paddingRight') || '0', 10);
|
|
606
532
|
previousBodyPaddingRight = bodyElement.style.paddingRight;
|
|
607
|
-
bodyElement.style.paddingRight = `${bodyPaddingRight + scrollbarSize
|
|
533
|
+
bodyElement.style.paddingRight = `${bodyPaddingRight + scrollbarSize}px`;
|
|
608
534
|
}
|
|
609
535
|
if (htmlElement) {
|
|
610
536
|
previousHtmlOverflow = htmlElement.style.overflow;
|
|
@@ -993,19 +919,6 @@ TooltipModal.Footer = Footer$1;
|
|
|
993
919
|
TooltipModal.FooterItem = FooterItem$1;
|
|
994
920
|
TooltipModal.Title = Title;
|
|
995
921
|
|
|
996
|
-
function activeElement(doc) {
|
|
997
|
-
if (doc === void 0) {
|
|
998
|
-
doc = ownerDocument();
|
|
999
|
-
}
|
|
1000
|
-
try {
|
|
1001
|
-
var active = doc.activeElement;
|
|
1002
|
-
if (!active || !active.nodeName) return null;
|
|
1003
|
-
return active;
|
|
1004
|
-
} catch (e) {
|
|
1005
|
-
return doc.body;
|
|
1006
|
-
}
|
|
1007
|
-
}
|
|
1008
|
-
|
|
1009
922
|
const HeaderComponent = forwardRef((_ref, ref) => {
|
|
1010
923
|
let {
|
|
1011
924
|
tag,
|
|
@@ -1,11 +1,11 @@
|
|
|
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 from 'react';
|
|
8
|
-
/**
|
|
9
|
-
* @extends HTMLAttributes<HTMLDivElement>
|
|
10
|
-
*/
|
|
11
|
-
export declare const Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
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 from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* @extends HTMLAttributes<HTMLDivElement>
|
|
10
|
+
*/
|
|
11
|
+
export declare const Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|