@redsift/charts 6.2.0 → 6.3.1

package/index.js

@@ -1,20 +1,41 @@
-import React, { forwardRef } from 'react';
 import { scaleOrdinal, pie, arc, sum } from 'd3';
+import React, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useLayoutEffect, useId } from 'react';
 import styled, { css } from 'styled-components';
+import ReactDOM from 'react-dom';
 
-const neutral = '#B6DAEE';
+const ColorTheme = {
+  default: 'default',
+  dark: 'dark',
+  darker: 'darker',
+  monochrome: 'monochrome'
+};
+
+const monochrome = '#B6DAEE';
 const scheme = {
   default: ['#C1AAEA', '#B6DAEE', '#B3E3C5', '#EAADAC', '#E2A7D7', '#AFF5F3', '#F2D39E', '#F6EFC7', '#E6C2A0', '#E5E5E5'],
   dark: ['#A78ADB', '#97C5DE', '#90D2A9', '#D18785', '#D185C3', '#8CEAE6', '#D8B475', '#DED4A0', '#CDA279', '#BDBDBD'],
   darker: ['#8D6CC9', '#73ADCC', '#6DBE8B', '#BA6361', '#BD63AC', '#6CDCD8', '#BD954F', '#C6BB7A', '#B58556', '#666666'],
   light: ['#D9CAF5', '#D8EDF8', '#D3F0DE', '#FFD3D2', '#EFC8E8', '#D4FCFA', '#FFE8C0', '#FFFBE1', '#FFE3C9', '#F5F5F5'],
   lighter: ['#F0E9FC', '#F6FBFE', '#EDFAF1', '#FFE5E5', '#F9E6F6', '#E1FFFF', '#FFF0D7', '#FFFDF0', '#FFEEDE', '#FFFFFF'],
-  monochrome: [neutral]
+  monochrome: [monochrome],
+  empty: ['#BDBDBD']
 };
 const successDangerScheme = {
   success: '#90D2A9',
   warning: '#D8B475',
-  danger: '#D18785'
+  danger: '#D18785',
+  neutral: '#BDBDBD'
+};
+const getColorScale = (theme, isEmpty) => {
+  let d3colors = scaleOrdinal(scheme.default);
+  if (isEmpty) {
+    d3colors = scaleOrdinal(scheme.empty);
+  } else if (typeof theme === 'string') {
+    d3colors = scaleOrdinal(scheme[theme]);
+  } else if (typeof theme === 'object') {
+    d3colors = scaleOrdinal().domain([theme.success, theme.warning, theme.danger, ...(theme.neutral ? [theme.neutral] : [])]).range([successDangerScheme.success, successDangerScheme.warning, successDangerScheme.danger, ...(theme.neutral ? [successDangerScheme.neutral] : [])]).unknown(monochrome);
+  }
+  return d3colors;
 };
 
 function ownKeys(object, enumerableOnly) {
@@ -51,8 +72,8 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -63,7 +84,7 @@ function _extends() {
     }
     return target;
   };
