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

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 (3) hide show
  1. package/dist/index.cjs.js +26 -35
  2. package/dist/index.esm.js +26 -35
  3. package/package.json +4 -5
package/dist/index.cjs.js CHANGED
@@ -13,7 +13,6 @@ var styled = require('styled-components');
13
13
  var PropTypes = require('prop-types');
14
14
  var reactTheming = require('@zendeskgarden/react-theming');
15
15
  var containerModal = require('@zendeskgarden/container-modal');
16
- var containerFocusvisible = require('@zendeskgarden/container-focusvisible');
17
16
  var reactMergeRefs = require('react-merge-refs');
18
17
  var isWindow = require('dom-helpers/isWindow');
19
18
  var ownerDocument = require('dom-helpers/ownerDocument');
@@ -80,7 +79,7 @@ const animationStyles$1 = props => {
80
79
  };
81
80
  const StyledBackdrop = styled__default.default.div.attrs({
82
81
  'data-garden-id': COMPONENT_ID$j,
83
- 'data-garden-version': '9.0.0-next.5'
82
+ 'data-garden-version': '9.0.0-next.7'
84
83
  }).withConfig({
85
84
  displayName: "StyledBackdrop",
86
85
  componentId: "sc-mzdjpo-0"
@@ -96,11 +95,11 @@ StyledBackdrop.propTypes = {
96
95
  const COMPONENT_ID$i = 'modals.body';
97
96
  const StyledBody = styled__default.default.div.attrs({
98
97
  'data-garden-id': COMPONENT_ID$i,
99
- 'data-garden-version': '9.0.0-next.5'
98
+ 'data-garden-version': '9.0.0-next.7'
100
99
  }).withConfig({
101
100
  displayName: "StyledBody",
102
101
  componentId: "sc-14rzecg-0"
103
- })(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
102
+ })(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
104
103
  StyledBody.defaultProps = {
105
104
  theme: reactTheming.DEFAULT_THEME
106
105
  };
@@ -121,7 +120,7 @@ const BASE_MULTIPLIERS$1 = {
121
120
  };
122
121
  const StyledClose = styled__default.default.button.attrs({
123
122
  'data-garden-id': COMPONENT_ID$h,
124
- 'data-garden-version': '9.0.0-next.5'
123
+ 'data-garden-version': '9.0.0-next.7'
125
124
  }).withConfig({
126
125
  displayName: "StyledClose",
127
126
  componentId: "sc-iseudj-0"
@@ -133,7 +132,7 @@ StyledClose.defaultProps = {
133
132
  const COMPONENT_ID$g = 'modals.footer';
134
133
  const StyledFooter = styled__default.default.div.attrs({
135
134
  'data-garden-id': COMPONENT_ID$g,
136
- 'data-garden-version': '9.0.0-next.5'
135
+ 'data-garden-version': '9.0.0-next.7'
137
136
  }).withConfig({
138
137
  displayName: "StyledFooter",
139
138
  componentId: "sc-d8pfdu-0"
@@ -145,7 +144,7 @@ StyledFooter.defaultProps = {
145
144
  const COMPONENT_ID$f = 'modals.footer_item';
146
145
  const StyledFooterItem = styled__default.default.span.attrs({
147
146
  'data-garden-id': COMPONENT_ID$f,
148
- 'data-garden-version': '9.0.0-next.5'
147
+ 'data-garden-version': '9.0.0-next.7'
149
148
  }).withConfig({
150
149
  displayName: "StyledFooterItem",
151
150
  componentId: "sc-1mb76hl-0"
@@ -157,11 +156,11 @@ StyledFooterItem.defaultProps = {
157
156
  const COMPONENT_ID$e = 'modals.header';
158
157
  const StyledHeader = styled__default.default.div.attrs({
159
158
  'data-garden-id': COMPONENT_ID$e,
160
- 'data-garden-version': '9.0.0-next.5'
159
+ 'data-garden-version': '9.0.0-next.7'
161
160
  }).withConfig({
162
161
  displayName: "StyledHeader",
163
162
  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.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));
163
+ })(["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) : reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
165
164
  StyledHeader.defaultProps = {
166
165
  theme: reactTheming.DEFAULT_THEME
167
166
  };
@@ -228,11 +227,11 @@ const sizeStyles$1 = props => {
228
227
  };
229
228
  const StyledModal = styled__default.default.div.attrs({
230
229
  'data-garden-id': COMPONENT_ID$d,
231
- 'data-garden-version': '9.0.0-next.5'
230
+ 'data-garden-version': '9.0.0-next.7'
232
231
  }).withConfig({
233
232
  displayName: "StyledModal",
234
233
  componentId: "sc-1pe1axu-0"
235
- })(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => props.theme.colors.background, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
234
+ })(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => reactTheming.getColorV8('background', 600 , props.theme), props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
236
235
  StyledModal.propTypes = {
237
236
  isLarge: PropTypes__default.default.bool,
238
237
  isAnimated: PropTypes__default.default.bool
@@ -244,7 +243,7 @@ StyledModal.defaultProps = {
244
243
  const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
245
244
  const StyledTooltipModalBackdrop = styled__default.default.div.attrs({
246
245
  'data-garden-id': COMPONENT_ID$c,
247
- 'data-garden-version': '9.0.0-next.5'
246
+ 'data-garden-version': '9.0.0-next.7'
248
247
  }).withConfig({
249
248
  displayName: "StyledTooltipModalBackdrop",
250
249
  componentId: "sc-1yaomgq-0"
@@ -271,7 +270,7 @@ StyledTooltipWrapper.defaultProps = {
271
270
  const COMPONENT_ID$b = 'modals.tooltip_modal';
272
271
  const StyledTooltipModal = styled__default.default.div.attrs(props => ({
273
272
  'data-garden-id': COMPONENT_ID$b,
274
- 'data-garden-version': '9.0.0-next.5',
273
+ 'data-garden-version': '9.0.0-next.7',
275
274
  className: props.isAnimated && 'is-animated'
276
275
  })).withConfig({
277
276
  displayName: "StyledTooltipModal",
@@ -300,11 +299,11 @@ const sizeStyles = props => `
300
299
  `;
301
300
  const StyledTooltipModalTitle = styled__default.default.div.attrs({
302
301
  'data-garden-id': COMPONENT_ID$a,
303
- 'data-garden-version': '9.0.0-next.5'
302
+ 'data-garden-version': '9.0.0-next.7'
304
303
  }).withConfig({
305
304
  displayName: "StyledTooltipModalTitle",
306
305
  componentId: "sc-11xjgjs-0"
307
- })(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => props.theme.colors.foreground, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
306
+ })(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
308
307
  StyledTooltipModalTitle.defaultProps = {
309
308
  theme: reactTheming.DEFAULT_THEME
310
309
  };
@@ -312,11 +311,11 @@ StyledTooltipModalTitle.defaultProps = {
312
311
  const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
313
312
  const StyledTooltipModalBody = styled__default.default.div.attrs({
314
313
  'data-garden-id': COMPONENT_ID$9,
315
- 'data-garden-version': '9.0.0-next.5'
314
+ 'data-garden-version': '9.0.0-next.7'
316
315
  }).withConfig({
317
316
  displayName: "StyledTooltipModalBody",
318
317
  componentId: "sc-195dkzj-0"
319
- })(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
318
+ })(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
320
319
  StyledTooltipModalBody.defaultProps = {
321
320
  theme: reactTheming.DEFAULT_THEME
322
321
  };
@@ -324,7 +323,7 @@ StyledTooltipModalBody.defaultProps = {
324
323
  const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
325
324
  const StyledTooltipModalFooter = styled__default.default.div.attrs({
326
325
  'data-garden-id': COMPONENT_ID$8,
327
- 'data-garden-version': '9.0.0-next.5'
326
+ 'data-garden-version': '9.0.0-next.7'
328
327
  }).withConfig({
329
328
  displayName: "StyledTooltipModalFooter",
330
329
  componentId: "sc-fm36a9-0"
@@ -336,7 +335,7 @@ StyledTooltipModalFooter.defaultProps = {
336
335
  const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
337
336
  const StyledTooltipModalFooterItem = styled__default.default(StyledFooterItem).attrs({
338
337
  'data-garden-id': COMPONENT_ID$7,
339
- 'data-garden-version': '9.0.0-next.5'
338
+ 'data-garden-version': '9.0.0-next.7'
340
339
  }).withConfig({
341
340
  displayName: "StyledTooltipModalFooterItem",
342
341
  componentId: "sc-1nahj6p-0"
@@ -348,7 +347,7 @@ StyledTooltipModalFooterItem.defaultProps = {
348
347
  const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
349
348
  const StyledTooltipModalClose = styled__default.default(StyledClose).attrs({
350
349
  'data-garden-id': COMPONENT_ID$6,
351
- 'data-garden-version': '9.0.0-next.5'
350
+ 'data-garden-version': '9.0.0-next.7'
352
351
  }).withConfig({
353
352
  displayName: "StyledTooltipModalClose",
354
353
  componentId: "sc-1h2ke3q-0"
@@ -374,11 +373,11 @@ const boxShadow = props => {
374
373
  };
375
374
  const StyledDrawer = styled__default.default.div.attrs({
376
375
  'data-garden-id': COMPONENT_ID$5,
377
- 'data-garden-version': '9.0.0-next.5'
376
+ 'data-garden-version': '9.0.0-next.7'
378
377
  }).withConfig({
379
378
  displayName: "StyledDrawer",
380
379
  componentId: "sc-zp66t3-0"
381
- })(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', boxShadow, props => props.theme.colors.background, DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
380
+ })(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', boxShadow, props => reactTheming.getColorV8('background', 600 , props.theme), DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
382
381
  StyledDrawer.defaultProps = {
383
382
  theme: reactTheming.DEFAULT_THEME
384
383
  };
@@ -391,7 +390,7 @@ const BASE_MULTIPLIERS = {
391
390
  };
392
391
  const StyledDrawerClose = styled__default.default(StyledClose).attrs({
393
392
  'data-garden-id': COMPONENT_ID$4,
394
- 'data-garden-version': '9.0.0-next.5'
393
+ 'data-garden-version': '9.0.0-next.7'
395
394
  }).withConfig({
396
395
  displayName: "StyledDrawerClose",
397
396
  componentId: "sc-1a0xt3x-0"
@@ -403,7 +402,7 @@ StyledDrawerClose.defaultProps = {
403
402
  const COMPONENT_ID$3 = 'modals.drawer_modal.header';
404
403
  const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
405
404
  'data-garden-id': COMPONENT_ID$3,
406
- 'data-garden-version': '9.0.0-next.5'
405
+ 'data-garden-version': '9.0.0-next.7'
407
406
  }).withConfig({
408
407
  displayName: "StyledDrawerHeader",
409
408
  componentId: "sc-y4mgkj-0"
@@ -415,7 +414,7 @@ StyledDrawerHeader.defaultProps = {
415
414
  const COMPONENT_ID$2 = 'modals.drawer_modal.body';
416
415
  const StyledDrawerBody = styled__default.default(StyledBody).attrs({
417
416
  'data-garden-id': COMPONENT_ID$2,
418
- 'data-garden-version': '9.0.0-next.5'
417
+ 'data-garden-version': '9.0.0-next.7'
419
418
  }).withConfig({
420
419
  displayName: "StyledDrawerBody",
421
420
  componentId: "sc-13qufyn-0"
@@ -427,7 +426,7 @@ StyledDrawerBody.defaultProps = {
427
426
  const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
428
427
  const StyledDrawerFooter = styled__default.default.div.attrs({
429
428
  'data-garden-id': COMPONENT_ID$1,
430
- 'data-garden-version': '9.0.0-next.5'
429
+ 'data-garden-version': '9.0.0-next.7'
431
430
  }).withConfig({
432
431
  displayName: "StyledDrawerFooter",
433
432
  componentId: "sc-kc7e6p-0"
@@ -439,7 +438,7 @@ StyledDrawerFooter.defaultProps = {
439
438
  const COMPONENT_ID = 'modals.drawer_modal.footer_item';
440
439
  const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
441
440
  'data-garden-id': COMPONENT_ID,
442
- 'data-garden-version': '9.0.0-next.5'
441
+ 'data-garden-version': '9.0.0-next.7'
443
442
  }).withConfig({
444
443
  displayName: "StyledDrawerFooterItem",
445
444
  componentId: "sc-m2yul4-0"
@@ -600,10 +599,6 @@ const ModalComponent = React.forwardRef((_ref, ref) => {
600
599
  focusOnMount,
601
600
  restoreFocus
602
601
  });
603
- containerFocusvisible.useFocusVisible({
604
- scope: modalRef,
605
- relativeDocument: environment
606
- });
607
602
  React.useEffect(() => {
608
603
  if (!environment) {
609
604
  return undefined;
@@ -1029,10 +1024,6 @@ const DrawerComponent = React.forwardRef((_ref, ref) => {
1029
1024
  const environment = reactTheming.useDocument(theme);
1030
1025
  const [isCloseButtonPresent, setIsCloseButtonPresent] = React.useState(false);
1031
1026
  const [hasHeader, setHasHeader] = React.useState(false);
1032
- containerFocusvisible.useFocusVisible({
1033
- scope: modalRef,
1034
- relativeDocument: modalRef.current
1035
- });
1036
1027
  const {
1037
1028
  getTitleProps,
1038
1029
  getCloseProps,
package/dist/index.esm.js CHANGED
@@ -12,7 +12,6 @@ import styled, { keyframes, css, ThemeContext } from 'styled-components';
12
12
  import PropTypes from 'prop-types';
13
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
- import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
16
15
  import { mergeRefs } from 'react-merge-refs';
17
16
  import isWindow from 'dom-helpers/isWindow';
18
17
  import ownerDocument from 'dom-helpers/ownerDocument';
@@ -48,7 +47,7 @@ const animationStyles$1 = props => {
48
47
  };
49
48
  const StyledBackdrop = styled.div.attrs({
50
49
  'data-garden-id': COMPONENT_ID$j,
51
- 'data-garden-version': '9.0.0-next.5'
50
+ 'data-garden-version': '9.0.0-next.7'
52
51
  }).withConfig({
53
52
  displayName: "StyledBackdrop",
54
53
  componentId: "sc-mzdjpo-0"
@@ -64,11 +63,11 @@ StyledBackdrop.propTypes = {
64
63
  const COMPONENT_ID$i = 'modals.body';
65
64
  const StyledBody = styled.div.attrs({
66
65
  'data-garden-id': COMPONENT_ID$i,
67
- 'data-garden-version': '9.0.0-next.5'
66
+ 'data-garden-version': '9.0.0-next.7'
68
67
  }).withConfig({
69
68
  displayName: "StyledBody",
70
69
  componentId: "sc-14rzecg-0"
71
- })(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$i, props));
70
+ })(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$i, props));
72
71
  StyledBody.defaultProps = {
73
72
  theme: DEFAULT_THEME
74
73
  };
@@ -89,7 +88,7 @@ const BASE_MULTIPLIERS$1 = {
89
88
  };
90
89
  const StyledClose = styled.button.attrs({
91
90
  'data-garden-id': COMPONENT_ID$h,
92
- 'data-garden-version': '9.0.0-next.5'
91
+ 'data-garden-version': '9.0.0-next.7'
93
92
  }).withConfig({
94
93
  displayName: "StyledClose",
95
94
  componentId: "sc-iseudj-0"
@@ -101,7 +100,7 @@ StyledClose.defaultProps = {
101
100
  const COMPONENT_ID$g = 'modals.footer';
102
101
  const StyledFooter = styled.div.attrs({
103
102
  'data-garden-id': COMPONENT_ID$g,
104
- 'data-garden-version': '9.0.0-next.5'
103
+ 'data-garden-version': '9.0.0-next.7'
105
104
  }).withConfig({
106
105
  displayName: "StyledFooter",
107
106
  componentId: "sc-d8pfdu-0"
@@ -113,7 +112,7 @@ StyledFooter.defaultProps = {
113
112
  const COMPONENT_ID$f = 'modals.footer_item';
114
113
  const StyledFooterItem = styled.span.attrs({
115
114
  'data-garden-id': COMPONENT_ID$f,
116
- 'data-garden-version': '9.0.0-next.5'
115
+ 'data-garden-version': '9.0.0-next.7'
117
116
  }).withConfig({
118
117
  displayName: "StyledFooterItem",
119
118
  componentId: "sc-1mb76hl-0"
@@ -125,11 +124,11 @@ StyledFooterItem.defaultProps = {
125
124
  const COMPONENT_ID$e = 'modals.header';
126
125
  const StyledHeader = styled.div.attrs({
127
126
  'data-garden-id': COMPONENT_ID$e,
128
- 'data-garden-version': '9.0.0-next.5'
127
+ 'data-garden-version': '9.0.0-next.7'
129
128
  }).withConfig({
130
129
  displayName: "StyledHeader",
131
130
  componentId: "sc-1787r9v-0"
132
- })(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", " line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, getColorV8('neutralHue', 200), props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? getColorV8('dangerHue', 600, props.theme) : props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$e, props));
131
+ })(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", " line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, getColorV8('neutralHue', 200), props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? getColorV8('dangerHue', 600, props.theme) : getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$e, props));
133
132
  StyledHeader.defaultProps = {
134
133
  theme: DEFAULT_THEME
135
134
  };
@@ -196,11 +195,11 @@ const sizeStyles$1 = props => {
196
195
  };
197
196
  const StyledModal = styled.div.attrs({
198
197
  'data-garden-id': COMPONENT_ID$d,
199
- 'data-garden-version': '9.0.0-next.5'
198
+ 'data-garden-version': '9.0.0-next.7'
200
199
  }).withConfig({
201
200
  displayName: "StyledModal",
202
201
  componentId: "sc-1pe1axu-0"
203
- })(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => props.theme.colors.background, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => retrieveComponentStyles(COMPONENT_ID$d, props));
202
+ })(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => getColorV8('background', 600 , props.theme), props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => retrieveComponentStyles(COMPONENT_ID$d, props));
204
203
  StyledModal.propTypes = {
205
204
  isLarge: PropTypes.bool,
206
205
  isAnimated: PropTypes.bool
@@ -212,7 +211,7 @@ StyledModal.defaultProps = {
212
211
  const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
213
212
  const StyledTooltipModalBackdrop = styled.div.attrs({
214
213
  'data-garden-id': COMPONENT_ID$c,
215
- 'data-garden-version': '9.0.0-next.5'
214
+ 'data-garden-version': '9.0.0-next.7'
216
215
  }).withConfig({
217
216
  displayName: "StyledTooltipModalBackdrop",
218
217
  componentId: "sc-1yaomgq-0"
@@ -239,7 +238,7 @@ StyledTooltipWrapper.defaultProps = {
239
238
  const COMPONENT_ID$b = 'modals.tooltip_modal';
240
239
  const StyledTooltipModal = styled.div.attrs(props => ({
241
240
  'data-garden-id': COMPONENT_ID$b,
242
- 'data-garden-version': '9.0.0-next.5',
241
+ 'data-garden-version': '9.0.0-next.7',
243
242
  className: props.isAnimated && 'is-animated'
244
243
  })).withConfig({
245
244
  displayName: "StyledTooltipModal",
@@ -268,11 +267,11 @@ const sizeStyles = props => `
268
267
  `;
269
268
  const StyledTooltipModalTitle = styled.div.attrs({
270
269
  'data-garden-id': COMPONENT_ID$a,
271
- 'data-garden-version': '9.0.0-next.5'
270
+ 'data-garden-version': '9.0.0-next.7'
272
271
  }).withConfig({
273
272
  displayName: "StyledTooltipModalTitle",
274
273
  componentId: "sc-11xjgjs-0"
275
- })(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => props.theme.colors.foreground, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$a, props));
274
+ })(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$a, props));
276
275
  StyledTooltipModalTitle.defaultProps = {
277
276
  theme: DEFAULT_THEME
278
277
  };
@@ -280,11 +279,11 @@ StyledTooltipModalTitle.defaultProps = {
280
279
  const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
281
280
  const StyledTooltipModalBody = styled.div.attrs({
282
281
  'data-garden-id': COMPONENT_ID$9,
283
- 'data-garden-version': '9.0.0-next.5'
282
+ 'data-garden-version': '9.0.0-next.7'
284
283
  }).withConfig({
285
284
  displayName: "StyledTooltipModalBody",
286
285
  componentId: "sc-195dkzj-0"
287
- })(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$9, props));
286
+ })(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$9, props));
288
287
  StyledTooltipModalBody.defaultProps = {
289
288
  theme: DEFAULT_THEME
290
289
  };
@@ -292,7 +291,7 @@ StyledTooltipModalBody.defaultProps = {
292
291
  const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
293
292
  const StyledTooltipModalFooter = styled.div.attrs({
294
293
  'data-garden-id': COMPONENT_ID$8,
295
- 'data-garden-version': '9.0.0-next.5'
294
+ 'data-garden-version': '9.0.0-next.7'
296
295
  }).withConfig({
297
296
  displayName: "StyledTooltipModalFooter",
298
297
  componentId: "sc-fm36a9-0"
@@ -304,7 +303,7 @@ StyledTooltipModalFooter.defaultProps = {
304
303
  const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
305
304
  const StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
306
305
  'data-garden-id': COMPONENT_ID$7,
307
- 'data-garden-version': '9.0.0-next.5'
306
+ 'data-garden-version': '9.0.0-next.7'
308
307
  }).withConfig({
309
308
  displayName: "StyledTooltipModalFooterItem",
310
309
  componentId: "sc-1nahj6p-0"
@@ -316,7 +315,7 @@ StyledTooltipModalFooterItem.defaultProps = {
316
315
  const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
317
316
  const StyledTooltipModalClose = styled(StyledClose).attrs({
318
317
  'data-garden-id': COMPONENT_ID$6,
319
- 'data-garden-version': '9.0.0-next.5'
318
+ 'data-garden-version': '9.0.0-next.7'
320
319
  }).withConfig({
321
320
  displayName: "StyledTooltipModalClose",
322
321
  componentId: "sc-1h2ke3q-0"
@@ -342,11 +341,11 @@ const boxShadow = props => {
342
341
  };
343
342
  const StyledDrawer = styled.div.attrs({
344
343
  'data-garden-id': COMPONENT_ID$5,
345
- 'data-garden-version': '9.0.0-next.5'
344
+ 'data-garden-version': '9.0.0-next.7'
346
345
  }).withConfig({
347
346
  displayName: "StyledDrawer",
348
347
  componentId: "sc-zp66t3-0"
349
- })(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', boxShadow, props => props.theme.colors.background, DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => retrieveComponentStyles(COMPONENT_ID$5, props));
348
+ })(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', boxShadow, props => getColorV8('background', 600 , props.theme), DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => retrieveComponentStyles(COMPONENT_ID$5, props));
350
349
  StyledDrawer.defaultProps = {
351
350
  theme: DEFAULT_THEME
352
351
  };
@@ -359,7 +358,7 @@ const BASE_MULTIPLIERS = {
359
358
  };
360
359
  const StyledDrawerClose = styled(StyledClose).attrs({
361
360
  'data-garden-id': COMPONENT_ID$4,
362
- 'data-garden-version': '9.0.0-next.5'
361
+ 'data-garden-version': '9.0.0-next.7'
363
362
  }).withConfig({
364
363
  displayName: "StyledDrawerClose",
365
364
  componentId: "sc-1a0xt3x-0"
@@ -371,7 +370,7 @@ StyledDrawerClose.defaultProps = {
371
370
  const COMPONENT_ID$3 = 'modals.drawer_modal.header';
372
371
  const StyledDrawerHeader = styled(StyledHeader).attrs({
373
372
  'data-garden-id': COMPONENT_ID$3,
374
- 'data-garden-version': '9.0.0-next.5'
373
+ 'data-garden-version': '9.0.0-next.7'
375
374
  }).withConfig({
376
375
  displayName: "StyledDrawerHeader",
377
376
  componentId: "sc-y4mgkj-0"
@@ -383,7 +382,7 @@ StyledDrawerHeader.defaultProps = {
383
382
  const COMPONENT_ID$2 = 'modals.drawer_modal.body';
384
383
  const StyledDrawerBody = styled(StyledBody).attrs({
385
384
  'data-garden-id': COMPONENT_ID$2,
386
- 'data-garden-version': '9.0.0-next.5'
385
+ 'data-garden-version': '9.0.0-next.7'
387
386
  }).withConfig({
388
387
  displayName: "StyledDrawerBody",
389
388
  componentId: "sc-13qufyn-0"
@@ -395,7 +394,7 @@ StyledDrawerBody.defaultProps = {
395
394
  const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
396
395
  const StyledDrawerFooter = styled.div.attrs({
397
396
  'data-garden-id': COMPONENT_ID$1,
398
- 'data-garden-version': '9.0.0-next.5'
397
+ 'data-garden-version': '9.0.0-next.7'
399
398
  }).withConfig({
400
399
  displayName: "StyledDrawerFooter",
401
400
  componentId: "sc-kc7e6p-0"
@@ -407,7 +406,7 @@ StyledDrawerFooter.defaultProps = {
407
406
  const COMPONENT_ID = 'modals.drawer_modal.footer_item';
408
407
  const StyledDrawerFooterItem = styled(StyledFooterItem).attrs({
409
408
  'data-garden-id': COMPONENT_ID,
410
- 'data-garden-version': '9.0.0-next.5'
409
+ 'data-garden-version': '9.0.0-next.7'
411
410
  }).withConfig({
412
411
  displayName: "StyledDrawerFooterItem",
413
412
  componentId: "sc-m2yul4-0"
@@ -568,10 +567,6 @@ const ModalComponent = forwardRef((_ref, ref) => {
568
567
  focusOnMount,
569
568
  restoreFocus
570
569
  });
571
- useFocusVisible({
572
- scope: modalRef,
573
- relativeDocument: environment
574
- });
575
570
  useEffect(() => {
576
571
  if (!environment) {
577
572
  return undefined;
@@ -997,10 +992,6 @@ const DrawerComponent = forwardRef((_ref, ref) => {
997
992
  const environment = useDocument(theme);
998
993
  const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
999
994
  const [hasHeader, setHasHeader] = useState(false);
1000
- useFocusVisible({
1001
- scope: modalRef,
1002
- relativeDocument: modalRef.current
1003
- });
1004
995
  const {
1005
996
  getTitleProps,
1006
997
  getCloseProps,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-modals",
3
- "version": "9.0.0-next.5",
3
+ "version": "9.0.0-next.7",
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>",
@@ -22,7 +22,6 @@
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
24
  "@floating-ui/react-dom": "^2.0.0",
25
- "@zendeskgarden/container-focusvisible": "^2.0.0",
26
25
  "@zendeskgarden/container-modal": "^1.0.0",
27
26
  "@zendeskgarden/container-utilities": "^2.0.0",
28
27
  "dom-helpers": "^5.1.0",
@@ -31,14 +30,14 @@
31
30
  "react-transition-group": "^4.4.2"
32
31
  },
33
32
  "peerDependencies": {
34
- "@zendeskgarden/react-theming": "^8.67.0",
33
+ "@zendeskgarden/react-theming": "^9.0.0",
35
34
  "react": ">=16.8.0",
36
35
  "react-dom": ">=16.8.0",
37
36
  "styled-components": "^5.3.1"
38
37
  },
39
38
  "devDependencies": {
40
39
  "@types/react-transition-group": "4.4.10",
41
- "@zendeskgarden/react-theming": "^9.0.0-next.5",
40
+ "@zendeskgarden/react-theming": "^9.0.0-next.7",
42
41
  "@zendeskgarden/svg-icons": "7.0.0"
43
42
  },
44
43
  "keywords": [
@@ -51,5 +50,5 @@
51
50
  "access": "public"
52
51
  },
53
52
  "zendeskgarden:src": "src/index.ts",
54
- "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
53
+ "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
55
54
  }