@redsift/charts 7.4.1 → 7.5.0-alpha.0

package/index.js

@@ -1,7 +1,7 @@
 import { scaleOrdinal, select, axisBottom, scaleLinear, sum, pie, arc } from 'd3';
-import React, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useLayoutEffect, useId } from 'react';
+import React, { forwardRef, useRef, useEffect, useId } from 'react';
 import styled, { css } from 'styled-components';
-import ReactDOM from 'react-dom';
+import { Tooltip } from '@redsift/popovers';
 
 const ColorTheme = {
   default: 'default',
@@ -12,7 +12,7 @@ const ColorTheme = {
 
 /**
  * Do not edit directly
- * Generated on Thu, 09 Feb 2023 16:05:01 GMT
+ * Generated on Tue, 21 Feb 2023 15:02:26 GMT
  */
 const RedsiftDataVizColorPurpleDefault = '#C1AAEA';
 const RedsiftDataVizColorPurpleDark = '#A78ADB';
@@ -128,8 +128,8 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+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) {
@@ -140,7 +140,7 @@ function _extends$1() {
     }
     return target;
   };
-  return _extends$1.apply(this, arguments);
+  return _extends.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -316,14 +316,6 @@ const StyledHorizontalBarChartBar = styled.g`
         ` : '';
 }}}
 `;
-const StyledHorizontalBarChartTooltip = styled.div`
-  font-family: var(--redsift-typography-font-family-raleway);
-  border: 1px solid rgb(0 0 0 / 20%);
-  padding: 10px;
-  box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%),
-    0 1px 3px 0 rgb(0 0 0 / 12%);
-  background-color: var(--redsift-color-neutral-white);
-`;
 const StyledHorizontalBarChartAxisBottom = styled.g`
   line.grid-line {
     fill: none;
@@ -337,630 +329,6 @@ const StyledHorizontalBarChartAxisBottom = styled.g`
   }
 `;
 
-function _extends() {
-  _extends = Object.assign || 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);
-}
-
-var useOnEscape = function useOnEscape(handler, active) {
-  if (active === void 0) {
-    active = true;
-  }
-
-  useEffect(function () {
-    if (!active) return;
-
-    var listener = function listener(event) {
-      // check if key is an Escape
-      if (event.key === 'Escape') handler(event);
-    };
-
-    document.addEventListener('keyup', listener);
-    return function () {
-      if (!active) return;
-      document.removeEventListener('keyup', listener);
-    };
-  }, [handler, active]);
-};
-var useRepositionOnResize = function useRepositionOnResize(handler, active) {
-  if (active === void 0) {
-    active = true;
-  }
-
-  useEffect(function () {
-    if (!active) return;
-
-    var listener = function listener() {
-      handler();
-    };
-
-    window.addEventListener('resize', listener);
-    return function () {
-      if (!active) return;
-      window.removeEventListener('resize', listener);
-    };
-  }, [handler, active]);
-};
-var useOnClickOutside = function useOnClickOutside(ref, handler, active) {
-  if (active === void 0) {
-    active = true;
-  }
-
-  useEffect(function () {
-    if (!active) return;
-
-    var listener = function listener(event) {
-      // Do nothing if clicking ref's element or descendent elements
-      var refs = Array.isArray(ref) ? ref : [ref];
-      var contains = false;
-      refs.forEach(function (r) {
-        if (!r.current || r.current.contains(event.target)) {
-          contains = true;
-          return;
-        }
-      });
-      event.stopPropagation();
-      if (!contains) handler(event);
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-    return function () {
-      if (!active) return;
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, handler, active]);
-}; // Make sure that user is not able TAB out of the Modal content on Open
-
-var useTabbing = function useTabbing(contentRef, active) {
-  if (active === void 0) {
-    active = true;
-  }
-
-  useEffect(function () {
-    if (!active) return;
-
-    var listener = function listener(event) {
-      // check if key is an Tab
-      if (event.keyCode === 9) {
-        var _contentRef$current;
-
-        var els = contentRef === null || contentRef === void 0 ? void 0 : (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
-        var focusableEls = Array.prototype.slice.call(els);
-
-        if (focusableEls.length === 1) {
-          event.preventDefault();
-          return;
-        }
-
-        var firstFocusableEl = focusableEls[0];
-        var lastFocusableEl = focusableEls[focusableEls.length - 1];
-
-        if (event.shiftKey && document.activeElement === firstFocusableEl) {
-          event.preventDefault();
-          lastFocusableEl.focus();
-        } else if (document.activeElement === lastFocusableEl) {
-          event.preventDefault();
-          firstFocusableEl.focus();
-        }
-      }
-    };
-
-    document.addEventListener('keydown', listener);
-    return function () {
-      if (!active) return;
-      document.removeEventListener('keydown', listener);
-    };
-  }, [contentRef, active]);
-};
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-var Style = {
-  popupContent: {
-    tooltip: {
-      position: 'absolute',
-      zIndex: 999
-    },
-    modal: {
-      position: 'relative',
-      margin: 'auto'
-    }
-  },
-  popupArrow: {
-    height: '8px',
-    width: '16px',
-    position: 'absolute',
-    background: 'transparent',
-    color: '#FFF',
-    zIndex: -1
-  },
-  overlay: {
-    tooltip: {
-      position: 'fixed',
-      top: '0',
-      bottom: '0',
-      left: '0',
-      right: '0',
-      zIndex: 999
-    },
-    modal: {
-      position: 'fixed',
-      top: '0',
-      bottom: '0',
-      left: '0',
-      right: '0',
-      display: 'flex',
-      zIndex: 999
-    }
-  }
-};
-
-var POSITION_TYPES = ['top left', 'top center', 'top right', 'right top', 'right center', 'right bottom', 'bottom left', 'bottom center', 'bottom right', 'left top', 'left center', 'left bottom'];
-
-var getCoordinatesForPosition = function getCoordinatesForPosition(triggerBounding, ContentBounding, position, //PopupPosition | PopupPosition[],
-arrow, _ref) {
-  var offsetX = _ref.offsetX,
-      offsetY = _ref.offsetY;
-  var margin = arrow ? 8 : 0;
-  var args = position.split(' '); // the step N 1 : center the popup content => ok
-
-  var CenterTop = triggerBounding.top + triggerBounding.height / 2;
-  var CenterLeft = triggerBounding.left + triggerBounding.width / 2;
-  var height = ContentBounding.height,
-      width = ContentBounding.width;
-  var top = CenterTop - height / 2;
-  var left = CenterLeft - width / 2;
-  var transform = '';
-  var arrowTop = '0%';
-  var arrowLeft = '0%'; // the  step N 2 : => ok
-
-  switch (args[0]) {
-    case 'top':
-      top -= height / 2 + triggerBounding.height / 2 + margin;
-      transform = "rotate(180deg)  translateX(50%)";
-      arrowTop = '100%';
-      arrowLeft = '50%';
-      break;
-
-    case 'bottom':
-      top += height / 2 + triggerBounding.height / 2 + margin;
-      transform = "rotate(0deg) translateY(-100%) translateX(-50%)";
-      arrowLeft = '50%';
-      break;
-
-    case 'left':
-      left -= width / 2 + triggerBounding.width / 2 + margin;
-      transform = " rotate(90deg)  translateY(50%) translateX(-25%)";
-      arrowLeft = '100%';
-      arrowTop = '50%';
-      break;
-
-    case 'right':
-      left += width / 2 + triggerBounding.width / 2 + margin;
-      transform = "rotate(-90deg)  translateY(-150%) translateX(25%)";
-      arrowTop = '50%';
-      break;
-  }
-
-  switch (args[1]) {
-    case 'top':
-      top = triggerBounding.top;
-      arrowTop = triggerBounding.height / 2 + "px";
-      break;
-
-    case 'bottom':
-      top = triggerBounding.top - height + triggerBounding.height;
-      arrowTop = height - triggerBounding.height / 2 + "px";
-      break;
-
-    case 'left':
-      left = triggerBounding.left;
-      arrowLeft = triggerBounding.width / 2 + "px";
-      break;
-
-    case 'right':
-      left = triggerBounding.left - width + triggerBounding.width;
-      arrowLeft = width - triggerBounding.width / 2 + "px";
-      break;
-  }
-
-  top = args[0] === 'top' ? top - offsetY : top + offsetY;
-  left = args[0] === 'left' ? left - offsetX : left + offsetX;
-  return {
-    top: top,
-    left: left,
-    transform: transform,
-    arrowLeft: arrowLeft,
-    arrowTop: arrowTop
-  };
-};
-
-var getTooltipBoundary = function getTooltipBoundary(keepTooltipInside) {
-  // add viewport
-  var boundingBox = {
-    top: 0,
-    left: 0,
-
-    /* eslint-disable-next-line no-undef */
-    width: window.innerWidth,
-
-    /* eslint-disable-next-line no-undef */
-    height: window.innerHeight
-  };
-
-  if (typeof keepTooltipInside === 'string') {
-    /* eslint-disable-next-line no-undef */
-    var selector = document.querySelector(keepTooltipInside);
-
-    if (process.env.NODE_ENV !== 'production') {
-      if (selector === null) throw new Error(keepTooltipInside + " selector does not exist : keepTooltipInside must be a valid html selector 'class' or 'Id'  or a boolean value");
-    }
-
-    if (selector !== null) boundingBox = selector.getBoundingClientRect();
-  }
-
-  return boundingBox;
-};
-
-var calculatePosition = function calculatePosition(triggerBounding, ContentBounding, position, arrow, _ref2, keepTooltipInside) {
-  var offsetX = _ref2.offsetX,
-      offsetY = _ref2.offsetY;
-  var bestCoords = {
-    arrowLeft: '0%',
-    arrowTop: '0%',
-    left: 0,
-    top: 0,
-    transform: 'rotate(135deg)'
-  };
-  var i = 0;
-  var wrapperBox = getTooltipBoundary(keepTooltipInside);
-  var positions = Array.isArray(position) ? position : [position]; // keepTooltipInside would be activated if the  keepTooltipInside exist or the position is Array
-
-  if (keepTooltipInside || Array.isArray(position)) positions = [].concat(positions, POSITION_TYPES); // add viewPort for WarpperBox
-  // wrapperBox.top = wrapperBox.top + window.scrollY;
-  // wrapperBox.left = wrapperBox.left + window.scrollX;
-
-  while (i < positions.length) {
-    bestCoords = getCoordinatesForPosition(triggerBounding, ContentBounding, positions[i], arrow, {
-      offsetX: offsetX,
-      offsetY: offsetY
-    });
-    var contentBox = {
-      top: bestCoords.top,
-      left: bestCoords.left,
-      width: ContentBounding.width,
-      height: ContentBounding.height
-    };
-
-    if (contentBox.top <= wrapperBox.top || contentBox.left <= wrapperBox.left || contentBox.top + contentBox.height >= wrapperBox.top + wrapperBox.height || contentBox.left + contentBox.width >= wrapperBox.left + wrapperBox.width) {
-      i++;
-    } else {
-      break;
-    }
-  }
-
-  return bestCoords;
-};
-
-var popupIdCounter = 0;
-
-var getRootPopup = function getRootPopup() {
-  var PopupRoot = document.getElementById('popup-root');
-
-  if (PopupRoot === null) {
-    PopupRoot = document.createElement('div');
-    PopupRoot.setAttribute('id', 'popup-root');
-    document.body.appendChild(PopupRoot);
-  }
-
-  return PopupRoot;
-};
-
-var Popup = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$trigger = _ref.trigger,
-      trigger = _ref$trigger === void 0 ? null : _ref$trigger,
-      _ref$onOpen = _ref.onOpen,
-      onOpen = _ref$onOpen === void 0 ? function () {} : _ref$onOpen,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-      _ref$defaultOpen = _ref.defaultOpen,
-      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
-      _ref$open = _ref.open,
-      open = _ref$open === void 0 ? undefined : _ref$open,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$nested = _ref.nested,
-      nested = _ref$nested === void 0 ? false : _ref$nested,
-      _ref$closeOnDocumentC = _ref.closeOnDocumentClick,
-      closeOnDocumentClick = _ref$closeOnDocumentC === void 0 ? true : _ref$closeOnDocumentC,
-      _ref$repositionOnResi = _ref.repositionOnResize,
-      repositionOnResize = _ref$repositionOnResi === void 0 ? true : _ref$repositionOnResi,
-      _ref$closeOnEscape = _ref.closeOnEscape,
-      closeOnEscape = _ref$closeOnEscape === void 0 ? true : _ref$closeOnEscape,
-      _ref$on = _ref.on,
-      on = _ref$on === void 0 ? ['click'] : _ref$on,
-      _ref$contentStyle = _ref.contentStyle,
-      contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
-      _ref$arrowStyle = _ref.arrowStyle,
-      arrowStyle = _ref$arrowStyle === void 0 ? {} : _ref$arrowStyle,
-      _ref$overlayStyle = _ref.overlayStyle,
-      overlayStyle = _ref$overlayStyle === void 0 ? {} : _ref$overlayStyle,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? 'bottom center' : _ref$position,
-      _ref$modal = _ref.modal,
-      modal = _ref$modal === void 0 ? false : _ref$modal,
-      _ref$lockScroll = _ref.lockScroll,
-      lockScroll = _ref$lockScroll === void 0 ? false : _ref$lockScroll,
-      _ref$arrow = _ref.arrow,
-      arrow = _ref$arrow === void 0 ? true : _ref$arrow,
-      _ref$offsetX = _ref.offsetX,
-      offsetX = _ref$offsetX === void 0 ? 0 : _ref$offsetX,
-      _ref$offsetY = _ref.offsetY,
-      offsetY = _ref$offsetY === void 0 ? 0 : _ref$offsetY,
-      _ref$mouseEnterDelay = _ref.mouseEnterDelay,
-      mouseEnterDelay = _ref$mouseEnterDelay === void 0 ? 100 : _ref$mouseEnterDelay,
-      _ref$mouseLeaveDelay = _ref.mouseLeaveDelay,
-      mouseLeaveDelay = _ref$mouseLeaveDelay === void 0 ? 100 : _ref$mouseLeaveDelay,
-      _ref$keepTooltipInsid = _ref.keepTooltipInside,
-      keepTooltipInside = _ref$keepTooltipInsid === void 0 ? false : _ref$keepTooltipInsid,
-      children = _ref.children;
-
-  var _useState = useState(open || defaultOpen),
-      isOpen = _useState[0],
-      setIsOpen = _useState[1];
-
-  var triggerRef = useRef(null);
-  var contentRef = useRef(null);
-  var arrowRef = useRef(null);
-  var focusedElBeforeOpen = useRef(null);
-  var popupId = useRef("popup-" + ++popupIdCounter);
-  var isModal = modal ? true : !trigger;
-  var timeOut = useRef(0);
-  useIsomorphicLayoutEffect(function () {
-    if (isOpen) {
-      focusedElBeforeOpen.current = document.activeElement;
-      setPosition();
-      focusContentOnOpen(); // for accessibility
-
-      lockScrolll();
-    } else {
-      resetScroll();
-    }
-
-    return function () {
-      clearTimeout(timeOut.current);
-    };
-  }, [isOpen]); // for uncontrolled popup we need to sync isOpen with open prop
-
-  useEffect(function () {
-    if (typeof open === 'boolean') {
-      if (open) openPopup();else closePopup();
-    }
-  }, [open, disabled]);
-
-  var openPopup = function openPopup(event) {
-    if (isOpen || disabled) return;
-    setIsOpen(true);
-    setTimeout(function () {
-      return onOpen(event);
-    }, 0);
-  };
-
-  var closePopup = function closePopup(event) {
-    var _focusedElBeforeOpen$;
-
-    if (!isOpen || disabled) return;
-    setIsOpen(false);
-    if (isModal) (_focusedElBeforeOpen$ = focusedElBeforeOpen.current) === null || _focusedElBeforeOpen$ === void 0 ? void 0 : _focusedElBeforeOpen$.focus();
-    setTimeout(function () {
-      return onClose(event);
-    }, 0);
-  };
-
-  var togglePopup = function togglePopup(event) {
-    event === null || event === void 0 ? void 0 : event.stopPropagation();
-    if (!isOpen) openPopup(event);else closePopup(event);
-  };
-
-  var onMouseEnter = function onMouseEnter(event) {
-    clearTimeout(timeOut.current);
-    timeOut.current = setTimeout(function () {
-      return openPopup(event);
-    }, mouseEnterDelay);
-  };
-
-  var onContextMenu = function onContextMenu(event) {
-    event === null || event === void 0 ? void 0 : event.preventDefault();
-    togglePopup();
-  };
-
-  var onMouseLeave = function onMouseLeave(event) {
-    clearTimeout(timeOut.current);
-    timeOut.current = setTimeout(function () {
-      return closePopup(event);
-    }, mouseLeaveDelay);
-  };
-
-  var lockScrolll = function lockScrolll() {
-    if (isModal && lockScroll) document.getElementsByTagName('body')[0].style.overflow = 'hidden'; // migrate to document.body
-  };
-
-  var resetScroll = function resetScroll() {
-    if (isModal && lockScroll) document.getElementsByTagName('body')[0].style.overflow = 'auto';
-  };
-
-  var focusContentOnOpen = function focusContentOnOpen() {
-    var _contentRef$current;
-
-    var focusableEls = contentRef === null || contentRef === void 0 ? void 0 : (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
-    var firstEl = Array.prototype.slice.call(focusableEls)[0];
-    firstEl === null || firstEl === void 0 ? void 0 : firstEl.focus();
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      open: function open() {
-        openPopup();
-      },
-      close: function close() {
-        closePopup();
-      },
-      toggle: function toggle() {
-        togglePopup();
-      }
-    };
-  }); // set Position
-
-  var setPosition = function setPosition() {
-    if (isModal || !isOpen) return;
-    if (!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) || !(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) || !(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current)) return; /// show error as one of ref is undefined
-
-    var trigger = triggerRef.current.getBoundingClientRect();
-    var content = contentRef.current.getBoundingClientRect();
-    var cords = calculatePosition(trigger, content, position, arrow, {
-      offsetX: offsetX,
-      offsetY: offsetY
-    }, keepTooltipInside);
-    contentRef.current.style.top = cords.top + window.scrollY + "px";
-    contentRef.current.style.left = cords.left + window.scrollX + "px";
-
-    if (arrow && !!arrowRef.current) {
-      var _arrowStyle$top, _arrowStyle$left;
-
-      arrowRef.current.style.transform = cords.transform;
-      arrowRef.current.style.setProperty('-ms-transform', cords.transform);
-      arrowRef.current.style.setProperty('-webkit-transform', cords.transform);
-      arrowRef.current.style.top = ((_arrowStyle$top = arrowStyle.top) === null || _arrowStyle$top === void 0 ? void 0 : _arrowStyle$top.toString()) || cords.arrowTop;
-      arrowRef.current.style.left = ((_arrowStyle$left = arrowStyle.left) === null || _arrowStyle$left === void 0 ? void 0 : _arrowStyle$left.toString()) || cords.arrowLeft;
-    }
-  }; // hooks
-
-
-  useOnEscape(closePopup, closeOnEscape); // can be optimized if we disabled for hover
-
-  useTabbing(contentRef, isOpen && isModal);
-  useRepositionOnResize(setPosition, repositionOnResize);
-  useOnClickOutside(!!trigger ? [contentRef, triggerRef] : [contentRef], closePopup, closeOnDocumentClick && !nested); // we need to add a ne
-  // render the trigger element and add events
-
-  var renderTrigger = function renderTrigger() {
-    var triggerProps = {
-      key: 'T',
-      ref: triggerRef,
-      'aria-describedby': popupId.current
-    };
-    var onAsArray = Array.isArray(on) ? on : [on];
-
-    for (var i = 0, len = onAsArray.length; i < len; i++) {
-      switch (onAsArray[i]) {
-        case 'click':
-          triggerProps.onClick = togglePopup;
-          break;
-
-        case 'right-click':
-          triggerProps.onContextMenu = onContextMenu;
-          break;
-
-        case 'hover':
-          triggerProps.onMouseEnter = onMouseEnter;
-          triggerProps.onMouseLeave = onMouseLeave;
-          break;
-
-        case 'focus':
-          triggerProps.onFocus = onMouseEnter;
-          triggerProps.onBlur = onMouseLeave;
-          break;
-      }
-    }
-
-    if (typeof trigger === 'function') {
-      var comp = trigger(isOpen);
-      return !!trigger && React.cloneElement(comp, triggerProps);
-    }
-
-    return !!trigger && React.cloneElement(trigger, triggerProps);
-  };
-
-  var addWarperAction = function addWarperAction() {
-    var popupContentStyle = isModal ? Style.popupContent.modal : Style.popupContent.tooltip;
-    var childrenElementProps = {
-      className: "popup-content " + (className !== '' ? className.split(' ').map(function (c) {
-        return c + "-content";
-      }).join(' ') : ''),
-      style: _extends({}, popupContentStyle, contentStyle, {
-        pointerEvents: 'auto'
-      }),
-      ref: contentRef,
-      onClick: function onClick(e) {
-        e.stopPropagation();
-      }
-    };
-
-    if (!modal && on.indexOf('hover') >= 0) {
-      childrenElementProps.onMouseEnter = onMouseEnter;
-      childrenElementProps.onMouseLeave = onMouseLeave;
-    }
-
-    return childrenElementProps;
-  };
-
-  var renderContent = function renderContent() {
-    return React.createElement("div", Object.assign({}, addWarperAction(), {
-      key: "C",
-      role: isModal ? 'dialog' : 'tooltip',
-      id: popupId.current
-    }), arrow && !isModal && React.createElement("div", {
-      ref: arrowRef,
-      style: Style.popupArrow
-    }, React.createElement("svg", {
-      "data-testid": "arrow",
-      className: "popup-arrow " + (className !== '' ? className.split(' ').map(function (c) {
-        return c + "-arrow";
-      }).join(' ') : ''),
-      viewBox: "0 0 32 16",
-      style: _extends({
-        position: 'absolute'
-      }, arrowStyle)
-    }, React.createElement("path", {
-      d: "M16 0l16 16H0z",
-      fill: "currentcolor"
-    }))), children && typeof children === 'function' ? children(closePopup, isOpen) : children);
-  };
-
-  var overlay = !(on.indexOf('hover') >= 0);
-  var ovStyle = isModal ? Style.overlay.modal : Style.overlay.tooltip;
-  var content = [overlay && React.createElement("div", {
-    key: "O",
-    "data-testid": "overlay",
-    "data-popup": isModal ? 'modal' : 'tooltip',
-    className: "popup-overlay " + (className !== '' ? className.split(' ').map(function (c) {
-      return c + "-overlay";
-    }).join(' ') : ''),
-    style: _extends({}, ovStyle, overlayStyle, {
-      pointerEvents: closeOnDocumentClick && nested || isModal ? 'auto' : 'none'
-    }),
-    onClick: closeOnDocumentClick && nested ? closePopup : undefined,
-    tabIndex: -1
-  }, isModal && renderContent()), !isModal && renderContent()];
-  return React.createElement(React.Fragment, null, renderTrigger(), isOpen && ReactDOM.createPortal(content, getRootPopup()));
-});
-
 const _excluded$4 = ["chartId", "color", "data", "gap", "height", "index", "isEmpty", "onClick", "role", "showTooltip", "tooltipLabelOnly", "tooltipPercent", "width"];
 const COMPONENT_NAME$4 = 'HorizontalBarChartBar';
 const CLASSNAME$4 = 'redsift-horizontal-barchart-bar';
