@elliemae/ds-dataviz-pie 3.70.0-next.4 → 3.70.0-next.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,7 +35,7 @@ var React = __toESM(require("react"));
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var import_react = require("react");
37
37
  var import_d3 = require("d3");
38
- var import_ds_popperjs = require("@elliemae/ds-popperjs");
38
+ var import_ds_floating_context = require("@elliemae/ds-floating-context");
39
39
  var import_PieContext = require("../PieContext.js");
40
40
  var import_colorPallet = require("../helpers/colorPallet.js");
41
41
  var import_styles = require("../styles.js");
@@ -74,7 +74,12 @@ const Slice = ({ data }) => {
74
74
  (0, import_d3.select)(arcRef.current).transition().attr("d", sliceData).duration(300);
75
75
  }
76
76
  }, [sliceData, isFocus, sliceOver]);
77
- const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
77
+ const isTooltipVisible = !!(name && TooltipRenderer && isFocus);
78
+ const { refs, floatingStyles, arrowStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
79
+ externallyControlledIsOpen: isTooltipVisible,
80
+ withoutAnimation: true,
81
+ customOffset: [0, 14]
82
+ });
78
83
  const handleMouseEnter = (0, import_react.useCallback)(() => {
79
84
  if (name) setActiveSerie(`${name}-${index}`);
80
85
  }, [index, name, setActiveSerie]);
@@ -83,10 +88,20 @@ const Slice = ({ data }) => {
83
88
  }, [name, setActiveSerie]);
84
89
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { onMouseEnter: handleMouseEnter, onMouseLeave: handleOnMouseLeave, transform: isHalfPie ? "rotate(-90)" : "", children: [
85
90
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { ref: arcRef, fill: import_colorPallet.COLOR_PALLET[color] ?? color, stroke: "white" }),
86
- name && TooltipRenderer && isFocus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", { x, y, 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: [
87
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, { data: serieData }) }),
88
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {})
89
- ] }) }) })
91
+ isTooltipVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", { x, y, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: refs.setReference, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
92
+ import_ds_floating_context.FloatingWrapper,
93
+ {
94
+ innerRef: refs.setFloating,
95
+ isOpen: isTooltipVisible,
96
+ floatingStyles: { ...floatingStyles, zIndex: 3e3 },
97
+ context,
98
+ children: [
99
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, { data: serieData }) }),
100
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {}),
101
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
102
+ ]
103
+ }
104
+ ) }) })
90
105
  ] });
91
106
  };
92
107
  //# sourceMappingURL=Slice.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/Slice.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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';\n\ninterface SliceT {\n data: {\n data: [string, number];\n index: number;\n endAngle: number;\n startAngle: number;\n };\n}\nexport const Slice: React.ComponentType<SliceT> = ({ 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)\n select(arcRef.current)\n .transition()\n .attr('d', sliceOver as unknown as string)\n .duration(300);\n else\n select(arcRef.current)\n .transition()\n .attr('d', sliceData as unknown as string)\n .duration(300);\n }\n }, [sliceData, isFocus, sliceOver]);\n\n const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(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\n return (\n <g onMouseEnter={handleMouseEnter} onMouseLeave={handleOnMouseLeave} transform={isHalfPie ? 'rotate(-90)' : ''}>\n <path ref={arcRef} fill={COLOR_PALLET[color as keyof typeof COLOR_PALLET] ?? 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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useEffect, useCallback, useMemo, useRef, useContext } from 'react';\nimport { arc, select } from 'd3';\nimport { useFloatingContext, FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport { PieContext } from '../PieContext.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles.js';\n\ninterface SliceT {\n data: {\n data: [string, number];\n index: number;\n endAngle: number;\n startAngle: number;\n };\n}\nexport const Slice: React.ComponentType<SliceT> = ({ 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)\n select(arcRef.current)\n .transition()\n .attr('d', sliceOver as unknown as string)\n .duration(300);\n else\n select(arcRef.current)\n .transition()\n .attr('d', sliceData as unknown as string)\n .duration(300);\n }\n }, [sliceData, isFocus, sliceOver]);\n\n const isTooltipVisible = !!(name && TooltipRenderer && isFocus);\n const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n externallyControlledIsOpen: isTooltipVisible,\n withoutAnimation: true,\n customOffset: [0, 14],\n });\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\n return (\n <g onMouseEnter={handleMouseEnter} onMouseLeave={handleOnMouseLeave} transform={isHalfPie ? 'rotate(-90)' : ''}>\n <path ref={arcRef} fill={COLOR_PALLET[color as keyof typeof COLOR_PALLET] ?? color} stroke=\"white\"></path>\n\n {isTooltipVisible && (\n <foreignObject x={x} y={y}>\n <div ref={refs.setReference}>\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isTooltipVisible}\n floatingStyles={{ ...floatingStyles, zIndex: 3000 }}\n context={context}\n >\n <StyledTooltipContainer>\n <TooltipRenderer data={serieData} />\n </StyledTooltipContainer>\n <StyledMouseOverDetectionBox />\n <PopoverArrow {...arrowStyles} />\n </FloatingWrapper>\n </div>\n </foreignObject>\n )}\n </g>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -1,8 +1,8 @@
1
1
  import * as React from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import { useState, useEffect, useCallback, useMemo, useRef, useContext } from "react";
3
+ import { useEffect, useCallback, useMemo, useRef, useContext } from "react";
4
4
  import { arc, select } from "d3";
5
- import { DSPopperJS } from "@elliemae/ds-popperjs";
5
+ import { useFloatingContext, FloatingWrapper, PopoverArrow } from "@elliemae/ds-floating-context";
6
6
  import { PieContext } from "../PieContext.js";
7
7
  import { COLOR_PALLET } from "../helpers/colorPallet.js";
8
8
  import { StyledTooltipContainer, StyledMouseOverDetectionBox } from "../styles.js";
@@ -41,7 +41,12 @@ const Slice = ({ data }) => {
41
41
  select(arcRef.current).transition().attr("d", sliceData).duration(300);
42
42
  }
43
43
  }, [sliceData, isFocus, sliceOver]);
44
- const [referenceElement, setReferenceElement] = useState(null);
44
+ const isTooltipVisible = !!(name && TooltipRenderer && isFocus);
45
+ const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({
46
+ externallyControlledIsOpen: isTooltipVisible,
47
+ withoutAnimation: true,
48
+ customOffset: [0, 14]
49
+ });
45
50
  const handleMouseEnter = useCallback(() => {
46
51
  if (name) setActiveSerie(`${name}-${index}`);
47
52
  }, [index, name, setActiveSerie]);
@@ -50,10 +55,20 @@ const Slice = ({ data }) => {
50
55
  }, [name, setActiveSerie]);
51
56
  return /* @__PURE__ */ jsxs("g", { onMouseEnter: handleMouseEnter, onMouseLeave: handleOnMouseLeave, transform: isHalfPie ? "rotate(-90)" : "", children: [
52
57
  /* @__PURE__ */ jsx("path", { ref: arcRef, fill: COLOR_PALLET[color] ?? color, stroke: "white" }),
53
- name && TooltipRenderer && isFocus && /* @__PURE__ */ jsx("foreignObject", { x, y, children: /* @__PURE__ */ jsx("div", { ref: setReferenceElement, children: /* @__PURE__ */ jsxs(DSPopperJS, { referenceElement, showPopover: true, zIndex: 3e3, children: [
54
- /* @__PURE__ */ jsx(StyledTooltipContainer, { children: /* @__PURE__ */ jsx(TooltipRenderer, { data: serieData }) }),
55
- /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {})
56
- ] }) }) })
58
+ isTooltipVisible && /* @__PURE__ */ jsx("foreignObject", { x, y, children: /* @__PURE__ */ jsx("div", { ref: refs.setReference, children: /* @__PURE__ */ jsxs(
59
+ FloatingWrapper,
60
+ {
61
+ innerRef: refs.setFloating,
62
+ isOpen: isTooltipVisible,
63
+ floatingStyles: { ...floatingStyles, zIndex: 3e3 },
64
+ context,
65
+ children: [
66
+ /* @__PURE__ */ jsx(StyledTooltipContainer, { children: /* @__PURE__ */ jsx(TooltipRenderer, { data: serieData }) }),
67
+ /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {}),
68
+ /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
69
+ ]
70
+ }
71
+ ) }) })
57
72
  ] });
