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

package/dist/index.esm.js

@@ -1,361 +0,0 @@
-/**
- * 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, forwardRef } from 'react';
-import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
-import styled, { css, ThemeContext } from 'styled-components';
-import { mergeRefs } from 'react-merge-refs';
-import { useTooltip } from '@zendeskgarden/container-tooltip';
-import { getControlledValue, composeEventHandlers } from '@zendeskgarden/container-utilities';
-import { Manager, Reference, Popper } from 'react-popper';
-import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, arrowStyles, getColor } from '@zendeskgarden/react-theming';
-
-function getPopperPlacement(gardenPlacement) {
-  const gardenToPopperMapping = {
-    auto: 'auto',
-    top: 'top',
-    'top-start': 'top-start',
-    'top-end': 'top-end',
-    bottom: 'bottom',
-    'bottom-start': 'bottom-start',
-    'bottom-end': 'bottom-end',
-    end: 'right',
-    'end-top': 'right-start',
-    'end-bottom': 'right-end',
-    start: 'left',
-    'start-top': 'left-start',
-    'start-bottom': 'left-end'
-  };
-  return gardenToPopperMapping[gardenPlacement];
-}
-function getRtlPopperPlacement(gardenPlacement) {
-  const rtlPlacementMappings = {
-    left: 'right',
-    'left-start': 'right-start',
-    'left-end': 'right-end',
-    'top-start': 'top-end',
-    'top-end': 'top-start',
-    right: 'left',
-    'right-start': 'left-start',
-    'right-end': 'left-end',
-    'bottom-start': 'bottom-end',
-    'bottom-end': 'bottom-start'
-  };
-  const popperPlacement = getPopperPlacement(gardenPlacement);
-  return rtlPlacementMappings[popperPlacement] || popperPlacement;
-}
-function getArrowPosition(popperPlacement) {
-  const arrowPositionMappings = {
-    top: 'bottom',
-    'top-start': 'bottom-left',
-    'top-end': 'bottom-right',
-    right: 'left',
-    'right-start': 'left-top',
-    'right-end': 'left-bottom',
-    bottom: 'top',
-    'bottom-start': 'top-left',
-    'bottom-end': 'top-right',
-    left: 'right',
-    'left-start': 'right-top',
-    'left-end': 'right-bottom'
-  };
-  return arrowPositionMappings[popperPlacement] || 'top';
-}
-
-const COMPONENT_ID$2 = 'tooltip.paragraph';
-const StyledParagraph = styled.p.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.1'
-}).withConfig({
-  displayName: "StyledParagraph",
-  componentId: "sc-wuqkfc-0"
-})(["margin:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledParagraph.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'tooltip.title';
-const StyledTitle = styled.strong.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.1'
-}).withConfig({
-  displayName: "StyledTitle",
-  componentId: "sc-vnjcvz-0"
-})(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledTitle.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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(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`, getColor('chromeHue', 600, theme, 0.15));
-  let backgroundColor = getColor('chromeHue', 700, theme);
-  let color = theme.colors.background;
-  let titleColor;
-  if (type === 'light') {
-    boxShadow = theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColor('chromeHue', 600, theme, 0.15));
-    border = `${theme.borders.sm} ${getColor('neutralHue', 300, theme)}`;
-    backgroundColor = theme.colors.background;
-    color = getColor('neutralHue', 700, theme);
-    titleColor = theme.colors.foreground;
-  }
-  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.1'
-}).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
-};
-
-const StyledTooltipWrapper = styled.div.withConfig({
-  displayName: "StyledTooltipWrapper",
-  componentId: "sc-1b7q9q6-0"
-})(["transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
-StyledTooltipWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
-const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
-const SIZE = ['small', 'medium', 'large', 'extra-large'];
-const TYPE = ['light', 'dark'];
-
-const Tooltip = _ref => {
-  let {
-    id,
-    delayMS,
-    isInitialVisible,
-    content,
-    refKey,
-    placement,
-    eventsEnabled,
-    popperModifiers,
-    children,
-    hasArrow,
-    size,
-    type,
-    appendToNode,
-    zIndex,
-    isVisible: externalIsVisible,
-    ...otherProps
-  } = _ref;
-  const {
-    rtl
-  } = useContext(ThemeContext);
-  const scheduleUpdateRef = useRef();
-  const {
-    isVisible,
-    getTooltipProps,
-    getTriggerProps,
-    openTooltip,
-    closeTooltip
-  } = useTooltip({
-    id,
-    delayMilliseconds: delayMS,
-    isVisible: isInitialVisible
-  });
-  const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
-  useEffect(() => {
-    if (controlledIsVisible && scheduleUpdateRef.current) {
-      scheduleUpdateRef.current();
-    }
-  }, [controlledIsVisible, content]);
-  const popperPlacement = rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
-  const singleChild = React.Children.only(children);
-  const modifiers = {
-    preventOverflow: {
-      boundariesElement: 'window'
-    },
-    ...popperModifiers
-  };
-  return React.createElement(Manager, null, React.createElement(Reference, null, _ref2 => {
-    let {
-      ref
-    } = _ref2;
-    return cloneElement(singleChild, getTriggerProps({
-      ...singleChild.props,
-      [refKey]: mergeRefs([ref, singleChild.ref ? singleChild.ref : null])
-    }));
-  }), React.createElement(Popper, {
-    placement: popperPlacement,
-    eventsEnabled: controlledIsVisible && eventsEnabled,
-    modifiers: modifiers
-  }, _ref3 => {
-    let {
-      ref,
-      style,
-      scheduleUpdate,
-      placement: currentPlacement
-    } = _ref3;
-    scheduleUpdateRef.current = scheduleUpdate;
-    const {
-      onFocus,
-      onBlur,
-      ...otherTooltipProps
-    } = otherProps;
-    let computedSize = size;
-    if (computedSize === undefined) {
-      if (type === 'dark') {
-        computedSize = 'small';
-      } else {
-        computedSize = 'large';
-      }
-    }
-    const tooltipProps = {
-      hasArrow,
-      placement: currentPlacement,
-      size: computedSize,
-      onFocus: composeEventHandlers(onFocus, () => {
-        openTooltip();
-      }),
-      onBlur: composeEventHandlers(onBlur, () => {
-        closeTooltip(0);
-      }),
-      'aria-hidden': !controlledIsVisible,
-      type,
-      ...otherTooltipProps
-    };
-    const tooltip = React.createElement(StyledTooltipWrapper, {
-      ref: controlledIsVisible ? ref : null,
-      style: style,
-      zIndex: zIndex,
-      "aria-hidden": !controlledIsVisible
-    }, React.createElement(StyledTooltip, getTooltipProps(tooltipProps), content));
-    if (appendToNode) {
-      return createPortal(tooltip, appendToNode);
-    }
-    return tooltip;
-  }));
-};
-Tooltip.displayName = 'Tooltip';
-Tooltip.propTypes = {
-  appendToNode: PropTypes.any,
-  hasArrow: PropTypes.bool,
-  delayMS: PropTypes.number,
-  eventsEnabled: PropTypes.bool,
-  id: PropTypes.string,
-  content: PropTypes.node.isRequired,
-  placement: PropTypes.oneOf(PLACEMENT),
-  popperModifiers: PropTypes.any,
-  size: PropTypes.oneOf(SIZE),
-  type: PropTypes.oneOf(TYPE),
-  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  isInitialVisible: PropTypes.bool,
-  refKey: PropTypes.string
-};
-Tooltip.defaultProps = {
-  hasArrow: true,
-  eventsEnabled: true,
-  type: 'dark',
-  placement: 'top',
-  delayMS: 500,
-  refKey: 'ref'
-};
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const Paragraph = forwardRef((props, ref) => React.createElement(StyledParagraph, _extends({
-  ref: ref
-}, props)));
-Paragraph.displayName = 'Paragraph';
-
-const Title = forwardRef((props, ref) => React.createElement(StyledTitle, _extends({
-  ref: ref
-}, props)));
-Title.displayName = 'Title';
-
-export { Paragraph, Title, Tooltip };

package/dist/typings/utils/gardenPlacements.d.ts

@@ -1,22 +0,0 @@
-/**
- * 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 { GardenPlacement, PopperPlacement } from '../types';
-/**
- * Convert Garden RTL aware placement to Popper.JS valid placement
- * @param {String} gardenPlacement
- */
-export declare function getPopperPlacement(gardenPlacement: GardenPlacement): "auto" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
-/**
- * Convert Garden RTL aware placement to RTL equivalent Popper.JS placement
- * @param {String} gardenPlacement
- */
-export declare function getRtlPopperPlacement(gardenPlacement: GardenPlacement): "auto" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
-/**
- * Convert Popper.JS placement to corresponding arrow position
- * @param {String} popperPlacement
- */
-export declare function getArrowPosition(popperPlacement: PopperPlacement): "top" | "bottom" | "right" | "left" | "top-left" | "top-right" | "right-top" | "right-bottom" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom";