@zendeskgarden/react-modals 9.0.0-next.4 → 9.0.0-next.5

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 (10) hide show
  1. package/README.md +10 -10
  2. package/dist/index.cjs.js +138 -132
  3. package/dist/index.esm.js +140 -134
  4. package/dist/typings/elements/Body.d.ts +2 -0
  5. package/dist/typings/elements/Close.d.ts +2 -0
  6. package/dist/typings/elements/Footer.d.ts +2 -0
  7. package/dist/typings/elements/FooterItem.d.ts +2 -0
  8. package/dist/typings/elements/Header.d.ts +2 -0
  9. package/dist/typings/elements/Modal.d.ts +13 -1
  10. package/package.json +4 -4
package/README.md CHANGED
@@ -18,7 +18,7 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
18
18
 
19
19
  ```jsx
20
20
  import { ThemeProvider } from '@zendeskgarden/react-theming';
21
- import { Modal, Header, Body, Footer, FooterItem, Close } from '@zendeskgarden/react-modals';
21
+ import { Modal } from '@zendeskgarden/react-modals';
22
22
  import { Button } from '@zendeskgarden/react-buttons';
23
23
 
24
24
  /**
@@ -26,17 +26,17 @@ import { Button } from '@zendeskgarden/react-buttons';
26
26
  */
27
27
  <ThemeProvider>
28
28
  <Modal onClose={() => alert('modal closing')}>
29
- <Header>Example Header</Header>
30
- <Body>Some content</Body>
31
- <Footer>
32
- <FooterItem>
29
+ <Modal.Header>Example Header</Modal.Header>
30
+ <Modal.Body>Some content</Modal.Body>
31
+ <Modal.Footer>
32
+ <Modal.FooterItem>
33
33
  <Button isBasic>Cancel</Button>
34
- </FooterItem>
35
- <FooterItem>
34
+ </Modal.FooterItem>
35
+ <Modal.FooterItem>
36
36
  <Button isPrimary>Confirm</Button>
37
- </FooterItem>
38
- </Footer>
39
- <Close aria-label="Close modal" />
37
+ </Modal.FooterItem>
38
+ </Modal.Footer>
39
+ <Modal.Close aria-label="Close modal" />
40
40
  </Modal>
41
41
  </ThemeProvider>;
42
42
  ```
package/dist/index.cjs.js CHANGED
@@ -80,11 +80,11 @@ const animationStyles$1 = props => {
80
80
  };
81
81
  const StyledBackdrop = styled__default.default.div.attrs({
82
82
  'data-garden-id': COMPONENT_ID$j,
83
- 'data-garden-version': '9.0.0-next.4'
83
+ 'data-garden-version': '9.0.0-next.5'
84
84
  }).withConfig({
85
85
  displayName: "StyledBackdrop",
86
86
  componentId: "sc-mzdjpo-0"
87
- })(["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 => reactTheming.getColor('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
87
+ })(["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 => reactTheming.getColorV8('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
88
88
  StyledBackdrop.defaultProps = {
89
89
  theme: reactTheming.DEFAULT_THEME
90
90
  };
@@ -96,7 +96,7 @@ StyledBackdrop.propTypes = {
96
96
  const COMPONENT_ID$i = 'modals.body';
97
97
  const StyledBody = styled__default.default.div.attrs({
98
98
  'data-garden-id': COMPONENT_ID$i,
99
- 'data-garden-version': '9.0.0-next.4'
99
+ 'data-garden-version': '9.0.0-next.5'
100
100
  }).withConfig({
101
101
  displayName: "StyledBody",
102
102
  componentId: "sc-14rzecg-0"
@@ -109,10 +109,10 @@ const COMPONENT_ID$h = 'modals.close';
109
109
  const colorStyles = props => {
110
110
  const backgroundColor = 'primaryHue';
111
111
  const foregroundColor = 'neutralHue';
112
- return styled.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:", ";}"], reactTheming.getColor(foregroundColor, 600, props.theme), reactTheming.getColor(backgroundColor, 600, props.theme, 0.08), reactTheming.getColor(foregroundColor, 700, props.theme), reactTheming.focusStyles({
112
+ return styled.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:", ";}"], reactTheming.getColorV8(foregroundColor, 600, props.theme), reactTheming.getColorV8(backgroundColor, 600, props.theme, 0.08), reactTheming.getColorV8(foregroundColor, 700, props.theme), reactTheming.focusStyles({
113
113
  theme: props.theme,
114
114
  hue: backgroundColor
115
- }), reactTheming.getColor(backgroundColor, 600, props.theme, 0.2), reactTheming.getColor(foregroundColor, 800, props.theme));
115
+ }), reactTheming.getColorV8(backgroundColor, 600, props.theme, 0.2), reactTheming.getColorV8(foregroundColor, 800, props.theme));
116
116
  };