@@ -991,9 +359,8 @@ const HorizontalBarChartBar = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   };
-  const Bar = /*#__PURE__*/React.createElement(StyledHorizontalBarChartBar, _extends$1({
-    ref: ref
-  }, forwardedProps, {
+  const Bar = /*#__PURE__*/React.createElement(StyledHorizontalBarChartBar, _extends({}, forwardedProps, {
+    ref: ref,
     "aria-label": showTooltip && !isEmpty ? `${data.name}: ${data.value}` : undefined,
     "aria-labelledby": !showTooltip && !isEmpty ? `id${chartId}__slice-${index}-title` : undefined,
     id: `id${chartId}__slice-${index}`,
@@ -1016,12 +383,9 @@ const HorizontalBarChartBar = /*#__PURE__*/forwardRef((props, ref) => {
   }, data.name), !showTooltip && !isEmpty && /*#__PURE__*/React.createElement("title", null, `${data.name}: ${data.value}`));
   if (showTooltip) {
     const tooltipValue = tooltipPercent !== null ? `${tooltipPercent}%` : data.value;
-    return /*#__PURE__*/React.createElement(Popup, {
-      on: "hover",
-      arrow: false,
-      position: "right center",
-      trigger: Bar
-    }, /*#__PURE__*/React.createElement(StyledHorizontalBarChartTooltip, null, `${data.name}${tooltipLabelOnly ? '' : ` - ${tooltipValue}`}`));
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      placement: "right"
+    }, /*#__PURE__*/React.createElement(Tooltip.Trigger, null, Bar), /*#__PURE__*/React.createElement(Tooltip.Content, null, `${data.name}${tooltipLabelOnly ? '' : ` - ${tooltipValue}`}`));
   }
   return Bar;
 });
@@ -1051,7 +415,7 @@ const HorizontalBarChartAxisBottom = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   }, [d3scale]);
-  return /*#__PURE__*/React.createElement(StyledHorizontalBarChartAxisBottom, _extends$1({
+  return /*#__PURE__*/React.createElement(StyledHorizontalBarChartAxisBottom, _extends({
     className: "axis"
   }, forwardedProps, {
     ref: axisRef
@@ -1180,9 +544,8 @@ const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))]).range([0, width - 32]);
   const barHeight = (chartHeight - (numberOfRows + 1) * gap) / numberOfRows;
   const total = sum(data, d => d.value);
-  return /*#__PURE__*/React.createElement(StyledHorizontalBarChart, _extends$1({
-    ref: ref
-  }, forwardedProps, {
+  return /*#__PURE__*/React.createElement(StyledHorizontalBarChart, _extends({}, forwardedProps, {
+    ref: ref,
     className: className
   }), title ? /*#__PURE__*/React.createElement(StyledHorizontalBarChartTitle, {
     className: `${HorizontalBarChart.className}__title`,
@@ -1518,14 +881,6 @@ const StyledPieChartArc = styled.g`
         ` : '';
 }}}
 `;
-const StyledPieChartTooltip = styled.div`
-  font-family: var(--redsift-typography-font-family-raleway);
-  border: 1px solid rgb(0 0 0 / 20%);
-  padding: 10px;
-  box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%),
-    0 1px 3px 0 rgb(0 0 0 / 12%);
-  background-color: var(--redsift-color-neutral-white);
-`;
 
 const _excluded$1 = ["chartId", "color", "data", "index", "onClick", "path", "role", "spaced", "showTooltip", "tooltipPercent", "tooltipLabelOnly", "isEmpty"];
 const COMPONENT_NAME$1 = 'PieChartArc';
@@ -1556,9 +911,8 @@ const PieChartArc = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   };
-  const Arc = /*#__PURE__*/React.createElement(StyledPieChartArc, _extends$1({
-    ref: ref
-  }, forwardedProps, {
+  const Arc = /*#__PURE__*/React.createElement(StyledPieChartArc, _extends({}, forwardedProps, {
+    ref: ref,
     "aria-label": showTooltip && !isEmpty ? `${data.name}: ${data.value}` : undefined,
     "aria-labelledby": !showTooltip && !isEmpty ? `id${chartId}__slice-${index}-title` : undefined,
     className: `pie-slice _${index}`,
@@ -1577,12 +931,9 @@ const PieChartArc = /*#__PURE__*/forwardRef((props, ref) => {
   }, `${data.name}: ${data.value}`) : null);
   if (showTooltip) {
     const tooltipValue = tooltipPercent !== null ? `${tooltipPercent}%` : data.value;
-    return /*#__PURE__*/React.createElement(Popup, {
-      on: "hover",
-      arrow: false,
-      position: "right center",
-      trigger: Arc
-    }, /*#__PURE__*/React.createElement(StyledPieChartTooltip, null, `${data.name}${tooltipLabelOnly ? '' : ` - ${tooltipValue}`}`));
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      placement: "right"
+    }, /*#__PURE__*/React.createElement(Tooltip.Trigger, null, Arc), /*#__PURE__*/React.createElement(Tooltip.Content, null, `${data.name}${tooltipLabelOnly ? '' : ` - ${tooltipValue}`}`));
   }
   return Arc;
 });
@@ -1728,9 +1079,8 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const createArc = arc().innerRadius(isDonut ? innerRadius : 0).outerRadius(chartDimensions.width / 2 - externalRadiusPadding);
   const pieData = createPie(data);
   const total = sum(data, d => d.value);
-  return /*#__PURE__*/React.createElement(StyledPieChart, _extends$1({
-    ref: ref
-  }, forwardedProps, {
+  return /*#__PURE__*/React.createElement(StyledPieChart, _extends({}, forwardedProps, {
+    ref: ref,
     className: className
   }), title ? /*#__PURE__*/React.createElement(StyledPieChartTitle, {
     className: `${PieChart.className}__title`,
@@ -1800,5 +1150,5 @@ PieChart.className = CLASSNAME;
 PieChart.defaultProps = DEFAULT_PROPS;
 PieChart.displayName = COMPONENT_NAME;
 
-export { ColorTheme, HorizontalBarChart, HorizontalBarChartSize, HorizontalBarChartTheme, HorizontalBarChartTooltipVariant, PieChart, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartTooltipVariant, PieChartVariant, StyledHorizontalBarChart, StyledHorizontalBarChartAxisBottom, StyledHorizontalBarChartBar, StyledHorizontalBarChartCaption, StyledHorizontalBarChartEmptyText, StyledHorizontalBarChartTitle, StyledHorizontalBarChartTooltip, StyledPieChart, StyledPieChartArc, StyledPieChartCaption, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartLabel, StyledPieChartTitle, StyledPieChartTooltip, getColorScale, monochrome, scheme, successDangerScheme };
+export { ColorTheme, HorizontalBarChart, HorizontalBarChartSize, HorizontalBarChartTheme, HorizontalBarChartTooltipVariant, PieChart, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartTooltipVariant, PieChartVariant, StyledHorizontalBarChart, StyledHorizontalBarChartAxisBottom, StyledHorizontalBarChartBar, StyledHorizontalBarChartCaption, StyledHorizontalBarChartEmptyText, StyledHorizontalBarChartTitle, StyledPieChart, StyledPieChartArc, StyledPieChartCaption, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartLabel, StyledPieChartTitle, getColorScale, monochrome, scheme, successDangerScheme };
 //# sourceMappingURL=index.js.map