@zendeskgarden/react-tooltips - npm Package Compare versions

Comparing version 8.57.1 to 8.58.0

dist/index.cjs.js

@@ -29,98 +29,4 @@ /**
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-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);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
 function getPopperPlacement(gardenPlacement) {
-  var gardenToPopperMapping = {
+  const gardenToPopperMapping = {
     auto: 'auto',
@@ -143,3 +49,3 @@ top: 'top',
 function getRtlPopperPlacement(gardenPlacement) {
-  var rtlPlacementMappings = {
+  const rtlPlacementMappings = {
     left: 'right',
@@ -156,7 +62,7 @@ 'left-start': 'right-start',
   };
-  var popperPlacement = getPopperPlacement(gardenPlacement);
+  const popperPlacement = getPopperPlacement(gardenPlacement);
   return rtlPlacementMappings[popperPlacement] || popperPlacement;
 }
 function getArrowPosition(popperPlacement) {
-  var arrowPositionMappings = {
+  const arrowPositionMappings = {
     top: 'bottom',
@@ -178,12 +84,10 @@ 'top-start': 'bottom-left',
 
-var COMPONENT_ID$2 = 'tooltip.paragraph';
-var StyledParagraph = styled__default["default"].p.attrs({
+const COMPONENT_ID$2 = 'tooltip.paragraph';
+const StyledParagraph = styled__default["default"].p.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
-})(["margin:0;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["margin:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledParagraph.defaultProps = {
@@ -193,14 +97,10 @@ theme: reactTheming.DEFAULT_THEME
 
-var COMPONENT_ID$1 = 'tooltip.title';
-var StyledTitle = styled__default["default"].strong.attrs({
+const COMPONENT_ID$1 = 'tooltip.title';
+const StyledTitle = styled__default["default"].strong.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
-})(["display:none;margin:0;font-weight:", ";", ";"], function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledTitle.defaultProps = {
@@ -210,20 +110,22 @@ theme: reactTheming.DEFAULT_THEME
 
-var COMPONENT_ID = 'tooltip.tooltip';
-var sizeStyles = function sizeStyles(_ref) {
-  var theme = _ref.theme,
-      size = _ref.size,
-      type = _ref.type,
-      placement = _ref.placement,
-      hasArrow = _ref.hasArrow;
-  var margin = "".concat(theme.space.base * 1.5, "px");
-  var borderRadius = theme.borderRadii.sm;
-  var padding = '0 1em';
-  var maxWidth;
-  var overflowWrap;
-  var whiteSpace = 'nowrap';
-  var lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.sm);
-  var fontSize = theme.fontSizes.sm;
-  var titleDisplay;
-  var paragraphMarginTop;
-  var wordWrap;
+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 = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.sm);
+  let fontSize = theme.fontSizes.sm;
+  let titleDisplay;
+  let paragraphMarginTop;
+  let wordWrap;
   if (size !== 'small') {
@@ -236,14 +138,14 @@ borderRadius = theme.borderRadii.md;
   if (size === 'extra-large') {
-    padding = "".concat(theme.space.base * 10, "px");
-    maxWidth = "460px";
+    padding = `${theme.space.base * 10}px`;
+    maxWidth = `460px`;
     lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md);
-    paragraphMarginTop = "".concat(theme.space.base * 2.5, "px");
+    paragraphMarginTop = `${theme.space.base * 2.5}px`;
   } else if (size === 'large') {
-    padding = "".concat(theme.space.base * 5, "px");
-    maxWidth = "270px";
+    padding = `${theme.space.base * 5}px`;
+    maxWidth = `270px`;
     lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md);
-    paragraphMarginTop = "".concat(theme.space.base * 2, "px");
+    paragraphMarginTop = `${theme.space.base * 2}px`;
   } else if (size === 'medium') {
     padding = '1em';
-    maxWidth = "140px";
+    maxWidth = `140px`;
     lineHeight = reactTheming.getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
@@ -255,4 +157,4 @@ }
   }
-  var arrowSize;
-  var arrowInset;
+  let arrowSize;
+  let arrowInset;
   if (hasArrow) {
@@ -265,7 +167,7 @@ if (size === 'small' || size === 'medium') {
       if (size === 'large') {
-        margin = "".concat(theme.space.base * 2, "px");
+        margin = `${theme.space.base * 2}px`;
         arrowSize = margin;
       } else if (size === 'extra-large') {
-        margin = "".concat(theme.space.base * 3, "px");
-        arrowSize = "".concat(theme.space.base * 2.5, "px");
+        margin = `${theme.space.base * 3}px`;
+        arrowSize = `${theme.space.base * 2.5}px`;
       }
@@ -279,13 +181,15 @@ }
 };
-var colorStyles = function colorStyles(_ref2) {
-  var theme = _ref2.theme,
-      type = _ref2.type;
-  var border;
-  var boxShadow = theme.shadows.lg("".concat(theme.space.base, "px"), "".concat(theme.space.base * 2, "px"), reactTheming.getColor('chromeHue', 600, theme, 0.15));
-  var backgroundColor = reactTheming.getColor('chromeHue', 700, theme);
-  var color = theme.colors.background;
-  var titleColor;
+const colorStyles = _ref2 => {
+  let {
+    theme,
+    type
+  } = _ref2;
+  let border;
+  let boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor('chromeHue', 600, theme, 0.15));
+  let backgroundColor = reactTheming.getColor('chromeHue', 700, theme);
+  let color = theme.colors.background;
+  let titleColor;
   if (type === 'light') {
-    boxShadow = theme.shadows.lg("".concat(theme.space.base * 3, "px"), "".concat(theme.space.base * 5, "px"), reactTheming.getColor('chromeHue', 600, theme, 0.15));
-    border = "".concat(theme.borders.sm, " ").concat(reactTheming.getColor('neutralHue', 300, theme));
+    boxShadow = theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, reactTheming.getColor('chromeHue', 600, theme, 0.15));
+    border = `${theme.borders.sm} ${reactTheming.getColor('neutralHue', 300, theme)}`;
     backgroundColor = theme.colors.background;
@@ -297,19 +201,9 @@ color = reactTheming.getColor('neutralHue', 700, theme);
 };
-var StyledTooltip = styled__default["default"].div.attrs({
+const StyledTooltip = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
-})(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.fontWeights.regular;
-}, function (props) {
-  return sizeStyles(props);
-}, colorStyles, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["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 => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledTooltip.defaultProps = {
@@ -319,8 +213,6 @@ theme: reactTheming.DEFAULT_THEME
 
-var StyledTooltipWrapper = styled__default["default"].div.withConfig({
+const StyledTooltipWrapper = styled__default["default"].div.withConfig({
   displayName: "StyledTooltipWrapper",
   componentId: "sc-1b7q9q6-0"
-})(["transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], function (props) {
-  return props.zIndex;
-});
+})(["transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
 StyledTooltipWrapper.defaultProps = {
@@ -330,40 +222,41 @@ theme: reactTheming.DEFAULT_THEME
 
-var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
-var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
-var SIZE = ['small', 'medium', 'large', 'extra-large'];
-var TYPE = ['light', 'dark'];
+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'];
 
-var _excluded = ["id", "delayMS", "isInitialVisible", "content", "refKey", "placement", "eventsEnabled", "popperModifiers", "children", "hasArrow", "size", "type", "appendToNode", "zIndex", "isVisible"],
-    _excluded2 = ["onFocus", "onBlur"];
-var Tooltip = function Tooltip(_ref) {
-  var id = _ref.id,
-      delayMS = _ref.delayMS,
-      isInitialVisible = _ref.isInitialVisible,
-      content = _ref.content,
-      refKey = _ref.refKey,
-      placement = _ref.placement,
-      eventsEnabled = _ref.eventsEnabled,
-      popperModifiers = _ref.popperModifiers,
-      children = _ref.children,
-      hasArrow = _ref.hasArrow,
-      size = _ref.size,
-      type = _ref.type,
-      appendToNode = _ref.appendToNode,
-      zIndex = _ref.zIndex,
-      externalIsVisible = _ref.isVisible,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-  var theme = React.useContext(styled.ThemeContext);
-  var scheduleUpdateRef = React.useRef();
-  var _useTooltip = containerTooltip.useTooltip({
-    id: id,
+const Tooltip = _ref => {
+  let {
+    id,
+    delayMS,
+    isInitialVisible,
+    content,
+    refKey,
+    placement,
+    eventsEnabled,
+    popperModifiers,
+    children,
+    hasArrow,
+    size,
+    type,
+    appendToNode,
+    zIndex,
+    isVisible: externalIsVisible,
+    ...otherProps
+  } = _ref;
+  const theme = React.useContext(styled.ThemeContext);
+  const scheduleUpdateRef = React.useRef();
+  const {
+    isVisible,
+    getTooltipProps,
+    getTriggerProps,
+    openTooltip,
+    closeTooltip
+  } = containerTooltip.useTooltip({
+    id,
     delayMilliseconds: delayMS,
     isVisible: isInitialVisible
-  }),
-      isVisible = _useTooltip.isVisible,
-      getTooltipProps = _useTooltip.getTooltipProps,
-      getTriggerProps = _useTooltip.getTriggerProps,
-      openTooltip = _useTooltip.openTooltip,
-      closeTooltip = _useTooltip.closeTooltip;
-  var controlledIsVisible = containerUtilities.getControlledValue(externalIsVisible, isVisible);
-  React.useEffect(function () {
+  });
+  const controlledIsVisible = containerUtilities.getControlledValue(externalIsVisible, isVisible);
+  React.useEffect(() => {
     if (controlledIsVisible && scheduleUpdateRef.current) {
@@ -373,12 +266,18 @@ scheduleUpdateRef.current();
   }, [controlledIsVisible, content]);
-  var popperPlacement = theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
-  var singleChild = React__default["default"].Children.only(children);
-  var modifiers = _objectSpread2({
+  const popperPlacement = theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
+  const singleChild = React__default["default"].Children.only(children);
+  const modifiers = {
     preventOverflow: {
       boundariesElement: 'window'
-    }
-  }, popperModifiers);
-  return React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
-    var ref = _ref2.ref;
-    return React.cloneElement(singleChild, getTriggerProps(_objectSpread2(_objectSpread2({}, singleChild.props), {}, _defineProperty({}, refKey, mergeRefs__default["default"]([ref, singleChild.ref ? singleChild.ref : null])))));
+    },
+    ...popperModifiers
+  };
+  return React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(reactPopper.Reference, null, _ref2 => {
+    let {
+      ref
+    } = _ref2;
+    return React.cloneElement(singleChild, getTriggerProps({
+      ...singleChild.props,
+      [refKey]: mergeRefs__default["default"]([ref, singleChild.ref ? singleChild.ref : null])
+    }));
   }), React__default["default"].createElement(reactPopper.Popper, {
@@ -388,12 +287,16 @@ placement: popperPlacement,
     modifiers: modifiers
-  }, function (_ref3) {
-    var ref = _ref3.ref,
-        style = _ref3.style,
-        scheduleUpdate = _ref3.scheduleUpdate,
-        currentPlacement = _ref3.placement;
+  }, _ref3 => {
+    let {
+      ref,
+      style,
+      scheduleUpdate,
+      placement: currentPlacement
+    } = _ref3;
     scheduleUpdateRef.current = scheduleUpdate;
-    var onFocus = otherProps.onFocus,
-        onBlur = otherProps.onBlur,
-        otherTooltipProps = _objectWithoutProperties(otherProps, _excluded2);
-    var computedSize = size;
+    const {
+      onFocus,
+      onBlur,
+      ...otherTooltipProps
+    } = otherProps;
+    let computedSize = size;
     if (computedSize === undefined) {
@@ -406,16 +309,17 @@ if (type === 'dark') {
     }
-    var tooltipProps = _objectSpread2({
-      hasArrow: hasArrow,
+    const tooltipProps = {
+      hasArrow,
       placement: currentPlacement,
       size: computedSize,
-      onFocus: containerUtilities.composeEventHandlers(onFocus, function () {
+      onFocus: containerUtilities.composeEventHandlers(onFocus, () => {
         openTooltip();
       }),
-      onBlur: containerUtilities.composeEventHandlers(onBlur, function () {
+      onBlur: containerUtilities.composeEventHandlers(onBlur, () => {
         closeTooltip(0);
       }),
       'aria-hidden': !controlledIsVisible,
-      type: type
-    }, otherTooltipProps);
-    var tooltip = React__default["default"].createElement(StyledTooltipWrapper, {
+      type,
+      ...otherTooltipProps
+    };
+    const tooltip = React__default["default"].createElement(StyledTooltipWrapper, {
       ref: controlledIsVisible ? ref : null,
@@ -457,14 +361,25 @@ style: style,
 
-var Paragraph = React.forwardRef(function (props, ref) {
-  return React__default["default"].createElement(StyledParagraph, _extends({
-    ref: ref
-  }, props));
-});
+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 = React.forwardRef((props, ref) => React__default["default"].createElement(StyledParagraph, _extends({
+  ref: ref
+}, props)));
 Paragraph.displayName = 'Paragraph';
 
-var Title = React.forwardRef(function (props, ref) {
-  return React__default["default"].createElement(StyledTitle, _extends({
-    ref: ref
-  }, props));
-});
+const Title = React.forwardRef((props, ref) => React__default["default"].createElement(StyledTitle, _extends({
+  ref: ref
+}, props)));
 Title.displayName = 'Title';
@@ -471,0 +386,0 @@

dist/index.esm.js

@@ -18,98 +18,4 @@ /**
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-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);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
 function getPopperPlacement(gardenPlacement) {
-  var gardenToPopperMapping = {
+  const gardenToPopperMapping = {
     auto: 'auto',
@@ -132,3 +38,3 @@ top: 'top',
 function getRtlPopperPlacement(gardenPlacement) {
-  var rtlPlacementMappings = {
+  const rtlPlacementMappings = {
     left: 'right',
@@ -145,7 +51,7 @@ 'left-start': 'right-start',
   };
-  var popperPlacement = getPopperPlacement(gardenPlacement);
+  const popperPlacement = getPopperPlacement(gardenPlacement);
   return rtlPlacementMappings[popperPlacement] || popperPlacement;
 }
 function getArrowPosition(popperPlacement) {
-  var arrowPositionMappings = {
+  const arrowPositionMappings = {
     top: 'bottom',
@@ -167,12 +73,10 @@ 'top-start': 'bottom-left',
 
-var COMPONENT_ID$2 = 'tooltip.paragraph';
-var StyledParagraph = styled.p.attrs({
+const COMPONENT_ID$2 = 'tooltip.paragraph';
+const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
-})(["margin:0;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["margin:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledParagraph.defaultProps = {
@@ -182,14 +86,10 @@ theme: DEFAULT_THEME
 
-var COMPONENT_ID$1 = 'tooltip.title';
-var StyledTitle = styled.strong.attrs({
+const COMPONENT_ID$1 = 'tooltip.title';
+const StyledTitle = styled.strong.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
-})(["display:none;margin:0;font-weight:", ";", ";"], function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledTitle.defaultProps = {
@@ -199,20 +99,22 @@ theme: DEFAULT_THEME
 
-var COMPONENT_ID = 'tooltip.tooltip';
-var sizeStyles = function sizeStyles(_ref) {
-  var theme = _ref.theme,
-      size = _ref.size,
-      type = _ref.type,
-      placement = _ref.placement,
-      hasArrow = _ref.hasArrow;
-  var margin = "".concat(theme.space.base * 1.5, "px");
-  var borderRadius = theme.borderRadii.sm;
-  var padding = '0 1em';
-  var maxWidth;
-  var overflowWrap;
-  var whiteSpace = 'nowrap';
-  var lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.sm);
-  var fontSize = theme.fontSizes.sm;
-  var titleDisplay;
-  var paragraphMarginTop;
-  var wordWrap;
+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') {
@@ -225,14 +127,14 @@ borderRadius = theme.borderRadii.md;
   if (size === 'extra-large') {
-    padding = "".concat(theme.space.base * 10, "px");
-    maxWidth = "460px";
+    padding = `${theme.space.base * 10}px`;
+    maxWidth = `460px`;
     lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
-    paragraphMarginTop = "".concat(theme.space.base * 2.5, "px");
+    paragraphMarginTop = `${theme.space.base * 2.5}px`;
   } else if (size === 'large') {
-    padding = "".concat(theme.space.base * 5, "px");
-    maxWidth = "270px";
+    padding = `${theme.space.base * 5}px`;
+    maxWidth = `270px`;
     lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
-    paragraphMarginTop = "".concat(theme.space.base * 2, "px");
+    paragraphMarginTop = `${theme.space.base * 2}px`;
   } else if (size === 'medium') {
     padding = '1em';
-    maxWidth = "140px";
+    maxWidth = `140px`;
     lineHeight = getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
@@ -244,4 +146,4 @@ }
   }
-  var arrowSize;
-  var arrowInset;
+  let arrowSize;
+  let arrowInset;
   if (hasArrow) {
@@ -254,7 +156,7 @@ if (size === 'small' || size === 'medium') {
       if (size === 'large') {
-        margin = "".concat(theme.space.base * 2, "px");
+        margin = `${theme.space.base * 2}px`;
         arrowSize = margin;
       } else if (size === 'extra-large') {
-        margin = "".concat(theme.space.base * 3, "px");
-        arrowSize = "".concat(theme.space.base * 2.5, "px");
+        margin = `${theme.space.base * 3}px`;
+        arrowSize = `${theme.space.base * 2.5}px`;
       }
@@ -268,13 +170,15 @@ }
 };
-var colorStyles = function colorStyles(_ref2) {
-  var theme = _ref2.theme,
-      type = _ref2.type;
-  var border;
-  var boxShadow = theme.shadows.lg("".concat(theme.space.base, "px"), "".concat(theme.space.base * 2, "px"), getColor('chromeHue', 600, theme, 0.15));
-  var backgroundColor = getColor('chromeHue', 700, theme);
-  var color = theme.colors.background;
-  var titleColor;
+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("".concat(theme.space.base * 3, "px"), "".concat(theme.space.base * 5, "px"), getColor('chromeHue', 600, theme, 0.15));
-    border = "".concat(theme.borders.sm, " ").concat(getColor('neutralHue', 300, theme));
+    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;
@@ -286,19 +190,9 @@ color = getColor('neutralHue', 700, theme);
 };
-var StyledTooltip = styled.div.attrs({
+const StyledTooltip = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
-})(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.fontWeights.regular;
-}, function (props) {
-  return sizeStyles(props);
-}, colorStyles, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["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 = {
@@ -308,8 +202,6 @@ theme: DEFAULT_THEME
 
-var StyledTooltipWrapper = styled.div.withConfig({
+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;}"], function (props) {
-  return props.zIndex;
-});
+})(["transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
 StyledTooltipWrapper.defaultProps = {
@@ -319,40 +211,41 @@ theme: DEFAULT_THEME
 
-var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
-var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
-var SIZE = ['small', 'medium', 'large', 'extra-large'];
-var TYPE = ['light', 'dark'];
+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'];
 
-var _excluded = ["id", "delayMS", "isInitialVisible", "content", "refKey", "placement", "eventsEnabled", "popperModifiers", "children", "hasArrow", "size", "type", "appendToNode", "zIndex", "isVisible"],
-    _excluded2 = ["onFocus", "onBlur"];
-var Tooltip = function Tooltip(_ref) {
-  var id = _ref.id,
-      delayMS = _ref.delayMS,
-      isInitialVisible = _ref.isInitialVisible,
-      content = _ref.content,
-      refKey = _ref.refKey,
-      placement = _ref.placement,
-      eventsEnabled = _ref.eventsEnabled,
-      popperModifiers = _ref.popperModifiers,
-      children = _ref.children,
-      hasArrow = _ref.hasArrow,
-      size = _ref.size,
-      type = _ref.type,
-      appendToNode = _ref.appendToNode,
-      zIndex = _ref.zIndex,
-      externalIsVisible = _ref.isVisible,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-  var theme = useContext(ThemeContext);
-  var scheduleUpdateRef = useRef();
-  var _useTooltip = useTooltip({
-    id: id,
+const Tooltip = _ref => {
+  let {
+    id,
+    delayMS,
+    isInitialVisible,
+    content,
+    refKey,
+    placement,
+    eventsEnabled,
+    popperModifiers,
+    children,
+    hasArrow,
+    size,
+    type,
+    appendToNode,
+    zIndex,
+    isVisible: externalIsVisible,
+    ...otherProps
+  } = _ref;
+  const theme = useContext(ThemeContext);
+  const scheduleUpdateRef = useRef();
+  const {
+    isVisible,
+    getTooltipProps,
+    getTriggerProps,
+    openTooltip,
+    closeTooltip
+  } = useTooltip({
+    id,
     delayMilliseconds: delayMS,
     isVisible: isInitialVisible
-  }),
-      isVisible = _useTooltip.isVisible,
-      getTooltipProps = _useTooltip.getTooltipProps,
-      getTriggerProps = _useTooltip.getTriggerProps,
-      openTooltip = _useTooltip.openTooltip,
-      closeTooltip = _useTooltip.closeTooltip;
-  var controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
-  useEffect(function () {
+  });
+  const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
+  useEffect(() => {
     if (controlledIsVisible && scheduleUpdateRef.current) {
@@ -362,12 +255,18 @@ scheduleUpdateRef.current();
   }, [controlledIsVisible, content]);
-  var popperPlacement = theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
-  var singleChild = React.Children.only(children);
-  var modifiers = _objectSpread2({
+  const popperPlacement = theme.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, function (_ref2) {
-    var ref = _ref2.ref;
-    return cloneElement(singleChild, getTriggerProps(_objectSpread2(_objectSpread2({}, singleChild.props), {}, _defineProperty({}, refKey, mergeRefs([ref, singleChild.ref ? singleChild.ref : null])))));
+    },
+    ...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, {
@@ -377,12 +276,16 @@ placement: popperPlacement,
     modifiers: modifiers
-  }, function (_ref3) {
-    var ref = _ref3.ref,
-        style = _ref3.style,
-        scheduleUpdate = _ref3.scheduleUpdate,
-        currentPlacement = _ref3.placement;
+  }, _ref3 => {
+    let {
+      ref,
+      style,
+      scheduleUpdate,
+      placement: currentPlacement
+    } = _ref3;
     scheduleUpdateRef.current = scheduleUpdate;
-    var onFocus = otherProps.onFocus,
-        onBlur = otherProps.onBlur,
-        otherTooltipProps = _objectWithoutProperties(otherProps, _excluded2);
-    var computedSize = size;
+    const {
+      onFocus,
+      onBlur,
+      ...otherTooltipProps
+    } = otherProps;
+    let computedSize = size;
     if (computedSize === undefined) {
@@ -395,16 +298,17 @@ if (type === 'dark') {
     }
-    var tooltipProps = _objectSpread2({
-      hasArrow: hasArrow,
+    const tooltipProps = {
+      hasArrow,
       placement: currentPlacement,
       size: computedSize,
-      onFocus: composeEventHandlers(onFocus, function () {
+      onFocus: composeEventHandlers(onFocus, () => {
         openTooltip();
       }),
-      onBlur: composeEventHandlers(onBlur, function () {
+      onBlur: composeEventHandlers(onBlur, () => {
         closeTooltip(0);
       }),
       'aria-hidden': !controlledIsVisible,
-      type: type
-    }, otherTooltipProps);
-    var tooltip = React.createElement(StyledTooltipWrapper, {
+      type,
+      ...otherTooltipProps
+    };
+    const tooltip = React.createElement(StyledTooltipWrapper, {
       ref: controlledIsVisible ? ref : null,
@@ -446,16 +350,27 @@ style: style,
 
-var Paragraph = forwardRef(function (props, ref) {
-  return React.createElement(StyledParagraph, _extends({
-    ref: ref
-  }, props));
-});
+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';
 
-var Title = forwardRef(function (props, ref) {
-  return React.createElement(StyledTitle, _extends({
-    ref: ref
-  }, props));
-});
+const Title = forwardRef((props, ref) => React.createElement(StyledTitle, _extends({
+  ref: ref
+}, props)));
 Title.displayName = 'Title';
 
 export { Paragraph, Title, Tooltip };

dist/typings/elements/Tooltip.d.ts

@@ -13,3 +13,3 @@ /**
 export declare const Tooltip: {
-    ({ id, delayMS, isInitialVisible, content, refKey, placement, eventsEnabled, popperModifiers, children, hasArrow, size, type, appendToNode, zIndex, isVisible, ...otherProps }: ITooltipProps): JSX.Element;
+    ({ id, delayMS, isInitialVisible, content, refKey, placement, eventsEnabled, popperModifiers, children, hasArrow, size, type, appendToNode, zIndex, isVisible: externalIsVisible, ...otherProps }: ITooltipProps): JSX.Element;
     displayName: string;
@@ -16,0 +16,0 @@ propTypes: {

package.json

 {
   "name": "@zendeskgarden/react-tooltips",
-  "version": "8.57.1",
+  "version": "8.58.0",
   "description": "Collection of components and render prop containers relating to Tooltips in the Garden Design System",
@@ -38,3 +38,3 @@ "license": "Apache-2.0",
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.57.1"
+    "@zendeskgarden/react-theming": "^8.58.0"
   },
@@ -51,3 +51,3 @@ "keywords": [
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "3e903f3c7013221ef01d3f81a50489505490be7b"
+  "gitHead": "07760a92573b619860e1252f6931467b9123f1b6"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

46446

decreased by-12.74%

Lines of code

917

decreased by-12.58%

No dependency changes