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

package/dist/cjs/PieContext.js

@@ -29,16 +29,6 @@ __export(PieContext_exports, {
 module.exports = __toCommonJS(PieContext_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_d3 = require("d3");
-const pieChartdefaultContext = {
-  innerHeight: 0,
-  innerWidth: 0,
-  activeSerie: "",
-  setActiveSerie: () => {
-  },
-  containerRef: (0, import_react.createRef)(),
-  groups: [],
-  colorScale: (0, import_d3.scaleOrdinal)()
-};
+const pieChartdefaultContext = {};
 const PieContext = (0, import_react.createContext)(pieChartdefaultContext);
 //# sourceMappingURL=PieContext.js.map

package/dist/cjs/PieContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PieContext.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,gBAA2C;AAc3C,MAAM,yBAA2C;AAAA,EAE/C,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,kBAAc,wBAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,gBAAY,wBAAa;AAC3B;AAEO,MAAM,iBAAa,4BAAc,sBAAsB;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AAezC,MAAM,yBAA2C,CASjD;AAEO,MAAM,iBAAa,4BAAc,sBAAsB;",
   "names": []
 }

package/dist/cjs/config/useKeyboardNavigation.js

@@ -39,62 +39,27 @@ const findInCircularList = (list, from, step = 1) => {
   return from;
 };
 const useKeyboardNavigation = () => {
-  const {
-    activePoint,
-    setActivePoint,
-    containerRef,
-    groups,
-    yScale,
-    props: { data }
-  } = (0, import_react.useContext)(import_PieContext.PieContext);
-  const [currentFocusedDataset, setCurrentFocusedDataset] = (0, import_react.useState)(groups[0]);
-  const currentGroup = (0, import_react.useMemo)(() => data.find((d) => d.name === currentFocusedDataset), [currentFocusedDataset, data]);
-  const currentItemIndex = (0, import_react.useMemo)(
-    () => currentGroup.data.findIndex((opt) => opt.key === activePoint),
-    [activePoint, currentGroup]
-  );
-  const handleOnFocus = (0, import_react.useCallback)(
-    (e) => {
-      console.log("focus");
-      if (containerRef?.current === e.target) {
-        setActivePoint(currentGroup.data[0].key);
-      }
-    },
-    [containerRef, currentGroup, setActivePoint]
-  );
+  const { activeSerie, setActiveSerie, containerRef, currentData } = (0, import_react.useContext)(import_PieContext.PieContext);
+  const handleOnFocus = (0, import_react.useCallback)(() => {
+    setActiveSerie(currentData[0].key);
+  }, [currentData, setActiveSerie]);
   const handleOnBlur = (0, import_react.useCallback)(() => {
     setTimeout(() => {
       if (!containerRef?.current?.contains(document.activeElement) || containerRef?.current === document.activeElement) {
-        console.log("blur");
-        setActivePoint("");
+        setActiveSerie("");
       }
     });
-  }, [containerRef, setActivePoint]);
+  }, [containerRef, setActiveSerie]);
   const navigateSerie = (0, import_react.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 = (0, import_react.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 = (0, import_react.useCallback)(
     (e) => {
@@ -102,19 +67,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/cjs/config/useKeyboardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useKeyboardNavigation.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAwC;AACxC,wBAA2B;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,QAAI,yBAAW,4BAAU;AAIxF,QAAM,oBAAyD,0BAAY,MAAM;AAC/E,mBAAe,YAAY,GAAG,GAAG;AAAA,EACnC,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,mBAA0D,0BAAY,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,oBAAgB;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,qBAA+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/cjs/config/usePie.js

@@ -38,10 +38,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 = (0, import_react.useMemo)(
+    () => series.map((serie, i) => ({
+      ...serie,
+      key: `${serie.name}-${i}`
+    })),
+    [series]
+  );
   const data = series.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.data }), {});
-  const pieGenerator = (0, import_d3.pie)().value(function(d) {
-    return d[1];
-  }).sort(null).padAngle(0.02);
+  const pieGenerator = (0, import_d3.pie)().value((d) => d[1]).sort(null).padAngle(0.02);
   const pieData = pieGenerator(Object.entries(data));
   return (0, import_react.useMemo)(
     () => ({
@@ -53,9 +58,10 @@ const usePie = (props) => {
       containerRef,
       activeSerie,
       pieData,
-      setActiveSerie
+      setActiveSerie,
+      currentData
     }),
-    [props, pieData, innerHeight, innerWidth, groups, activeSerie]
+    [props, innerHeight, innerWidth, groups, activeSerie, pieData, currentData]
   );
 };
 //# sourceMappingURL=usePie.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/usePie.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0C;AAC1C,gBAAoB;AAIb,MAAM,SAAS,CAAC,UAAwB;AAG7C,QAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,IAAI;AAE1C,QAAM,mBAAe,qBAAO,IAAI;AAChC,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,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,mBAAe,eAAI,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,aAAO;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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0C;AAC1C,gBAAoB;AAIb,MAAM,SAAS,CAAC,UAAwB;AAG7C,QAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,IAAI;AAE1C,QAAM,mBAAe,qBAAO,IAAI;AAChC,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,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,kBAAc;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,mBAAe,eAAI,EACtB,MAAM,CAAC,MAAM,EAAE,EAAE,EACjB,KAAK,IAAI,EACT,SAAS,IAAI;AAChB,QAAM,UAAU,aAAa,OAAO,QAAQ,IAAI,CAAC;AAEjD,aAAO;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/cjs/{parts/Tooltip.js → helpers/colorPallet.js}

@@ -22,34 +22,30 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Tooltip_exports = {};
-__export(Tooltip_exports, {
-  Tooltip: () => Tooltip
+var colorPallet_exports = {};
+__export(colorPallet_exports, {
+  COLOR_PALLET: () => COLOR_PALLET
 });
-module.exports = __toCommonJS(Tooltip_exports);
+module.exports = __toCommonJS(colorPallet_exports);
 var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ds_popperjs = require("@elliemae/ds-popperjs");
-const Tooltip = (props) => {
-  const { children, innerRef, isTooltipShown, onFocus, onBlur, ...extraPopperJsProps } = props;
-  const [referenceElement, setReferenceElement] = (0, import_react.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-    onFocus,
-    onBlur,
-    tabIndex: 0,
-    ref: setReferenceElement,
-    className: "myclass",
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_popperjs.DSPopperJS, {
-      referenceElement,
-      showPopover: isTooltipShown,
-      zIndex: 3e3,
-      ...extraPopperJsProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-        style: { backgroundColor: "white" },
-        children
-      })
-    })
-  });
+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"
 };