-  return _extends.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -123,11 +144,15 @@ const PieChartLabelVariant = {
 /**
  * Component theme.
  */
-const PieChartTheme = {
-  default: 'default',
-  dark: 'dark',
-  darker: 'darker',
-  monochrome: 'monochrome'
+const PieChartTheme = ColorTheme;
+/**
+ * Tooltip label variant.
+ */
+const PieChartTooltipVariant = {
+  none: 'none',
+  label: 'label',
+  value: 'value',
+  percent: 'percent'
 };
 
 /**
@@ -151,6 +176,9 @@ const StyledPieChart = styled.div`
       position: relative;
     }
   }
+  svg {
+    display: block;
+  }
 `;
 const StyledPieChartTitle = styled.div`
   font-family: var(--redsift-typography-h4-font-family);
@@ -174,6 +202,7 @@ const StyledPieChartCenterText = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  pointer-events: none;
 
   > * {
     max-width: ${_ref => {
@@ -185,19 +214,121 @@ const StyledPieChartCenterText = styled.div`
   }
 
   > b {
-    margin-bottom: 8px;
     font-family: var(--redsift-typography-font-family-source-code-pro);
     color: var(--redsift-color-text-primary);
-    font-weight: var(--redsift-typography-font-weight-semi-bold);
-    font-size: 30px;
-    line-height: 28px;
+    font-weight: var(--redsift-typography-font-weight-medium);
+    font-size: ${_ref2 => {
+  let {
+    $textSize
+  } = _ref2;
+  return $textSize;
+}}px;
+    line-height: ${_ref3 => {
+  let {
+    $textSize
+  } = _ref3;
+  return $textSize;
+}}px;
+
+    &:nth-child(2) {
+      font-weight: normal;
+      margin-top: 8px;
+      font-family: var(--redsift-typography-font-family-raleway);
+      font-size: ${_ref4 => {
+  let {
+    $smallTextSize
+  } = _ref4;
+  return $smallTextSize;
+}}px;
+      line-height: ${_ref5 => {
+  let {
+    $smallTextSize
+  } = _ref5;
+  return $smallTextSize;
+}}px;
+    }
   }
   > span {
+    color: var(--redsift-color-text-primary);
+    font-size: ${_ref6 => {
+  let {
+    $textSize
+  } = _ref6;
+  return $textSize;
+}}px;
+    line-height: ${_ref7 => {
+  let {
+    $textSize
+  } = _ref7;
+  return $textSize;
+}}px;
+    &:nth-child(3) {
+      margin-top: 4px;
+      font-size: ${_ref8 => {
+  let {
+    $smallTextSize
+  } = _ref8;
+  return $smallTextSize;
+}}px;
+      line-height: ${_ref9 => {
+  let {
+    $smallTextSize
+  } = _ref9;
+  return $smallTextSize;
+}}px;
+    }
+  }
+  > b + span {
     font-size: var(--redsift-typography-body-font-size);
+    font-family: var(--redsift-typography-font-family-raleway);
+    line-height: var(--redsift-typography-badge-line-height);
     color: rgba(0, 0, 0, 0.6);
     text-align: center;
   }
 `;
+const StyledPieChartEmptyText = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  > * {
+    max-width: ${_ref10 => {
+  let {
+    $maxWidth
+  } = _ref10;
+  return $maxWidth;
+}}px;
+  }
+
+  > span {
+    font-family: var(--redsift-typography-font-family-raleway);
+    color: ${_ref11 => {
+  let {
+    $isDonut
+  } = _ref11;
+  return $isDonut ? css`var(--redsift-color-text-secondary)` : css`var(--redsift-color-text-primary)`;
+}};
+    font-size: ${_ref12 => {
+  let {
+    $textSize
+  } = _ref12;
+  return $textSize;
+}}px;
+    line-height: ${_ref13 => {
+  let {
+    $textSize
+  } = _ref13;
+  return $textSize;
+}}px;
+  }
+`;
 const StyledPieChartLabel = styled.li`
   display: flex;
   align-items: center;
@@ -212,10 +343,10 @@ const StyledPieChartLabel = styled.li`
     height: 16px;
     width: 16px;
     min-width: 16px;
-    background-color: ${_ref2 => {
+    background-color: ${_ref14 => {
   let {
     $color
-  } = _ref2;
+  } = _ref14;
   return $color;
 }};
   }
@@ -227,10 +358,10 @@ const StyledPieChartLabel = styled.li`
   }
 `;
 const StyledPieChartArc = styled.g`
-  ${_ref3 => {
+  ${_ref15 => {
   let {
     $spaced
-  } = _ref3;
+  } = _ref15;
   return $spaced ? css`
           path {
             stroke-width: 2px;
@@ -239,20 +370,652 @@ const StyledPieChartArc = styled.g`
         ` : '';
 }}
 
-  ${_ref4 => {
+  ${_ref16 => {
   let {
-    $hover
-  } = _ref4;
-  return $hover ? css`
+    $clickable
+  } = _ref16;
+  return $clickable ? css`
           cursor: pointer;
           &:hover {
             opacity: 0.8;
           }
         ` : '';
-}}
+}}}
+`;
+const Tooltip = 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-primary-contrast);
 `;
 
-const _excluded$1 = ["color", "data", "index", "onClick", "onMouseOver", "path", "spaced"];
+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$1 = ["color", "data", "index", "onClick", "path", "spaced", "showTooltip", "tooltipPercent", "tooltipLabelOnly", "isEmpty"];
 const COMPONENT_NAME$1 = 'RedSiftPieChartArc';
 const CLASSNAME$1 = 'redsift-piechart-arc';
 const DEFAULT_PROPS$1 = {};
@@ -262,39 +1025,54 @@ const PieChartArc = /*#__PURE__*/forwardRef((props, ref) => {
       data,
       index,
       onClick,
-      onMouseOver,
       path,
-      spaced
+      spaced,
+      showTooltip,
+      tooltipPercent,
+      tooltipLabelOnly,
+      isEmpty
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1);
-  return /*#__PURE__*/React.createElement(StyledPieChartArc, _extends({
+  const Arc = /*#__PURE__*/React.createElement(StyledPieChartArc, _extends$1({
     ref: ref
   }, forwardedProps, {
     role: onClick ? 'button' : undefined,
     className: `pie-slice _${index}`,
     onClick: onClick,
-    onMouseOver: onMouseOver,
-    $hover: Boolean(onMouseOver),
+    $clickable: Boolean(onClick),
     $spaced: Boolean(spaced)
   }), /*#__PURE__*/React.createElement("path", {
     d: path,
     fill: color
-  }), /*#__PURE__*/React.createElement("title", null, `${data.name}: ${data.value}`));
+  }), !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: Arc
+    }, /*#__PURE__*/React.createElement(Tooltip, null, `${data.name}${tooltipLabelOnly ? '' : ` - ${tooltipValue}`}`));
+  }
+  return Arc;
 });
 PieChartArc.className = CLASSNAME$1;
 PieChartArc.defaultProps = DEFAULT_PROPS$1;
 PieChartArc.displayName = COMPONENT_NAME$1;
 
