@zendeskgarden/react-modals 9.0.0-next.2 → 9.0.0-next.21

package/dist/esm/styled/StyledModal.js

@@ -0,0 +1,58 @@
+/**
+* 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 PropTypes from 'prop-types';
+import styled, { keyframes, css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, mediaQuery } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.modal';
+const animationName = keyframes(["0%{transform:scale(0);opacity:0;}50%{transform:scale(1.05);}100%{opacity:1;}"]);
+const animationStyles = props => {
+  if (props.isAnimated) {
+    return css(["animation:", " 0.3s ease-in;"], animationName);
+  }
+  return '';
+};
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const offsetY = `${theme.space.base * 5}px`;
+  const blurRadius = `${theme.space.base * 7}px`;
+  const shadowColor = getColor({
+    variable: 'shadow.large',
+    theme
+  });
+  const shadow = theme.shadows.lg(offsetY, blurRadius, shadowColor);
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  return css(["border-color:", ";box-shadow:", ";background-color:", ";"], borderColor, shadow, backgroundColor);
+};
+const sizeStyles = props => {
+  return css(["", "{width:", ";}"], mediaQuery('up', props.isLarge ? 'md' : 'sm', props.theme), props.isLarge ? props.theme.breakpoints.md : props.theme.breakpoints.sm);
+};
+const StyledModal = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledModal",
+  componentId: "sc-1pe1axu-0"
+})(["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: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.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.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledModal.propTypes = {
+  isLarge: PropTypes.bool,
+  isAnimated: PropTypes.bool
+};
+StyledModal.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledModal };

package/dist/esm/styled/StyledTooltipModal.js

@@ -0,0 +1,33 @@
+/**
+* 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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.tooltip_modal';
+const StyledTooltipModal = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21',
+  className: props.isAnimated && 'is-animated'
+})).withConfig({
+  displayName: "StyledTooltipModal",
+  componentId: "sc-42ubfr-0"
+})(["padding:", "px;width:400px;", ";", ";"], props => props.theme.space.base * 5, 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;
+}, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipModal.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModal };

package/dist/esm/styled/StyledTooltipModalBackdrop.js

@@ -0,0 +1,22 @@
+/**
+* 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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.tooltip_modal.backdrop';
+const StyledTooltipModalBackdrop = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTooltipModalBackdrop",
+  componentId: "sc-1yaomgq-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 };

package/dist/esm/styled/StyledTooltipModalBody.js

@@ -0,0 +1,30 @@
+/**
+* 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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.tooltip_modal.body';
+const StyledTooltipModalBody = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTooltipModalBody",
+  componentId: "sc-195dkzj-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));
+StyledTooltipModalBody.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModalBody };

package/dist/esm/styled/StyledTooltipModalClose.js

@@ -0,0 +1,23 @@
+/**
+* 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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledClose } from './StyledClose.js';
+
+const COMPONENT_ID = 'modals.tooltip_modal.close';
+const StyledTooltipModalClose = styled(StyledClose).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTooltipModalClose",
+  componentId: "sc-1h2ke3q-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));
+StyledTooltipModalClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModalClose };

package/dist/esm/styled/StyledTooltipModalFooter.js

@@ -0,0 +1,22 @@
+/**
+* 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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.tooltip_modal.footer';
+const StyledTooltipModalFooter = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTooltipModalFooter",
+  componentId: "sc-fm36a9-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 };

package/dist/esm/styled/StyledTooltipModalFooterItem.js

@@ -0,0 +1,23 @@
+/**
+* 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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledFooterItem } from './StyledFooterItem.js';
+
+const COMPONENT_ID = 'modals.tooltip_modal.footer_item';
+const StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTooltipModalFooterItem",
+  componentId: "sc-1nahj6p-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipModalFooterItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModalFooterItem };

package/dist/esm/styled/StyledTooltipModalTitle.js

@@ -0,0 +1,36 @@
+/**
+* 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, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.tooltip_modal.title';
+const sizeStyles = props => `
+  /* stylelint-disable-next-line property-no-unknown */
+  padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
+  line-height: ${getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
+  font-size: ${props.theme.fontSizes.md};
+`;
+const StyledTooltipModalTitle = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTooltipModalTitle",
+  componentId: "sc-11xjgjs-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));
+StyledTooltipModalTitle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModalTitle };

package/dist/esm/styled/StyledTooltipWrapper.js

@@ -0,0 +1,25 @@
+/**
+* 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 { menuStyles, getMenuPosition, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const StyledTooltipWrapper = styled.div.attrs(props => ({
+  className: props.isAnimated && 'is-animated'
+})).withConfig({
+  displayName: "StyledTooltipWrapper",
+  componentId: "sc-1xk05kf-0"
+})(["top:0;left:0;", ";"], props => menuStyles(getMenuPosition(props.placement), {
+  theme: props.theme,
+  hidden: false,
+  zIndex: props.zIndex,
+  animationModifier: '.is-animated'
+}));
+StyledTooltipWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipWrapper };

package/dist/esm/types/index.js

@@ -0,0 +1,11 @@
+/**
+* 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 { PLACEMENT as PLACEMENT$1 } from '@zendeskgarden/react-theming';
+
+const PLACEMENT = ['auto', ...PLACEMENT$1];
+
+export { PLACEMENT };

package/dist/esm/utils/useModalContext.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 ModalsContext = createContext(undefined);
+const useModalContext = () => {
+  const context = useContext(ModalsContext);
+  if (context === undefined) {
+    throw new Error('useModalContext must be used within a ModalsContext.Provider');
+  }
+  return context;
+};
+
+export { ModalsContext, useModalContext };

package/dist/esm/utils/useTooltipModalContext.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 TooltipModalContext = createContext(undefined);
+const useTooltipModalContext = () => {
+  const context = useContext(TooltipModalContext);
+  if (context === undefined) {
+    throw new Error('Element must be used within a TooltipModal component.');
+  }
+  return context;
+};
+
+export { TooltipModalContext, useTooltipModalContext };