117
117
  const BASE_MULTIPLIERS$1 = {
118
118
  top: 2.5,
@@ -121,7 +121,7 @@ const BASE_MULTIPLIERS$1 = {
121
121
  };
122
122
  const StyledClose = styled__default.default.button.attrs({
123
123
  'data-garden-id': COMPONENT_ID$h,
124
- 'data-garden-version': '9.0.0-next.4'
124
+ 'data-garden-version': '9.0.0-next.5'
125
125
  }).withConfig({
126
126
  displayName: "StyledClose",
127
127
  componentId: "sc-iseudj-0"
@@ -133,11 +133,11 @@ StyledClose.defaultProps = {
133
133
  const COMPONENT_ID$g = 'modals.footer';
134
134
  const StyledFooter = styled__default.default.div.attrs({
135
135
  'data-garden-id': COMPONENT_ID$g,
136
- 'data-garden-version': '9.0.0-next.4'
136
+ 'data-garden-version': '9.0.0-next.5'
137
137
  }).withConfig({
138
138
  displayName: "StyledFooter",
139
139
  componentId: "sc-d8pfdu-0"
140
- })(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], props => props.isLarge && `${props.theme.borders.sm} ${reactTheming.getColor('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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
140
+ })(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], props => props.isLarge && `${props.theme.borders.sm} ${reactTheming.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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
141
141
  StyledFooter.defaultProps = {
142
142
  theme: reactTheming.DEFAULT_THEME
143
143
  };
@@ -145,7 +145,7 @@ StyledFooter.defaultProps = {
145
145
  const COMPONENT_ID$f = 'modals.footer_item';
146
146
  const StyledFooterItem = styled__default.default.span.attrs({
147
147
  'data-garden-id': COMPONENT_ID$f,
148
- 'data-garden-version': '9.0.0-next.4'
148
+ 'data-garden-version': '9.0.0-next.5'
149
149
  }).withConfig({
150
150
  displayName: "StyledFooterItem",
151
151
  componentId: "sc-1mb76hl-0"
@@ -157,11 +157,11 @@ StyledFooterItem.defaultProps = {
157
157
  const COMPONENT_ID$e = 'modals.header';
158
158
  const StyledHeader = styled__default.default.div.attrs({
159
159
  'data-garden-id': COMPONENT_ID$e,
160
- 'data-garden-version': '9.0.0-next.4'
160
+ 'data-garden-version': '9.0.0-next.5'
161
161
  }).withConfig({
162
162
  displayName: "StyledHeader",
163
163
  componentId: "sc-1787r9v-0"
164
- })(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", " line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, reactTheming.getColor('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 => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? reactTheming.getColor('dangerHue', 600, props.theme) : props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
164
+ })(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", " line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, reactTheming.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 => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? reactTheming.getColorV8('dangerHue', 600, props.theme) : props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
165
165
  StyledHeader.defaultProps = {
166
166
  theme: reactTheming.DEFAULT_THEME
167
167
  };
@@ -220,7 +220,7 @@ const boxShadow$1 = props => {
220
220
  } = theme;
221
221
  const offsetY = `${space.base * 5}px`;
222
222
  const blurRadius = `${space.base * 7}px`;
223
- const color = reactTheming.getColor('neutralHue', 800, theme, 0.35);
223
+ const color = reactTheming.getColorV8('neutralHue', 800, theme, 0.35);
224
224
  return shadows.lg(offsetY, blurRadius, color);
225
225
  };
226
226
  const sizeStyles$1 = props => {
@@ -228,7 +228,7 @@ const sizeStyles$1 = props => {
228
228
  };
229
229
  const StyledModal = styled__default.default.div.attrs({
230
230
  'data-garden-id': COMPONENT_ID$d,
231
- 'data-garden-version': '9.0.0-next.4'
231
+ 'data-garden-version': '9.0.0-next.5'
232
232
  }).withConfig({
233
233
  displayName: "StyledModal",
234
234
  componentId: "sc-1pe1axu-0"
@@ -244,7 +244,7 @@ StyledModal.defaultProps = {
244
244
  const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
245
245
  const StyledTooltipModalBackdrop = styled__default.default.div.attrs({
246
246
  'data-garden-id': COMPONENT_ID$c,
247
- 'data-garden-version': '9.0.0-next.4'
247
+ 'data-garden-version': '9.0.0-next.5'
248
248
  }).withConfig({
249
249
  displayName: "StyledTooltipModalBackdrop",
250
250
  componentId: "sc-1yaomgq-0"
@@ -271,7 +271,7 @@ StyledTooltipWrapper.defaultProps = {
271
271
  const COMPONENT_ID$b = 'modals.tooltip_modal';
272
272
  const StyledTooltipModal = styled__default.default.div.attrs(props => ({
273
273
  'data-garden-id': COMPONENT_ID$b,
274
- 'data-garden-version': '9.0.0-next.4',
274
+ 'data-garden-version': '9.0.0-next.5',
275
275
  className: props.isAnimated && 'is-animated'
276
276
  })).withConfig({
277
277
  displayName: "StyledTooltipModal",
@@ -300,7 +300,7 @@ const sizeStyles = props => `
300
300
  `;
301
301
  const StyledTooltipModalTitle = styled__default.default.div.attrs({
302
302
  'data-garden-id': COMPONENT_ID$a,
303
- 'data-garden-version': '9.0.0-next.4'
303
+ 'data-garden-version': '9.0.0-next.5'
304
304
  }).withConfig({
305
305
  displayName: "StyledTooltipModalTitle",
306
306
  componentId: "sc-11xjgjs-0"
@@ -312,7 +312,7 @@ StyledTooltipModalTitle.defaultProps = {
312
312
  const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
313
313
  const StyledTooltipModalBody = styled__default.default.div.attrs({
314
314
  'data-garden-id': COMPONENT_ID$9,
315
- 'data-garden-version': '9.0.0-next.4'
315
+ 'data-garden-version': '9.0.0-next.5'
316
316
  }).withConfig({
317
317
  displayName: "StyledTooltipModalBody",
318
318
  componentId: "sc-195dkzj-0"
@@ -324,7 +324,7 @@ StyledTooltipModalBody.defaultProps = {
324
324
  const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
325
325
  const StyledTooltipModalFooter = styled__default.default.div.attrs({
326
326
  'data-garden-id': COMPONENT_ID$8,
327
- 'data-garden-version': '9.0.0-next.4'
327
+ 'data-garden-version': '9.0.0-next.5'
328
328
  }).withConfig({
329
329
  displayName: "StyledTooltipModalFooter",
330
330
  componentId: "sc-fm36a9-0"
@@ -336,7 +336,7 @@ StyledTooltipModalFooter.defaultProps = {
336
336
  const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
337
337
  const StyledTooltipModalFooterItem = styled__default.default(StyledFooterItem).attrs({
338
338
  'data-garden-id': COMPONENT_ID$7,
339
- 'data-garden-version': '9.0.0-next.4'
339
+ 'data-garden-version': '9.0.0-next.5'
340
340
  }).withConfig({
341
341
  displayName: "StyledTooltipModalFooterItem",
342
342
  componentId: "sc-1nahj6p-0"
@@ -348,7 +348,7 @@ StyledTooltipModalFooterItem.defaultProps = {
348
348
  const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
349
349
  const StyledTooltipModalClose = styled__default.default(StyledClose).attrs({
350
350
  'data-garden-id': COMPONENT_ID$6,
351
- 'data-garden-version': '9.0.0-next.4'
351
+ 'data-garden-version': '9.0.0-next.5'
352
352
  }).withConfig({
353
353
  displayName: "StyledTooltipModalClose",
354
354
  componentId: "sc-1h2ke3q-0"
@@ -369,12 +369,12 @@ const boxShadow = props => {
369
369
  } = theme;
370
370
  const offsetY = `${space.base * 5}px`;
371
371
  const blurRadius = `${space.base * 7}px`;
372
- const color = reactTheming.getColor('neutralHue', 800, theme, 0.35);
372
+ const color = reactTheming.getColorV8('neutralHue', 800, theme, 0.35);
373
373
  return shadows.lg(offsetY, blurRadius, color);
374
374
  };
375
375
  const StyledDrawer = styled__default.default.div.attrs({
376
376
  'data-garden-id': COMPONENT_ID$5,
377
- 'data-garden-version': '9.0.0-next.4'
377
+ 'data-garden-version': '9.0.0-next.5'
378
378
  }).withConfig({
379
379
  displayName: "StyledDrawer",
380
380
  componentId: "sc-zp66t3-0"
@@ -391,7 +391,7 @@ const BASE_MULTIPLIERS = {
391
391
  };
392
392
  const StyledDrawerClose = styled__default.default(StyledClose).attrs({
393
393
  'data-garden-id': COMPONENT_ID$4,
394
- 'data-garden-version': '9.0.0-next.4'
394
+ 'data-garden-version': '9.0.0-next.5'
395
395
  }).withConfig({
396
396
  displayName: "StyledDrawerClose",
397
397
  componentId: "sc-1a0xt3x-0"
@@ -403,7 +403,7 @@ StyledDrawerClose.defaultProps = {
403
403
  const COMPONENT_ID$3 = 'modals.drawer_modal.header';
404
404
  const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
405
405
  'data-garden-id': COMPONENT_ID$3,
406
- 'data-garden-version': '9.0.0-next.4'
406
+ 'data-garden-version': '9.0.0-next.5'
407
407
  }).withConfig({
408
408
  displayName: "StyledDrawerHeader",
409
409
  componentId: "sc-y4mgkj-0"
@@ -415,7 +415,7 @@ StyledDrawerHeader.defaultProps = {
415
415
  const COMPONENT_ID$2 = 'modals.drawer_modal.body';
416
416
  const StyledDrawerBody = styled__default.default(StyledBody).attrs({
417
417
  'data-garden-id': COMPONENT_ID$2,
418
- 'data-garden-version': '9.0.0-next.4'
418
+ 'data-garden-version': '9.0.0-next.5'
419
419
  }).withConfig({
420
420
  displayName: "StyledDrawerBody",
421
421
  componentId: "sc-13qufyn-0"
@@ -427,11 +427,11 @@ StyledDrawerBody.defaultProps = {
427
427
  const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
428
428
  const StyledDrawerFooter = styled__default.default.div.attrs({
429
429
  'data-garden-id': COMPONENT_ID$1,
430
- 'data-garden-version': '9.0.0-next.4'
430
+ 'data-garden-version': '9.0.0-next.5'
431
431
  }).withConfig({
432
432
  displayName: "StyledDrawerFooter",
433
433
  componentId: "sc-kc7e6p-0"
434
- })(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
434
+ })(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
435
435
  StyledDrawerFooter.defaultProps = {
436
436
  theme: reactTheming.DEFAULT_THEME
437
437
  };
@@ -439,7 +439,7 @@ StyledDrawerFooter.defaultProps = {
439
439
  const COMPONENT_ID = 'modals.drawer_modal.footer_item';
440
440
  const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
441
441
  'data-garden-id': COMPONENT_ID,
442
- 'data-garden-version': '9.0.0-next.4'
442
+ 'data-garden-version': '9.0.0-next.5'
443
443
  }).withConfig({
444
444
  displayName: "StyledDrawerFooterItem",
445
445
  componentId: "sc-m2yul4-0"
@@ -457,6 +457,105 @@ const useModalContext = () => {
457
457
  return context;
458
458
  };
459
459
 
460
+ const Body$2 = React.forwardRef((props, ref) => {
461
+ const {
462
+ getContentProps
463
+ } = useModalContext();
464
+ return React__namespace.default.createElement(StyledBody, _extends$2({}, getContentProps(props), {
465
+ ref: ref
466
+ }));
467
+ });
468
+ Body$2.displayName = 'Body';
469
+
470
+ var _path;
471
+ 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); }
472
+ var SvgXStroke = function SvgXStroke(props) {
473
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends({
474
+ xmlns: "http://www.w3.org/2000/svg",
475
+ width: 16,
476
+ height: 16,
477
+ focusable: "false",
478
+ viewBox: "0 0 16 16",
479
+ "aria-hidden": "true"
480
+ }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
481
+ stroke: "currentColor",
482
+ strokeLinecap: "round",
483
+ d: "M3 13L13 3m0 10L3 3"
484
+ })));
485
+ };
486
+
487
+ const Close$2 = React.forwardRef((props, ref) => {
488
+ const {
489
+ getCloseProps,
490
+ setIsCloseButtonPresent
491
+ } = useModalContext();
492
+ React.useEffect(() => {
493
+ setIsCloseButtonPresent(true);
494
+ return () => setIsCloseButtonPresent(false);
495
+ });
496
+ const ariaLabel = reactTheming.useText(Close$2, props, 'aria-label', 'Close modal');
497
+ return React__namespace.default.createElement(StyledClose, _extends$2({}, getCloseProps({
498
+ ...props,
499
+ 'aria-label': ariaLabel
500
+ }), {
501
+ ref: ref
502
+ }), React__namespace.default.createElement(SvgXStroke, null));
503
+ });
504
+ Close$2.displayName = 'Close';
505
+
506
+ const Footer$2 = React__namespace.default.forwardRef((props, ref) => {
507
+ const {
508
+ isLarge
509
+ } = useModalContext();
510
+ return React__namespace.default.createElement(StyledFooter, _extends$2({
511
+ ref: ref,
512
+ isLarge: isLarge
513
+ }, props));
514
+ });
515
+ Footer$2.displayName = 'Footer';
516
+
517
+ const FooterItem$2 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, _extends$2({
518
+ ref: ref
519
+ }, props)));
520
+ FooterItem$2.displayName = 'FooterItem';
521
+
522
+ const Header$1 = React.forwardRef((_ref, ref) => {
523
+ let {
524
+ children,
525
+ tag,
526
+ ...other
527
+ } = _ref;
528
+ const {
529
+ isCloseButtonPresent,
530
+ hasHeader,
531
+ setHasHeader,
532
+ getTitleProps
533
+ } = useModalContext();
534
+ React.useEffect(() => {
535
+ if (!hasHeader && setHasHeader) {
536
+ setHasHeader(true);
537
+ }
538
+ return () => {
539
+ if (hasHeader && setHasHeader) {
540
+ setHasHeader(false);
541
+ }
542
+ };
543
+ }, [hasHeader, setHasHeader]);
544
+ return React__namespace.default.createElement(StyledHeader, _extends$2({}, getTitleProps(other), {
545
+ as: tag,
546
+ isCloseButtonPresent: isCloseButtonPresent,
547
+ ref: ref
548
+ }), other.isDanger && React__namespace.default.createElement(StyledDangerIcon, null), children);
549
+ });
550
+ Header$1.displayName = 'Header';
551
+ Header$1.propTypes = {
552
+ isDanger: PropTypes__default.default.bool,
553
+ tag: PropTypes__default.default.any
554
+ };
555
+ Header$1.defaultProps = {
556
+ tag: 'div'
557
+ };
558
+
460
559
  const isOverflowing = element => {
461
560
  const doc = ownerDocument__default.default(element);
462
561
  const win = ownerWindow__default.default(doc);
@@ -469,7 +568,7 @@ const isOverflowing = element => {
469
568
  const marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
470
569
  return marginLeft + doc.body.clientWidth + marginRight < win.innerWidth;
471
570
  };
472
- const Modal = React.forwardRef((_ref, ref) => {
571
+ const ModalComponent = React.forwardRef((_ref, ref) => {
473
572
  let {
474
573
  backdropProps,
475
574
  children,
@@ -562,7 +661,7 @@ const Modal = React.forwardRef((_ref, ref) => {
562
661
  const defaultValue = hasHeader ? modalContainerProps['aria-labelledby'] : 'Modal dialog';
563
662
  const labelValue = hasHeader ? modalContainerProps['aria-labelledby'] : modalProps['aria-label'];
564
663
  const ariaProps = {
565
- [attribute]: reactTheming.useText(Modal, {
664
+ [attribute]: reactTheming.useText(ModalComponent, {
566
665
  [attribute]: labelValue
567
666
  }, attribute, defaultValue)
568
667
  };
@@ -582,8 +681,8 @@ const Modal = React.forwardRef((_ref, ref) => {
582
681
  ref: reactMergeRefs.mergeRefs([ref, modalRef])
583
682
  }), children))), rootNode);
584
683
  });
585
- Modal.displayName = 'Modal';
586
- Modal.propTypes = {
684
+ ModalComponent.displayName = 'Modal';
685
+ ModalComponent.propTypes = {
587
686
  backdropProps: PropTypes__default.default.object,
588
687
  isLarge: PropTypes__default.default.bool,
589
688
  isAnimated: PropTypes__default.default.bool,
@@ -593,109 +692,16 @@ Modal.propTypes = {
593
692
  onClose: PropTypes__default.default.func,
594
693
  appendToNode: PropTypes__default.default.any
595
694
  };
596
- Modal.defaultProps = {
695
+ ModalComponent.defaultProps = {
597
696
  isAnimated: true,
598
697
  isCentered: true
599
698
  };
600
-
601
- const Body$2 = React.forwardRef((props, ref) => {
602
- const {
603
- getContentProps
604
- } = useModalContext();
605
- return React__namespace.default.createElement(StyledBody, _extends$2({}, getContentProps(props), {
606
- ref: ref
607
- }));
608
- });
609
- Body$2.displayName = 'Body';
610
-
611
- var _path;
612
- 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); }
613
- var SvgXStroke = function SvgXStroke(props) {
614
- return /*#__PURE__*/React__namespace.createElement("svg", _extends({
615
- xmlns: "http://www.w3.org/2000/svg",
616
- width: 16,
617
- height: 16,
618
- focusable: "false",
619
- viewBox: "0 0 16 16",
620
- "aria-hidden": "true"
621
- }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
622
- stroke: "currentColor",
623
- strokeLinecap: "round",
624
- d: "M3 13L13 3m0 10L3 3"
625
- })));
626
- };
627
-
628
- const Close$2 = React.forwardRef((props, ref) => {
629
- const {
630
- getCloseProps,
631
- setIsCloseButtonPresent
632
- } = useModalContext();
633
- React.useEffect(() => {
634
- setIsCloseButtonPresent(true);
635
- return () => setIsCloseButtonPresent(false);
636
- });
637
- const ariaLabel = reactTheming.useText(Close$2, props, 'aria-label', 'Close modal');
638
- return React__namespace.default.createElement(StyledClose, _extends$2({}, getCloseProps({
639
- ...props,
640
- 'aria-label': ariaLabel
641
- }), {
642
- ref: ref
643
- }), React__namespace.default.createElement(SvgXStroke, null));
644
- });
645
- Close$2.displayName = 'Close';
646
-
647
- const Footer$2 = React__namespace.default.forwardRef((props, ref) => {
648
- const {
649
- isLarge
650
- } = useModalContext();
651
- return React__namespace.default.createElement(StyledFooter, _extends$2({
652
- ref: ref,
653
- isLarge: isLarge
654
- }, props));
655
- });
656
- Footer$2.displayName = 'Footer';
657
-
658
- const FooterItem$2 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, _extends$2({
659
- ref: ref
660
- }, props)));
661
- FooterItem$2.displayName = 'FooterItem';
662
-
663
- const Header$1 = React.forwardRef((_ref, ref) => {
664
- let {
665
- children,
666
- tag,
667
- ...other
668
- } = _ref;
669
- const {
670
- isCloseButtonPresent,
671
- hasHeader,
672
- setHasHeader,
673
- getTitleProps
674
- } = useModalContext();
675
- React.useEffect(() => {
676
- if (!hasHeader && setHasHeader) {
677
- setHasHeader(true);
678
- }
679
- return () => {
680
- if (hasHeader && setHasHeader) {
681
- setHasHeader(false);
682
- }
683
- };
684
- }, [hasHeader, setHasHeader]);
685
- return React__namespace.default.createElement(StyledHeader, _extends$2({}, getTitleProps(other), {
686
- as: tag,
687
- isCloseButtonPresent: isCloseButtonPresent,
688
- ref: ref
689
- }), other.isDanger && React__namespace.default.createElement(StyledDangerIcon, null), children);
690
- });
691
- Header$1.displayName = 'Header';
692
- Header$1.propTypes = {
693
- isDanger: PropTypes__default.default.bool,
694
- tag: PropTypes__default.default.any
695
- };
696
- Header$1.defaultProps = {
697
- tag: 'div'
698
- };
699
+ const Modal = ModalComponent;
700
+ Modal.Body = Body$2;
701
+ Modal.Close = Close$2;
702
+ Modal.Footer = Footer$2;
703
+ Modal.FooterItem = FooterItem$2;
704
+ Modal.Header = Header$1;
699
705
 
700
706
  const TooltipModalContext = React.createContext(undefined);
701
707
  const useTooltipModalContext = () => {
package/dist/index.esm.js CHANGED
@@ -6,11 +6,11 @@
6
6
  */
7
7
 
8
8
  import * as React from 'react';
9
- import React__default, { createContext, useContext, forwardRef, useRef, useState, useEffect, useMemo } from 'react';
9
+ import React__default, { createContext, useContext, forwardRef, useEffect, useRef, useState, useMemo } from 'react';
10
10
  import ReactDOM, { createPortal } from 'react-dom';
11
11
  import styled, { keyframes, css, ThemeContext } from 'styled-components';
12
12
  import PropTypes from 'prop-types';
13
- import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, focusStyles, mediaQuery, menuStyles, getMenuPosition, arrowStyles, getArrowPosition, useDocument, useText, getFloatingPlacements, PLACEMENT as PLACEMENT$1 } from '@zendeskgarden/react-theming';
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
14
  import { useModal } from '@zendeskgarden/container-modal';
15
15
  import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
16
16
  import { mergeRefs } from 'react-merge-refs';
@@ -48,11 +48,11 @@ const animationStyles$1 = props => {
48
48
  };
49
49
  const StyledBackdrop = styled.div.attrs({
50
50
  'data-garden-id': COMPONENT_ID$j,
51
- 'data-garden-version': '9.0.0-next.4'
51
+ 'data-garden-version': '9.0.0-next.5'
52
52
  }).withConfig({
53
53
  displayName: "StyledBackdrop",
54
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 => getColor('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => retrieveComponentStyles(COMPONENT_ID$j, props));
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
56
  StyledBackdrop.defaultProps = {
57
57
  theme: DEFAULT_THEME
58
58
  };
@@ -64,7 +64,7 @@ StyledBackdrop.propTypes = {
64
64
  const COMPONENT_ID$i = 'modals.body';
65
65
  const StyledBody = styled.div.attrs({
66
66
  'data-garden-id': COMPONENT_ID$i,
67
- 'data-garden-version': '9.0.0-next.4'
67
+ 'data-garden-version': '9.0.0-next.5'
68
68
  }).withConfig({
69
69
  displayName: "StyledBody",
70
70
  componentId: "sc-14rzecg-0"
@@ -77,10 +77,10 @@ const COMPONENT_ID$h = 'modals.close';
77
77
  const colorStyles = props => {
78
78
  const backgroundColor = 'primaryHue';
79
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:", ";}"], getColor(foregroundColor, 600, props.theme), getColor(backgroundColor, 600, props.theme, 0.08), getColor(foregroundColor, 700, props.theme), focusStyles({
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
81
  theme: props.theme,
82
82
  hue: backgroundColor
83
- }), getColor(backgroundColor, 600, props.theme, 0.2), getColor(foregroundColor, 800, props.theme));
83
+ }), getColorV8(backgroundColor, 600, props.theme, 0.2), getColorV8(foregroundColor, 800, props.theme));
84
84
  };
85
85
  const BASE_MULTIPLIERS$1 = {
86
86
  top: 2.5,
@@ -89,7 +89,7 @@ const BASE_MULTIPLIERS$1 = {
89
89
  };
90
90
  const StyledClose = styled.button.attrs({
91
91
  'data-garden-id': COMPONENT_ID$h,
92
- 'data-garden-version': '9.0.0-next.4'
92
+ 'data-garden-version': '9.0.0-next.5'
93
93
  }).withConfig({
94
94
  displayName: "StyledClose",
95
95
  componentId: "sc-iseudj-0"
@@ -101,11 +101,11 @@ StyledClose.defaultProps = {
101
101
  const COMPONENT_ID$g = 'modals.footer';
102
102
  const StyledFooter = styled.div.attrs({
103
103
  'data-garden-id': COMPONENT_ID$g,
104
- 'data-garden-version': '9.0.0-next.4'
104
+ 'data-garden-version': '9.0.0-next.5'
105
105
  }).withConfig({
106
106
  displayName: "StyledFooter",
107
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} ${getColor('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));
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
109
  StyledFooter.defaultProps = {
110
110
  theme: DEFAULT_THEME
111
111
  };
@@ -113,7 +113,7 @@ StyledFooter.defaultProps = {
113
113
  const COMPONENT_ID$f = 'modals.footer_item';
114
114
  const StyledFooterItem = styled.span.attrs({
115
115
  'data-garden-id': COMPONENT_ID$f,
116
- 'data-garden-version': '9.0.0-next.4'
116
+ 'data-garden-version': '9.0.0-next.5'
117
117
  }).withConfig({
118
118
  displayName: "StyledFooterItem",
119
119
  componentId: "sc-1mb76hl-0"
@@ -125,11 +125,11 @@ StyledFooterItem.defaultProps = {
125
125
  const COMPONENT_ID$e = 'modals.header';
126
126
  const StyledHeader = styled.div.attrs({
127
127
  'data-garden-id': COMPONENT_ID$e,
128
- 'data-garden-version': '9.0.0-next.4'
128
+ 'data-garden-version': '9.0.0-next.5'
129
129
  }).withConfig({
130
130
  displayName: "StyledHeader",
131
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, getColor('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 ? getColor('dangerHue', 600, props.theme) : props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$e, props));
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) : props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$e, props));
133
133
  StyledHeader.defaultProps = {
134
134
  theme: DEFAULT_THEME
135
135
  };
@@ -188,7 +188,7 @@ const boxShadow$1 = props => {
188
188
  } = theme;
189
189
  const offsetY = `${space.base * 5}px`;
190
190
  const blurRadius = `${space.base * 7}px`;
191
- const color = getColor('neutralHue', 800, theme, 0.35);
191
+ const color = getColorV8('neutralHue', 800, theme, 0.35);
192
192
  return shadows.lg(offsetY, blurRadius, color);
193
193
  };
194
194
  const sizeStyles$1 = props => {
@@ -196,7 +196,7 @@ const sizeStyles$1 = props => {
196
196
  };
197
197
  const StyledModal = styled.div.attrs({
198
198
  'data-garden-id': COMPONENT_ID$d,
199
- 'data-garden-version': '9.0.0-next.4'
199
+ 'data-garden-version': '9.0.0-next.5'
200
200
  }).withConfig({
201
201
  displayName: "StyledModal",
202
202
  componentId: "sc-1pe1axu-0"
@@ -212,7 +212,7 @@ StyledModal.defaultProps = {
212
212
  const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
213
213
  const StyledTooltipModalBackdrop = styled.div.attrs({
214
214
  'data-garden-id': COMPONENT_ID$c,
215
- 'data-garden-version': '9.0.0-next.4'
215
+ 'data-garden-version': '9.0.0-next.5'
216
216
  }).withConfig({
217
217
  displayName: "StyledTooltipModalBackdrop",
218
218
  componentId: "sc-1yaomgq-0"
@@ -239,7 +239,7 @@ StyledTooltipWrapper.defaultProps = {
239
239
  const COMPONENT_ID$b = 'modals.tooltip_modal';
240
240
  const StyledTooltipModal = styled.div.attrs(props => ({
241
241
  'data-garden-id': COMPONENT_ID$b,
242
- 'data-garden-version': '9.0.0-next.4',
242
+ 'data-garden-version': '9.0.0-next.5',
243
243
  className: props.isAnimated && 'is-animated'
244
244
  })).withConfig({
245
245
  displayName: "StyledTooltipModal",
@@ -268,7 +268,7 @@ const sizeStyles = props => `
268
268
  `;
269
269
  const StyledTooltipModalTitle = styled.div.attrs({
270
270
  'data-garden-id': COMPONENT_ID$a,
271
- 'data-garden-version': '9.0.0-next.4'
271
+ 'data-garden-version': '9.0.0-next.5'
272
272
  }).withConfig({
273
273
  displayName: "StyledTooltipModalTitle",
274
274
  componentId: "sc-11xjgjs-0"
@@ -280,7 +280,7 @@ StyledTooltipModalTitle.defaultProps = {
280
280
  const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
281
281
  const StyledTooltipModalBody = styled.div.attrs({
282
282
  'data-garden-id': COMPONENT_ID$9,
283
- 'data-garden-version': '9.0.0-next.4'
283
+ 'data-garden-version': '9.0.0-next.5'
284
284
  }).withConfig({
285
285
  displayName: "StyledTooltipModalBody",
286
286
  componentId: "sc-195dkzj-0"
@@ -292,7 +292,7 @@ StyledTooltipModalBody.defaultProps = {
292
292
  const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
293
293
  const StyledTooltipModalFooter = styled.div.attrs({
294
294
  'data-garden-id': COMPONENT_ID$8,
295
- 'data-garden-version': '9.0.0-next.4'
295
+ 'data-garden-version': '9.0.0-next.5'
296
296
  }).withConfig({
297
297
  displayName: "StyledTooltipModalFooter",
298
298
  componentId: "sc-fm36a9-0"
@@ -304,7 +304,7 @@ StyledTooltipModalFooter.defaultProps = {
304
304
  const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
305
305
  const StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
306
306
  'data-garden-id': COMPONENT_ID$7,
307
- 'data-garden-version': '9.0.0-next.4'
307
+ 'data-garden-version': '9.0.0-next.5'
308
308
  }).withConfig({
309
309
  displayName: "StyledTooltipModalFooterItem",
310
310
  componentId: "sc-1nahj6p-0"
@@ -316,7 +316,7 @@ StyledTooltipModalFooterItem.defaultProps = {
316
316
  const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
317
317
  const StyledTooltipModalClose = styled(StyledClose).attrs({
318
318
  'data-garden-id': COMPONENT_ID$6,
319
- 'data-garden-version': '9.0.0-next.4'
319
+ 'data-garden-version': '9.0.0-next.5'
320
320
  }).withConfig({
321
321
  displayName: "StyledTooltipModalClose",
322
322
  componentId: "sc-1h2ke3q-0"
@@ -337,12 +337,12 @@ const boxShadow = props => {
337
337
  } = theme;
338
338
  const offsetY = `${space.base * 5}px`;
339
339
  const blurRadius = `${space.base * 7}px`;
340
- const color = getColor('neutralHue', 800, theme, 0.35);
340
+ const color = getColorV8('neutralHue', 800, theme, 0.35);
341
341
  return shadows.lg(offsetY, blurRadius, color);
342
342
  };
343
343
  const StyledDrawer = styled.div.attrs({
344
344
  'data-garden-id': COMPONENT_ID$5,
345
- 'data-garden-version': '9.0.0-next.4'
345
+ 'data-garden-version': '9.0.0-next.5'
346
346
  }).withConfig({
347
347
  displayName: "StyledDrawer",
348
348
  componentId: "sc-zp66t3-0"
@@ -359,7 +359,7 @@ const BASE_MULTIPLIERS = {
359
359
  };
360
360
  const StyledDrawerClose = styled(StyledClose).attrs({
361
361
  'data-garden-id': COMPONENT_ID$4,
362
- 'data-garden-version': '9.0.0-next.4'
362
+ 'data-garden-version': '9.0.0-next.5'
363
363
  }).withConfig({
364
364
  displayName: "StyledDrawerClose",
365
365
  componentId: "sc-1a0xt3x-0"
@@ -371,7 +371,7 @@ StyledDrawerClose.defaultProps = {
371
371
  const COMPONENT_ID$3 = 'modals.drawer_modal.header';
372
372
  const StyledDrawerHeader = styled(StyledHeader).attrs({
373
373
  'data-garden-id': COMPONENT_ID$3,
374
- 'data-garden-version': '9.0.0-next.4'
374
+ 'data-garden-version': '9.0.0-next.5'
375
375
  }).withConfig({
376
376
  displayName: "StyledDrawerHeader",
377
377
  componentId: "sc-y4mgkj-0"
@@ -383,7 +383,7 @@ StyledDrawerHeader.defaultProps = {
383
383
  const COMPONENT_ID$2 = 'modals.drawer_modal.body';
384
384
  const StyledDrawerBody = styled(StyledBody).attrs({
385
385
  'data-garden-id': COMPONENT_ID$2,
386
- 'data-garden-version': '9.0.0-next.4'
386
+ 'data-garden-version': '9.0.0-next.5'
387
387
  }).withConfig({
388
388
  displayName: "StyledDrawerBody",
389
389
  componentId: "sc-13qufyn-0"
@@ -395,11 +395,11 @@ StyledDrawerBody.defaultProps = {
395
395
  const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
396
396
  const StyledDrawerFooter = styled.div.attrs({
397
397
  'data-garden-id': COMPONENT_ID$1,
398
- 'data-garden-version': '9.0.0-next.4'
398
+ 'data-garden-version': '9.0.0-next.5'
399
399
  }).withConfig({
400
400
  displayName: "StyledDrawerFooter",
401
401
  componentId: "sc-kc7e6p-0"
402
- })(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$1, props));
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
403
  StyledDrawerFooter.defaultProps = {
404
404
  theme: DEFAULT_THEME
405
405
  };
@@ -407,7 +407,7 @@ StyledDrawerFooter.defaultProps = {
407
407
  const COMPONENT_ID = 'modals.drawer_modal.footer_item';
408
408
  const StyledDrawerFooterItem = styled(StyledFooterItem).attrs({
409
409
  'data-garden-id': COMPONENT_ID,
410
- 'data-garden-version': '9.0.0-next.4'
410
+ 'data-garden-version': '9.0.0-next.5'
411
411
  }).withConfig({
412
412
  displayName: "StyledDrawerFooterItem",
413
413
  componentId: "sc-m2yul4-0"
@@ -425,6 +425,105 @@ const useModalContext = () => {
425
425
  return context;
426
426
  };
427
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
+
428
527
  const isOverflowing = element => {
429
528
  const doc = ownerDocument(element);
430
529
  const win = ownerWindow(doc);
@@ -437,7 +536,7 @@ const isOverflowing = element => {
437
536
  const marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
438
537
  return marginLeft + doc.body.clientWidth + marginRight < win.innerWidth;
439
538
  };
440
- const Modal = forwardRef((_ref, ref) => {
539
+ const ModalComponent = forwardRef((_ref, ref) => {
441
540
  let {
442
541
  backdropProps,
443
542
  children,
@@ -530,7 +629,7 @@ const Modal = forwardRef((_ref, ref) => {
530
629
  const defaultValue = hasHeader ? modalContainerProps['aria-labelledby'] : 'Modal dialog';
531
630
  const labelValue = hasHeader ? modalContainerProps['aria-labelledby'] : modalProps['aria-label'];
532
631
  const ariaProps = {
533
- [attribute]: useText(Modal, {
632
+ [attribute]: useText(ModalComponent, {
534
633
  [attribute]: labelValue
535
634
  }, attribute, defaultValue)
536
635
  };
@@ -550,8 +649,8 @@ const Modal = forwardRef((_ref, ref) => {
550
649
  ref: mergeRefs([ref, modalRef])
551
650
  }), children))), rootNode);
552
651
  });
553
- Modal.displayName = 'Modal';
554
- Modal.propTypes = {
652
+ ModalComponent.displayName = 'Modal';
653
+ ModalComponent.propTypes = {
555
654
  backdropProps: PropTypes.object,
556
655
  isLarge: PropTypes.bool,
557
656
  isAnimated: PropTypes.bool,
@@ -561,109 +660,16 @@ Modal.propTypes = {
561
660
  onClose: PropTypes.func,
562
661
  appendToNode: PropTypes.any
563
662
  };
564
- Modal.defaultProps = {
663
+ ModalComponent.defaultProps = {
565
664
  isAnimated: true,
566
665
  isCentered: true
567
666
  };
568
-
569
- const Body$2 = forwardRef((props, ref) => {
570
- const {
571
- getContentProps
572
- } = useModalContext();
573
- return React__default.createElement(StyledBody, _extends$2({}, getContentProps(props), {
574
- ref: ref
575
- }));
576
- });
577
- Body$2.displayName = 'Body';
578
-
579
- var _path;
580
- 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); }
581
- var SvgXStroke = function SvgXStroke(props) {
582
- return /*#__PURE__*/React.createElement("svg", _extends({
583
- xmlns: "http://www.w3.org/2000/svg",
584
- width: 16,
585
- height: 16,
586
- focusable: "false",
587
- viewBox: "0 0 16 16",
588
- "aria-hidden": "true"
589
- }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
590
- stroke: "currentColor",
591
- strokeLinecap: "round",
592
- d: "M3 13L13 3m0 10L3 3"
593
- })));
594
- };
595
-
596
- const Close$2 = forwardRef((props, ref) => {
597
- const {
598
- getCloseProps,
599
- setIsCloseButtonPresent
600
- } = useModalContext();
601
- useEffect(() => {
602
- setIsCloseButtonPresent(true);
603
- return () => setIsCloseButtonPresent(false);
604
- });
605
- const ariaLabel = useText(Close$2, props, 'aria-label', 'Close modal');
606
- return React__default.createElement(StyledClose, _extends$2({}, getCloseProps({
607
- ...props,
608
- 'aria-label': ariaLabel
609
- }), {
610
- ref: ref
611
- }), React__default.createElement(SvgXStroke, null));
612
- });
613
- Close$2.displayName = 'Close';
614
-
615
- const Footer$2 = React__default.forwardRef((props, ref) => {
616
- const {
617
- isLarge
618
- } = useModalContext();
619
- return React__default.createElement(StyledFooter, _extends$2({
620
- ref: ref,
621
- isLarge: isLarge
622
- }, props));
623
- });
624
- Footer$2.displayName = 'Footer';
625
-
626
- const FooterItem$2 = React__default.forwardRef((props, ref) => React__default.createElement(StyledFooterItem, _extends$2({
627
- ref: ref
628
- }, props)));
629
- FooterItem$2.displayName = 'FooterItem';
630
-
631
- const Header$1 = forwardRef((_ref, ref) => {
632
- let {
633
- children,
634
- tag,
635
- ...other
636
- } = _ref;
637
- const {
638
- isCloseButtonPresent,
639
- hasHeader,
640
- setHasHeader,
641
- getTitleProps
642
- } = useModalContext();
643
- useEffect(() => {
644
- if (!hasHeader && setHasHeader) {
645
- setHasHeader(true);
646
- }
647
- return () => {
648
- if (hasHeader && setHasHeader) {
649
- setHasHeader(false);
650
- }
651
- };
652
- }, [hasHeader, setHasHeader]);
653
- return React__default.createElement(StyledHeader, _extends$2({}, getTitleProps(other), {
654
- as: tag,
655
- isCloseButtonPresent: isCloseButtonPresent,
656
- ref: ref
657
- }), other.isDanger && React__default.createElement(StyledDangerIcon, null), children);
658
- });
659
- Header$1.displayName = 'Header';
660
- Header$1.propTypes = {
661
- isDanger: PropTypes.bool,
662
- tag: PropTypes.any
663
- };
664
- Header$1.defaultProps = {
665
- tag: 'div'
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;
667
673
 
668
674
  const TooltipModalContext = createContext(undefined);
669
675
  const useTooltipModalContext = () => {
package/dist/typings/elements/Body.d.ts CHANGED
@@ -6,6 +6,8 @@
6
6
  */
7
7
  import React from 'react';
8
8
  /**
9
+ * @deprecated use `Modal.Body` instead
10
+ *
9
11
  * @extends HTMLAttributes<HTMLDivElement>
10
12
  */
11
13
  export declare const Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
package/dist/typings/elements/Close.d.ts CHANGED
@@ -6,6 +6,8 @@
6
6
  */
7
7
  import React from 'react';
8
8
  /**
9
+ * @deprecated use `Modal.Close` instead
10
+ *
9
11
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
10
12
  */
11
13
  export declare const Close: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
package/dist/typings/elements/Footer.d.ts CHANGED
@@ -6,6 +6,8 @@
6
6
  */
7
7
  import React from 'react';
8
8
  /**
9
+ * @deprecated use `Modal.Footer` instead
10
+ *
9
11
  * @extends HTMLAttributes<HTMLDivElement>
10
12
  */
11
13
  export declare const Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
package/dist/typings/elements/FooterItem.d.ts CHANGED
@@ -6,6 +6,8 @@
6
6
  */
7
7
  import React from 'react';
8
8
  /**
9
+ * @deprecated use `Modal.FooterItem` instead
10
+ *
9
11
  * @extends HTMLAttributes<HTMLSpanElement>
10
12
  */
11
13
  export declare const FooterItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
package/dist/typings/elements/Header.d.ts CHANGED
@@ -7,6 +7,8 @@
7
7
  import React from 'react';
8
8
  import { IHeaderProps } from '../types';
9
9
  /**
10
+ * @deprecated use `Modal.Header` instead
11
+ *
10
12
  * @extends HTMLAttributes<HTMLDivElement>
11
13
  */
12
14
  export declare const Header: React.ForwardRefExoticComponent<IHeaderProps & React.RefAttributes<HTMLDivElement>>;
package/dist/typings/elements/Modal.d.ts CHANGED
@@ -6,7 +6,19 @@
6
6
  */
7
7
  import React from 'react';
8
8
  import { IModalProps } from '../types';
9
+ import { Body } from './Body';
10
+ import { Close } from './Close';
11
+ import { Footer } from './Footer';
12
+ import { FooterItem } from './FooterItem';
13
+ import { Header } from './Header';
14
+ export declare const ModalComponent: React.ForwardRefExoticComponent<IModalProps & React.RefAttributes<HTMLDivElement>>;
9
15
  /**
10
16
  * @extends HTMLAttributes<HTMLDivElement>
11
17
  */
12
- export declare const Modal: React.ForwardRefExoticComponent<IModalProps & React.RefAttributes<HTMLDivElement>>;
18
+ export declare const Modal: React.ForwardRefExoticComponent<IModalProps & React.RefAttributes<HTMLDivElement>> & {
19
+ Body: typeof Body;
20
+ Close: typeof Close;
21
+ Footer: typeof Footer;
22
+ FooterItem: typeof FooterItem;
23
+ Header: typeof Header;
24
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-modals",
3
- "version": "9.0.0-next.4",
3
+ "version": "9.0.0-next.5",
4
4
  "description": "Components relating to modals in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -34,11 +34,11 @@
34
34
  "@zendeskgarden/react-theming": "^8.67.0",
35
35
  "react": ">=16.8.0",
36
36
  "react-dom": ">=16.8.0",
37
- "styled-components": "^5.1.0"
37
+ "styled-components": "^5.3.1"
38
38
  },
39
39
  "devDependencies": {
40
40
  "@types/react-transition-group": "4.4.10",
41
- "@zendeskgarden/react-theming": "^9.0.0-next.4",
41
+ "@zendeskgarden/react-theming": "^9.0.0-next.5",
42
42
  "@zendeskgarden/svg-icons": "7.0.0"
43
43
  },
44
44
  "keywords": [
@@ -51,5 +51,5 @@
51
51
  "access": "public"
52
52
  },
53
53
  "zendeskgarden:src": "src/index.ts",
54
- "gitHead": "749220247e3a22d2d502dcb3691d81e6a3d52b02"
54
+ "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
55
55
  }