-const _excluded = ["caping", "caption", "className", "data", "labelVariant", "onSliceClick", "onSliceHover", "others", "size", "subtext", "text", "theme", "title", "variant"];
+const _excluded = ["aria-label", "aria-labelledby", "caping", "caption", "className", "data", "labelVariant", "onSliceClick", "others", "size", "text", "middleText", "subtext", "theme", "title", "variant", "tooltipVariant", "localeText"];
 const COMPONENT_NAME = 'RedSiftPieChart';
 const CLASSNAME = 'redsift-piechart';
 const DEFAULT_PROPS = {
-  labelVariant: PieChartLabelVariant.internal,
+  labelVariant: PieChartLabelVariant.none,
   others: true,
   size: PieChartSize.medium,
   theme: PieChartTheme.default,
-  title: 'Pie Chart',
-  variant: PieChartVariant.plain
+  variant: PieChartVariant.plain,
+  tooltipVariant: PieChartTooltipVariant.value,
+  localeText: {
+    emptyChartText: 'No Data'
+  }
 };
 const sizeToDimension = size => {
   switch (size) {
@@ -311,40 +1089,72 @@ const sizeToDimension = size => {
     case PieChartSize.medium:
     default:
       return {
-        width: 250,
-        height: 250
+        width: 240,
+        height: 240
       };
   }
 };
+const sizeToSmallFontSize = size => {
+  switch (size) {
+    case PieChartSize.small:
+      return 13;
+    case PieChartSize.large:
+      return 18;
+    case PieChartSize.medium:
+    default:
+      return 14;
+  }
+};
+const sizeToFontSize = size => {
+  switch (size) {
+    case PieChartSize.small:
+      return 30;
+    case PieChartSize.large:
+      return 38;
+    case PieChartSize.medium:
+    default:
+      return 34;
+  }
+};
 const sizeToInnerRadius = size => {
   switch (size) {
     case PieChartSize.small:
-      return 50;
+      return 55;
     case PieChartSize.large:
-      return 75;
+      return 80;
     case PieChartSize.medium:
     default:
-      return 66;
+      return 65;
   }
 };
 const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const id = useId();
   const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
       caping,
       caption,
       className,
       data: propData,
       labelVariant,
       onSliceClick,
-      onSliceHover,
       others,
       size,
-      subtext,
       text,
+      middleText,
+      subtext,
       theme,
       title,
-      variant
+      variant,
+      tooltipVariant,
+      localeText
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
+  const {
+    emptyChartText
+  } = _objectSpread2(_objectSpread2({}, DEFAULT_PROPS.localeText), localeText);
+  const isEmpty = propData.every(d => d.value === 0);
+  const isDonut = variant === PieChartVariant.donut || variant === PieChartVariant.spacedDonut;
   let data = propData.sort((a, b) => a.value < b.value ? 1 : -1);
   if (caping) {
     if (typeof others === 'boolean' && !others) {
@@ -367,6 +1177,12 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       }, []);
     }
   }
