@elliemae/ds-dataviz-pie 3.9.0 → 3.10.0-next.0

package/dist/cjs/styles.js

@@ -24,14 +24,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
-  StyleFocusableRegion: () => StyleFocusableRegion,
-  StyledArea: () => StyledArea,
-  StyledAxis: () => StyledAxis,
-  StyledGrid: () => StyledGrid,
-  StyledLine: () => StyledLine,
-  StyledMark: () => StyledMark,
-  StyledPoint: () => StyledPoint,
-  StyledSVGWrapper: () => StyledSVGWrapper
+  StyledInnerText: () => StyledInnerText,
+  StyledMouseOverDetectionBox: () => StyledMouseOverDetectionBox,
+  StyledSVGWrapper: () => StyledSVGWrapper,
+  StyledTooltipContainer: () => StyledTooltipContainer
 });
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
@@ -44,56 +40,20 @@ const StyledSVGWrapper = import_ds_system.styled.div`
     outline: none;
   }
 `;
-const StyledAxis = (0, import_ds_system.styled)("g")`
-  text {
-    fill: #635f5d;
-  }
-
-  text.axis-label {
-    font-size: 2.5em;
-  }
-
-  .tick text {
-    ${({ color }) => color ? `fill: ${color}` : ""}
-  }
-  .tick line {
-    ${({ color }) => color ? `stroke: ${color}` : ""}
-  }
-  line {
-    stroke: #c0c0bb;
-  }
-`;
-const StyledGrid = (0, import_ds_system.styled)("g")`
-  line {
-    stroke: #c0c0bb;
-  }
-`;
-const borderCircle = import_ds_system.css`
-  stroke: red;
-  stroke-width: 2;
-`;
-const StyledMark = (0, import_ds_system.styled)("rect")`
-  ${({ isFocused }) => isFocused ? borderCircle : ""};
-`;
-const StyleFocusableRegion = (0, import_ds_system.styled)("div")`
-  width: ${({ s }) => s * 2}px;
-  height: ${({ s }) => s * 2}px;
-  :focus {
-    outline: none;
-  }
-`;
-const StyledLine = (0, import_ds_system.styled)("path")`
-  fill: none;
-  stroke-width: ${({ isActiveLine }) => isActiveLine ? 5 : 3};
-  stroke-linejoin: round;
+const StyledInnerText = import_ds_system.styled.text`
+  font-size: 14px;
+  font-weight: 600;
 `;
-const StyledArea = (0, import_ds_system.styled)("path")`
-  stroke-width: ${({ isActiveLine }) => isActiveLine ? 5 : 3};
-  stroke-linejoin: round;
-  opacity: 0.8;
+const StyledTooltipContainer = import_ds_system.styled.div`
+  max-width: 350px;
+  background-color: white;
 `;
