@zendeskgarden/react-tooltips 9.0.0-next.1 → 9.0.0-next.11

package/dist/esm/elements/Paragraph.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 React, { forwardRef } from 'react';
+import { StyledParagraph } from '../styled/StyledParagraph.js';
+import '../styled/StyledTitle.js';
+import '../styled/StyledTooltip.js';
+import '../styled/StyledTooltipWrapper.js';
+
+const Paragraph = forwardRef((props, ref) => React.createElement(StyledParagraph, Object.assign({
+  ref: ref
+}, props)));
+Paragraph.displayName = 'Paragraph';
+
+export { Paragraph };

package/dist/esm/elements/Title.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 React, { forwardRef } from 'react';
+import '../styled/StyledParagraph.js';
+import { StyledTitle } from '../styled/StyledTitle.js';
+import '../styled/StyledTooltip.js';
+import '../styled/StyledTooltipWrapper.js';
+
+const Title = forwardRef((props, ref) => React.createElement(StyledTitle, Object.assign({
+  ref: ref
+}, props)));
+Title.displayName = 'Title';
+
+export { Title };

package/dist/esm/elements/Tooltip.js

@@ -0,0 +1,137 @@
+/**
+* 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 React, { useContext, useRef, useEffect, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import { mergeRefs } from 'react-merge-refs';
+import { useTooltip } from '@zendeskgarden/container-tooltip';
+import { getControlledValue, composeEventHandlers } from '@zendeskgarden/container-utilities';
+import '../styled/StyledParagraph.js';
+import '../styled/StyledTitle.js';
+import { StyledTooltip } from '../styled/StyledTooltip.js';
+import { StyledTooltipWrapper } from '../styled/StyledTooltipWrapper.js';
+import { PLACEMENT, SIZE, TYPE } from '../types/index.js';
+import { useFloating, platform, autoPlacement, autoUpdate } from '@floating-ui/react-dom';
+import { DEFAULT_THEME, getFloatingPlacements } from '@zendeskgarden/react-theming';
+import { toSize } from './utils.js';
+import { Paragraph } from './Paragraph.js';
+import { Title } from './Title.js';
+
+const PLACEMENT_DEFAULT = 'top';
+const TooltipComponent = _ref => {
+  let {
+    id,
+    delayMS,
+    isInitialVisible,
+    content,
+    refKey,
+    placement: _placement,
+    children,
+    hasArrow,
+    size,
+    type,
+    appendToNode,
+    zIndex,
+    isVisible: externalIsVisible,
+    onFocus,
+    onBlur,
+    ...props
+  } = _ref;
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const triggerRef = useRef(null);
+  const floatingRef = useRef(null);
+  const {
+    isVisible,
+    getTooltipProps,
+    getTriggerProps,
+    openTooltip,
+    closeTooltip
+  } = useTooltip({
+    id,
+    delayMilliseconds: delayMS,
+    isVisible: isInitialVisible
+  });
+  const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
+  const [floatingPlacement] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
+  const {
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
+    }
+  } = useFloating({
+    platform: {
+      ...platform,
+      isRTL: () => theme.rtl
+    },
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
+    },
+    placement: floatingPlacement,
+    middleware: _placement === 'auto' ? [autoPlacement()] : undefined
+  });
+  useEffect(() => {
+    let cleanup;
+    if (controlledIsVisible && refs.reference.current && refs.floating.current) {
+      cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
+    }
+    return () => cleanup && cleanup();
+  }, [controlledIsVisible, refs.reference, refs.floating, update]);
+  const Child = React.Children.only(children);
+  const Node = React.createElement(StyledTooltipWrapper, {
+    ref: floatingRef,
+    style: {
+      transform
+    },
+    zIndex: zIndex,
+    "aria-hidden": !controlledIsVisible
+  }, React.createElement(StyledTooltip, getTooltipProps({
+    hasArrow,
+    placement,
+    size: toSize(size, type),
+    onFocus: composeEventHandlers(onFocus, openTooltip),
+    onBlur: composeEventHandlers(onBlur, () => closeTooltip(0)),
+    'aria-hidden': !controlledIsVisible,
+    type,
+    ...props
+  }), content));
+  return React.createElement(React.Fragment, null, cloneElement(Child, getTriggerProps({
+    ...Child.props,
+    [refKey]: mergeRefs([triggerRef, Child.ref ? Child.ref : null])
+  })), appendToNode ? createPortal(Node, appendToNode) : Node);
+};
+TooltipComponent.displayName = 'Tooltip';
+TooltipComponent.propTypes = {
+  appendToNode: PropTypes.any,
+  hasArrow: PropTypes.bool,
+  delayMS: PropTypes.number,
+  id: PropTypes.string,
+  content: PropTypes.node.isRequired,
+  placement: PropTypes.oneOf(PLACEMENT),
+  size: PropTypes.oneOf(SIZE),
+  type: PropTypes.oneOf(TYPE),
+  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  isInitialVisible: PropTypes.bool,
+  refKey: PropTypes.string
+};
+TooltipComponent.defaultProps = {
+  hasArrow: true,
+  type: 'dark',
+  placement: PLACEMENT_DEFAULT,
+  delayMS: 500,
+  refKey: 'ref'
+};
+const Tooltip = TooltipComponent;
+Tooltip.Paragraph = Paragraph;
+Tooltip.Title = Title;
+
+export { PLACEMENT_DEFAULT, Tooltip, TooltipComponent };

package/dist/esm/elements/utils.js

@@ -0,0 +1,15 @@
+/**
+* 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.
+*/
+const toSize = (size, type) => {
+  let retVal = size;
+  if (retVal === undefined) {
+    retVal = type === 'dark' ? 'small' : 'large';
+  }
+  return retVal;
+};
+
+export { toSize };

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+/**
+* 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.
+*/
+export { Paragraph } from './elements/Paragraph.js';
+export { Title } from './elements/Title.js';
+export { Tooltip } from './elements/Tooltip.js';