-//# sourceMappingURL=Tooltip.js.map
+//# sourceMappingURL=colorPallet.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/colorPallet.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,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/cjs/index.js

@@ -24,9 +24,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
+  COLOR_PALLET: () => import_colorPallet.COLOR_PALLET,
   PieChart: () => import_Pie.PieChart
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 var import_Pie = require("./Pie");
+var import_colorPallet = require("./helpers/colorPallet");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

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

package/dist/cjs/parts/ChartContainer.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/ChartContainer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,oBAAiC;AAEjC,wBAA2B;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,QAAI,yBAAW,4BAAU;AAEzB,QAAM,iBAAa;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,4CAAC;AAAA,IACC,KAAK;AAAA,IAQL,sDAAC;AAAA,MAAI,KAAK;AAAA,MAAS,GAAG;AAAA,MACpB,sDAAC;AAAA,QAAE,WAAU;AAAA,QAAY,WAAW,aAAa,OAAO,QAAQ,OAAO;AAAA,QACpE;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,oBAAiC;AACjC,mCAAsC;AACtC,wBAA2B;AAKpB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,QAAQ,WAAW;AAAA,IAC3C;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,4BAAU;AAEzB,QAAM,iBAAa;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,QAAI,oDAAsB;AAC9E,SACE,4CAAC;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,sDAAC;AAAA,MAAK,GAAG;AAAA,MACP,sDAAC;AAAA,QAAE,WAAU;AAAA,QAAY,WAAW,aAAa,OAAO,QAAQ,OAAO;AAAA,QACpE;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Pie.js

@@ -32,6 +32,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_Slice = require("./Slice");
 var import_PieContext = require("../PieContext");
