@zendeskgarden/react-modals 9.0.0-next.9 → 9.1.0

package/dist/esm/styled/StyledTooltipDialog.js

@@ -0,0 +1,39 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { arrowStyles, getArrowPosition, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { StyledTooltipDialogClose } from './StyledTooltipDialogClose.js';
+
+const COMPONENT_ID = 'modals.tooltip_dialog';
+const sizeStyles = props => `
+  padding: ${props.theme.space.base * 5}px;
+  width: 400px;
+  
+  &:has(${StyledTooltipDialogClose}) > :first-child {
+    padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
+  }
+`;
+const StyledTooltipDialog = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.1.0',
+  className: props.isAnimated && 'is-animated'
+})).withConfig({
+  displayName: "StyledTooltipDialog",
+  componentId: "sc-iv3db-0"
+})(["", ";", " ", ";"], props => {
+  const computedArrowStyles = arrowStyles(getArrowPosition(props.theme, props.placement), {
+    size: `${props.theme.space.base * 2}px`,
+    inset: '1px',
+    animationModifier: '.is-animated'
+  });
+  if (props.isAnimated) {
+    return props.hasArrow && props.transitionState === 'entered' && computedArrowStyles;
+  }
+  return props.hasArrow && computedArrowStyles;
+}, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+
+export { StyledTooltipDialog };

package/dist/esm/styled/{StyledTooltipModalBackdrop.js → StyledTooltipDialogBackdrop.js}

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'modals.tooltip_modal.backdrop';
-const StyledTooltipModalBackdrop = styled.div.attrs({
+const COMPONENT_ID = 'modals.tooltip_dialog.backdrop';
+const StyledTooltipDialogBackdrop = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
-  displayName: "StyledTooltipModalBackdrop",
-  componentId: "sc-1yaomgq-0"
+  displayName: "StyledTooltipDialogBackdrop",
+  componentId: "sc-zrk625-0"
 })(["position:fixed;inset:0;z-index:400;overflow:hidden;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-tooltip-modal-transition-exit-active{pointer-events:none;}&.garden-tooltip-modal-transition-exit-active div{transition:opacity 200ms;opacity:0;}", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledTooltipModalBackdrop.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
-export { StyledTooltipModalBackdrop };
+export { StyledTooltipDialogBackdrop };

package/dist/esm/styled/StyledTooltipDialogBody.js

@@ -0,0 +1,27 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.tooltip_dialog.body';
+const StyledTooltipDialogBody = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.1.0'
+}).withConfig({
+  displayName: "StyledTooltipDialogBody",
+  componentId: "sc-132lcoq-0"
+})(["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 => {
+  let {
+    theme
+  } = _ref;
+  return getColor({
+    variable: 'foreground.default',
+    theme
+  });
+}, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
+
+export { StyledTooltipDialogBody };

package/dist/esm/styled/StyledTooltipDialogClose.js

@@ -0,0 +1,20 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { StyledClose } from './StyledClose.js';
+
+const COMPONENT_ID = 'modals.tooltip_dialog.close';
+const StyledTooltipDialogClose = styled(StyledClose).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.1.0'
+}).withConfig({
+  displayName: "StyledTooltipDialogClose",
+  componentId: "sc-18xlgfi-0"
+})(["top:", "px;", ":", ";", ";"], props => props.theme.space.base * 3.5, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * 3}px`, props => retrieveComponentStyles(COMPONENT_ID, props));
+
+export { StyledTooltipDialogClose };

package/dist/esm/styled/{StyledTooltipModalFooter.js → StyledTooltipDialogFooter.js}

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'modals.tooltip_modal.footer';
-const StyledTooltipModalFooter = styled.div.attrs({
+const COMPONENT_ID = 'modals.tooltip_dialog.footer';
+const StyledTooltipDialogFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
-  displayName: "StyledTooltipModalFooter",
-  componentId: "sc-fm36a9-0"
+  displayName: "StyledTooltipDialogFooter",
+  componentId: "sc-kjomsm-0"
 })(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:", "px;", ";"], p => p.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledTooltipModalFooter.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
-export { StyledTooltipModalFooter };
+export { StyledTooltipDialogFooter };

package/dist/esm/styled/StyledTooltipDialogFooterItem.js

@@ -0,0 +1,20 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { StyledFooterItem } from './StyledFooterItem.js';
+
+const COMPONENT_ID = 'modals.tooltip_dialog.footer_item';
+const StyledTooltipDialogFooterItem = styled(StyledFooterItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.1.0'
+}).withConfig({
+  displayName: "StyledTooltipDialogFooterItem",
+  componentId: "sc-u2rmo8-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+
+export { StyledTooltipDialogFooterItem };

package/dist/esm/styled/StyledTooltipDialogTitle.js

@@ -0,0 +1,32 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getColor, retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.tooltip_dialog.title';
+const sizeStyles = props => `
+  /* stylelint-disable-next-line property-no-unknown */
+  line-height: ${getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
+  font-size: ${props.theme.fontSizes.md};
+`;
+const StyledTooltipDialogTitle = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.1.0'
+}).withConfig({
+  displayName: "StyledTooltipDialogTitle",
+  componentId: "sc-1rceixg-0"
+})(["margin:0;color:", ";font-weight:", ";", ";", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return getColor({
+    variable: 'foreground.default',
+    theme
+  });
+}, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+
+export { StyledTooltipDialogTitle };

package/dist/esm/styled/StyledTooltipWrapper.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { menuStyles, getMenuPosition, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { menuStyles, getMenuPosition } from '@zendeskgarden/react-theming';
 
 const StyledTooltipWrapper = styled.div.attrs(props => ({
   className: props.isAnimated && 'is-animated'
@@ -18,8 +18,5 @@ const StyledTooltipWrapper = styled.div.attrs(props => ({
   zIndex: props.zIndex,
   animationModifier: '.is-animated'
 }));
-StyledTooltipWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledTooltipWrapper };

package/dist/esm/utils/useTooltipDialogContext.js

@@ -0,0 +1,18 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const TooltipDialogContext = createContext(undefined);
+const useTooltipDialogContext = () => {
+  const context = useContext(TooltipDialogContext);
+  if (context === undefined) {
+    throw new Error('Element must be used within a TooltipDialog component.');
+  }
+  return context;
+};
+
+export { TooltipDialogContext, useTooltipDialogContext };