@zendeskgarden/react-modals 9.12.3 → 9.12.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 (41) hide show
  1. package/dist/esm/elements/Body.js +3 -3
  2. package/dist/esm/elements/Close.js +4 -4
  3. package/dist/esm/elements/Drawer/Drawer.js +14 -12
  4. package/dist/esm/elements/Drawer/Header.js +4 -5
  5. package/dist/esm/elements/Footer.js +3 -3
  6. package/dist/esm/elements/FooterItem.js +3 -3
  7. package/dist/esm/elements/Header.js +9 -10
  8. package/dist/esm/elements/Modal.js +13 -14
  9. package/dist/esm/elements/TooltipDialog/Body.js +4 -4
  10. package/dist/esm/elements/TooltipDialog/Close.js +5 -5
  11. package/dist/esm/elements/TooltipDialog/Footer.js +4 -4
  12. package/dist/esm/elements/TooltipDialog/FooterItem.js +4 -4
  13. package/dist/esm/elements/TooltipDialog/Title.js +5 -6
  14. package/dist/esm/elements/TooltipDialog/TooltipDialog.js +22 -20
  15. package/dist/esm/node_modules/@babel/runtime/helpers/esm/extends.js +4 -4
  16. package/dist/esm/node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js +3 -3
  17. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js +2 -2
  18. package/dist/esm/node_modules/polished/dist/polished.esm.js +3 -12
  19. package/dist/esm/styled/StyledBackdrop.js +19 -22
  20. package/dist/esm/styled/StyledBody.js +9 -12
  21. package/dist/esm/styled/StyledClose.js +6 -6
  22. package/dist/esm/styled/StyledDrawer.js +6 -7
  23. package/dist/esm/styled/StyledDrawerBody.js +3 -3
  24. package/dist/esm/styled/StyledDrawerClose.js +3 -4
  25. package/dist/esm/styled/StyledDrawerFooter.js +9 -12
  26. package/dist/esm/styled/StyledDrawerFooterItem.js +1 -1
  27. package/dist/esm/styled/StyledDrawerHeader.js +3 -3
  28. package/dist/esm/styled/StyledFooter.js +3 -3
  29. package/dist/esm/styled/StyledFooterItem.js +3 -3
  30. package/dist/esm/styled/StyledHeader.js +8 -9
  31. package/dist/esm/styled/StyledModal.js +9 -10
  32. package/dist/esm/styled/StyledTooltipDialog.js +5 -5
  33. package/dist/esm/styled/StyledTooltipDialogBackdrop.js +3 -3
  34. package/dist/esm/styled/StyledTooltipDialogBody.js +9 -12
  35. package/dist/esm/styled/StyledTooltipDialogClose.js +3 -3
  36. package/dist/esm/styled/StyledTooltipDialogFooter.js +3 -3
  37. package/dist/esm/styled/StyledTooltipDialogFooterItem.js +3 -3
  38. package/dist/esm/styled/StyledTooltipDialogTitle.js +10 -13
  39. package/dist/index.cjs.js +136 -164
  40. package/dist/typings/elements/TooltipDialog/TooltipDialog.d.ts +0 -6
  41. package/package.json +6 -6
@@ -7,21 +7,18 @@
7
7
  import styled from 'styled-components';
8
8
  import { getColor, componentStyles } from '@zendeskgarden/react-theming';
9
9
 
10
- const COMPONENT_ID = 'modals.drawer_modal.footer';
10
+ const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
11
11
  const StyledDrawerFooter = styled.div.attrs({
12
- 'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.12.3'
12
+ 'data-garden-id': COMPONENT_ID$1,
13
+ 'data-garden-version': '9.12.5'
14
14
  }).withConfig({
15
15
  displayName: "StyledDrawerFooter",
16
16
  componentId: "sc-kc7e6p-0"
17
- })(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], _ref => {
18
- let {
19
- theme
20
- } = _ref;
21
- return `${theme.borders.sm} ${getColor({
22
- theme,
23
- variable: 'border.subtle'
24
- })}`;
25
- }, props => props.theme.space.base * 5, componentStyles);
17
+ })(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], ({
18
+ theme
19
+ }) => `${theme.borders.sm} ${getColor({
20
+ theme,
21
+ variable: 'border.subtle'
22
+ })}`, props => props.theme.space.base * 5, componentStyles);
26
23
 