package/dist/esm/styled/StyledParagraph.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 = 'tooltip.paragraph';
+const StyledParagraph = styled.p.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).withConfig({
+  displayName: "StyledParagraph",
+  componentId: "sc-wuqkfc-0"
+})(["margin:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledParagraph.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledParagraph };

package/dist/esm/styled/StyledTitle.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 = 'tooltip.title';
+const StyledTitle = styled.strong.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).withConfig({
+  displayName: "StyledTitle",
+  componentId: "sc-vnjcvz-0"
+})(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTitle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTitle };

package/dist/esm/styled/StyledTooltip.js

@@ -0,0 +1,109 @@
+/**
+* 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, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, arrowStyles, getArrowPosition, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledParagraph } from './StyledParagraph.js';
+import { StyledTitle } from './StyledTitle.js';
+
+const COMPONENT_ID = 'tooltip.tooltip';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    size,
+    type,
+    placement,
+    hasArrow
+  } = _ref;
+  let margin = `${theme.space.base * 1.5}px`;
+  let borderRadius = theme.borderRadii.sm;
+  let padding = '0 1em';
+  let maxWidth;
+  let overflowWrap;
+  let whiteSpace = 'nowrap';
+  let lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.sm);
+  let fontSize = theme.fontSizes.sm;
+  let titleDisplay;
+  let paragraphMarginTop;
+  let wordWrap;
+  if (size !== 'small') {
+    borderRadius = theme.borderRadii.md;
+    overflowWrap = 'break-word';
+    whiteSpace = 'normal';
+    wordWrap = 'break-word';
+  }
+  if (size === 'extra-large') {
+    padding = `${theme.space.base * 10}px`;
+    maxWidth = `460px`;
+    lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
+    paragraphMarginTop = `${theme.space.base * 2.5}px`;
+  } else if (size === 'large') {
+    padding = `${theme.space.base * 5}px`;
+    maxWidth = `270px`;
+    lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
+    paragraphMarginTop = `${theme.space.base * 2}px`;
+  } else if (size === 'medium') {
+    padding = '1em';
+    maxWidth = `140px`;
+    lineHeight = getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
+  }
+  if (size === 'extra-large' || size === 'large') {
+    fontSize = theme.fontSizes.md;
+    titleDisplay = 'block';
+  }
+  let arrowSize;
+  let arrowInset;
+  if (hasArrow) {
+    if (size === 'small' || size === 'medium') {
+      arrowSize = margin;
+      arrowInset = type === 'dark' ? '1px' : '0';
+    } else {
+      arrowInset = type === 'dark' ? '2px' : '1px';
+      if (size === 'large') {
+        margin = `${theme.space.base * 2}px`;
+        arrowSize = margin;
+      } else if (size === 'extra-large') {
+        margin = `${theme.space.base * 3}px`;
+        arrowSize = `${theme.space.base * 2.5}px`;
+      }
+    }
+  }
+  return css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && arrowStyles(getArrowPosition(theme, placement), {
+    size: arrowSize,
+    inset: arrowInset
+  }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
+};
+const colorStyles = _ref2 => {
+  let {
+    theme,
+    type
+  } = _ref2;
+  let border;
+  let boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColorV8('chromeHue', 600, theme, 0.15));
+  let backgroundColor = getColorV8('chromeHue', 700, theme);
+  let color = getColorV8('background', 600 , theme);
+  let titleColor;
+  if (type === 'light') {
+    boxShadow = theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColorV8('chromeHue', 600, theme, 0.15));
+    border = `${theme.borders.sm} ${getColorV8('neutralHue', 300, theme)}`;
+    backgroundColor = getColorV8('background', 600 , theme);
+    color = getColorV8('neutralHue', 700, theme);
+    titleColor = getColorV8('foreground', 600 , theme);
+  }
+  return css(["border:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle, titleColor);
+};
+const StyledTooltip = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).withConfig({
+  displayName: "StyledTooltip",
+  componentId: "sc-gzzjq4-0"
+})(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltip.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltip };

package/dist/esm/styled/StyledTooltipWrapper.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 styled from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const StyledTooltipWrapper = styled.div.withConfig({
+  displayName: "StyledTooltipWrapper",
+  componentId: "sc-1b7q9q6-0"
+})(["position:absolute;top:0;left:0;transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
+StyledTooltipWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipWrapper };

package/dist/esm/types/index.js

@@ -0,0 +1,13 @@
+/**
+* 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];
+const SIZE = ['small', 'medium', 'large', 'extra-large'];
+const TYPE = ['light', 'dark'];
+
+export { PLACEMENT, SIZE, TYPE };