+var import_styles = require("../styles");
 const Pie = () => {
   const {
     innerHeight,
@@ -47,14 +48,14 @@ const Pie = () => {
       pieData.map((slice) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Slice.Slice, {
         data: slice
       }, slice.index)),
-      !isHalfPie && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+      !isHalfPie && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledInnerText, {
         x: 0,
         y: 0,
         textAnchor: "middle",
         alignmentBaseline: "middle",
         children: label
       }) : null,
-      isHalfPie && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+      isHalfPie && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledInnerText, {
         x: 0,
         y: -innerRadius / 4,
         textAnchor: "middle",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Pie.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,mBAAsB;AACtB,wBAA2B;AAEpB,MAAM,MAAM,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEA,OAAO,EAAE,WAAW,OAAO,YAAY;AAAA,EACzC,QAAI,yBAAW,4BAAU;AAEzB,QAAM,SAAS,KAAK,IAAI,YAAY,WAAW,IAAI;AAEnD,QAAM,qBAAqB,YAAY,cAAc,cAAc;AACnE,SACE,6CAAC;AAAA,IAAE,WAAW,aAAa,aAAa,KAAK;AAAA,IAC1C;AAAA,cAAQ,IAAI,CAAC,UACZ,4CAAC;AAAA,QAAwB,MAAM;AAAA,SAAnB,MAAM,KAAoB,CACvC;AAAA,MACA,CAAC,aAAa,QACb,4CAAC;AAAA,QAAK,GAAG;AAAA,QAAG,GAAG;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QACrD;AAAA,OACH,IACE;AAAA,MACH,aAAa,QACZ,4CAAC;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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,mBAAsB;AACtB,wBAA2B;AAC3B,oBAAgC;AACzB,MAAM,MAAM,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEA,OAAO,EAAE,WAAW,OAAO,YAAY;AAAA,EACzC,QAAI,yBAAW,4BAAU;AAEzB,QAAM,SAAS,KAAK,IAAI,YAAY,WAAW,IAAI;AAEnD,QAAM,qBAAqB,YAAY,cAAc,cAAc;AACnE,SACE,6CAAC;AAAA,IAAE,WAAW,aAAa,aAAa,KAAK;AAAA,IAC1C;AAAA,cAAQ,IAAI,CAAC,UACZ,4CAAC;AAAA,QAAwB,MAAM;AAAA,SAAnB,MAAM,KAAoB,CACvC;AAAA,MACA,CAAC,aAAa,QACb,4CAAC;AAAA,QAAgB,GAAG;AAAA,QAAG,GAAG;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QAChE;AAAA,OACH,IACE;AAAA,MACH,aAAa,QACZ,4CAAC;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/cjs/parts/Slice.js

@@ -31,69 +31,84 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_d3 = require("d3");
+var import_ds_popperjs = require("@elliemae/ds-popperjs");
 var import_PieContext = require("../PieContext");
-var import_Tooltip = require("./Tooltip");
+var import_colorPallet = require("../helpers/colorPallet");
+var import_styles = require("../styles");
 const Slice = ({ data }) => {
   const {
     innerHeight,
     innerWidth,
     activeSerie,
     setActiveSerie,
-    props: { series, innerRadius: innerRadiusProp, isHalfPie, TooltipRenderer }
+    props: { series, innerRadius, isHalfPie, TooltipRenderer }
   } = (0, import_react.useContext)(import_PieContext.PieContext);
-  const [isTooltipShown, setIsTooltipShown] = (0, import_react.useState)(false);
-  const innerRadius = innerRadiusProp ?? 0;
-  const tooltipRef = (0, import_react.useRef)(null);
   const arcRef = (0, import_react.useRef)(null);
+  const arcFocusedRef = (0, import_react.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 = (0, import_d3.arc)().innerRadius(innerRadius).outerRadius(radius).startAngle(currentStartAngle).endAngle(currentEndAngle);
+  const sliceData = (0, import_react.useMemo)(
+    () => (0, import_d3.arc)().innerRadius(innerRadius ?? 0).outerRadius(radius).startAngle(currentStartAngle).endAngle(currentEndAngle)(),
+    [currentEndAngle, currentStartAngle, innerRadius, radius]
+  );
+  const sliceOver = (0, import_react.useMemo)(
+    () => (0, import_d3.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 = (0, import_react.useMemo)(
-    () => activeSerie === "" && isTooltipShown || activeSerie === `${name}-${index}` && !isTooltipShown,
-    [activeSerie, index, isTooltipShown, name]
-  );
+  const isFocus = (0, import_react.useMemo)(() => activeSerie === `${name}-${index}`, [activeSerie, index, name]);
+  const [isHover, setIsHover] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
     if (arcRef.current) {
-      (0, import_d3.select)(arcRef.current).attr("d", sliceData());
+      (0, import_d3.select)(arcRef.current).attr("d", sliceData);
     }
-  }, [sliceData]);
+  }, [sliceData, sliceOver]);
+  const [referenceElement, setReferenceElement] = (0, import_react.useState)();
+  const handleMouseEnter = (0, import_react.useCallback)(() => {
+    setActiveSerie(`${name}-${index}`);
+    setIsHover(true);
+    if (!isHalfPie)
+      (0, import_d3.select)(arcRef.current).transition().attr("d", sliceOver).duration(300);
+  }, [index, isHalfPie, name, setActiveSerie, sliceOver]);
+  const handleOnMouseLeave = (0, import_react.useCallback)(() => {
+    setActiveSerie("");
+    setIsHover(false);
+    if (!isHalfPie)
+      (0, import_d3.select)(arcRef.current).transition().attr("d", sliceData).duration(300);
+  }, [isHalfPie, setActiveSerie, sliceData]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-    onMouseEnter: () => {
-      setActiveSerie("");
-      setIsTooltipShown(true);
-    },
-    onMouseLeave: (e) => {
-      setIsTooltipShown(false);
-    },
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleOnMouseLeave,
     transform: isHalfPie ? "rotate(-90)" : "",
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
         ref: arcRef,
-        fill: color,
+        fill: import_colorPallet.COLOR_PALLET[color] ?? color,
         stroke: "white"
       }),
-      name !== "no-data" && TooltipRenderer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", {
+      name !== "no-data" && TooltipRenderer && isFocus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", {
         x,
         y,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, {
-          isTooltipShown: isOpen,
-          withoutAnimation: true,
-          onFocus: () => {
-            setActiveSerie(`${name}-${index}`);
-          },
-          onBlur: () => {
-            setActiveSerie("");
-          },
-          startPlacementPreference: "bottom",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, {
-            data: serieData
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+          ref: setReferenceElement,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_popperjs.DSPopperJS, {
+            referenceElement,
+            showPopover: true,
+            zIndex: 3e3,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, {
+                  data: serieData
+                })
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {})
+            ]
           })
         })
       })