-const StyledPoint = (0, import_ds_system.styled)("circle")`
-  opacity: ${({ opacity }) => opacity};
-  ${({ isFocused }) => isFocused ? borderCircle : ""};
+const StyledMouseOverDetectionBox = import_ds_system.styled.div`
+  position: absolute;
+  top: -15px;
+  right: -15px;
+  width: calc(100% + 30px);
+  height: calc(100% + 30px);
+  z-index: -1;
 `;
 //# sourceMappingURL=styles.js.map

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\n\nexport const StyledSVGWrapper = styled.div`\n  :focus {\n    outline: none;\n  }\n  :focus-within {\n    outline: none;\n  }\n`;\n\nexport const StyledAxis = styled('g')`\n  text {\n    fill: #635f5d;\n  }\n\n  text.axis-label {\n    font-size: 2.5em;\n  }\n\n  .tick text {\n    ${({ color }) => (color ? `fill: ${color}` : '')}\n  }\n  .tick line {\n    ${({ color }) => (color ? `stroke: ${color}` : '')}\n  }\n  line {\n    stroke: #c0c0bb;\n  }\n`;\n\nexport const StyledGrid = styled('g')`\n  line {\n    stroke: #c0c0bb;\n  }\n`;\n\nconst borderCircle = css`\n  stroke: red;\n  stroke-width: 2;\n`;\nexport const StyledMark = styled('rect')<{ isFocused: boolean }>`\n  ${({ isFocused }) => (isFocused ? borderCircle : '')};\n`;\n\nexport const StyleFocusableRegion = styled('div')<{ s: number }>`\n  width: ${({ s }) => s * 2 ?? '1'}px;\n  height: ${({ s }) => s * 2 ?? '1'}px;\n  :focus {\n    outline: none;\n  }\n`;\n\nexport const StyledLine = styled('path')`\n  fill: none;\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n`;\nexport const StyledArea = styled('path')`\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n  opacity: 0.8;\n`;\n\nexport const StyledPoint = styled('circle')<{ isFocused: boolean }>`\n  opacity: ${({ opacity }) => opacity};\n  ${({ isFocused }) => (isFocused ? borderCircle : '')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAErB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAU9B,CAAC,EAAE,MAAM,MAAO,QAAQ,SAAS,UAAU;AAAA;AAAA;AAAA,MAG3C,CAAC,EAAE,MAAM,MAAO,QAAQ,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,eAAe;AAAA;AAAA;AAAA;AAId,MAAM,iBAAa,yBAAO,MAAM;AAAA,IACnC,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe;AAAA;AAG5C,MAAM,2BAAuB,yBAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,iBAAa,yBAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,kBAAc,yBAAO,QAAQ;AAAA,aAC7B,CAAC,EAAE,QAAQ,MAAM;AAAA,IAC1B,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe;AAAA;",
+  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\n\nexport const StyledSVGWrapper = styled.div`\n  :focus {\n    outline: none;\n  }\n  :focus-within {\n    outline: none;\n  }\n`;\n\nexport const StyledInnerText = styled.text`\n  font-size: 14px;\n  font-weight: 600;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n  max-width: 350px;\n  background-color: white;\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  width: calc(100% + 30px);\n  height: calc(100% + 30px);\n  z-index: -1;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAErB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAK/B,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/PieContext.js

@@ -1,16 +1,6 @@
 import * as React from "react";
-import { createContext, createRef } from "react";
-import { scaleOrdinal } from "d3";
-const pieChartdefaultContext = {
-  innerHeight: 0,
-  innerWidth: 0,
-  activeSerie: "",
-  setActiveSerie: () => {
-  },
-  containerRef: createRef(),
-  groups: [],
-  colorScale: scaleOrdinal()
-};
+import { createContext } from "react";
+const pieChartdefaultContext = {};
 const PieContext = createContext(pieChartdefaultContext);
 export {
   PieContext

package/dist/esm/PieContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PieContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { scaleOrdinal, ScaleOrdinal } from 'd3';\nimport { DSPieT } from './react-desc-prop-types';\n\ninterface PieChartContextT {\n  props: Partial<DSPieT.Props>;\n  innerHeight: number;\n  innerWidth: number;\n  activeSerie: string;\n  setActiveSerie: React.Dispatch<React.SetStateAction<string>>;\n  containerRef: React.RefObject<HTMLDivElement>;\n  groups: string[];\n  colorScale: ScaleOrdinal<string, unknown, never>;\n}\n\nconst pieChartdefaultContext: PieChartContextT = {\n  // props: defaultProps,\n  innerHeight: 0,\n  innerWidth: 0,\n  activeSerie: '',\n  setActiveSerie: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n};\n\nexport const PieContext = createContext(pieChartdefaultContext);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AACzC,SAAS,oBAAkC;AAc3C,MAAM,yBAA2C;AAAA,EAE/C,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc,UAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,YAAY,aAAa;AAC3B;AAEO,MAAM,aAAa,cAAc,sBAAsB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { scaleOrdinal, ScaleOrdinal } from 'd3';\nimport { DSPieT } from './react-desc-prop-types';\n\ninterface PieChartContextT {\n  props: Partial<DSPieT.Props>;\n  innerHeight: number;\n  innerWidth: number;\n  activeSerie: string;\n  setActiveSerie: React.Dispatch<React.SetStateAction<string>>;\n  containerRef: React.RefObject<HTMLDivElement>;\n  groups: string[];\n  colorScale: ScaleOrdinal<string, unknown, never>;\n}\n\nconst pieChartdefaultContext: PieChartContextT = {\n  // props: defaultProps,\n  // innerHeight: 0,\n  // innerWidth: 0,\n  // activeSerie: '',\n  // setActiveSerie: () => {},\n  // containerRef: createRef<HTMLDivElement>(),\n  // groups: [],\n  // colorScale: scaleOrdinal(),\n};\n\nexport const PieContext = createContext(pieChartdefaultContext);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAgC;AAezC,MAAM,yBAA2C,CASjD;AAEO,MAAM,aAAa,cAAc,sBAAsB;",
   "names": []
 }

package/dist/esm/config/useKeyboardNavigation.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useCallback, useContext, useMemo, useState } from "react";
+import { useCallback, useContext } from "react";
 import { PieContext } from "../PieContext";
 const findInCircularList = (list, from, step = 1) => {
   for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
@@ -9,62 +9,27 @@ const findInCircularList = (list, from, step = 1) => {
   return from;
 };
 const useKeyboardNavigation = () => {
-  const {
-    activePoint,
-    setActivePoint,
-    containerRef,
-    groups,
-    yScale,
-    props: { data }
-  } = useContext(PieContext);
-  const [currentFocusedDataset, setCurrentFocusedDataset] = useState(groups[0]);
-  const currentGroup = useMemo(() => data.find((d) => d.name === currentFocusedDataset), [currentFocusedDataset, data]);
-  const currentItemIndex = useMemo(
-    () => currentGroup.data.findIndex((opt) => opt.key === activePoint),
-    [activePoint, currentGroup]
-  );
-  const handleOnFocus = useCallback(
-    (e) => {
-      console.log("focus");
-      if (containerRef?.current === e.target) {
-        setActivePoint(currentGroup.data[0].key);
-      }
-    },
-    [containerRef, currentGroup, setActivePoint]
-  );
+  const { activeSerie, setActiveSerie, containerRef, currentData } = useContext(PieContext);
+  const handleOnFocus = useCallback(() => {
+    setActiveSerie(currentData[0].key);
+  }, [currentData, setActiveSerie]);
   const handleOnBlur = useCallback(() => {
     setTimeout(() => {
       if (!containerRef?.current?.contains(document.activeElement) || containerRef?.current === document.activeElement) {
-        console.log("blur");
-        setActivePoint("");
+        setActiveSerie("");
       }
     });
-  }, [containerRef, setActivePoint]);
+  }, [containerRef, setActiveSerie]);
   const navigateSerie = useCallback(
     (step) => {
-      const newValue = findInCircularList(
-        currentGroup.data.map((d) => d.value),
-        currentItemIndex,
+      const newFocusedSliceIndex = findInCircularList(
+        currentData,
+        currentData.findIndex((serie) => serie.key === activeSerie),
         step
       );
-      setActivePoint(currentGroup.data[newValue].key);
+      setActiveSerie(currentData[newFocusedSliceIndex].key);
     },
-    [currentGroup.data, currentItemIndex, setActivePoint]
-  );
-  const changeSerie = useCallback(
-    (step) => {
-      setCurrentFocusedDataset((prev) => {
-        const nextGroup = findInCircularList(
-          groups,
-          groups.findIndex((item) => item === prev),
-          step
-        );
-        const nextGroupData = data.find((d) => d.name === groups[nextGroup]);
-        setActivePoint(nextGroupData.data[currentItemIndex].key);
-        return groups[nextGroup];
-      });
-    },
-    [currentItemIndex, data, setActivePoint, groups]
+    [activeSerie, currentData, setActiveSerie]
   );
   const onInputKeyDown = useCallback(
     (e) => {
@@ -72,19 +37,10 @@ const useKeyboardNavigation = () => {
         e.preventDefault();
       }
       if (["ArrowLeft", "ArrowRight"].includes(e.code)) {
-        if (yScale.bandwidth)
-          changeSerie(e.code === "ArrowLeft" ? -1 : 1);
-        else
-          navigateSerie(e.code === "ArrowLeft" ? -1 : 1);
-      }
-      if (["ArrowDown", "ArrowUp"].includes(e.code)) {
-        if (yScale.bandwidth)
-          navigateSerie(e.code === "ArrowDown" ? -1 : 1);
-        else
-          changeSerie(e.code === "ArrowDown" ? -1 : 1);
+        navigateSerie(e.code === "ArrowLeft" ? -1 : 1);
       }
     },
-    [changeSerie, navigateSerie, yScale.bandwidth]
+    [navigateSerie]
   );
   return { onInputKeyDown, handleOnBlur, handleOnFocus };
 };

package/dist/esm/config/useKeyboardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useKeyboardNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport { PieContext } from '../PieContext';\n\nexport const findInCircularList = (\n  list,\n  from: number,\n  //criteria: (item) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (list[i]) return i;\n  }\n  return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n  const {\n    activePoint,\n    setActivePoint,\n    containerRef,\n    groups,\n    yScale,\n    props: { data },\n  } = useContext(PieContext);\n\n  const [currentFocusedDataset, setCurrentFocusedDataset] = useState(groups[0]);\n\n  const currentGroup = useMemo(() => data.find((d) => d.name === currentFocusedDataset), [currentFocusedDataset, data]);\n\n  const currentItemIndex = useMemo(\n    () => currentGroup.data.findIndex((opt) => opt.key === activePoint),\n    [activePoint, currentGroup],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      console.log('focus');\n\n      if (containerRef?.current === e.target) {\n        setActivePoint(currentGroup.data[0].key);\n      }\n    },\n    [containerRef, currentGroup, setActivePoint],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setTimeout(() => {\n      if (\n        !containerRef?.current?.contains(document.activeElement) ||\n        containerRef?.current === document.activeElement\n      ) {\n        console.log('blur');\n        setActivePoint('');\n      }\n    });\n  }, [containerRef, setActivePoint]);\n\n  const navigateSerie = useCallback(\n    (step: number) => {\n      const newValue = findInCircularList(\n        currentGroup.data.map((d) => d.value),\n        currentItemIndex,\n        step,\n      );\n      setActivePoint(currentGroup.data[newValue].key);\n    },\n    [currentGroup.data, currentItemIndex, setActivePoint],\n  );\n\n  const changeSerie = useCallback(\n    (step: number) => {\n      setCurrentFocusedDataset((prev) => {\n        const nextGroup = findInCircularList(\n          groups,\n          groups.findIndex((item) => item === prev),\n          step,\n        );\n        const nextGroupData = data.find((d) => d.name === groups[nextGroup]);\n        setActivePoint(nextGroupData.data[currentItemIndex].key);\n        return groups[nextGroup];\n      });\n    },\n    [currentItemIndex, data, setActivePoint, groups],\n  );\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (e.code !== 'Tab') {\n        e.preventDefault();\n      }\n      if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n        if (yScale.bandwidth) changeSerie(e.code === 'ArrowLeft' ? -1 : 1);\n        else navigateSerie(e.code === 'ArrowLeft' ? -1 : 1);\n      }\n\n      if (['ArrowDown', 'ArrowUp'].includes(e.code)) {\n        if (yScale.bandwidth) navigateSerie(e.code === 'ArrowDown' ? -1 : 1);\n        else changeSerie(e.code === 'ArrowDown' ? -1 : 1);\n      }\n    },\n    [changeSerie, navigateSerie, yScale.bandwidth],\n  );\n\n  return { onInputKeyDown, handleOnBlur, handleOnFocus };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport { PieContext } from '../PieContext';\n\nexport const findInCircularList = (\n  list,\n  from: number,\n  //criteria: (item) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (list[i]) return i;\n  }\n  return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n  const { activeSerie, setActiveSerie, containerRef, currentData } = useContext(PieContext);\n\n  // const currentGroup = useMemo(() => data.find((d) => d.name === currentFocusedDataset), [currentFocusedDataset, data]);\n\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(() => {\n    setActiveSerie(currentData[0].key);\n  }, [currentData, setActiveSerie]);\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setTimeout(() => {\n      if (\n        !containerRef?.current?.contains(document.activeElement) ||\n        containerRef?.current === document.activeElement\n      ) {\n        setActiveSerie('');\n      }\n    });\n  }, [containerRef, setActiveSerie]);\n\n  const navigateSerie = useCallback(\n    (step: number) => {\n      const newFocusedSliceIndex = findInCircularList(\n        currentData,\n        currentData.findIndex((serie) => serie.key === activeSerie),\n        step,\n      );\n      setActiveSerie(currentData[newFocusedSliceIndex].key);\n    },\n    [activeSerie, currentData, setActiveSerie],\n  );\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (e.code !== 'Tab') {\n        e.preventDefault();\n      }\n      if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n        navigateSerie(e.code === 'ArrowLeft' ? -1 : 1);\n      }\n    },\n    [navigateSerie],\n  );\n\n  return { onInputKeyDown, handleOnBlur, handleOnFocus };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,kBAAkB;AAEpB,MAAM,qBAAqB,CAChC,MACA,MAEA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,KAAK;AAAI,aAAO;AAAA,EACtB;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,aAAa,gBAAgB,cAAc,YAAY,IAAI,WAAW,UAAU;AAIxF,QAAM,gBAAyD,YAAY,MAAM;AAC/E,mBAAe,YAAY,GAAG,GAAG;AAAA,EACnC,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,eAA0D,YAAY,MAAM;AAChF,eAAW,MAAM;AACf,UACE,CAAC,cAAc,SAAS,SAAS,SAAS,aAAa,KACvD,cAAc,YAAY,SAAS,eACnC;AACA,uBAAe,EAAE;AAAA,MACnB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,cAAc,CAAC;AAEjC,QAAM,gBAAgB;AAAA,IACpB,CAAC,SAAiB;AAChB,YAAM,uBAAuB;AAAA,QAC3B;AAAA,QACA,YAAY,UAAU,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA,QAC1D;AAAA,MACF;AACA,qBAAe,YAAY,sBAAsB,GAAG;AAAA,IACtD;AAAA,IACA,CAAC,aAAa,aAAa,cAAc;AAAA,EAC3C;AAEA,QAAM,iBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,OAAO;AACpB,UAAE,eAAe;AAAA,MACnB;AACA,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,sBAAc,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA,MAC/C;AAAA,IACF;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,SAAO,EAAE,gBAAgB,cAAc,cAAc;AACvD;",
   "names": []
 }

package/dist/esm/config/usePie.js

@@ -9,10 +9,15 @@ const usePie = (props) => {
   const innerHeight = height - margin.top - margin.bottom;
   const innerWidth = width - margin.left - margin.right;
   const groups = series.map((serie) => serie.name);
+  const currentData = useMemo(
+    () => series.map((serie, i) => ({
+      ...serie,
+      key: `${serie.name}-${i}`
+    })),
+    [series]
+  );
   const data = series.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.data }), {});
-  const pieGenerator = pie().value(function(d) {
-    return d[1];
-  }).sort(null).padAngle(0.02);
+  const pieGenerator = pie().value((d) => d[1]).sort(null).padAngle(0.02);
   const pieData = pieGenerator(Object.entries(data));
   return useMemo(
     () => ({
@@ -24,9 +29,10 @@ const usePie = (props) => {
       containerRef,
       activeSerie,
       pieData,
-      setActiveSerie
+      setActiveSerie,
+      currentData
     }),
-    [props, pieData, innerHeight, innerWidth, groups, activeSerie]
+    [props, innerHeight, innerWidth, groups, activeSerie, pieData, currentData]
   );
 };
 export {

package/dist/esm/config/usePie.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/usePie.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState, useRef } from 'react';\nimport { pie } from 'd3';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSPieT } from '../react-desc-prop-types';\n\nexport const usePie = (props: DSPieT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, width, height, margin } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [activeSerie, setActiveSerie] = useState('');\n\n  const innerHeight = height - margin.top - margin.bottom;\n  const innerWidth = width - margin.left - margin.right;\n\n  const groups = series.map((serie) => serie.name);\n\n  const data = series.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.data }), {});\n  const pieGenerator = pie()\n    .value(function (d) {\n      return d[1];\n    })\n    .sort(null)\n    .padAngle(0.02);\n  const pieData = pieGenerator(Object.entries(data));\n\n  return useMemo(\n    () => ({\n      props,\n      innerHeight,\n      innerWidth,\n      groups,\n      svgRef,\n      containerRef,\n      activeSerie,\n      pieData,\n      setActiveSerie,\n    }),\n    [props, pieData, innerHeight, innerWidth, groups, activeSerie],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,UAAU,cAAc;AAC1C,SAAS,WAAW;AAIb,MAAM,SAAS,CAAC,UAAwB;AAG7C,QAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,IAAI;AAE1C,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,cAAc,SAAS,OAAO,MAAM,OAAO;AACjD,QAAM,aAAa,QAAQ,OAAO,OAAO,OAAO;AAEhD,QAAM,SAAS,OAAO,IAAI,CAAC,UAAU,MAAM,IAAI;AAE/C,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK,IAAI,CAAC,CAAC;AAClF,QAAM,eAAe,IAAI,EACtB,MAAM,SAAU,GAAG;AAClB,WAAO,EAAE;AAAA,EACX,CAAC,EACA,KAAK,IAAI,EACT,SAAS,IAAI;AAChB,QAAM,UAAU,aAAa,OAAO,QAAQ,IAAI,CAAC;AAEjD,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,SAAS,aAAa,YAAY,QAAQ,WAAW;AAAA,EAC/D;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState, useRef } from 'react';\nimport { pie } from 'd3';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSPieT } from '../react-desc-prop-types';\n\nexport const usePie = (props: DSPieT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, width, height, margin } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [activeSerie, setActiveSerie] = useState('');\n\n  const innerHeight = height - margin.top - margin.bottom;\n  const innerWidth = width - margin.left - margin.right;\n\n  const groups = series.map((serie) => serie.name);\n\n  const currentData = useMemo(\n    () =>\n      series.map((serie, i) => ({\n        ...serie,\n        key: `${serie.name}-${i}`,\n      })),\n    [series],\n  );\n  const data = series.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.data }), {});\n  const pieGenerator = pie()\n    .value((d) => d[1])\n    .sort(null)\n    .padAngle(0.02);\n  const pieData = pieGenerator(Object.entries(data));\n\n  return useMemo(\n    () => ({\n      props,\n      innerHeight,\n      innerWidth,\n      groups,\n      svgRef,\n      containerRef,\n      activeSerie,\n      pieData,\n      setActiveSerie,\n      currentData,\n    }),\n    [props, innerHeight, innerWidth, groups, activeSerie, pieData, currentData],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,UAAU,cAAc;AAC1C,SAAS,WAAW;AAIb,MAAM,SAAS,CAAC,UAAwB;AAG7C,QAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,IAAI;AAE1C,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,cAAc,SAAS,OAAO,MAAM,OAAO;AACjD,QAAM,aAAa,QAAQ,OAAO,OAAO,OAAO;AAEhD,QAAM,SAAS,OAAO,IAAI,CAAC,UAAU,MAAM,IAAI;AAE/C,QAAM,cAAc;AAAA,IAClB,MACE,OAAO,IAAI,CAAC,OAAO,OAAO;AAAA,MACxB,GAAG;AAAA,MACH,KAAK,GAAG,MAAM,QAAQ;AAAA,IACxB,EAAE;AAAA,IACJ,CAAC,MAAM;AAAA,EACT;AACA,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK,IAAI,CAAC,CAAC;AAClF,QAAM,eAAe,IAAI,EACtB,MAAM,CAAC,MAAM,EAAE,EAAE,EACjB,KAAK,IAAI,EACT,SAAS,IAAI;AAChB,QAAM,UAAU,aAAa,OAAO,QAAQ,IAAI,CAAC;AAEjD,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,aAAa,YAAY,QAAQ,aAAa,SAAS,WAAW;AAAA,EAC5E;AACF;",
   "names": []
 }

package/dist/esm/helpers/colorPallet.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+const COLOR_PALLET = {
+  "blue-100": "#1E79C2",
+  "blue-200": "#165A91",
+  "blue-400": "#10426A",
+  "magenta-100": "#CA3981",
+  "magenta-200": "#832553",
+  "magenta-400": "#6E1F46",
+  "orange-100": "#B25119",
+  "orange-200": "#853C12",
+  "orange-400": "#612C0D",
+  "purple-100": "#8E49B2",
+  "purple-200": "#61327A",
+  "purple-400": "#4D2861",
+  "green-100": "#007A78",
+  "green-200": "#005B59",
+  "green-400": "#004241",
+  "grey-100": "#697489",
+  "grey-200": "#4E5666",
+  "grey-400": "#323842"
+};
+export {
+  COLOR_PALLET
+};
+//# sourceMappingURL=colorPallet.js.map

package/dist/esm/helpers/colorPallet.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/helpers/colorPallet.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const COLOR_PALLET = {\n  'blue-100': '#1E79C2',\n  'blue-200': '#165A91',\n  'blue-400': '#10426A',\n  'magenta-100': '#CA3981',\n  'magenta-200': '#832553',\n  'magenta-400': '#6E1F46',\n  'orange-100': '#B25119',\n  'orange-200': '#853C12',\n  'orange-400': '#612C0D',\n  'purple-100': '#8E49B2',\n  'purple-200': '#61327A',\n  'purple-400': '#4D2861',\n  'green-100': '#007A78',\n  'green-200': '#005B59',\n  'green-400': '#004241',\n  'grey-100': '#697489',\n  'grey-200': '#4E5666',\n  'grey-400': '#323842',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAAA,EAC1B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACd;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { PieChart } from "./Pie";
+import { COLOR_PALLET } from "./helpers/colorPallet";
 export {
+  COLOR_PALLET,
   PieChart
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { PieChart } from './Pie';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { PieChart } from './Pie';\nexport { COLOR_PALLET } from './helpers/colorPallet';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;",
   "names": []
 }

package/dist/esm/parts/ChartContainer.js

@@ -2,13 +2,13 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { StyledSVGWrapper } from "../styles";
+import { useKeyboardNavigation } from "../config/useKeyboardNavigation";
 import { PieContext } from "../PieContext";
 const ChartContainer = ({ children }) => {
   const {
     props: { width, height, margin, responsive },
     containerRef,
-    activeSerie,
-    svgRef
+    activeSerie
   } = useContext(PieContext);
   const dimensions = useMemo(
     () => responsive ? {
@@ -19,10 +19,15 @@ const ChartContainer = ({ children }) => {
     },
     [height, responsive, width]
   );
+  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();
   return /* @__PURE__ */ jsx(StyledSVGWrapper, {
     ref: containerRef,
+    onKeyDown: onInputKeyDown,
+    tabIndex: activeSerie ? -1 : 0,
+    onBlur: handleOnBlur,
+    onFocus: handleOnFocus,
+    onMouseDown: (e) => e.preventDefault(),
     children: /* @__PURE__ */ jsx("svg", {
-      ref: svgRef,
       ...dimensions,
       children: /* @__PURE__ */ jsx("g", {
         className: "container",

package/dist/esm/parts/ChartContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ChartContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { PieContext } from '../PieContext';\n// import { useKeyboardNavigation } from '../config/useKeyboardNavigation';\ninterface ChartContainerT {\n  children: JSX.Element | JSX.Element[] | string | string[];\n}\nexport const ChartContainer: React.ComponentType<ChartContainerT> = ({ children }) => {\n  const {\n    props: { width, height, margin, responsive },\n    containerRef,\n    activeSerie,\n    svgRef,\n  } = useContext(PieContext);\n\n  const dimensions = useMemo(\n    () =>\n      responsive\n        ? {\n            viewBox: `0 0 ${width} ${height}`,\n          }\n        : {\n            width,\n            height,\n          },\n    [height, responsive, width],\n  );\n  //  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n  return (\n    <StyledSVGWrapper\n      ref={containerRef}\n      // onKeyDown={onInputKeyDown}\n      // aria-hidden=\"true\"\n      // tabIndex={activeSerie ? -1 : 0}\n      // onBlur={handleOnBlur}\n      // onFocus={handleOnFocus}\n      // onMouseDown={(e) => e.preventDefault()}\n    >\n      <svg ref={svgRef} {...dimensions}>\n        <g className=\"container\" transform={`translate(${margin.left},${margin.top})`}>\n          {children}\n        </g>\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,wBAAwB;AAEjC,SAAS,kBAAkB;AAKpB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,QAAQ,WAAW;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,UAAU;AAEzB,QAAM,aAAa;AAAA,IACjB,MACE,aACI;AAAA,MACE,SAAS,OAAO,SAAS;AAAA,IAC3B,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACN,CAAC,QAAQ,YAAY,KAAK;AAAA,EAC5B;AAEA,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IAQL,8BAAC;AAAA,MAAI,KAAK;AAAA,MAAS,GAAG;AAAA,MACpB,8BAAC;AAAA,QAAE,WAAU;AAAA,QAAY,WAAW,aAAa,OAAO,QAAQ,OAAO;AAAA,QACpE;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledSVGWrapper } from '../styles';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { PieContext } from '../PieContext';\n// import { useKeyboardNavigation } from '../config/useKeyboardNavigation';\ninterface ChartContainerT {\n  children: JSX.Element | JSX.Element[] | string | string[];\n}\nexport const ChartContainer: React.ComponentType<ChartContainerT> = ({ children }) => {\n  const {\n    props: { width, height, margin, responsive },\n    containerRef,\n    activeSerie,\n  } = useContext(PieContext);\n\n  const dimensions = useMemo(\n    () =>\n      responsive\n        ? {\n            viewBox: `0 0 ${width} ${height}`,\n          }\n        : {\n            width,\n            height,\n          },\n    [height, responsive, width],\n  );\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n  return (\n    <StyledSVGWrapper\n      ref={containerRef}\n      onKeyDown={onInputKeyDown}\n      // aria-hidden=\"true\"\n      tabIndex={activeSerie ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onMouseDown={(e) => e.preventDefault()}\n    >\n      <svg {...dimensions}>\n        <g className=\"container\" transform={`translate(${margin.left},${margin.top})`}>\n          {children}\n        </g>\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAKpB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,QAAQ,WAAW;AAAA,IAC3C;AAAA,IACA;AAAA,EACF,IAAI,WAAW,UAAU;AAEzB,QAAM,aAAa;AAAA,IACjB,MACE,aACI;AAAA,MACE,SAAS,OAAO,SAAS;AAAA,IAC3B,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACN,CAAC,QAAQ,YAAY,KAAK;AAAA,EAC5B;AACA,QAAM,EAAE,gBAAgB,cAAc,cAAc,IAAI,sBAAsB;AAC9E,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW;AAAA,IAEX,UAAU,cAAc,KAAK;AAAA,IAC7B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,IAErC,8BAAC;AAAA,MAAK,GAAG;AAAA,MACP,8BAAC;AAAA,QAAE,WAAU;AAAA,QAAY,WAAW,aAAa,OAAO,QAAQ,OAAO;AAAA,QACpE;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Pie.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { Slice } from "./Slice";
 import { PieContext } from "../PieContext";
+import { StyledInnerText } from "../styles";
 const Pie = () => {
   const {
     innerHeight,
@@ -18,14 +19,14 @@ const Pie = () => {
       pieData.map((slice) => /* @__PURE__ */ jsx(Slice, {
         data: slice
       }, slice.index)),
-      !isHalfPie && label ? /* @__PURE__ */ jsx("text", {
+      !isHalfPie && label ? /* @__PURE__ */ jsx(StyledInnerText, {
         x: 0,
         y: 0,
         textAnchor: "middle",
         alignmentBaseline: "middle",
         children: label
       }) : null,
-      isHalfPie && label ? /* @__PURE__ */ jsx("text", {
+      isHalfPie && label ? /* @__PURE__ */ jsx(StyledInnerText, {
         x: 0,
         y: -innerRadius / 4,
         textAnchor: "middle",

package/dist/esm/parts/Pie.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Pie.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Slice } from './Slice';\nimport { PieContext } from '../PieContext';\n\nexport const Pie = () => {\n  const {\n    innerHeight,\n    innerWidth,\n    pieData,\n\n    props: { isHalfPie, label, innerRadius },\n  } = useContext(PieContext);\n\n  const radius = Math.min(innerWidth, innerHeight) / 2;\n\n  const currentInnerHeight = isHalfPie ? innerHeight : innerHeight / 2;\n  return (\n    <g transform={`translate(${innerWidth / 2},${currentInnerHeight})`}>\n      {pieData.map((slice) => (\n        <Slice key={slice.index} data={slice} />\n      ))}\n      {!isHalfPie && label ? (\n        <text x={0} y={0} textAnchor=\"middle\" alignmentBaseline=\"middle\">\n          {label}\n        </text>\n      ) : null}\n      {isHalfPie && label ? (\n        <text x={0} y={-innerRadius / 4} textAnchor=\"middle\" alignmentBaseline=\"middle\">\n          {label}\n        </text>\n      ) : null}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAEpB,MAAM,MAAM,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEA,OAAO,EAAE,WAAW,OAAO,YAAY;AAAA,EACzC,IAAI,WAAW,UAAU;AAEzB,QAAM,SAAS,KAAK,IAAI,YAAY,WAAW,IAAI;AAEnD,QAAM,qBAAqB,YAAY,cAAc,cAAc;AACnE,SACE,qBAAC;AAAA,IAAE,WAAW,aAAa,aAAa,KAAK;AAAA,IAC1C;AAAA,cAAQ,IAAI,CAAC,UACZ,oBAAC;AAAA,QAAwB,MAAM;AAAA,SAAnB,MAAM,KAAoB,CACvC;AAAA,MACA,CAAC,aAAa,QACb,oBAAC;AAAA,QAAK,GAAG;AAAA,QAAG,GAAG;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QACrD;AAAA,OACH,IACE;AAAA,MACH,aAAa,QACZ,oBAAC;AAAA,QAAK,GAAG;AAAA,QAAG,GAAG,CAAC,cAAc;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QACpE;AAAA,OACH,IACE;AAAA;AAAA,GACN;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Slice } from './Slice';\nimport { PieContext } from '../PieContext';\nimport { StyledInnerText } from '../styles';\nexport const Pie = () => {\n  const {\n    innerHeight,\n    innerWidth,\n    pieData,\n\n    props: { isHalfPie, label, innerRadius },\n  } = useContext(PieContext);\n\n  const radius = Math.min(innerWidth, innerHeight) / 2;\n\n  const currentInnerHeight = isHalfPie ? innerHeight : innerHeight / 2;\n  return (\n    <g transform={`translate(${innerWidth / 2},${currentInnerHeight})`}>\n      {pieData.map((slice) => (\n        <Slice key={slice.index} data={slice} />\n      ))}\n      {!isHalfPie && label ? (\n        <StyledInnerText x={0} y={0} textAnchor=\"middle\" alignmentBaseline=\"middle\">\n          {label}\n        </StyledInnerText>\n      ) : null}\n      {isHalfPie && label ? (\n        <StyledInnerText x={0} y={-innerRadius / 4} textAnchor=\"middle\" alignmentBaseline=\"middle\">\n          {label}\n        </StyledInnerText>\n      ) : null}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AACzB,MAAM,MAAM,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEA,OAAO,EAAE,WAAW,OAAO,YAAY;AAAA,EACzC,IAAI,WAAW,UAAU;AAEzB,QAAM,SAAS,KAAK,IAAI,YAAY,WAAW,IAAI;AAEnD,QAAM,qBAAqB,YAAY,cAAc,cAAc;AACnE,SACE,qBAAC;AAAA,IAAE,WAAW,aAAa,aAAa,KAAK;AAAA,IAC1C;AAAA,cAAQ,IAAI,CAAC,UACZ,oBAAC;AAAA,QAAwB,MAAM;AAAA,SAAnB,MAAM,KAAoB,CACvC;AAAA,MACA,CAAC,aAAa,QACb,oBAAC;AAAA,QAAgB,GAAG;AAAA,QAAG,GAAG;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QAChE;AAAA,OACH,IACE;AAAA,MACH,aAAa,QACZ,oBAAC;AAAA,QAAgB,GAAG;AAAA,QAAG,GAAG,CAAC,cAAc;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QAC/E;AAAA,OACH,IACE;AAAA;AAAA,GACN;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Slice.js

@@ -1,70 +1,85 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useMemo, useRef, useContext } from "react";
+import { useState, useEffect, useCallback, useMemo, useRef, useContext } from "react";
 import { arc, select } from "d3";
+import { DSPopperJS } from "@elliemae/ds-popperjs";
 import { PieContext } from "../PieContext";
-import { Tooltip } from "./Tooltip";
+import { COLOR_PALLET } from "../helpers/colorPallet";
+import { StyledTooltipContainer, StyledMouseOverDetectionBox } from "../styles";
 const Slice = ({ data }) => {
   const {
     innerHeight,
     innerWidth,
     activeSerie,
     setActiveSerie,
-    props: { series, innerRadius: innerRadiusProp, isHalfPie, TooltipRenderer }
+    props: { series, innerRadius, isHalfPie, TooltipRenderer }
   } = useContext(PieContext);
-  const [isTooltipShown, setIsTooltipShown] = useState(false);
-  const innerRadius = innerRadiusProp ?? 0;
-  const tooltipRef = useRef(null);
   const arcRef = useRef(null);
+  const arcFocusedRef = useRef(null);
   const radius = isHalfPie ? Math.min(innerWidth, innerHeight) : Math.min(innerWidth, innerHeight) / 2;
-  const { startAngle, endAngle, index, value } = data;
+  const { startAngle, endAngle, index } = data;
   const currentStartAngle = isHalfPie ? startAngle / 2 : startAngle;
   const currentEndAngle = isHalfPie ? endAngle / 2 : endAngle;
   const serieData = series?.find((serie) => serie.name === data.data[0]);
   const { color, name } = serieData;
-  const sliceData = arc().innerRadius(innerRadius).outerRadius(radius).startAngle(currentStartAngle).endAngle(currentEndAngle);
+  const sliceData = useMemo(
+    () => arc().innerRadius(innerRadius ?? 0).outerRadius(radius).startAngle(currentStartAngle).endAngle(currentEndAngle)(),
+    [currentEndAngle, currentStartAngle, innerRadius, radius]
+  );
+  const sliceOver = useMemo(
+    () => arc().innerRadius(innerRadius ?? 0).outerRadius(radius + 5).startAngle(currentStartAngle).endAngle(currentEndAngle),
+    [currentEndAngle, currentStartAngle, innerRadius, radius]
+  );
   const deltaAngle = currentStartAngle + (currentEndAngle - currentStartAngle) / 2;
   const x = radius * Math.sin(deltaAngle);
   const y = -radius * Math.cos(deltaAngle);
-  const isOpen = useMemo(
-    () => activeSerie === "" && isTooltipShown || activeSerie === `${name}-${index}` && !isTooltipShown,
-    [activeSerie, index, isTooltipShown, name]
-  );
+  const isFocus = useMemo(() => activeSerie === `${name}-${index}`, [activeSerie, index, name]);
+  const [isHover, setIsHover] = useState(false);
   useEffect(() => {
     if (arcRef.current) {
-      select(arcRef.current).attr("d", sliceData());
+      select(arcRef.current).attr("d", sliceData);
     }
-  }, [sliceData]);
+  }, [sliceData, sliceOver]);
+  const [referenceElement, setReferenceElement] = useState();
+  const handleMouseEnter = useCallback(() => {
+    setActiveSerie(`${name}-${index}`);
+    setIsHover(true);
+    if (!isHalfPie)
+      select(arcRef.current).transition().attr("d", sliceOver).duration(300);
+  }, [index, isHalfPie, name, setActiveSerie, sliceOver]);
+  const handleOnMouseLeave = useCallback(() => {
+    setActiveSerie("");
+    setIsHover(false);
+    if (!isHalfPie)
+      select(arcRef.current).transition().attr("d", sliceData).duration(300);
+  }, [isHalfPie, setActiveSerie, sliceData]);
   return /* @__PURE__ */ jsxs("g", {
-    onMouseEnter: () => {
-      setActiveSerie("");
-      setIsTooltipShown(true);
-    },
-    onMouseLeave: (e) => {
-      setIsTooltipShown(false);
-    },
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleOnMouseLeave,
     transform: isHalfPie ? "rotate(-90)" : "",
     children: [
       /* @__PURE__ */ jsx("path", {
         ref: arcRef,
-        fill: color,
+        fill: COLOR_PALLET[color] ?? color,
         stroke: "white"
       }),
-      name !== "no-data" && TooltipRenderer && /* @__PURE__ */ jsx("foreignObject", {
+      name !== "no-data" && TooltipRenderer && isFocus && /* @__PURE__ */ jsx("foreignObject", {
         x,
         y,
-        children: /* @__PURE__ */ jsx(Tooltip, {
-          isTooltipShown: isOpen,
-          withoutAnimation: true,
-          onFocus: () => {
-            setActiveSerie(`${name}-${index}`);
-          },
-          onBlur: () => {
-            setActiveSerie("");
-          },
-          startPlacementPreference: "bottom",
-          children: /* @__PURE__ */ jsx(TooltipRenderer, {
-            data: serieData
+        children: /* @__PURE__ */ jsx("div", {
+          ref: setReferenceElement,
+          children: /* @__PURE__ */ jsxs(DSPopperJS, {
+            referenceElement,
+            showPopover: true,
+            zIndex: 3e3,
+            children: [
+              /* @__PURE__ */ jsx(StyledTooltipContainer, {
+                children: /* @__PURE__ */ jsx(TooltipRenderer, {
+                  data: serieData
+                })
+              }),
+              /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {})
+            ]
           })
         })
       })