58
73
  };
59
74
  export {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Slice.tsx"],
4
- "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';\n\ninterface SliceT {\n data: {\n data: [string, number];\n index: number;\n endAngle: number;\n startAngle: number;\n };\n}\nexport const Slice: React.ComponentType<SliceT> = ({ 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)\n select(arcRef.current)\n .transition()\n .attr('d', sliceOver as unknown as string)\n .duration(300);\n else\n select(arcRef.current)\n .transition()\n .attr('d', sliceData as unknown as string)\n .duration(300);\n }\n }, [sliceData, isFocus, sliceOver]);\n\n const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(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\n return (\n <g onMouseEnter={handleMouseEnter} onMouseLeave={handleOnMouseLeave} transform={isHalfPie ? 'rotate(-90)' : ''}>\n <path ref={arcRef} fill={COLOR_PALLET[color as keyof typeof COLOR_PALLET] ?? 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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useEffect, useCallback, useMemo, useRef, useContext } from 'react';\nimport { arc, select } from 'd3';\nimport { useFloatingContext, FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport { PieContext } from '../PieContext.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles.js';\n\ninterface SliceT {\n data: {\n data: [string, number];\n index: number;\n endAngle: number;\n startAngle: number;\n };\n}\nexport const Slice: React.ComponentType<SliceT> = ({ 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)\n select(arcRef.current)\n .transition()\n .attr('d', sliceOver as unknown as string)\n .duration(300);\n else\n select(arcRef.current)\n .transition()\n .attr('d', sliceData as unknown as string)\n .duration(300);\n }\n }, [sliceData, isFocus, sliceOver]);\n\n const isTooltipVisible = !!(name && TooltipRenderer && isFocus);\n const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n externallyControlledIsOpen: isTooltipVisible,\n withoutAnimation: true,\n customOffset: [0, 14],\n });\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\n return (\n <g onMouseEnter={handleMouseEnter} onMouseLeave={handleOnMouseLeave} transform={isHalfPie ? 'rotate(-90)' : ''}>\n <path ref={arcRef} fill={COLOR_PALLET[color as keyof typeof COLOR_PALLET] ?? color} stroke=\"white\"></path>\n\n {isTooltipVisible && (\n <foreignObject x={x} y={y}>\n <div ref={refs.setReference}>\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isTooltipVisible}\n floatingStyles={{ ...floatingStyles, zIndex: 3000 }}\n context={context}\n >\n <StyledTooltipContainer>\n <TooltipRenderer data={serieData} />\n </StyledTooltipContainer>\n <StyledMouseOverDetectionBox />\n <PopoverArrow {...arrowStyles} />\n </FloatingWrapper>\n </div>\n </foreignObject>\n )}\n </g>\n );\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-dataviz-pie",
3
- "version": "3.70.0-next.4",
3
+ "version": "3.70.0-next.6",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - DataViz",
6
6
  "files": [
@@ -37,16 +37,16 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "d3": "~7.9.0",
40
- "@elliemae/ds-popperjs": "3.70.0-next.4",
41
- "@elliemae/ds-system": "3.70.0-next.4",
42
- "@elliemae/ds-props-helpers": "3.70.0-next.4"
40
+ "@elliemae/ds-floating-context": "3.70.0-next.6",
41
+ "@elliemae/ds-system": "3.70.0-next.6",
42
+ "@elliemae/ds-props-helpers": "3.70.0-next.6"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@elliemae/pui-theme": "~2.13.0",
46
46
  "@types/d3": "~7.4.0",
47
47
  "jest": "^30.0.0",
48
48
  "styled-components": "~5.3.9",
49
- "@elliemae/ds-monorepo-devops": "3.70.0-next.4"
49
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.6"
50
50
  },
51
51
  "peerDependencies": {
52
52
  "@elliemae/pui-theme": "~2.13.0",