package/dist/cjs/parts/Slice.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Slice.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useEffect, useMemo, useRef, useContext } from 'react';\nimport { arc, select } from 'd3';\nimport { PieContext } from '../PieContext';\nimport { Tooltip } from './Tooltip';\nexport const Slice = ({ data }) => {\n  const {\n    innerHeight,\n    innerWidth,\n    activeSerie,\n    setActiveSerie,\n    props: { series, innerRadius: innerRadiusProp, isHalfPie, TooltipRenderer },\n  } = useContext(PieContext);\n\n  const [isTooltipShown, setIsTooltipShown] = useState(false);\n\n  const innerRadius = innerRadiusProp ?? 0;\n  const tooltipRef = useRef(null);\n  const arcRef = useRef(null);\n\n  const radius = isHalfPie ? Math.min(innerWidth, innerHeight) : Math.min(innerWidth, innerHeight) / 2;\n  const { startAngle, endAngle, index, value } = data;\n  const currentStartAngle = isHalfPie ? startAngle / 2 : startAngle;\n  const currentEndAngle = isHalfPie ? endAngle / 2 : endAngle;\n\n  const serieData = series?.find((serie) => serie.name === data.data[0]);\n  const { color, name } = serieData;\n\n  const sliceData = arc()\n    .innerRadius(innerRadius)\n    .outerRadius(radius)\n    .startAngle(currentStartAngle)\n    .endAngle(currentEndAngle);\n  const deltaAngle = currentStartAngle + (currentEndAngle - currentStartAngle) / 2;\n  const x = radius * Math.sin(deltaAngle);\n  const y = -radius * Math.cos(deltaAngle);\n\n  const isOpen = useMemo(\n    () => (activeSerie === '' && isTooltipShown) || (activeSerie === `${name}-${index}` && !isTooltipShown),\n    [activeSerie, index, isTooltipShown, name],\n  );\n\n  useEffect(() => {\n    if (arcRef.current) {\n      select(arcRef.current).attr('d', sliceData());\n    }\n  }, [sliceData]);\n\n  return (\n    <g\n      onMouseEnter={() => {\n        setActiveSerie('');\n        setIsTooltipShown(true);\n      }}\n      onMouseLeave={(e) => {\n        setIsTooltipShown(false);\n      }}\n      transform={isHalfPie ? 'rotate(-90)' : ''}\n    >\n      <path ref={arcRef} fill={color} stroke=\"white\"></path>\n      {name !== 'no-data' && TooltipRenderer && (\n        <foreignObject x={x} y={y}>\n          <Tooltip\n            isTooltipShown={isOpen}\n            withoutAnimation\n            onFocus={() => {\n              setActiveSerie(`${name}-${index}`);\n            }}\n            onBlur={() => {\n              setActiveSerie('');\n            }}\n            startPlacementPreference=\"bottom\"\n          >\n            <TooltipRenderer data={serieData} />\n          </Tooltip>\n        </foreignObject>\n      )}\n\n      {/* {isOpen && (\n        <g>\n          <circle r=\"5\" fill={color} cx={x} cy={y} stroke=\"black\" />\n        </g>\n      )} */}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAwE;AACxE,gBAA4B;AAC5B,wBAA2B;AAC3B,qBAAwB;AACjB,MAAM,QAAQ,CAAC,EAAE,KAAK,MAAM;AACjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,aAAa,iBAAiB,WAAW,gBAAgB;AAAA,EAC5E,QAAI,yBAAW,4BAAU;AAEzB,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAE1D,QAAM,cAAc,mBAAmB;AACvC,QAAM,iBAAa,qBAAO,IAAI;AAC9B,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,SAAS,YAAY,KAAK,IAAI,YAAY,WAAW,IAAI,KAAK,IAAI,YAAY,WAAW,IAAI;AACnG,QAAM,EAAE,YAAY,UAAU,OAAO,MAAM,IAAI;AAC/C,QAAM,oBAAoB,YAAY,aAAa,IAAI;AACvD,QAAM,kBAAkB,YAAY,WAAW,IAAI;AAEnD,QAAM,YAAY,QAAQ,KAAK,CAAC,UAAU,MAAM,SAAS,KAAK,KAAK,EAAE;AACrE,QAAM,EAAE,OAAO,KAAK,IAAI;AAExB,QAAM,gBAAY,eAAI,EACnB,YAAY,WAAW,EACvB,YAAY,MAAM,EAClB,WAAW,iBAAiB,EAC5B,SAAS,eAAe;AAC3B,QAAM,aAAa,qBAAqB,kBAAkB,qBAAqB;AAC/E,QAAM,IAAI,SAAS,KAAK,IAAI,UAAU;AACtC,QAAM,IAAI,CAAC,SAAS,KAAK,IAAI,UAAU;AAEvC,QAAM,aAAS;AAAA,IACb,MAAO,gBAAgB,MAAM,kBAAoB,gBAAgB,GAAG,QAAQ,WAAW,CAAC;AAAA,IACxF,CAAC,aAAa,OAAO,gBAAgB,IAAI;AAAA,EAC3C;AAEA,8BAAU,MAAM;AACd,QAAI,OAAO,SAAS;AAClB,4BAAO,OAAO,OAAO,EAAE,KAAK,KAAK,UAAU,CAAC;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,6CAAC;AAAA,IACC,cAAc,MAAM;AAClB,qBAAe,EAAE;AACjB,wBAAkB,IAAI;AAAA,IACxB;AAAA,IACA,cAAc,CAAC,MAAM;AACnB,wBAAkB,KAAK;AAAA,IACzB;AAAA,IACA,WAAW,YAAY,gBAAgB;AAAA,IAEvC;AAAA,kDAAC;AAAA,QAAK,KAAK;AAAA,QAAQ,MAAM;AAAA,QAAO,QAAO;AAAA,OAAQ;AAAA,MAC9C,SAAS,aAAa,mBACrB,4CAAC;AAAA,QAAc;AAAA,QAAM;AAAA,QACnB,sDAAC;AAAA,UACC,gBAAgB;AAAA,UAChB,kBAAgB;AAAA,UAChB,SAAS,MAAM;AACb,2BAAe,GAAG,QAAQ,OAAO;AAAA,UACnC;AAAA,UACA,QAAQ,MAAM;AACZ,2BAAe,EAAE;AAAA,UACnB;AAAA,UACA,0BAAyB;AAAA,UAEzB,sDAAC;AAAA,YAAgB,MAAM;AAAA,WAAW;AAAA,SACpC;AAAA,OACF;AAAA;AAAA,GAQJ;AAEJ;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';\nimport { arc, select } from 'd3';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PieContext } from '../PieContext';\nimport { COLOR_PALLET } from '../helpers/colorPallet';\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles';\nexport const Slice = ({ data }) => {\n  const {\n    innerHeight,\n    innerWidth,\n    activeSerie,\n    setActiveSerie,\n    props: { series, innerRadius, isHalfPie, TooltipRenderer },\n  } = useContext(PieContext);\n\n  const arcRef = useRef(null);\n  const arcFocusedRef = useRef(null);\n\n  const radius = isHalfPie ? Math.min(innerWidth, innerHeight) : Math.min(innerWidth, innerHeight) / 2;\n  const { startAngle, endAngle, index } = data;\n  const currentStartAngle = isHalfPie ? startAngle / 2 : startAngle;\n  const currentEndAngle = isHalfPie ? endAngle / 2 : endAngle;\n\n  const serieData = series?.find((serie) => serie.name === data.data[0]);\n  const { color, name } = serieData;\n\n  const sliceData = useMemo(\n    () =>\n      arc()\n        .innerRadius(innerRadius ?? 0)\n        .outerRadius(radius)\n        .startAngle(currentStartAngle)\n        .endAngle(currentEndAngle)(),\n    [currentEndAngle, currentStartAngle, innerRadius, radius],\n  );\n\n  const sliceOver = useMemo(\n    () =>\n      arc()\n        .innerRadius(innerRadius ?? 0)\n        .outerRadius(radius + 5)\n        .startAngle(currentStartAngle)\n        .endAngle(currentEndAngle),\n    [currentEndAngle, currentStartAngle, innerRadius, radius],\n  );\n\n  // const sliceFocus = useMemo(\n  //   () =>\n  //     arc()\n  //       .innerRadius(innerRadius ?? 0)\n  //       .outerRadius(radius + 5)\n  //       .startAngle(currentStartAngle + 5)\n  //       .endAngle(currentEndAngle + 5),\n  //   [currentEndAngle, currentStartAngle, innerRadius, radius],\n  // );\n\n  const deltaAngle = currentStartAngle + (currentEndAngle - currentStartAngle) / 2;\n  const x = radius * Math.sin(deltaAngle);\n  const y = -radius * Math.cos(deltaAngle);\n\n  const isFocus = useMemo(() => activeSerie === `${name}-${index}`, [activeSerie, index, name]);\n  const [isHover, setIsHover] = useState(false);\n  useEffect(() => {\n    if (arcRef.current) {\n      select(arcRef.current).attr('d', sliceData);\n    }\n    // if (arcFocusedRef.current) {\n    //   select(arcFocusedRef.current).attr('d', sliceFocus);\n    // }\n  }, [sliceData, sliceOver]);\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n\n  const handleMouseEnter = useCallback(() => {\n    setActiveSerie(`${name}-${index}`);\n    setIsHover(true);\n    if (!isHalfPie) select(arcRef.current).transition().attr('d', sliceOver).duration(300);\n  }, [index, isHalfPie, name, setActiveSerie, sliceOver]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    setActiveSerie('');\n    setIsHover(false);\n    if (!isHalfPie) select(arcRef.current).transition().attr('d', sliceData).duration(300);\n  }, [isHalfPie, setActiveSerie, sliceData]);\n  return (\n    <g onMouseEnter={handleMouseEnter} onMouseLeave={handleOnMouseLeave} transform={isHalfPie ? 'rotate(-90)' : ''}>\n      <path ref={arcRef} fill={COLOR_PALLET[color] ?? color} stroke=\"white\"></path>\n      {/* <path\n        ref={arcFocusedRef}\n        fill=\"none\"\n        stroke=\"#335cad\"\n        stoke-width={2}\n        style={{ visibility: isFocus && !isHover ? 'visible' : 'hidden' }}\n      ></path> */}\n\n      {name !== 'no-data' && TooltipRenderer && isFocus && (\n        <foreignObject x={x} y={y}>\n          <div ref={setReferenceElement}>\n            <DSPopperJS referenceElement={referenceElement} showPopover zIndex={3000}>\n              <StyledTooltipContainer>\n                <TooltipRenderer data={serieData} />\n              </StyledTooltipContainer>\n              <StyledMouseOverDetectionBox />\n            </DSPopperJS>\n          </div>\n        </foreignObject>\n      )}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }