@zendeskgarden/react-modals 9.0.0-next.22 → 9.0.0-next.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -11
- package/dist/esm/elements/Body.js +7 -7
- package/dist/esm/elements/Close.js +7 -7
- package/dist/esm/elements/Drawer/Body.js +7 -7
- package/dist/esm/elements/Drawer/Close.js +7 -7
- package/dist/esm/elements/Drawer/Drawer.js +7 -7
- package/dist/esm/elements/Drawer/Footer.js +7 -7
- package/dist/esm/elements/Drawer/FooterItem.js +7 -7
- package/dist/esm/elements/Drawer/Header.js +7 -7
- package/dist/esm/elements/Footer.js +7 -7
- package/dist/esm/elements/FooterItem.js +7 -7
- package/dist/esm/elements/Header.js +8 -8
- package/dist/esm/elements/Modal.js +7 -7
- package/dist/esm/elements/{TooltipModal → TooltipDialog}/Body.js +11 -11
- package/dist/esm/elements/{TooltipModal → TooltipDialog}/Close.js +11 -11
- package/dist/esm/elements/{TooltipModal → TooltipDialog}/Footer.js +9 -9
- package/dist/esm/elements/{TooltipModal → TooltipDialog}/FooterItem.js +9 -9
- package/dist/esm/elements/{TooltipModal → TooltipDialog}/Title.js +11 -11
- package/dist/esm/elements/{TooltipModal/TooltipModal.js → TooltipDialog/TooltipDialog.js} +23 -23
- package/dist/esm/index.js +1 -1
- package/dist/esm/styled/StyledBackdrop.js +1 -1
- package/dist/esm/styled/StyledBody.js +1 -1
- package/dist/esm/styled/StyledClose.js +1 -1
- package/dist/esm/styled/StyledDrawer.js +1 -1
- package/dist/esm/styled/StyledDrawerBody.js +1 -1
- package/dist/esm/styled/StyledDrawerClose.js +1 -1
- package/dist/esm/styled/StyledDrawerFooter.js +1 -1
- package/dist/esm/styled/StyledDrawerFooterItem.js +1 -1
- package/dist/esm/styled/StyledDrawerHeader.js +1 -1
- package/dist/esm/styled/StyledFooter.js +6 -3
- package/dist/esm/styled/StyledFooterItem.js +1 -1
- package/dist/esm/styled/StyledHeader.js +1 -1
- package/dist/esm/styled/StyledModal.js +1 -1
- package/dist/esm/styled/{StyledTooltipModal.js → StyledTooltipDialog.js} +7 -7
- package/dist/esm/styled/{StyledTooltipModalBackdrop.js → StyledTooltipDialogBackdrop.js} +7 -7
- package/dist/esm/styled/{StyledTooltipModalBody.js → StyledTooltipDialogBody.js} +7 -7
- package/dist/esm/styled/{StyledTooltipModalClose.js → StyledTooltipDialogClose.js} +7 -7
- package/dist/esm/styled/{StyledTooltipModalFooter.js → StyledTooltipDialogFooter.js} +7 -7
- package/dist/esm/styled/{StyledTooltipModalFooterItem.js → StyledTooltipDialogFooterItem.js} +7 -7
- package/dist/esm/styled/{StyledTooltipModalTitle.js → StyledTooltipDialogTitle.js} +7 -7
- package/dist/esm/utils/useTooltipDialogContext.js +18 -0
- package/dist/index.cjs.js +92 -89
- package/dist/typings/elements/Drawer/Drawer.d.ts +10 -1
- package/dist/typings/elements/Modal.d.ts +1 -1
- package/dist/typings/elements/{TooltipModal → TooltipDialog}/Title.d.ts +2 -2
- package/dist/typings/elements/{TooltipModal/TooltipModal.d.ts → TooltipDialog/TooltipDialog.d.ts} +4 -2
- package/dist/typings/index.d.ts +2 -2
- package/dist/typings/styled/StyledClose.d.ts +0 -1
- package/dist/typings/styled/StyledDrawerClose.d.ts +0 -1
- package/dist/typings/styled/{StyledTooltipModal.d.ts → StyledTooltipDialog.d.ts} +3 -3
- package/dist/typings/styled/{StyledTooltipModalBackdrop.d.ts → StyledTooltipDialogBackdrop.d.ts} +1 -1
- package/dist/typings/styled/{StyledTooltipModalBody.d.ts → StyledTooltipDialogBody.d.ts} +1 -1
- package/dist/typings/styled/{StyledTooltipModalClose.d.ts → StyledTooltipDialogClose.d.ts} +1 -2
- package/dist/typings/styled/{StyledTooltipModalFooter.d.ts → StyledTooltipDialogFooter.d.ts} +1 -1
- package/dist/typings/styled/{StyledTooltipModalFooterItem.d.ts → StyledTooltipDialogFooterItem.d.ts} +1 -1
- package/dist/typings/styled/{StyledTooltipModalTitle.d.ts → StyledTooltipDialogTitle.d.ts} +1 -1
- package/dist/typings/styled/StyledTooltipWrapper.d.ts +2 -2
- package/dist/typings/styled/index.d.ts +7 -7
- package/dist/typings/types/index.d.ts +2 -2
- package/dist/typings/utils/useModalContext.d.ts +0 -1
- package/dist/typings/utils/{useTooltipModalContext.d.ts → useTooltipDialogContext.d.ts} +2 -3
- package/package.json +8 -8
- package/dist/esm/utils/useTooltipModalContext.js +0 -18
- /package/dist/typings/elements/{TooltipModal → TooltipDialog}/Body.d.ts +0 -0
- /package/dist/typings/elements/{TooltipModal → TooltipDialog}/Close.d.ts +0 -0
- /package/dist/typings/elements/{TooltipModal → TooltipDialog}/Footer.d.ts +0 -0
- /package/dist/typings/elements/{TooltipModal → TooltipDialog}/FooterItem.d.ts +0 -0
package/dist/index.cjs.js
CHANGED
|
@@ -64,7 +64,7 @@ const animationStyles$1 = props => {
|
|
|
64
64
|
};
|
|
65
65
|
const StyledBackdrop = styled__default.default.div.attrs({
|
|
66
66
|
'data-garden-id': COMPONENT_ID$j,
|
|
67
|
-
'data-garden-version': '9.0.0-next.
|
|
67
|
+
'data-garden-version': '9.0.0-next.23'
|
|
68
68
|
}).withConfig({
|
|
69
69
|
displayName: "StyledBackdrop",
|
|
70
70
|
componentId: "sc-mzdjpo-0"
|
|
@@ -95,7 +95,7 @@ StyledBackdrop.propTypes = {
|
|
|
95
95
|
const COMPONENT_ID$i = 'modals.body';
|
|
96
96
|
const StyledBody = styled__default.default.div.attrs({
|
|
97
97
|
'data-garden-id': COMPONENT_ID$i,
|
|
98
|
-
'data-garden-version': '9.0.0-next.
|
|
98
|
+
'data-garden-version': '9.0.0-next.23'
|
|
99
99
|
}).withConfig({
|
|
100
100
|
displayName: "StyledBody",
|
|
101
101
|
componentId: "sc-14rzecg-0"
|
|
@@ -120,7 +120,7 @@ const BASE_MULTIPLIERS$1 = {
|
|
|
120
120
|
};
|
|
121
121
|
const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
|
|
122
122
|
'data-garden-id': COMPONENT_ID$h,
|
|
123
|
-
'data-garden-version': '9.0.0-next.
|
|
123
|
+
'data-garden-version': '9.0.0-next.23'
|
|
124
124
|
}).withConfig({
|
|
125
125
|
displayName: "StyledClose",
|
|
126
126
|
componentId: "sc-iseudj-0"
|
|
@@ -132,11 +132,14 @@ StyledClose.defaultProps = {
|
|
|
132
132
|
const COMPONENT_ID$g = 'modals.footer';
|
|
133
133
|
const StyledFooter = styled__default.default.div.attrs({
|
|
134
134
|
'data-garden-id': COMPONENT_ID$g,
|
|
135
|
-
'data-garden-version': '9.0.0-next.
|
|
135
|
+
'data-garden-version': '9.0.0-next.23'
|
|
136
136
|
}).withConfig({
|
|
137
137
|
displayName: "StyledFooter",
|
|
138
138
|
componentId: "sc-d8pfdu-0"
|
|
139
|
-
})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], props => props.isLarge && `${props.theme.borders.sm} ${reactTheming.
|
|
139
|
+
})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], props => props.isLarge && `${props.theme.borders.sm} ${reactTheming.getColor({
|
|
140
|
+
theme: props.theme,
|
|
141
|
+
variable: 'border.default'
|
|
142
|
+
})}`, 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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
|
|
140
143
|
StyledFooter.defaultProps = {
|
|
141
144
|
theme: reactTheming.DEFAULT_THEME
|
|
142
145
|
};
|
|
@@ -144,7 +147,7 @@ StyledFooter.defaultProps = {
|
|
|
144
147
|
const COMPONENT_ID$f = 'modals.footer_item';
|
|
145
148
|
const StyledFooterItem = styled__default.default.span.attrs({
|
|
146
149
|
'data-garden-id': COMPONENT_ID$f,
|
|
147
|
-
'data-garden-version': '9.0.0-next.
|
|
150
|
+
'data-garden-version': '9.0.0-next.23'
|
|
148
151
|
}).withConfig({
|
|
149
152
|
displayName: "StyledFooterItem",
|
|
150
153
|
componentId: "sc-1mb76hl-0"
|
|
@@ -171,7 +174,7 @@ const colorStyles$2 = _ref => {
|
|
|
171
174
|
};
|
|
172
175
|
const StyledHeader = styled__default.default.div.attrs({
|
|
173
176
|
'data-garden-id': COMPONENT_ID$e,
|
|
174
|
-
'data-garden-version': '9.0.0-next.
|
|
177
|
+
'data-garden-version': '9.0.0-next.23'
|
|
175
178
|
}).withConfig({
|
|
176
179
|
displayName: "StyledHeader",
|
|
177
180
|
componentId: "sc-1787r9v-0"
|
|
@@ -250,7 +253,7 @@ const sizeStyles$1 = props => {
|
|
|
250
253
|
};
|
|
251
254
|
const StyledModal = styled__default.default.div.attrs({
|
|
252
255
|
'data-garden-id': COMPONENT_ID$d,
|
|
253
|
-
'data-garden-version': '9.0.0-next.
|
|
256
|
+
'data-garden-version': '9.0.0-next.23'
|
|
254
257
|
}).withConfig({
|
|
255
258
|
displayName: "StyledModal",
|
|
256
259
|
componentId: "sc-1pe1axu-0"
|
|
@@ -263,15 +266,15 @@ StyledModal.defaultProps = {
|
|
|
263
266
|
theme: reactTheming.DEFAULT_THEME
|
|
264
267
|
};
|
|
265
268
|
|
|
266
|
-
const COMPONENT_ID$c = 'modals.
|
|
267
|
-
const
|
|
269
|
+
const COMPONENT_ID$c = 'modals.tooltip_dialog.backdrop';
|
|
270
|
+
const StyledTooltipDialogBackdrop = styled__default.default.div.attrs({
|
|
268
271
|
'data-garden-id': COMPONENT_ID$c,
|
|
269
|
-
'data-garden-version': '9.0.0-next.
|
|
272
|
+
'data-garden-version': '9.0.0-next.23'
|
|
270
273
|
}).withConfig({
|
|
271
|
-
displayName: "
|
|
272
|
-
componentId: "sc-
|
|
274
|
+
displayName: "StyledTooltipDialogBackdrop",
|
|
275
|
+
componentId: "sc-zrk625-0"
|
|
273
276
|
})(["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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
|
|
274
|
-
|
|
277
|
+
StyledTooltipDialogBackdrop.defaultProps = {
|
|
275
278
|
theme: reactTheming.DEFAULT_THEME
|
|
276
279
|
};
|
|
277
280
|
|
|
@@ -290,14 +293,14 @@ StyledTooltipWrapper.defaultProps = {
|
|
|
290
293
|
theme: reactTheming.DEFAULT_THEME
|
|
291
294
|
};
|
|
292
295
|
|
|
293
|
-
const COMPONENT_ID$b = 'modals.
|
|
294
|
-
const
|
|
296
|
+
const COMPONENT_ID$b = 'modals.tooltip_dialog';
|
|
297
|
+
const StyledTooltipDialog = styled__default.default.div.attrs(props => ({
|
|
295
298
|
'data-garden-id': COMPONENT_ID$b,
|
|
296
|
-
'data-garden-version': '9.0.0-next.
|
|
299
|
+
'data-garden-version': '9.0.0-next.23',
|
|
297
300
|
className: props.isAnimated && 'is-animated'
|
|
298
301
|
})).withConfig({
|
|
299
|
-
displayName: "
|
|
300
|
-
componentId: "sc-
|
|
302
|
+
displayName: "StyledTooltipDialog",
|
|
303
|
+
componentId: "sc-iv3db-0"
|
|
301
304
|
})(["padding:", "px;width:400px;", ";", ";"], props => props.theme.space.base * 5, props => {
|
|
302
305
|
const computedArrowStyles = reactTheming.arrowStyles(reactTheming.getArrowPosition(props.theme, props.placement), {
|
|
303
306
|
size: `${props.theme.space.base * 2}px`,
|
|
@@ -309,23 +312,23 @@ const StyledTooltipModal = styled__default.default.div.attrs(props => ({
|
|
|
309
312
|
}
|
|
310
313
|
return props.hasArrow && computedArrowStyles;
|
|
311
314
|
}, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
|
|
312
|
-
|
|
315
|
+
StyledTooltipDialog.defaultProps = {
|
|
313
316
|
theme: reactTheming.DEFAULT_THEME
|
|
314
317
|
};
|
|
315
318
|
|
|
316
|
-
const COMPONENT_ID$a = 'modals.
|
|
319
|
+
const COMPONENT_ID$a = 'modals.tooltip_dialog.title';
|
|
317
320
|
const sizeStyles = props => `
|
|
318
321
|
/* stylelint-disable-next-line property-no-unknown */
|
|
319
322
|
padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
|
|
320
323
|
line-height: ${reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
|
|
321
324
|
font-size: ${props.theme.fontSizes.md};
|
|
322
325
|
`;
|
|
323
|
-
const
|
|
326
|
+
const StyledTooltipDialogTitle = styled__default.default.div.attrs({
|
|
324
327
|
'data-garden-id': COMPONENT_ID$a,
|
|
325
|
-
'data-garden-version': '9.0.0-next.
|
|
328
|
+
'data-garden-version': '9.0.0-next.23'
|
|
326
329
|
}).withConfig({
|
|
327
|
-
displayName: "
|
|
328
|
-
componentId: "sc-
|
|
330
|
+
displayName: "StyledTooltipDialogTitle",
|
|
331
|
+
componentId: "sc-1rceixg-0"
|
|
329
332
|
})(["margin:0;color:", ";font-weight:", ";", ";", ";"], _ref => {
|
|
330
333
|
let {
|
|
331
334
|
theme
|
|
@@ -335,17 +338,17 @@ const StyledTooltipModalTitle = styled__default.default.div.attrs({
|
|
|
335
338
|
theme
|
|
336
339
|
});
|
|
337
340
|
}, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
|
|
338
|
-
|
|
341
|
+
StyledTooltipDialogTitle.defaultProps = {
|
|
339
342
|
theme: reactTheming.DEFAULT_THEME
|
|
340
343
|
};
|
|
341
344
|
|
|
342
|
-
const COMPONENT_ID$9 = 'modals.
|
|
343
|
-
const
|
|
345
|
+
const COMPONENT_ID$9 = 'modals.tooltip_dialog.body';
|
|
346
|
+
const StyledTooltipDialogBody = styled__default.default.div.attrs({
|
|
344
347
|
'data-garden-id': COMPONENT_ID$9,
|
|
345
|
-
'data-garden-version': '9.0.0-next.
|
|
348
|
+
'data-garden-version': '9.0.0-next.23'
|
|
346
349
|
}).withConfig({
|
|
347
|
-
displayName: "
|
|
348
|
-
componentId: "sc-
|
|
350
|
+
displayName: "StyledTooltipDialogBody",
|
|
351
|
+
componentId: "sc-132lcoq-0"
|
|
349
352
|
})(["display:block;margin:0;padding-top:", "px;line-height:", ";color-scheme:only ", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, _ref => {
|
|
350
353
|
let {
|
|
351
354
|
theme
|
|
@@ -355,43 +358,43 @@ const StyledTooltipModalBody = styled__default.default.div.attrs({
|
|
|
355
358
|
theme
|
|
356
359
|
});
|
|
357
360
|
}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
|
|
358
|
-
|
|
361
|
+
StyledTooltipDialogBody.defaultProps = {
|
|
359
362
|
theme: reactTheming.DEFAULT_THEME
|
|
360
363
|
};
|
|
361
364
|
|
|
362
|
-
const COMPONENT_ID$8 = 'modals.
|
|
363
|
-
const
|
|
365
|
+
const COMPONENT_ID$8 = 'modals.tooltip_dialog.footer';
|
|
366
|
+
const StyledTooltipDialogFooter = styled__default.default.div.attrs({
|
|
364
367
|
'data-garden-id': COMPONENT_ID$8,
|
|
365
|
-
'data-garden-version': '9.0.0-next.
|
|
368
|
+
'data-garden-version': '9.0.0-next.23'
|
|
366
369
|
}).withConfig({
|
|
367
|
-
displayName: "
|
|
368
|
-
componentId: "sc-
|
|
370
|
+
displayName: "StyledTooltipDialogFooter",
|
|
371
|
+
componentId: "sc-kjomsm-0"
|
|
369
372
|
})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:", "px;", ";"], p => p.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
|
|
370
|
-
|
|
373
|
+
StyledTooltipDialogFooter.defaultProps = {
|
|
371
374
|
theme: reactTheming.DEFAULT_THEME
|
|
372
375
|
};
|
|
373
376
|
|
|
374
|
-
const COMPONENT_ID$7 = 'modals.
|
|
375
|
-
const
|
|
377
|
+
const COMPONENT_ID$7 = 'modals.tooltip_dialog.footer_item';
|
|
378
|
+
const StyledTooltipDialogFooterItem = styled__default.default(StyledFooterItem).attrs({
|
|
376
379
|
'data-garden-id': COMPONENT_ID$7,
|
|
377
|
-
'data-garden-version': '9.0.0-next.
|
|
380
|
+
'data-garden-version': '9.0.0-next.23'
|
|
378
381
|
}).withConfig({
|
|
379
|
-
displayName: "
|
|
380
|
-
componentId: "sc-
|
|
382
|
+
displayName: "StyledTooltipDialogFooterItem",
|
|
383
|
+
componentId: "sc-u2rmo8-0"
|
|
381
384
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
382
|
-
|
|
385
|
+
StyledTooltipDialogFooterItem.defaultProps = {
|
|
383
386
|
theme: reactTheming.DEFAULT_THEME
|
|
384
387
|
};
|
|
385
388
|
|
|
386
|
-
const COMPONENT_ID$6 = 'modals.
|
|
387
|
-
const
|
|
389
|
+
const COMPONENT_ID$6 = 'modals.tooltip_dialog.close';
|
|
390
|
+
const StyledTooltipDialogClose = styled__default.default(StyledClose).attrs({
|
|
388
391
|
'data-garden-id': COMPONENT_ID$6,
|
|
389
|
-
'data-garden-version': '9.0.0-next.
|
|
392
|
+
'data-garden-version': '9.0.0-next.23'
|
|
390
393
|
}).withConfig({
|
|
391
|
-
displayName: "
|
|
392
|
-
componentId: "sc-
|
|
394
|
+
displayName: "StyledTooltipDialogClose",
|
|
395
|
+
componentId: "sc-18xlgfi-0"
|
|
393
396
|
})(["top:", "px;", ":", ";", ";"], props => props.theme.space.base * 3.5, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * 3}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
|
|
394
|
-
|
|
397
|
+
StyledTooltipDialogClose.defaultProps = {
|
|
395
398
|
theme: reactTheming.DEFAULT_THEME
|
|
396
399
|
};
|
|
397
400
|
|
|
@@ -420,7 +423,7 @@ const colorStyles = _ref => {
|
|
|
420
423
|
};
|
|
421
424
|
const StyledDrawer = styled__default.default.div.attrs({
|
|
422
425
|
'data-garden-id': COMPONENT_ID$5,
|
|
423
|
-
'data-garden-version': '9.0.0-next.
|
|
426
|
+
'data-garden-version': '9.0.0-next.23'
|
|
424
427
|
}).withConfig({
|
|
425
428
|
displayName: "StyledDrawer",
|
|
426
429
|
componentId: "sc-zp66t3-0"
|
|
@@ -437,7 +440,7 @@ const BASE_MULTIPLIERS = {
|
|
|
437
440
|
};
|
|
438
441
|
const StyledDrawerClose = styled__default.default(StyledClose).attrs({
|
|
439
442
|
'data-garden-id': COMPONENT_ID$4,
|
|
440
|
-
'data-garden-version': '9.0.0-next.
|
|
443
|
+
'data-garden-version': '9.0.0-next.23'
|
|
441
444
|
}).withConfig({
|
|
442
445
|
displayName: "StyledDrawerClose",
|
|
443
446
|
componentId: "sc-1a0xt3x-0"
|
|
@@ -449,7 +452,7 @@ StyledDrawerClose.defaultProps = {
|
|
|
449
452
|
const COMPONENT_ID$3 = 'modals.drawer_modal.header';
|
|
450
453
|
const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
|
|
451
454
|
'data-garden-id': COMPONENT_ID$3,
|
|
452
|
-
'data-garden-version': '9.0.0-next.
|
|
455
|
+
'data-garden-version': '9.0.0-next.23'
|
|
453
456
|
}).withConfig({
|
|
454
457
|
displayName: "StyledDrawerHeader",
|
|
455
458
|
componentId: "sc-y4mgkj-0"
|
|
@@ -461,7 +464,7 @@ StyledDrawerHeader.defaultProps = {
|
|
|
461
464
|
const COMPONENT_ID$2 = 'modals.drawer_modal.body';
|
|
462
465
|
const StyledDrawerBody = styled__default.default(StyledBody).attrs({
|
|
463
466
|
'data-garden-id': COMPONENT_ID$2,
|
|
464
|
-
'data-garden-version': '9.0.0-next.
|
|
467
|
+
'data-garden-version': '9.0.0-next.23'
|
|
465
468
|
}).withConfig({
|
|
466
469
|
displayName: "StyledDrawerBody",
|
|
467
470
|
componentId: "sc-13qufyn-0"
|
|
@@ -473,7 +476,7 @@ StyledDrawerBody.defaultProps = {
|
|
|
473
476
|
const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
|
|
474
477
|
const StyledDrawerFooter = styled__default.default.div.attrs({
|
|
475
478
|
'data-garden-id': COMPONENT_ID$1,
|
|
476
|
-
'data-garden-version': '9.0.0-next.
|
|
479
|
+
'data-garden-version': '9.0.0-next.23'
|
|
477
480
|
}).withConfig({
|
|
478
481
|
displayName: "StyledDrawerFooter",
|
|
479
482
|
componentId: "sc-kc7e6p-0"
|
|
@@ -493,7 +496,7 @@ StyledDrawerFooter.defaultProps = {
|
|
|
493
496
|
const COMPONENT_ID = 'modals.drawer_modal.footer_item';
|
|
494
497
|
const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
|
|
495
498
|
'data-garden-id': COMPONENT_ID,
|
|
496
|
-
'data-garden-version': '9.0.0-next.
|
|
499
|
+
'data-garden-version': '9.0.0-next.23'
|
|
497
500
|
}).withConfig({
|
|
498
501
|
displayName: "StyledDrawerFooterItem",
|
|
499
502
|
componentId: "sc-m2yul4-0"
|
|
@@ -599,7 +602,7 @@ const Header$1 = React.forwardRef((_ref, ref) => {
|
|
|
599
602
|
as: tag,
|
|
600
603
|
isCloseButtonPresent: isCloseButtonPresent,
|
|
601
604
|
ref: ref
|
|
602
|
-
}), other.isDanger && React__namespace.default.createElement(StyledDangerIcon, null), children);
|
|
605
|
+
}), !!other.isDanger && React__namespace.default.createElement(StyledDangerIcon, null), children);
|
|
603
606
|
});
|
|
604
607
|
Header$1.displayName = 'Modal.Header';
|
|
605
608
|
Header$1.propTypes = {
|
|
@@ -753,11 +756,11 @@ Modal.Footer = Footer$2;
|
|
|
753
756
|
Modal.FooterItem = FooterItem$2;
|
|
754
757
|
Modal.Header = Header$1;
|
|
755
758
|
|
|
756
|
-
const
|
|
757
|
-
const
|
|
758
|
-
const context = React.useContext(
|
|
759
|
+
const TooltipDialogContext = React.createContext(undefined);
|
|
760
|
+
const useTooltipDialogContext = () => {
|
|
761
|
+
const context = React.useContext(TooltipDialogContext);
|
|
759
762
|
if (context === undefined) {
|
|
760
|
-
throw new Error('Element must be used within a
|
|
763
|
+
throw new Error('Element must be used within a TooltipDialog component.');
|
|
761
764
|
}
|
|
762
765
|
return context;
|
|
763
766
|
};
|
|
@@ -772,7 +775,7 @@ const TitleComponent = React.forwardRef((_ref, ref) => {
|
|
|
772
775
|
getTitleProps,
|
|
773
776
|
hasTitle,
|
|
774
777
|
setHasTitle
|
|
775
|
-
} =
|
|
778
|
+
} = useTooltipDialogContext();
|
|
776
779
|
React.useEffect(() => {
|
|
777
780
|
if (!hasTitle && setHasTitle) {
|
|
778
781
|
setHasTitle(true);
|
|
@@ -783,12 +786,12 @@ const TitleComponent = React.forwardRef((_ref, ref) => {
|
|
|
783
786
|
}
|
|
784
787
|
};
|
|
785
788
|
}, [hasTitle, setHasTitle]);
|
|
786
|
-
return React__namespace.default.createElement(
|
|
789
|
+
return React__namespace.default.createElement(StyledTooltipDialogTitle, Object.assign({}, getTitleProps(other), {
|
|
787
790
|
as: tag,
|
|
788
791
|
ref: ref
|
|
789
792
|
}), children);
|
|
790
793
|
});
|
|
791
|
-
TitleComponent.displayName = '
|
|
794
|
+
TitleComponent.displayName = 'TooltipDialog.Title';
|
|
792
795
|
TitleComponent.propTypes = {
|
|
793
796
|
tag: PropTypes__default.default.any
|
|
794
797
|
};
|
|
@@ -800,20 +803,20 @@ const Title = TitleComponent;
|
|
|
800
803
|
const BodyComponent$1 = React.forwardRef((props, ref) => {
|
|
801
804
|
const {
|
|
802
805
|
getContentProps
|
|
803
|
-
} =
|
|
804
|
-
return React__namespace.default.createElement(
|
|
806
|
+
} = useTooltipDialogContext();
|
|
807
|
+
return React__namespace.default.createElement(StyledTooltipDialogBody, Object.assign({}, getContentProps(props), {
|
|
805
808
|
ref: ref
|
|
806
809
|
}));
|
|
807
810
|
});
|
|
808
|
-
BodyComponent$1.displayName = '
|
|
811
|
+
BodyComponent$1.displayName = 'TooltipDialog.Body';
|
|
809
812
|
const Body$1 = BodyComponent$1;
|
|
810
813
|
|
|
811
814
|
const CloseComponent$1 = React.forwardRef((props, ref) => {
|
|
812
815
|
const {
|
|
813
816
|
getCloseProps
|
|
814
|
-
} =
|
|
817
|
+
} = useTooltipDialogContext();
|
|
815
818
|
const ariaLabel = reactTheming.useText(CloseComponent$1, props, 'aria-label', 'Close tooltip');
|
|
816
|
-
return React__namespace.default.createElement(
|
|
819
|
+
return React__namespace.default.createElement(StyledTooltipDialogClose, Object.assign({}, getCloseProps({
|
|
817
820
|
...props,
|
|
818
821
|
'aria-label': ariaLabel
|
|
819
822
|
}), {
|
|
@@ -821,23 +824,23 @@ const CloseComponent$1 = React.forwardRef((props, ref) => {
|
|
|
821
824
|
size: "small"
|
|
822
825
|
}), React__namespace.default.createElement(SvgXStroke, null));
|
|
823
826
|
});
|
|
824
|
-
CloseComponent$1.displayName = '
|
|
827
|
+
CloseComponent$1.displayName = 'TooltipDialog.Close';
|
|
825
828
|
const Close$1 = CloseComponent$1;
|
|
826
829
|
|
|
827
|
-
const FooterComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(
|
|
830
|
+
const FooterComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipDialogFooter, Object.assign({
|
|
828
831
|
ref: ref
|
|
829
832
|
}, props)));
|
|
830
|
-
FooterComponent$1.displayName = '
|
|
833
|
+
FooterComponent$1.displayName = 'TooltipDialog.Footer';
|
|
831
834
|
const Footer$1 = FooterComponent$1;
|
|
832
835
|
|
|
833
|
-
const FooterItemComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(
|
|
836
|
+
const FooterItemComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipDialogFooterItem, Object.assign({
|
|
834
837
|
ref: ref
|
|
835
838
|
}, props)));
|
|
836
|
-
FooterItemComponent$1.displayName = '
|
|
839
|
+
FooterItemComponent$1.displayName = 'TooltipDialog.FooterItem';
|
|
837
840
|
const FooterItem$1 = FooterItemComponent$1;
|
|
838
841
|
|
|
839
842
|
const PLACEMENT_DEFAULT = 'top';
|
|
840
|
-
const
|
|
843
|
+
const TooltipDialogComponent = React__namespace.default.forwardRef((_ref, ref) => {
|
|
841
844
|
let {
|
|
842
845
|
appendToNode,
|
|
843
846
|
referenceElement,
|
|
@@ -916,7 +919,7 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
|
|
|
916
919
|
const defaultValue = hasTitle ? modalProps['aria-labelledby'] : 'Modal dialog';
|
|
917
920
|
const labelValue = hasTitle ? modalProps['aria-labelledby'] : props['aria-label'];
|
|
918
921
|
const ariaProps = {
|
|
919
|
-
[attribute]: reactTheming.useText(
|
|
922
|
+
[attribute]: reactTheming.useText(TooltipDialogComponent, {
|
|
920
923
|
[attribute]: labelValue
|
|
921
924
|
}, attribute, defaultValue)
|
|
922
925
|
};
|
|
@@ -934,9 +937,9 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
|
|
|
934
937
|
classNames: isAnimated ? 'garden-tooltip-modal-transition' : '',
|
|
935
938
|
nodeRef: transitionRef
|
|
936
939
|
}, transitionState => {
|
|
937
|
-
return React__namespace.default.createElement(
|
|
940
|
+
return React__namespace.default.createElement(TooltipDialogContext.Provider, {
|
|
938
941
|
value: value
|
|
939
|
-
}, React__namespace.default.createElement(
|
|
942
|
+
}, React__namespace.default.createElement(StyledTooltipDialogBackdrop, Object.assign({}, getBackdropProps(), backdropProps, {
|
|
940
943
|
ref: transitionRef
|
|
941
944
|
}), React__namespace.default.createElement(StyledTooltipWrapper, {
|
|
942
945
|
ref: setFloatingElement,
|
|
@@ -946,7 +949,7 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
|
|
|
946
949
|
placement: placement,
|
|
947
950
|
zIndex: zIndex,
|
|
948
951
|
isAnimated: isAnimated
|
|
949
|
-
}, React__namespace.default.createElement(
|
|
952
|
+
}, React__namespace.default.createElement(StyledTooltipDialog, Object.assign({
|
|
950
953
|
transitionState: transitionState,
|
|
951
954
|
placement: placement,
|
|
952
955
|
hasArrow: hasArrow,
|
|
@@ -957,14 +960,14 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
|
|
|
957
960
|
});
|
|
958
961
|
return appendToNode ? ReactDOM.createPortal(Node, appendToNode) : Node;
|
|
959
962
|
});
|
|
960
|
-
|
|
961
|
-
|
|
963
|
+
TooltipDialogComponent.displayName = 'TooltipDialog';
|
|
964
|
+
TooltipDialogComponent.defaultProps = {
|
|
962
965
|
placement: 'auto',
|
|
963
966
|
hasArrow: true,
|
|
964
967
|
focusOnMount: true,
|
|
965
968
|
restoreFocus: true
|
|
966
969
|
};
|
|
967
|
-
|
|
970
|
+
TooltipDialogComponent.propTypes = {
|
|
968
971
|
appendToNode: PropTypes__default.default.any,
|
|
969
972
|
referenceElement: PropTypes__default.default.any,
|
|
970
973
|
placement: PropTypes__default.default.any,
|
|
@@ -976,12 +979,12 @@ TooltipModalComponent.propTypes = {
|
|
|
976
979
|
focusOnMount: PropTypes__default.default.bool,
|
|
977
980
|
restoreFocus: PropTypes__default.default.bool
|
|
978
981
|
};
|
|
979
|
-
const
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
982
|
+
const TooltipDialog = TooltipDialogComponent;
|
|
983
|
+
TooltipDialog.Body = Body$1;
|
|
984
|
+
TooltipDialog.Close = Close$1;
|
|
985
|
+
TooltipDialog.Footer = Footer$1;
|
|
986
|
+
TooltipDialog.FooterItem = FooterItem$1;
|
|
987
|
+
TooltipDialog.Title = Title;
|
|
985
988
|
|
|
986
989
|
const HeaderComponent = React.forwardRef((_ref, ref) => {
|
|
987
990
|
let {
|
|
@@ -1209,4 +1212,4 @@ exports.FooterItem = FooterItem$2;
|
|
|
1209
1212
|
exports.Header = Header$1;
|
|
1210
1213
|
exports.Modal = Modal;
|
|
1211
1214
|
exports.PLACEMENT = PLACEMENT;
|
|
1212
|
-
exports.
|
|
1215
|
+
exports.TooltipDialog = TooltipDialog;
|
|
@@ -11,13 +11,22 @@ import { Body } from './Body';
|
|
|
11
11
|
import { Close } from './Close';
|
|
12
12
|
import { Footer } from './Footer';
|
|
13
13
|
import { FooterItem } from './FooterItem';
|
|
14
|
+
/**
|
|
15
|
+
* [1] implementation of focus management for Drawer usage to support focus edge cases
|
|
16
|
+
* - (1:a) a ref used to return focus on the last focused element
|
|
17
|
+
* - (1:b) opt out of `@zendeskgarden/focus-jail` managing the focus
|
|
18
|
+
* - (1:c) implementation of the focus management effect inside the component
|
|
19
|
+
* - (1:d) set default props to match useFocusJail behavior
|
|
20
|
+
*/
|
|
21
|
+
declare const DrawerComponent: React.ForwardRefExoticComponent<IDrawerProps & React.RefAttributes<HTMLDivElement>>;
|
|
14
22
|
/**
|
|
15
23
|
* @extends HTMLAttributes<HTMLDivElement>
|
|
16
24
|
*/
|
|
17
|
-
export declare const Drawer:
|
|
25
|
+
export declare const Drawer: typeof DrawerComponent & {
|
|
18
26
|
Body: typeof Body;
|
|
19
27
|
Close: typeof Close;
|
|
20
28
|
Footer: typeof Footer;
|
|
21
29
|
FooterItem: typeof FooterItem;
|
|
22
30
|
Header: typeof Header;
|
|
23
31
|
};
|
|
32
|
+
export {};
|
|
@@ -15,7 +15,7 @@ export declare const ModalComponent: React.ForwardRefExoticComponent<IModalProps
|
|
|
15
15
|
/**
|
|
16
16
|
* @extends HTMLAttributes<HTMLDivElement>
|
|
17
17
|
*/
|
|
18
|
-
export declare const Modal:
|
|
18
|
+
export declare const Modal: typeof ModalComponent & {
|
|
19
19
|
Body: typeof Body;
|
|
20
20
|
Close: typeof Close;
|
|
21
21
|
Footer: typeof Footer;
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import {
|
|
8
|
+
import { ITooltipDialogTitleProps } from '../../types';
|
|
9
9
|
/**
|
|
10
10
|
* @extends HTMLAttributes<HTMLDivElement>
|
|
11
11
|
*/
|
|
12
|
-
export declare const Title: React.ForwardRefExoticComponent<
|
|
12
|
+
export declare const Title: React.ForwardRefExoticComponent<ITooltipDialogTitleProps & React.RefAttributes<HTMLDivElement>>;
|
package/dist/typings/elements/{TooltipModal/TooltipModal.d.ts → TooltipDialog/TooltipDialog.d.ts}
RENAMED
|
@@ -5,19 +5,21 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import {
|
|
8
|
+
import { ITooltipDialogProps } from '../../types';
|
|
9
9
|
import { Title } from './Title';
|
|
10
10
|
import { Body } from './Body';
|
|
11
11
|
import { Close } from './Close';
|
|
12
12
|
import { Footer } from './Footer';
|
|
13
13
|
import { FooterItem } from './FooterItem';
|
|
14
|
+
declare const TooltipDialogComponent: React.ForwardRefExoticComponent<ITooltipDialogProps & React.RefAttributes<HTMLDivElement>>;
|
|
14
15
|
/**
|
|
15
16
|
* @extends HTMLAttributes<HTMLDivElement>
|
|
16
17
|
*/
|
|
17
|
-
export declare const
|
|
18
|
+
export declare const TooltipDialog: typeof TooltipDialogComponent & {
|
|
18
19
|
Body: typeof Body;
|
|
19
20
|
Close: typeof Close;
|
|
20
21
|
Footer: typeof Footer;
|
|
21
22
|
FooterItem: typeof FooterItem;
|
|
22
23
|
Title: typeof Title;
|
|
23
24
|
};
|
|
25
|
+
export {};
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -10,6 +10,6 @@ export { Close } from './elements/Close';
|
|
|
10
10
|
export { Footer } from './elements/Footer';
|
|
11
11
|
export { FooterItem } from './elements/FooterItem';
|
|
12
12
|
export { Header } from './elements/Header';
|
|
13
|
-
export {
|
|
13
|
+
export { TooltipDialog } from './elements/TooltipDialog/TooltipDialog';
|
|
14
14
|
export { Drawer } from './elements/Drawer/Drawer';
|
|
15
|
-
export { PLACEMENT, type IModalProps, type IDrawerProps, type
|
|
15
|
+
export { PLACEMENT, type IModalProps, type IDrawerProps, type ITooltipDialogProps } from './types';
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { Placement } from '@floating-ui/react-dom';
|
|
8
8
|
import { TransitionStatus } from 'react-transition-group';
|
|
9
|
-
import {
|
|
10
|
-
export interface
|
|
9
|
+
import { ITooltipDialogProps } from '../types';
|
|
10
|
+
export interface IStyledTooltipDialogProps extends Pick<ITooltipDialogProps, 'hasArrow' | 'isAnimated'> {
|
|
11
11
|
placement: Placement;
|
|
12
12
|
transitionState?: TransitionStatus;
|
|
13
13
|
}
|
|
14
|
-
export declare const
|
|
14
|
+
export declare const StyledTooltipDialog: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IStyledTooltipDialogProps, never>;
|
package/dist/typings/styled/{StyledTooltipModalBackdrop.d.ts → StyledTooltipDialogBackdrop.d.ts}
RENAMED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
/**
|
|
8
8
|
* 1. Smooth iOS scrolling.
|
|
9
9
|
*/
|
|
10
|
-
export declare const
|
|
10
|
+
export declare const StyledTooltipDialogBackdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
11
11
|
'data-garden-id': string;
|
|
12
12
|
'data-garden-version': string;
|
|
13
13
|
}, "data-garden-id" | "data-garden-version">;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const StyledTooltipDialogBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
8
8
|
'data-garden-id': string;
|
|
9
9
|
'data-garden-version': string;
|
|
10
10
|
}, "data-garden-id" | "data-garden-version">;
|
|
@@ -4,8 +4,7 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
|
|
8
|
-
export declare const StyledTooltipModalClose: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("packages/buttons/dist/typings").IIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {
|
|
7
|
+
export declare const StyledTooltipDialogClose: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("packages/buttons/dist/typings").IIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {
|
|
9
8
|
'data-garden-id': string;
|
|
10
9
|
'data-garden-version': string;
|
|
11
10
|
} & {
|
package/dist/typings/styled/{StyledTooltipModalFooter.d.ts → StyledTooltipDialogFooter.d.ts}
RENAMED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const StyledTooltipDialogFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
8
8
|
'data-garden-id': string;
|
|
9
9
|
'data-garden-version': string;
|
|
10
10
|
}, "data-garden-id" | "data-garden-version">;
|
package/dist/typings/styled/{StyledTooltipModalFooterItem.d.ts → StyledTooltipDialogFooterItem.d.ts}
RENAMED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const StyledTooltipDialogFooterItem: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
|
|
8
8
|
'data-garden-id': string;
|
|
9
9
|
'data-garden-version': string;
|
|
10
10
|
} & {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import { DefaultTheme } from 'styled-components';
|
|
8
|
-
export declare const
|
|
8
|
+
export declare const StyledTooltipDialogTitle: import("styled-components").StyledComponent<"div", DefaultTheme, {
|
|
9
9
|
'data-garden-id': string;
|
|
10
10
|
'data-garden-version': string;
|
|
11
11
|
}, "data-garden-id" | "data-garden-version">;
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import { Placement } from '@floating-ui/react-dom';
|
|
8
|
-
import {
|
|
9
|
-
interface IStyledTooltipWrapperProps extends Pick<
|
|
8
|
+
import { ITooltipDialogProps } from '../types';
|
|
9
|
+
interface IStyledTooltipWrapperProps extends Pick<ITooltipDialogProps, 'isAnimated' | 'zIndex'> {
|
|
10
10
|
placement: Placement;
|
|
11
11
|
}
|
|
12
12
|
export declare const StyledTooltipWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IStyledTooltipWrapperProps, never>;
|