+  if (isEmpty) {
+    data = [{
+      name: emptyChartText,
+      value: 100
+    }];
+  }
 
   // Get charts dimensions based on the selected size.
   const chartDimensions = sizeToDimension(size);
@@ -374,54 +1190,64 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const innerRadius = sizeToInnerRadius(size);
 
   // Set color scheme.
-  let d3colors = scaleOrdinal(scheme.default);
-  if (typeof theme === 'string') {
-    d3colors = scaleOrdinal(scheme[theme]);
-  } else if (typeof theme === 'object') {
-    d3colors = scaleOrdinal().domain([theme.success, theme.warning, theme.danger]).range([successDangerScheme.success, successDangerScheme.warning, successDangerScheme.danger]).unknown(neutral);
-  }
+  const d3colors = getColorScale(theme, isEmpty);
 
   // Initialize the chart.
   const createPie = pie().value(d => d.value).sort(null);
-  const createArc = arc().innerRadius(variant === PieChartVariant.donut || variant === PieChartVariant.spacedDonut ? innerRadius : 0).outerRadius(chartDimensions.width / 2 - externalRadiusPadding);
+  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({
+  return /*#__PURE__*/React.createElement(StyledPieChart, _extends$1({
     ref: ref
   }, forwardedProps, {
     className: className
-  }), /*#__PURE__*/React.createElement(StyledPieChartTitle, {
-    className: `${PieChart.className}__title`
-  }, title), /*#__PURE__*/React.createElement("div", {
+  }), title ? /*#__PURE__*/React.createElement(StyledPieChartTitle, {
+    className: `${PieChart.className}__title`,
+    id: `id${id}__title`
+  }, title) : null, /*#__PURE__*/React.createElement("div", {
     className: `${PieChart.className}__container`
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${PieChart.className}-container__chart`
-  }, text ? /*#__PURE__*/React.createElement(StyledPieChartCenterText, {
-    $maxWidth: innerRadius * 2
-  }, /*#__PURE__*/React.createElement("b", null, text), /*#__PURE__*/React.createElement("span", null, subtext)) : null, /*#__PURE__*/React.createElement("svg", {
+    className: `${PieChart.className}-container__chart`,
+    "aria-label": ariaLabel ? ariaLabel : ariaLabelledby || title ? undefined : 'Pie Chart',
+    "aria-labelledby": ariaLabelledby ? ariaLabelledby : title ? `id${id}__title` : undefined
+  }, text && !isEmpty ? /*#__PURE__*/React.createElement(StyledPieChartCenterText, {
+    $maxWidth: innerRadius * 2,
+    $textSize: sizeToFontSize(size),
+    $smallTextSize: sizeToSmallFontSize(size)
+  }, subtext ? /*#__PURE__*/React.createElement("b", null, text) : /*#__PURE__*/React.createElement("span", null, text), middleText ? /*#__PURE__*/React.createElement("b", null, middleText) : null, /*#__PURE__*/React.createElement("span", null, subtext)) : null, isEmpty ? /*#__PURE__*/React.createElement(StyledPieChartEmptyText, {
+    $maxWidth: innerRadius * 2,
+    $textSize: sizeToFontSize(size) / 2,
+    $isDonut: isDonut
+  }, /*#__PURE__*/React.createElement("span", null, emptyChartText)) : null, /*#__PURE__*/React.createElement("svg", {
     width: chartDimensions.width,
     height: chartDimensions.height
   }, /*#__PURE__*/React.createElement("g", {
     transform: `translate(${chartDimensions.width / 2} ${chartDimensions.height / 2})`
   }, /*#__PURE__*/React.createElement("g", {
     className: "pie-slice-group"
-  }, pieData.map((datum, index) => /*#__PURE__*/React.createElement(PieChartArc, {
-    color: d3colors(datum.data.name),
-    data: datum.data,
-    index: index,
-    key: `pie-slice _${index}`,
-    onClick: onSliceClick ? () => onSliceClick(data[index]) : undefined,
-    onMouseOver: onSliceHover ? () => onSliceHover(data[index]) : undefined,
-    path: createArc(datum),
-    spaced: variant === PieChartVariant.spaced || variant === PieChartVariant.spacedDonut
-  }))), labelVariant === PieChartLabelVariant.internal ? /*#__PURE__*/React.createElement("g", {
+  }, pieData.map((datum, index) => {
+    const percent = (datum.data.value / total * 100).toFixed(2);
+    return /*#__PURE__*/React.createElement(PieChartArc, {
+      color: d3colors(datum.data.name),
+      data: datum.data,
+      isEmpty: isEmpty,
+      index: index,
+      key: `pie-slice _${index}`,
+      onClick: onSliceClick ? () => onSliceClick(data[index]) : undefined,
+      showTooltip: tooltipVariant !== PieChartTooltipVariant.none && !isEmpty,
+      tooltipLabelOnly: tooltipVariant == PieChartTooltipVariant.label,
+      tooltipPercent: tooltipVariant === PieChartTooltipVariant.percent ? percent : null,
+      path: createArc(datum),
+      spaced: variant === PieChartVariant.spaced || variant === PieChartVariant.spacedDonut
+    });
+  })), labelVariant === PieChartLabelVariant.internal ? /*#__PURE__*/React.createElement("g", {
     className: "pie-label-group"
   }, pieData.map((datum, index) => /*#__PURE__*/React.createElement("text", {
     className: `pie-slice pie-label _${index}`,
     key: `pie-slice pie-label _${index}`,
     textAnchor: "middle",
     transform: `translate(${createArc.centroid(datum)})`
-  }, index < 3 || caping ? datum.data.name : null))) : null))), labelVariant !== PieChartLabelVariant.none && labelVariant !== PieChartLabelVariant.internal ? /*#__PURE__*/React.createElement("ul", null, data.map((_ref, index) => {
+  }, index < 2 || caping ? datum.data.name : null))) : null))), labelVariant !== PieChartLabelVariant.none && labelVariant !== PieChartLabelVariant.internal ? /*#__PURE__*/React.createElement("ul", null, data.map((_ref, index) => {
     let {
       name,
       value
@@ -429,7 +1255,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     return /*#__PURE__*/React.createElement(StyledPieChartLabel, {
       key: `pie-external-label _${index}`,
       $color: d3colors(name)
-    }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("span", null, name), labelVariant === PieChartLabelVariant.externalLabelValue ? /*#__PURE__*/React.createElement("b", null, value) : labelVariant === PieChartLabelVariant.externalLabelPercent ? /*#__PURE__*/React.createElement("b", null, `${(value * 100 / total).toFixed(2)}%`) : null);
+    }, /*#__PURE__*/React.createElement("div", null), labelVariant === PieChartLabelVariant.externalLabelValue ? /*#__PURE__*/React.createElement("b", null, value) : labelVariant === PieChartLabelVariant.externalLabelPercent ? /*#__PURE__*/React.createElement("b", null, `${(value * 100 / total).toFixed(2)}%`) : null, /*#__PURE__*/React.createElement("span", null, name));
   })) : null), caption ? /*#__PURE__*/React.createElement(StyledPieChartCaption, {
     className: `${PieChart.className}__caption`
   }, caption) : null);
@@ -438,5 +1264,5 @@ PieChart.className = CLASSNAME;
 PieChart.defaultProps = DEFAULT_PROPS;
 PieChart.displayName = COMPONENT_NAME;
 
-export { PieChart, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartVariant, StyledPieChart, StyledPieChartArc, StyledPieChartCaption, StyledPieChartCenterText, StyledPieChartLabel, StyledPieChartTitle, neutral, scheme, successDangerScheme };
+export { ColorTheme, PieChart, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartTooltipVariant, PieChartVariant, StyledPieChart, StyledPieChartArc, StyledPieChartCaption, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartLabel, StyledPieChartTitle, Tooltip, getColorScale, monochrome, scheme, successDangerScheme };
 //# sourceMappingURL=index.js.map