27
24
  export { StyledDrawerFooter };
@@ -11,7 +11,7 @@ import { StyledFooterItem } from './StyledFooterItem.js';
11
11
  const COMPONENT_ID = 'modals.drawer_modal.footer_item';
12
12
  const StyledDrawerFooterItem = styled(StyledFooterItem).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.12.3'
14
+ 'data-garden-version': '9.12.5'
15
15
  }).withConfig({
16
16
  displayName: "StyledDrawerFooterItem",
17
17
  componentId: "sc-m2yul4-0"
@@ -9,10 +9,10 @@ import { componentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledHeader } from './StyledHeader.js';
10
10
  import { BASE_MULTIPLIERS } from './StyledDrawerClose.js';
11
11
 
12
- const COMPONENT_ID = 'modals.drawer_modal.header';
12
+ const COMPONENT_ID$3 = 'modals.drawer_modal.header';
13
13
  const StyledDrawerHeader = styled(StyledHeader).attrs({
14
- 'data-garden-id': COMPONENT_ID,
15
- 'data-garden-version': '9.12.3'
14
+ 'data-garden-id': COMPONENT_ID$3,
15
+ 'data-garden-version': '9.12.5'
16
16
  }).withConfig({
17
17
  displayName: "StyledDrawerHeader",
18
18
  componentId: "sc-y4mgkj-0"
@@ -7,10 +7,10 @@
7
7
  import styled from 'styled-components';
8
8
  import { getColor, componentStyles } from '@zendeskgarden/react-theming';
9
9
 
10
- const COMPONENT_ID = 'modals.footer';
10
+ const COMPONENT_ID$g = 'modals.footer';
11
11
  const StyledFooter = styled.div.attrs({
12
- 'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.12.3'
12
+ 'data-garden-id': COMPONENT_ID$g,
13
+ 'data-garden-version': '9.12.5'
14
14
  }).withConfig({
15
15
  displayName: "StyledFooter",
16
16
  componentId: "sc-d8pfdu-0"
@@ -7,10 +7,10 @@
7
7
  import styled from 'styled-components';
8
8
  import { componentStyles } from '@zendeskgarden/react-theming';
9
9
 
10
- const COMPONENT_ID = 'modals.footer_item';
10
+ const COMPONENT_ID$f = 'modals.footer_item';
11
11
  const StyledFooterItem = styled.span.attrs({
12
- 'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.12.3'
12
+ 'data-garden-id': COMPONENT_ID$f,
13
+ 'data-garden-version': '9.12.5'
14
14
  }).withConfig({
15
15
  displayName: "StyledFooterItem",
16
16
  componentId: "sc-1mb76hl-0"
@@ -8,12 +8,11 @@ import styled, { css } from 'styled-components';
8
8
  import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
9
9
  import { BASE_MULTIPLIERS } from './StyledClose.js';
10
10
 
11
- const COMPONENT_ID = 'modals.header';
12
- const colorStyles = _ref => {
13
- let {
14
- $isDanger,
15
- theme
16
- } = _ref;
11
+ const COMPONENT_ID$e = 'modals.header';
12
+ const colorStyles$2 = ({
13
+ $isDanger,
14
+ theme
15
+ }) => {
17
16
  const bottomBorderColor = getColor({
18
17
  theme,
19
18
  variable: 'border.subtle'
@@ -25,11 +24,11 @@ const colorStyles = _ref => {
25
24
  return css(["border-bottom-color:", ";color:", ";"], bottomBorderColor, color);
26
25
  };
27
26
  const StyledHeader = styled.div.attrs({
28
- 'data-garden-id': COMPONENT_ID,
29
- 'data-garden-version': '9.12.3'
27
+ 'data-garden-id': COMPONENT_ID$e,
28
+ 'data-garden-version': '9.12.5'
30
29
  }).withConfig({
31
30
  displayName: "StyledHeader",
32
31
  componentId: "sc-1787r9v-0"
33
- })(["display:block;position:", ";margin:0;border-bottom:", ";padding:", ";", " line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.$isDanger && 'relative', props => props.theme.borders.sm, 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.size + BASE_MULTIPLIERS.side + 2)}px;`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles, componentStyles);
32
+ })(["display:block;position:", ";margin:0;border-bottom:", ";padding:", ";", " line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.$isDanger && 'relative', props => props.theme.borders.sm, 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.size + BASE_MULTIPLIERS.side + 2)}px;`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$2, componentStyles);
34
33
 
35
34
  export { StyledHeader };
@@ -6,9 +6,9 @@
6
6
  */
7
7
  import PropTypes from 'prop-types';
8
8
  import styled, { keyframes, css } from 'styled-components';
9
- import { componentStyles, getColor, mediaQuery } from '@zendeskgarden/react-theming';
9
+ import { componentStyles, mediaQuery, getColor } from '@zendeskgarden/react-theming';
10
10
 
11
- const COMPONENT_ID = 'modals.modal';
11
+ const COMPONENT_ID$d = 'modals.modal';
12
12
  const animationName = keyframes(["0%{transform:scale(0);opacity:0;}50%{transform:scale(1.05);}100%{opacity:1;}"]);
13
13
  const animationStyles = props => {
14
14
  if (props.$isAnimated) {
@@ -16,10 +16,9 @@ const animationStyles = props => {
16
16
  }
17
17
  return '';
18
18
  };
19
- const colorStyles = _ref => {
20
- let {
21
- theme
22
- } = _ref;
19
+ const colorStyles$1 = ({
20
+ theme
21
+ }) => {
23
22
  const offsetY = `${theme.space.base * 5}px`;
24
23
  const blurRadius = `${theme.space.base * 7}px`;
25
24
  const shadowColor = getColor({
@@ -37,16 +36,16 @@ const colorStyles = _ref => {
37
36
  });
38
37
  return css(["border-color:", ";box-shadow:", ";background-color:", ";"], borderColor, shadow, backgroundColor);
39
38
  };
40
- const sizeStyles = props => {
39
+ const sizeStyles$2 = props => {
41
40
  return css(["", "{width:", ";}"], mediaQuery('up', props.$isLarge ? 'md' : 'sm', props.theme), props.$isLarge ? props.theme.breakpoints.md : props.theme.breakpoints.sm);
42
41
  };
43
42
  const StyledModal = styled.div.attrs({
44
- 'data-garden-id': COMPONENT_ID,
45
- 'data-garden-version': '9.12.3'
43
+ 'data-garden-id': COMPONENT_ID$d,
44
+ 'data-garden-version': '9.12.5'
46
45
  }).withConfig({
47
46
  displayName: "StyledModal",
48
47
  componentId: "sc-1pe1axu-0"
49
- })(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border:", ";border-radius:", ";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:calc(100vh - ", "px);}@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.borders.sm, props => props.theme.borderRadii.md, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles, colorStyles, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.theme.space.base * 12, props => props.$isCentered && '50%', props => props.$isCentered && '50%', props => props.$isCentered && 'translate(50%, 50%)', componentStyles);
48
+ })(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border:", ";border-radius:", ";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:calc(100vh - ", "px);}@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.borders.sm, props => props.theme.borderRadii.md, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$2, colorStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.theme.space.base * 12, props => props.$isCentered && '50%', props => props.$isCentered && '50%', props => props.$isCentered && 'translate(50%, 50%)', componentStyles);
50
49
  StyledModal.propTypes = {
51
50
  $isLarge: PropTypes.bool,
52
51
  $isAnimated: PropTypes.bool
@@ -8,8 +8,8 @@ import styled from 'styled-components';
8
8
  import { arrowStyles, getArrowPosition, componentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledTooltipDialogClose } from './StyledTooltipDialogClose.js';
10
10
 
11
- const COMPONENT_ID = 'modals.tooltip_dialog';
12
- const sizeStyles = props => `
11
+ const COMPONENT_ID$a = 'modals.tooltip_dialog';
12
+ const sizeStyles$1 = props => `
13
13
  padding: ${props.theme.space.base * 5}px;
14
14
  width: 400px;
15
15
 
@@ -18,8 +18,8 @@ const sizeStyles = props => `
18
18
  }
19
19
  `;
20
20
  const StyledTooltipDialog = styled.div.attrs(props => ({
21
- 'data-garden-id': COMPONENT_ID,
22
- 'data-garden-version': '9.12.3',
21
+ 'data-garden-id': COMPONENT_ID$a,
22
+ 'data-garden-version': '9.12.5',
23
23
  className: props.$isAnimated ? 'is-animated' : undefined
24
24
  })).withConfig({
25
25
  displayName: "StyledTooltipDialog",
@@ -34,6 +34,6 @@ const StyledTooltipDialog = styled.div.attrs(props => ({
34
34
  return props.$hasArrow && props.$transitionState === 'entered' && computedArrowStyles;
35
35
  }
36
36
  return props.$hasArrow && computedArrowStyles;
37
- }, sizeStyles, componentStyles);
37
+ }, sizeStyles$1, componentStyles);
38
38
 
39
39
  export { StyledTooltipDialog };
@@ -8,10 +8,10 @@ import styled from 'styled-components';
8
8
  import { hideVisually } from '../node_modules/polished/dist/polished.esm.js';
9
9
  import { componentStyles } from '@zendeskgarden/react-theming';
10
10
 
11
- const COMPONENT_ID = 'modals.tooltip_dialog.backdrop';
11
+ const COMPONENT_ID$c = 'modals.tooltip_dialog.backdrop';
12
12
  const StyledTooltipDialogBackdrop = styled.div.attrs({
13
- 'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.12.3'
13
+ 'data-garden-id': COMPONENT_ID$c,
14
+ 'data-garden-version': '9.12.5'
15
15
  }).withConfig({
16
16
  displayName: "StyledTooltipDialogBackdrop",
17
17
  componentId: "sc-zrk625-0"
@@ -7,21 +7,18 @@
7
7
  import styled from 'styled-components';
8
8
  import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-theming';
9
9
 
10
- const COMPONENT_ID = 'modals.tooltip_dialog.body';
10
+ const COMPONENT_ID$8 = 'modals.tooltip_dialog.body';
11
11
  const StyledTooltipDialogBody = styled.div.attrs({
12
- 'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.12.3'
12
+ 'data-garden-id': COMPONENT_ID$8,
13
+ 'data-garden-version': '9.12.5'
14
14
  }).withConfig({
15
15
  displayName: "StyledTooltipDialogBody",
16
16
  componentId: "sc-132lcoq-0"
17
- })(["display:block;margin:0;padding-top:", "px;line-height:", ";color-scheme:only ", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, _ref => {
18
- let {
19
- theme
20
- } = _ref;
21
- return getColor({
22
- variable: 'foreground.default',
23
- theme
24
- });
25
- }, props => props.theme.fontSizes.md, componentStyles);
17
+ })(["display:block;margin:0;padding-top:", "px;line-height:", ";color-scheme:only ", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, ({
18
+ theme
19
+ }) => getColor({
20
+ variable: 'foreground.default',
21
+ theme
22
+ }), props => props.theme.fontSizes.md, componentStyles);
26
23
 
27
24
  export { StyledTooltipDialogBody };
@@ -8,10 +8,10 @@ import styled from 'styled-components';
8
8
  import { componentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledClose } from './StyledClose.js';
10
10
 
11
- const COMPONENT_ID = 'modals.tooltip_dialog.close';
11
+ const COMPONENT_ID$b = 'modals.tooltip_dialog.close';
12
12
  const StyledTooltipDialogClose = styled(StyledClose).attrs({
13
- 'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.12.3'
13
+ 'data-garden-id': COMPONENT_ID$b,
14
+ 'data-garden-version': '9.12.5'
15
15
  }).withConfig({
16
16
  displayName: "StyledTooltipDialogClose",
17
17
  componentId: "sc-18xlgfi-0"
@@ -7,10 +7,10 @@
7
7
  import styled from 'styled-components';
8
8
  import { componentStyles } from '@zendeskgarden/react-theming';
9
9
 
10
- const COMPONENT_ID = 'modals.tooltip_dialog.footer';
10
+ const COMPONENT_ID$7 = 'modals.tooltip_dialog.footer';
11
11
  const StyledTooltipDialogFooter = styled.div.attrs({
12
- 'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.12.3'
12
+ 'data-garden-id': COMPONENT_ID$7,
13
+ 'data-garden-version': '9.12.5'
14
14
  }).withConfig({
15
15
  displayName: "StyledTooltipDialogFooter",
16
16
  componentId: "sc-kjomsm-0"
@@ -8,10 +8,10 @@ import styled from 'styled-components';
8
8
  import { componentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledFooterItem } from './StyledFooterItem.js';
10
10
 
11
- const COMPONENT_ID = 'modals.tooltip_dialog.footer_item';
11
+ const COMPONENT_ID$6 = 'modals.tooltip_dialog.footer_item';
12
12
  const StyledTooltipDialogFooterItem = styled(StyledFooterItem).attrs({
13
- 'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.12.3'
13
+ 'data-garden-id': COMPONENT_ID$6,
14
+ 'data-garden-version': '9.12.5'
15
15
  }).withConfig({
16
16
  displayName: "StyledTooltipDialogFooterItem",
17
17
  componentId: "sc-u2rmo8-0"
@@ -5,28 +5,25 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { getColor, componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
8
+ import { getColor, getLineHeight, componentStyles } from '@zendeskgarden/react-theming';
9
9
 
10
- const COMPONENT_ID = 'modals.tooltip_dialog.title';
10
+ const COMPONENT_ID$9 = 'modals.tooltip_dialog.title';
11
11
  const sizeStyles = props => `
12
12
  /* stylelint-disable-next-line property-no-unknown */
13
13
  line-height: ${getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
14
14
  font-size: ${props.theme.fontSizes.md};
15
15
  `;
16
16
  const StyledTooltipDialogTitle = styled.div.attrs({
17
- 'data-garden-id': COMPONENT_ID,
18
- 'data-garden-version': '9.12.3'
17
+ 'data-garden-id': COMPONENT_ID$9,
18
+ 'data-garden-version': '9.12.5'
19
19
  }).withConfig({
20
20
  displayName: "StyledTooltipDialogTitle",
21
21
  componentId: "sc-1rceixg-0"
22
- })(["margin:0;color:", ";font-weight:", ";", ";", ";"], _ref => {
23
- let {
24
- theme
25
- } = _ref;
26
- return getColor({
27
- variable: 'foreground.default',
28
- theme
29
- });
30
- }, props => props.theme.fontWeights.semibold, props => sizeStyles(props), componentStyles);
22
+ })(["margin:0;color:", ";font-weight:", ";", ";", ";"], ({
23
+ theme
24
+ }) => getColor({
25
+ variable: 'foreground.default',
26
+ theme
27
+ }), props => props.theme.fontWeights.semibold, props => sizeStyles(props), componentStyles);
31
28
 
32
29
  export { StyledTooltipDialogTitle };