@elliemae/ds-dataviz-pie 3.15.0 → 3.16.0-next.10

package/dist/cjs/Pie.js

@@ -29,11 +29,11 @@ __export(Pie_exports, {
 module.exports = __toCommonJS(Pie_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ChartContainer = require("./parts/ChartContainer");
-var import_Pie = require("./parts/Pie");
-var import_PieContext = require("./PieContext");
-var import_usePie = require("./config/usePie");
-var import_ColorLegend = require("./parts/ColorLegend");
+var import_ChartContainer = require("./parts/ChartContainer.js");
+var import_Pie = require("./parts/Pie.js");
+var import_PieContext = require("./PieContext.js");
+var import_usePie = require("./config/usePie.js");
+var import_ColorLegend = require("./parts/ColorLegend.js");
 const PieChart = (props) => {
   const ctx = (0, import_usePie.usePie)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PieContext.PieContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartContainer.ChartContainer, { children: [

package/dist/cjs/Pie.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Pie.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { ChartContainer } from './parts/ChartContainer';\nimport { Pie } from './parts/Pie';\nimport { PieContext } from './PieContext';\nimport { usePie } from './config/usePie';\nimport type { DSPieT } from './react-desc-prop-types';\nimport { ColorLegend } from './parts/ColorLegend';\nexport const PieChart: React.ComponentType<DSPieT.Props> = (props) => {\n  const ctx = usePie(props);\n  return (\n    <PieContext.Provider value={ctx}>\n      <ChartContainer>\n        <ColorLegend />\n        <Pie />\n      </ChartContainer>\n    </PieContext.Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import React from 'react';\nimport { ChartContainer } from './parts/ChartContainer.js';\nimport { Pie } from './parts/Pie.js';\nimport { PieContext } from './PieContext.js';\nimport { usePie } from './config/usePie.js';\nimport type { DSPieT } from './react-desc-prop-types.js';\nimport { ColorLegend } from './parts/ColorLegend.js';\nexport const PieChart: React.ComponentType<DSPieT.Props> = (props) => {\n  const ctx = usePie(props);\n  return (\n    <PieContext.Provider value={ctx}>\n      <ChartContainer>\n        <ColorLegend />\n        <Pie />\n      </ChartContainer>\n    </PieContext.Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWjB;AAVN,4BAA+B;AAC/B,iBAAoB;AACpB,wBAA2B;AAC3B,oBAAuB;AAEvB,yBAA4B;AACrB,MAAM,WAA8C,CAAC,UAAU;AACpE,QAAM,UAAM,sBAAO,KAAK;AACxB,SACE,4CAAC,6BAAW,UAAX,EAAoB,OAAO,KAC1B,uDAAC,wCACC;AAAA,gDAAC,kCAAY;AAAA,IACb,4CAAC,kBAAI;AAAA,KACP,GACF;AAEJ;",
   "names": []
 }

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 type { ScaleOrdinal } from 'd3';\nimport { scaleOrdinal } from 'd3';\nimport type { 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"],
+  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport type { ScaleOrdinal } from 'd3';\nimport { scaleOrdinal } from 'd3';\nimport type { DSPieT } from './react-desc-prop-types.js';\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;AAgBzC,MAAM,yBAA2C,CASjD;AAEO,MAAM,iBAAa,4BAAc,sBAAsB;",
   "names": []
 }

package/dist/cjs/config/useKeyboardNavigation.js

@@ -30,7 +30,7 @@ __export(useKeyboardNavigation_exports, {
 module.exports = __toCommonJS(useKeyboardNavigation_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_PieContext = require("../PieContext");
+var import_PieContext = require("../PieContext.js");
 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) {
     if (list[i])

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 } 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"],
+  "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.js';\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.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, isHalfPie, size } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [activeSerie, setActiveSerie] = useState('');\n\n  const prevInnerWidth = width - margin.left - margin.right;\n  const prevInnerHeight = height - margin.top - margin.bottom;\n  const prevRadius = isHalfPie\n    ? Math.min(prevInnerWidth, prevInnerHeight)\n    : Math.min(prevInnerWidth, prevInnerHeight) / 2;\n\n  const innerHeight = useMemo(() => prevInnerHeight - prevRadius * 0.1 * 2, [prevInnerHeight, prevRadius]);\n  const innerWidth = useMemo(() => prevInnerWidth - prevRadius * 0.1 * 2, [prevInnerWidth, prevRadius]);\n\n  const radius = isHalfPie ? Math.min(innerHeight, innerWidth) : Math.min(innerHeight, innerWidth) / 2;\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  let total = 0;\n  const data = series.reduce((acc, curr) => {\n    total += curr.data;\n    return { ...acc, [curr.name]: curr.data };\n  }, {});\n  if (size) {\n    data.rest = size - total;\n  }\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      prevRadius,\n      radius,\n    }),\n    [props, radius, prevRadius, 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,QAAQ,WAAW,KAAK,IAAI;AAE3D,QAAM,mBAAe,qBAAO,IAAI;AAChC,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AAEjD,QAAM,iBAAiB,QAAQ,OAAO,OAAO,OAAO;AACpD,QAAM,kBAAkB,SAAS,OAAO,MAAM,OAAO;AACrD,QAAM,aAAa,YACf,KAAK,IAAI,gBAAgB,eAAe,IACxC,KAAK,IAAI,gBAAgB,eAAe,IAAI;AAEhD,QAAM,kBAAc,sBAAQ,MAAM,kBAAkB,aAAa,MAAM,GAAG,CAAC,iBAAiB,UAAU,CAAC;AACvG,QAAM,iBAAa,sBAAQ,MAAM,iBAAiB,aAAa,MAAM,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAEpG,QAAM,SAAS,YAAY,KAAK,IAAI,aAAa,UAAU,IAAI,KAAK,IAAI,aAAa,UAAU,IAAI;AAEnG,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,MAAI,QAAQ;AACZ,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,SAAS;AACxC,aAAS,KAAK;AACd,WAAO,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK;AAAA,EAC1C,GAAG,CAAC,CAAC;AACL,MAAI,MAAM;AACR,SAAK,OAAO,OAAO;AAAA,EACrB;AACA,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,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,QAAQ,YAAY,aAAa,YAAY,QAAQ,aAAa,SAAS,WAAW;AAAA,EAChG;AACF;",
+  "sourcesContent": ["import { useMemo, useState, useRef } from 'react';\nimport { pie } from 'd3';\n//\nimport { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPieT } from '../react-desc-prop-types.js';\n\nexport const usePie = (props: DSPieT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, width, height, margin, isHalfPie, size } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [activeSerie, setActiveSerie] = useState('');\n\n  const prevInnerWidth = width - margin.left - margin.right;\n  const prevInnerHeight = height - margin.top - margin.bottom;\n  const prevRadius = isHalfPie\n    ? Math.min(prevInnerWidth, prevInnerHeight)\n    : Math.min(prevInnerWidth, prevInnerHeight) / 2;\n\n  const innerHeight = useMemo(() => prevInnerHeight - prevRadius * 0.1 * 2, [prevInnerHeight, prevRadius]);\n  const innerWidth = useMemo(() => prevInnerWidth - prevRadius * 0.1 * 2, [prevInnerWidth, prevRadius]);\n\n  const radius = isHalfPie ? Math.min(innerHeight, innerWidth) : Math.min(innerHeight, innerWidth) / 2;\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  let total = 0;\n  const data = series.reduce((acc, curr) => {\n    total += curr.data;\n    return { ...acc, [curr.name]: curr.data };\n  }, {});\n  if (size) {\n    data.rest = size - total;\n  }\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      prevRadius,\n      radius,\n    }),\n    [props, radius, prevRadius, 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;AAKb,MAAM,SAAS,CAAC,UAAwB;AAG7C,QAAM,EAAE,QAAQ,OAAO,QAAQ,QAAQ,WAAW,KAAK,IAAI;AAE3D,QAAM,mBAAe,qBAAO,IAAI;AAChC,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AAEjD,QAAM,iBAAiB,QAAQ,OAAO,OAAO,OAAO;AACpD,QAAM,kBAAkB,SAAS,OAAO,MAAM,OAAO;AACrD,QAAM,aAAa,YACf,KAAK,IAAI,gBAAgB,eAAe,IACxC,KAAK,IAAI,gBAAgB,eAAe,IAAI;AAEhD,QAAM,kBAAc,sBAAQ,MAAM,kBAAkB,aAAa,MAAM,GAAG,CAAC,iBAAiB,UAAU,CAAC;AACvG,QAAM,iBAAa,sBAAQ,MAAM,iBAAiB,aAAa,MAAM,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAEpG,QAAM,SAAS,YAAY,KAAK,IAAI,aAAa,UAAU,IAAI,KAAK,IAAI,aAAa,UAAU,IAAI;AAEnG,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,MAAI,QAAQ;AACZ,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,SAAS;AACxC,aAAS,KAAK;AACd,WAAO,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK;AAAA,EAC1C,GAAG,CAAC,CAAC;AACL,MAAI,MAAM;AACR,SAAK,OAAO,OAAO;AAAA,EACrB;AACA,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,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,QAAQ,YAAY,aAAa,YAAY,QAAQ,aAAa,SAAS,WAAW;AAAA,EAChG;AACF;",
   "names": []
 }

package/dist/cjs/index.js

@@ -29,6 +29,6 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-var import_Pie = require("./Pie");
-var import_colorPallet = require("./helpers/colorPallet");
+var import_Pie = require("./Pie.js");
+var import_colorPallet = require("./helpers/colorPallet.js");
 //# 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';\nexport { COLOR_PALLET } from './helpers/colorPallet';\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["export { PieChart } from './Pie.js';\nexport { COLOR_PALLET } from './helpers/colorPallet.js';\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/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/parts/ChartContainer.js

@@ -30,9 +30,9 @@ module.exports = __toCommonJS(ChartContainer_exports);
 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");
+var import_styles = require("../styles.js");
+var import_useKeyboardNavigation = require("../config/useKeyboardNavigation.js");
+var import_PieContext = require("../PieContext.js");
 const ChartContainer = ({ children }) => {
   const {
     props: { width, height, margin, responsive, hasBaseline, isHalfPie },

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';\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, hasBaseline, isHalfPie },\n    containerRef,\n    innerHeight,\n    radius,\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\n  const marginRadius = useMemo(() => {\n    if (isHalfPie) {\n      return radius * 0.1;\n    }\n    return radius * 0.1;\n  });\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\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      style={{ width: `${width}px`, height: `${height}px` }}\n    >\n      <svg {...dimensions}>\n        <g className=\"container\" transform={`translate(${margin.left + marginRadius},${margin.top + marginRadius})`}>\n          {children}\n        </g>\n        {hasBaseline ? (\n          <line\n            x1={0}\n            x2={width}\n            y1={innerHeight + marginRadius}\n            y2={innerHeight + marginRadius}\n            stroke=\"grey\"\n            strokeWidth=\"2\"\n          />\n        ) : null}\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledSVGWrapper } from '../styles.js';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation.js';\nimport { PieContext } from '../PieContext.js';\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, hasBaseline, isHalfPie },\n    containerRef,\n    innerHeight,\n    radius,\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\n  const marginRadius = useMemo(() => {\n    if (isHalfPie) {\n      return radius * 0.1;\n    }\n    return radius * 0.1;\n  });\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\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      style={{ width: `${width}px`, height: `${height}px` }}\n    >\n      <svg {...dimensions}>\n        <g className=\"container\" transform={`translate(${margin.left + marginRadius},${margin.top + marginRadius})`}>\n          {children}\n        </g>\n        {hasBaseline ? (\n          <line\n            x1={0}\n            x2={width}\n            y1={innerHeight + marginRadius}\n            y2={innerHeight + marginRadius}\n            stroke=\"grey\"\n            strokeWidth=\"2\"\n          />\n        ) : null}\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDjB;AAjDN,mBAA2C;AAC3C,oBAAiC;AACjC,mCAAsC;AACtC,wBAA2B;AAKpB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,QAAQ,YAAY,aAAa,UAAU;AAAA,IACnE;AAAA,IACA;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,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,WAAW;AACb,aAAO,SAAS;AAAA,IAClB;AACA,WAAO,SAAS;AAAA,EAClB,CAAC;AACD,QAAM,EAAE,gBAAgB,cAAc,cAAc,QAAI,oDAAsB;AAE9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,MAEX,UAAU,cAAc,KAAK;AAAA,MAC7B,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,MACrC,OAAO,EAAE,OAAO,GAAG,WAAW,QAAQ,GAAG,WAAW;AAAA,MAEpD,uDAAC,SAAK,GAAG,YACP;AAAA,oDAAC,OAAE,WAAU,aAAY,WAAW,aAAa,OAAO,OAAO,gBAAgB,OAAO,MAAM,iBACzF,UACH;AAAA,QACC,cACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI,cAAc;AAAA,YAClB,IAAI,cAAc;AAAA,YAClB,QAAO;AAAA,YACP,aAAY;AAAA;AAAA,QACd,IACE;AAAA,SACN;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/ColorLegend.js

@@ -30,7 +30,7 @@ module.exports = __toCommonJS(ColorLegend_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_PieContext = require("../PieContext");
+var import_PieContext = require("../PieContext.js");
 const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) => {
   const {
     colorScale,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/ColorLegend.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { PieContext } from '../PieContext';\n\nexport const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) => {\n  const {\n    colorScale,\n    innerWidth,\n    props: { colorLegend, circleRadius },\n  } = useContext(PieContext);\n\n  if (!colorLegend) return null;\n  return (\n    <g transform={`translate(${innerWidth + 30},30)`}>\n      <text x={35} y={-25} className=\"axis-label\" textAnchor=\"middle\">\n        {colorLegend.label}\n      </text>\n      {colorScale.domain().map((domainValue, i) => (\n        <g className=\"tick\" transform={`translate(0,${i * tickSpacing})`}>\n          <circle fill={colorScale(domainValue)} r={circleRadius ?? tickSize} />\n          <text x={tickTextOffset} dy=\".32em\">\n            {domainValue}\n          </text>\n        </g>\n      ))}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { PieContext } from '../PieContext.js';\n\nexport const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) => {\n  const {\n    colorScale,\n    innerWidth,\n    props: { colorLegend, circleRadius },\n  } = useContext(PieContext);\n\n  if (!colorLegend) return null;\n  return (\n    <g transform={`translate(${innerWidth + 30},30)`}>\n      <text x={35} y={-25} className=\"axis-label\" textAnchor=\"middle\">\n        {colorLegend.label}\n      </text>\n      {colorScale.domain().map((domainValue, i) => (\n        <g className=\"tick\" transform={`translate(0,${i * tickSpacing})`}>\n          <circle fill={colorScale(domainValue)} r={circleRadius ?? tickSize} />\n          <text x={tickTextOffset} dy=\".32em\">\n            {domainValue}\n          </text>\n        </g>\n      ))}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAbN,mBAAkC;AAClC,wBAA2B;AAEpB,MAAM,cAAc,CAAC,EAAE,cAAc,IAAI,WAAW,IAAI,iBAAiB,GAAG,MAAM;AACvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,aAAa;AAAA,EACrC,QAAI,yBAAW,4BAAU;AAEzB,MAAI,CAAC;AAAa,WAAO;AACzB,SACE,6CAAC,OAAE,WAAW,aAAa,aAAa,UACtC;AAAA,gDAAC,UAAK,GAAG,IAAI,GAAG,KAAK,WAAU,cAAa,YAAW,UACpD,sBAAY,OACf;AAAA,IACC,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,6CAAC,OAAE,WAAU,QAAO,WAAW,eAAe,IAAI,gBAChD;AAAA,kDAAC,YAAO,MAAM,WAAW,WAAW,GAAG,GAAG,gBAAgB,UAAU;AAAA,MACpE,4CAAC,UAAK,GAAG,gBAAgB,IAAG,SACzB,uBACH;AAAA,OACF,CACD;AAAA,KACH;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Pie.js

@@ -30,9 +30,9 @@ module.exports = __toCommonJS(Pie_exports);
 var React = __toESM(require("react"));
 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");
+var import_Slice = require("./Slice.js");
+var import_PieContext = require("../PieContext.js");
+var import_styles = require("../styles.js");
 const Pie = () => {
   const {
     innerHeight,

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';\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"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { Slice } from './Slice.js';\nimport { PieContext } from '../PieContext.js';\nimport { StyledInnerText } from '../styles.js';\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;ADiBnB;AAjBJ,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,OAAE,WAAW,aAAa,aAAa,KAAK,uBAC1C;AAAA,YAAQ,IAAI,CAAC,UACZ,4CAAC,sBAAwB,MAAM,SAAnB,MAAM,KAAoB,CACvC;AAAA,IACA,CAAC,aAAa,QACb,4CAAC,iCAAgB,GAAG,GAAG,GAAG,GAAG,YAAW,UAAS,mBAAkB,UAChE,iBACH,IACE;AAAA,IACH,aAAa,QACZ,4CAAC,iCAAgB,GAAG,GAAG,GAAG,CAAC,cAAc,GAAG,YAAW,UAAS,mBAAkB,UAC/E,iBACH,IACE;AAAA,KACN;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Slice.js

@@ -32,9 +32,9 @@ 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_colorPallet = require("../helpers/colorPallet");
-var import_styles = require("../styles");
+var import_PieContext = require("../PieContext.js");
+var import_colorPallet = require("../helpers/colorPallet.js");
+var import_styles = require("../styles.js");
 const Slice = ({ data }) => {
   const {
     innerHeight,

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": ["/* 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\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 || { name: undefined, color: 'grey' };\n\n  const sliceData = useMemo(\n    () =>\n      arc()\n        .innerRadius(innerRadius ? radius * 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 ? radius * innerRadius : 0)\n        .outerRadius(radius + radius * 0.1)\n        .startAngle(currentStartAngle)\n        .endAngle(currentEndAngle),\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  useEffect(() => {\n    if (arcRef.current) {\n      if (isFocus) select(arcRef.current).transition().attr('d', sliceOver).duration(300);\n      else select(arcRef.current).transition().attr('d', sliceData).duration(300);\n    }\n  }, [sliceData, isFocus, sliceOver]);\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n\n  const handleMouseEnter = useCallback(() => {\n    if (name) setActiveSerie(`${name}-${index}`);\n  }, [index, name, setActiveSerie]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (name) setActiveSerie('');\n  }, [name, setActiveSerie]);\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\n      {name && 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"],
+  "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.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles.js';\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\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 || { name: undefined, color: 'grey' };\n\n  const sliceData = useMemo(\n    () =>\n      arc()\n        .innerRadius(innerRadius ? radius * 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 ? radius * innerRadius : 0)\n        .outerRadius(radius + radius * 0.1)\n        .startAngle(currentStartAngle)\n        .endAngle(currentEndAngle),\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  useEffect(() => {\n    if (arcRef.current) {\n      if (isFocus) select(arcRef.current).transition().attr('d', sliceOver).duration(300);\n      else select(arcRef.current).transition().attr('d', sliceData).duration(300);\n    }\n  }, [sliceData, isFocus, sliceOver]);\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n\n  const handleMouseEnter = useCallback(() => {\n    if (name) setActiveSerie(`${name}-${index}`);\n  }, [index, name, setActiveSerie]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (name) setActiveSerie('');\n  }, [name, setActiveSerie]);\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\n      {name && 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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEjB;AApEN,mBAAqF;AACrF,gBAA4B;AAC5B,yBAA2B;AAC3B,wBAA2B;AAC3B,yBAA6B;AAC7B,oBAAoE;AAC7D,MAAM,QAAQ,CAAC,EAAE,KAAK,MAAM;AACjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,aAAa,WAAW,gBAAgB;AAAA,EAC3D,QAAI,yBAAW,4BAAU;AAEzB,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,SAAS,YAAY,KAAK,IAAI,YAAY,WAAW,IAAI,KAAK,IAAI,YAAY,WAAW,IAAI;AACnG,QAAM,EAAE,YAAY,UAAU,MAAM,IAAI;AACxC,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,aAAa,EAAE,MAAM,QAAW,OAAO,OAAO;AAEtE,QAAM,gBAAY;AAAA,IAChB,UACE,eAAI,EACD,YAAY,cAAc,SAAS,cAAc,CAAC,EAClD,YAAY,MAAM,EAClB,WAAW,iBAAiB,EAC5B,SAAS,eAAe,EAAE;AAAA,IAC/B,CAAC,iBAAiB,mBAAmB,aAAa,MAAM;AAAA,EAC1D;AAEA,QAAM,gBAAY;AAAA,IAChB,UACE,eAAI,EACD,YAAY,cAAc,SAAS,cAAc,CAAC,EAClD,YAAY,SAAS,SAAS,GAAG,EACjC,WAAW,iBAAiB,EAC5B,SAAS,eAAe;AAAA,IAC7B,CAAC,iBAAiB,mBAAmB,aAAa,MAAM;AAAA,EAC1D;AAEA,QAAM,aAAa,qBAAqB,kBAAkB,qBAAqB;AAC/E,QAAM,IAAI,SAAS,KAAK,IAAI,UAAU;AACtC,QAAM,IAAI,CAAC,SAAS,KAAK,IAAI,UAAU;AAEvC,QAAM,cAAU,sBAAQ,MAAM,gBAAgB,GAAG,QAAQ,SAAS,CAAC,aAAa,OAAO,IAAI,CAAC;AAC5F,8BAAU,MAAM;AACd,QAAI,OAAO,SAAS;AAClB,UAAI;AAAS,8BAAO,OAAO,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,SAAS,EAAE,SAAS,GAAG;AAAA;AAC7E,8BAAO,OAAO,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,SAAS,EAAE,SAAS,GAAG;AAAA,IAC5E;AAAA,EACF,GAAG,CAAC,WAAW,SAAS,SAAS,CAAC;AAElC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAiC;AAEjF,QAAM,uBAAmB,0BAAY,MAAM;AACzC,QAAI;AAAM,qBAAe,GAAG,QAAQ,OAAO;AAAA,EAC7C,GAAG,CAAC,OAAO,MAAM,cAAc,CAAC;AAEhC,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI;AAAM,qBAAe,EAAE;AAAA,EAC7B,GAAG,CAAC,MAAM,cAAc,CAAC;AACzB,SACE,6CAAC,OAAE,cAAc,kBAAkB,cAAc,oBAAoB,WAAW,YAAY,gBAAgB,IAC1G;AAAA,gDAAC,UAAK,KAAK,QAAQ,MAAM,gCAAa,UAAU,OAAO,QAAO,SAAQ;AAAA,IAErE,QAAQ,mBAAmB,WAC1B,4CAAC,mBAAc,GAAM,GACnB,sDAAC,SAAI,KAAK,qBACR,uDAAC,iCAAW,kBAAoC,aAAW,MAAC,QAAQ,KAClE;AAAA,kDAAC,wCACC,sDAAC,mBAAgB,MAAM,WAAW,GACpC;AAAA,MACA,4CAAC,6CAA4B;AAAA,OAC/B,GACF,GACF;AAAA,KAEJ;AAEJ;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -28,17 +28,17 @@ __export(react_desc_prop_types_exports, {
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 const propTypes = {
-  ...import_ds_utilities.globalAttributesPropTypes,
-  height: import_ds_utilities.PropTypes.number.isRequired.description("height").defaultValue(""),
-  width: import_ds_utilities.PropTypes.number.isRequired.description("height").defaultValue(""),
-  margin: import_ds_utilities.PropTypes.shape({
-    top: import_ds_utilities.PropTypes.number,
-    bottom: import_ds_utilities.PropTypes.number,
-    left: import_ds_utilities.PropTypes.number,
-    right: import_ds_utilities.PropTypes.number
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  height: import_ds_props_helpers.PropTypes.number.isRequired.description("height").defaultValue(""),
+  width: import_ds_props_helpers.PropTypes.number.isRequired.description("height").defaultValue(""),
+  margin: import_ds_props_helpers.PropTypes.shape({
+    top: import_ds_props_helpers.PropTypes.number,
+    bottom: import_ds_props_helpers.PropTypes.number,
+    left: import_ds_props_helpers.PropTypes.number,
+    right: import_ds_props_helpers.PropTypes.number
   }).isRequired.description("margin").defaultValue(""),
-  series: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.object).description("yValue").defaultValue("")
+  series: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description("yValue").defaultValue("")
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\ntype MarginT = {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n};\n\nexport declare namespace DSPieT {\n  export interface SeriesT {\n    name: string;\n    data: number;\n    color: string;\n  }\n  export interface Props {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n  }\n}\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AAuB9C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,8BAAU,MAAM;AAAA,IACtB,KAAK,8BAAU;AAAA,IACf,QAAQ,8BAAU;AAAA,IAClB,MAAM,8BAAU;AAAA,IAChB,OAAO,8BAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
+  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\ntype MarginT = {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n};\n\nexport declare namespace DSPieT {\n  export interface SeriesT {\n    name: string;\n    data: number;\n    color: string;\n  }\n  export interface Props {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n  }\n}\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAqD;AAuB9C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,kCAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,kCAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,kCAAU,MAAM;AAAA,IACtB,KAAK,kCAAU;AAAA,IACf,QAAQ,kCAAU;AAAA,IAClB,MAAM,kCAAU;AAAA,IAChB,OAAO,kCAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,kCAAU,QAAQ,kCAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
   "names": []
 }

package/dist/esm/Pie.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChartContainer } from "./parts/ChartContainer";
-import { Pie } from "./parts/Pie";
-import { PieContext } from "./PieContext";
-import { usePie } from "./config/usePie";
-import { ColorLegend } from "./parts/ColorLegend";
+import { ChartContainer } from "./parts/ChartContainer.js";
+import { Pie } from "./parts/Pie.js";
+import { PieContext } from "./PieContext.js";
+import { usePie } from "./config/usePie.js";
+import { ColorLegend } from "./parts/ColorLegend.js";
 const PieChart = (props) => {
   const ctx = usePie(props);
   return /* @__PURE__ */ jsx(PieContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(ChartContainer, { children: [

package/dist/esm/Pie.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Pie.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ChartContainer } from './parts/ChartContainer';\nimport { Pie } from './parts/Pie';\nimport { PieContext } from './PieContext';\nimport { usePie } from './config/usePie';\nimport type { DSPieT } from './react-desc-prop-types';\nimport { ColorLegend } from './parts/ColorLegend';\nexport const PieChart: React.ComponentType<DSPieT.Props> = (props) => {\n  const ctx = usePie(props);\n  return (\n    <PieContext.Provider value={ctx}>\n      <ChartContainer>\n        <ColorLegend />\n        <Pie />\n      </ChartContainer>\n    </PieContext.Provider>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ChartContainer } from './parts/ChartContainer.js';\nimport { Pie } from './parts/Pie.js';\nimport { PieContext } from './PieContext.js';\nimport { usePie } from './config/usePie.js';\nimport type { DSPieT } from './react-desc-prop-types.js';\nimport { ColorLegend } from './parts/ColorLegend.js';\nexport const PieChart: React.ComponentType<DSPieT.Props> = (props) => {\n  const ctx = usePie(props);\n  return (\n    <PieContext.Provider value={ctx}>\n      <ChartContainer>\n        <ColorLegend />\n        <Pie />\n      </ChartContainer>\n    </PieContext.Provider>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACWjB,SACE,KADF;AAVN,SAAS,sBAAsB;AAC/B,SAAS,WAAW;AACpB,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AACrB,MAAM,WAA8C,CAAC,UAAU;AACpE,QAAM,MAAM,OAAO,KAAK;AACxB,SACE,oBAAC,WAAW,UAAX,EAAoB,OAAO,KAC1B,+BAAC,kBACC;AAAA,wBAAC,eAAY;AAAA,IACb,oBAAC,OAAI;AAAA,KACP,GACF;AAEJ;",
   "names": []
 }

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 type { ScaleOrdinal } from 'd3';\nimport { scaleOrdinal } from 'd3';\nimport type { 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport type { ScaleOrdinal } from 'd3';\nimport { scaleOrdinal } from 'd3';\nimport type { DSPieT } from './react-desc-prop-types.js';\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;AAgBzC,MAAM,yBAA2C,CASjD;AAEO,MAAM,aAAa,cAAc,sBAAsB;",
   "names": []
 }

package/dist/esm/config/useKeyboardNavigation.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useCallback, useContext } from "react";
-import { PieContext } from "../PieContext";
+import { PieContext } from "../PieContext.js";
 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) {
     if (list[i])

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 } 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"],
+  "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.js';\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.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, isHalfPie, size } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [activeSerie, setActiveSerie] = useState('');\n\n  const prevInnerWidth = width - margin.left - margin.right;\n  const prevInnerHeight = height - margin.top - margin.bottom;\n  const prevRadius = isHalfPie\n    ? Math.min(prevInnerWidth, prevInnerHeight)\n    : Math.min(prevInnerWidth, prevInnerHeight) / 2;\n\n  const innerHeight = useMemo(() => prevInnerHeight - prevRadius * 0.1 * 2, [prevInnerHeight, prevRadius]);\n  const innerWidth = useMemo(() => prevInnerWidth - prevRadius * 0.1 * 2, [prevInnerWidth, prevRadius]);\n\n  const radius = isHalfPie ? Math.min(innerHeight, innerWidth) : Math.min(innerHeight, innerWidth) / 2;\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  let total = 0;\n  const data = series.reduce((acc, curr) => {\n    total += curr.data;\n    return { ...acc, [curr.name]: curr.data };\n  }, {});\n  if (size) {\n    data.rest = size - total;\n  }\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      prevRadius,\n      radius,\n    }),\n    [props, radius, prevRadius, 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,QAAQ,WAAW,KAAK,IAAI;AAE3D,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,iBAAiB,QAAQ,OAAO,OAAO,OAAO;AACpD,QAAM,kBAAkB,SAAS,OAAO,MAAM,OAAO;AACrD,QAAM,aAAa,YACf,KAAK,IAAI,gBAAgB,eAAe,IACxC,KAAK,IAAI,gBAAgB,eAAe,IAAI;AAEhD,QAAM,cAAc,QAAQ,MAAM,kBAAkB,aAAa,MAAM,GAAG,CAAC,iBAAiB,UAAU,CAAC;AACvG,QAAM,aAAa,QAAQ,MAAM,iBAAiB,aAAa,MAAM,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAEpG,QAAM,SAAS,YAAY,KAAK,IAAI,aAAa,UAAU,IAAI,KAAK,IAAI,aAAa,UAAU,IAAI;AAEnG,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,MAAI,QAAQ;AACZ,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,SAAS;AACxC,aAAS,KAAK;AACd,WAAO,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK;AAAA,EAC1C,GAAG,CAAC,CAAC;AACL,MAAI,MAAM;AACR,SAAK,OAAO,OAAO;AAAA,EACrB;AACA,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,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,QAAQ,YAAY,aAAa,YAAY,QAAQ,aAAa,SAAS,WAAW;AAAA,EAChG;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState, useRef } from 'react';\nimport { pie } from 'd3';\n//\nimport { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPieT } from '../react-desc-prop-types.js';\n\nexport const usePie = (props: DSPieT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, width, height, margin, isHalfPie, size } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [activeSerie, setActiveSerie] = useState('');\n\n  const prevInnerWidth = width - margin.left - margin.right;\n  const prevInnerHeight = height - margin.top - margin.bottom;\n  const prevRadius = isHalfPie\n    ? Math.min(prevInnerWidth, prevInnerHeight)\n    : Math.min(prevInnerWidth, prevInnerHeight) / 2;\n\n  const innerHeight = useMemo(() => prevInnerHeight - prevRadius * 0.1 * 2, [prevInnerHeight, prevRadius]);\n  const innerWidth = useMemo(() => prevInnerWidth - prevRadius * 0.1 * 2, [prevInnerWidth, prevRadius]);\n\n  const radius = isHalfPie ? Math.min(innerHeight, innerWidth) : Math.min(innerHeight, innerWidth) / 2;\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  let total = 0;\n  const data = series.reduce((acc, curr) => {\n    total += curr.data;\n    return { ...acc, [curr.name]: curr.data };\n  }, {});\n  if (size) {\n    data.rest = size - total;\n  }\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      prevRadius,\n      radius,\n    }),\n    [props, radius, prevRadius, innerHeight, innerWidth, groups, activeSerie, pieData, currentData],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,UAAU,cAAc;AAC1C,SAAS,WAAW;AAKb,MAAM,SAAS,CAAC,UAAwB;AAG7C,QAAM,EAAE,QAAQ,OAAO,QAAQ,QAAQ,WAAW,KAAK,IAAI;AAE3D,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,iBAAiB,QAAQ,OAAO,OAAO,OAAO;AACpD,QAAM,kBAAkB,SAAS,OAAO,MAAM,OAAO;AACrD,QAAM,aAAa,YACf,KAAK,IAAI,gBAAgB,eAAe,IACxC,KAAK,IAAI,gBAAgB,eAAe,IAAI;AAEhD,QAAM,cAAc,QAAQ,MAAM,kBAAkB,aAAa,MAAM,GAAG,CAAC,iBAAiB,UAAU,CAAC;AACvG,QAAM,aAAa,QAAQ,MAAM,iBAAiB,aAAa,MAAM,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAEpG,QAAM,SAAS,YAAY,KAAK,IAAI,aAAa,UAAU,IAAI,KAAK,IAAI,aAAa,UAAU,IAAI;AAEnG,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,MAAI,QAAQ;AACZ,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,SAAS;AACxC,aAAS,KAAK;AACd,WAAO,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK;AAAA,EAC1C,GAAG,CAAC,CAAC;AACL,MAAI,MAAM;AACR,SAAK,OAAO,OAAO;AAAA,EACrB;AACA,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,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,QAAQ,YAAY,aAAa,YAAY,QAAQ,aAAa,SAAS,WAAW;AAAA,EAChG;AACF;",
   "names": []
 }

package/dist/esm/index.js

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

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';\nexport { COLOR_PALLET } from './helpers/colorPallet';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { PieChart } from './Pie.js';\nexport { COLOR_PALLET } from './helpers/colorPallet.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;",
   "names": []
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/parts/ChartContainer.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
-import { StyledSVGWrapper } from "../styles";
-import { useKeyboardNavigation } from "../config/useKeyboardNavigation";
-import { PieContext } from "../PieContext";
+import { StyledSVGWrapper } from "../styles.js";
+import { useKeyboardNavigation } from "../config/useKeyboardNavigation.js";
+import { PieContext } from "../PieContext.js";
 const ChartContainer = ({ children }) => {
   const {
     props: { width, height, margin, responsive, hasBaseline, isHalfPie },

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';\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, hasBaseline, isHalfPie },\n    containerRef,\n    innerHeight,\n    radius,\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\n  const marginRadius = useMemo(() => {\n    if (isHalfPie) {\n      return radius * 0.1;\n    }\n    return radius * 0.1;\n  });\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\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      style={{ width: `${width}px`, height: `${height}px` }}\n    >\n      <svg {...dimensions}>\n        <g className=\"container\" transform={`translate(${margin.left + marginRadius},${margin.top + marginRadius})`}>\n          {children}\n        </g>\n        {hasBaseline ? (\n          <line\n            x1={0}\n            x2={width}\n            y1={innerHeight + marginRadius}\n            y2={innerHeight + marginRadius}\n            stroke=\"grey\"\n            strokeWidth=\"2\"\n          />\n        ) : null}\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledSVGWrapper } from '../styles.js';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation.js';\nimport { PieContext } from '../PieContext.js';\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, hasBaseline, isHalfPie },\n    containerRef,\n    innerHeight,\n    radius,\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\n  const marginRadius = useMemo(() => {\n    if (isHalfPie) {\n      return radius * 0.1;\n    }\n    return radius * 0.1;\n  });\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\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      style={{ width: `${width}px`, height: `${height}px` }}\n    >\n      <svg {...dimensions}>\n        <g className=\"container\" transform={`translate(${margin.left + marginRadius},${margin.top + marginRadius})`}>\n          {children}\n        </g>\n        {hasBaseline ? (\n          <line\n            x1={0}\n            x2={width}\n            y1={innerHeight + marginRadius}\n            y2={innerHeight + marginRadius}\n            stroke=\"grey\"\n            strokeWidth=\"2\"\n          />\n        ) : null}\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACiDjB,SACE,KADF;AAjDN,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,YAAY,aAAa,UAAU;AAAA,IACnE;AAAA,IACA;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,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,WAAW;AACb,aAAO,SAAS;AAAA,IAClB;AACA,WAAO,SAAS;AAAA,EAClB,CAAC;AACD,QAAM,EAAE,gBAAgB,cAAc,cAAc,IAAI,sBAAsB;AAE9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,MAEX,UAAU,cAAc,KAAK;AAAA,MAC7B,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,MACrC,OAAO,EAAE,OAAO,GAAG,WAAW,QAAQ,GAAG,WAAW;AAAA,MAEpD,+BAAC,SAAK,GAAG,YACP;AAAA,4BAAC,OAAE,WAAU,aAAY,WAAW,aAAa,OAAO,OAAO,gBAAgB,OAAO,MAAM,iBACzF,UACH;AAAA,QACC,cACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI,cAAc;AAAA,YAClB,IAAI,cAAc;AAAA,YAClB,QAAO;AAAA,YACP,aAAY;AAAA;AAAA,QACd,IACE;AAAA,SACN;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/ColorLegend.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { PieContext } from "../PieContext";
+import { PieContext } from "../PieContext.js";
 const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) => {
   const {
     colorScale,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ColorLegend.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { PieContext } from '../PieContext';\n\nexport const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) => {\n  const {\n    colorScale,\n    innerWidth,\n    props: { colorLegend, circleRadius },\n  } = useContext(PieContext);\n\n  if (!colorLegend) return null;\n  return (\n    <g transform={`translate(${innerWidth + 30},30)`}>\n      <text x={35} y={-25} className=\"axis-label\" textAnchor=\"middle\">\n        {colorLegend.label}\n      </text>\n      {colorScale.domain().map((domainValue, i) => (\n        <g className=\"tick\" transform={`translate(0,${i * tickSpacing})`}>\n          <circle fill={colorScale(domainValue)} r={circleRadius ?? tickSize} />\n          <text x={tickTextOffset} dy=\".32em\">\n            {domainValue}\n          </text>\n        </g>\n      ))}\n    </g>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { PieContext } from '../PieContext.js';\n\nexport const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) => {\n  const {\n    colorScale,\n    innerWidth,\n    props: { colorLegend, circleRadius },\n  } = useContext(PieContext);\n\n  if (!colorLegend) return null;\n  return (\n    <g transform={`translate(${innerWidth + 30},30)`}>\n      <text x={35} y={-25} className=\"axis-label\" textAnchor=\"middle\">\n        {colorLegend.label}\n      </text>\n      {colorScale.domain().map((domainValue, i) => (\n        <g className=\"tick\" transform={`translate(0,${i * tickSpacing})`}>\n          <circle fill={colorScale(domainValue)} r={circleRadius ?? tickSize} />\n          <text x={tickTextOffset} dy=\".32em\">\n            {domainValue}\n          </text>\n        </g>\n      ))}\n    </g>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACajB,cAIE,YAJF;AAbN,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,cAAc,CAAC,EAAE,cAAc,IAAI,WAAW,IAAI,iBAAiB,GAAG,MAAM;AACvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,aAAa;AAAA,EACrC,IAAI,WAAW,UAAU;AAEzB,MAAI,CAAC;AAAa,WAAO;AACzB,SACE,qBAAC,OAAE,WAAW,aAAa,aAAa,UACtC;AAAA,wBAAC,UAAK,GAAG,IAAI,GAAG,KAAK,WAAU,cAAa,YAAW,UACpD,sBAAY,OACf;AAAA,IACC,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,qBAAC,OAAE,WAAU,QAAO,WAAW,eAAe,IAAI,gBAChD;AAAA,0BAAC,YAAO,MAAM,WAAW,WAAW,GAAG,GAAG,gBAAgB,UAAU;AAAA,MACpE,oBAAC,UAAK,GAAG,gBAAgB,IAAG,SACzB,uBACH;AAAA,OACF,CACD;AAAA,KACH;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Pie.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { Slice } from "./Slice";
-import { PieContext } from "../PieContext";
-import { StyledInnerText } from "../styles";
+import { Slice } from "./Slice.js";
+import { PieContext } from "../PieContext.js";
+import { StyledInnerText } from "../styles.js";
 const Pie = () => {
   const {
     innerHeight,

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';\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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Slice } from './Slice.js';\nimport { PieContext } from '../PieContext.js';\nimport { StyledInnerText } from '../styles.js';\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;ACiBnB,SAEI,KAFJ;AAjBJ,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,OAAE,WAAW,aAAa,aAAa,KAAK,uBAC1C;AAAA,YAAQ,IAAI,CAAC,UACZ,oBAAC,SAAwB,MAAM,SAAnB,MAAM,KAAoB,CACvC;AAAA,IACA,CAAC,aAAa,QACb,oBAAC,mBAAgB,GAAG,GAAG,GAAG,GAAG,YAAW,UAAS,mBAAkB,UAChE,iBACH,IACE;AAAA,IACH,aAAa,QACZ,oBAAC,mBAAgB,GAAG,GAAG,GAAG,CAAC,cAAc,GAAG,YAAW,UAAS,mBAAkB,UAC/E,iBACH,IACE;AAAA,KACN;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Slice.js

@@ -3,9 +3,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 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 { COLOR_PALLET } from "../helpers/colorPallet";
-import { StyledTooltipContainer, StyledMouseOverDetectionBox } from "../styles";
+import { PieContext } from "../PieContext.js";
+import { COLOR_PALLET } from "../helpers/colorPallet.js";
+import { StyledTooltipContainer, StyledMouseOverDetectionBox } from "../styles.js";
 const Slice = ({ data }) => {
   const {
     innerHeight,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Slice.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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\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 || { name: undefined, color: 'grey' };\n\n  const sliceData = useMemo(\n    () =>\n      arc()\n        .innerRadius(innerRadius ? radius * 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 ? radius * innerRadius : 0)\n        .outerRadius(radius + radius * 0.1)\n        .startAngle(currentStartAngle)\n        .endAngle(currentEndAngle),\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  useEffect(() => {\n    if (arcRef.current) {\n      if (isFocus) select(arcRef.current).transition().attr('d', sliceOver).duration(300);\n      else select(arcRef.current).transition().attr('d', sliceData).duration(300);\n    }\n  }, [sliceData, isFocus, sliceOver]);\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n\n  const handleMouseEnter = useCallback(() => {\n    if (name) setActiveSerie(`${name}-${index}`);\n  }, [index, name, setActiveSerie]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (name) setActiveSerie('');\n  }, [name, setActiveSerie]);\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\n      {name && 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles.js';\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\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 || { name: undefined, color: 'grey' };\n\n  const sliceData = useMemo(\n    () =>\n      arc()\n        .innerRadius(innerRadius ? radius * 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 ? radius * innerRadius : 0)\n        .outerRadius(radius + radius * 0.1)\n        .startAngle(currentStartAngle)\n        .endAngle(currentEndAngle),\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  useEffect(() => {\n    if (arcRef.current) {\n      if (isFocus) select(arcRef.current).transition().attr('d', sliceOver).duration(300);\n      else select(arcRef.current).transition().attr('d', sliceData).duration(300);\n    }\n  }, [sliceData, isFocus, sliceOver]);\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n\n  const handleMouseEnter = useCallback(() => {\n    if (name) setActiveSerie(`${name}-${index}`);\n  }, [index, name, setActiveSerie]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (name) setActiveSerie('');\n  }, [name, setActiveSerie]);\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\n      {name && 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"],
   "mappings": "AAAA,YAAY,WAAW;ACsEjB,cAKM,YALN;AApEN,SAAgB,UAAU,WAAW,aAAa,SAAS,QAAQ,kBAAkB;AACrF,SAAS,KAAK,cAAc;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB,mCAAmC;AAC7D,MAAM,QAAQ,CAAC,EAAE,KAAK,MAAM;AACjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,aAAa,WAAW,gBAAgB;AAAA,EAC3D,IAAI,WAAW,UAAU;AAEzB,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,SAAS,YAAY,KAAK,IAAI,YAAY,WAAW,IAAI,KAAK,IAAI,YAAY,WAAW,IAAI;AACnG,QAAM,EAAE,YAAY,UAAU,MAAM,IAAI;AACxC,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,aAAa,EAAE,MAAM,QAAW,OAAO,OAAO;AAEtE,QAAM,YAAY;AAAA,IAChB,MACE,IAAI,EACD,YAAY,cAAc,SAAS,cAAc,CAAC,EAClD,YAAY,MAAM,EAClB,WAAW,iBAAiB,EAC5B,SAAS,eAAe,EAAE;AAAA,IAC/B,CAAC,iBAAiB,mBAAmB,aAAa,MAAM;AAAA,EAC1D;AAEA,QAAM,YAAY;AAAA,IAChB,MACE,IAAI,EACD,YAAY,cAAc,SAAS,cAAc,CAAC,EAClD,YAAY,SAAS,SAAS,GAAG,EACjC,WAAW,iBAAiB,EAC5B,SAAS,eAAe;AAAA,IAC7B,CAAC,iBAAiB,mBAAmB,aAAa,MAAM;AAAA,EAC1D;AAEA,QAAM,aAAa,qBAAqB,kBAAkB,qBAAqB;AAC/E,QAAM,IAAI,SAAS,KAAK,IAAI,UAAU;AACtC,QAAM,IAAI,CAAC,SAAS,KAAK,IAAI,UAAU;AAEvC,QAAM,UAAU,QAAQ,MAAM,gBAAgB,GAAG,QAAQ,SAAS,CAAC,aAAa,OAAO,IAAI,CAAC;AAC5F,YAAU,MAAM;AACd,QAAI,OAAO,SAAS;AAClB,UAAI;AAAS,eAAO,OAAO,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,SAAS,EAAE,SAAS,GAAG;AAAA;AAC7E,eAAO,OAAO,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,SAAS,EAAE,SAAS,GAAG;AAAA,IAC5E;AAAA,EACF,GAAG,CAAC,WAAW,SAAS,SAAS,CAAC;AAElC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiC;AAEjF,QAAM,mBAAmB,YAAY,MAAM;AACzC,QAAI;AAAM,qBAAe,GAAG,QAAQ,OAAO;AAAA,EAC7C,GAAG,CAAC,OAAO,MAAM,cAAc,CAAC;AAEhC,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI;AAAM,qBAAe,EAAE;AAAA,EAC7B,GAAG,CAAC,MAAM,cAAc,CAAC;AACzB,SACE,qBAAC,OAAE,cAAc,kBAAkB,cAAc,oBAAoB,WAAW,YAAY,gBAAgB,IAC1G;AAAA,wBAAC,UAAK,KAAK,QAAQ,MAAM,aAAa,UAAU,OAAO,QAAO,SAAQ;AAAA,IAErE,QAAQ,mBAAmB,WAC1B,oBAAC,mBAAc,GAAM,GACnB,8BAAC,SAAI,KAAK,qBACR,+BAAC,cAAW,kBAAoC,aAAW,MAAC,QAAQ,KAClE;AAAA,0BAAC,0BACC,8BAAC,mBAAgB,MAAM,WAAW,GACpC;AAAA,MACA,oBAAC,+BAA4B;AAAA,OAC/B,GACF,GACF;AAAA,KAEJ;AAEJ;",
   "names": []
 }