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

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

package/dist/esm/styles.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { styled, css } from "@elliemae/ds-system";
+import { styled } from "@elliemae/ds-system";
 const StyledSVGWrapper = styled.div`
   :focus {
     outline: none;
@@ -8,66 +8,26 @@ const StyledSVGWrapper = styled.div`
     outline: none;
   }
 `;
-const StyledAxis = styled("g")`
-  text {
-    fill: #635f5d;
-  }
-
-  text.axis-label {
-    font-size: 2.5em;
-  }
-
-  .tick text {
-    ${({ color }) => color ? `fill: ${color}` : ""}
-  }
-  .tick line {
-    ${({ color }) => color ? `stroke: ${color}` : ""}
-  }
-  line {
-    stroke: #c0c0bb;
-  }
-`;
-const StyledGrid = styled("g")`
-  line {
-    stroke: #c0c0bb;
-  }
-`;
-const borderCircle = css`
-  stroke: red;
-  stroke-width: 2;
-`;
-const StyledMark = styled("rect")`
-  ${({ isFocused }) => isFocused ? borderCircle : ""};
-`;
-const StyleFocusableRegion = styled("div")`
-  width: ${({ s }) => s * 2}px;
-  height: ${({ s }) => s * 2}px;
-  :focus {
-    outline: none;
-  }
-`;
-const StyledLine = styled("path")`
-  fill: none;
-  stroke-width: ${({ isActiveLine }) => isActiveLine ? 5 : 3};
-  stroke-linejoin: round;
+const StyledInnerText = styled.text`
+  font-size: 14px;
+  font-weight: 600;
 `;
-const StyledArea = styled("path")`
-  stroke-width: ${({ isActiveLine }) => isActiveLine ? 5 : 3};
-  stroke-linejoin: round;
-  opacity: 0.8;
+const StyledTooltipContainer = styled.div`
+  max-width: 350px;
+  background-color: white;
 `;
-const StyledPoint = styled("circle")`
-  opacity: ${({ opacity }) => opacity};
-  ${({ isFocused }) => isFocused ? borderCircle : ""};
+const StyledMouseOverDetectionBox = styled.div`
+  position: absolute;
+  top: -15px;
+  right: -15px;
+  width: calc(100% + 30px);
+  height: calc(100% + 30px);
+  z-index: -1;
 `;
 export {
-  StyleFocusableRegion,
-  StyledArea,
-  StyledAxis,
-  StyledGrid,
-  StyledLine,
-  StyledMark,
-  StyledPoint,
-  StyledSVGWrapper
+  StyledInnerText,
+  StyledMouseOverDetectionBox,
+  StyledSVGWrapper,
+  StyledTooltipContainer
 };
 //# sourceMappingURL=styles.js.map

package/dist/esm/styles.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dataviz-pie",
-  "version": "3.9.0",
+  "version": "3.10.0-next.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - DataViz",
   "files": [
@@ -35,13 +35,13 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-grid": "3.9.0",
-    "@elliemae/ds-icon": "3.9.0",
-    "@elliemae/ds-icons": "3.9.0",
-    "@elliemae/ds-popperjs": "3.9.0",
-    "@elliemae/ds-system": "3.9.0",
-    "@elliemae/ds-tooltip": "3.9.0",
-    "@elliemae/ds-utilities": "3.9.0",
+    "@elliemae/ds-grid": "3.10.0-next.0",
+    "@elliemae/ds-icon": "3.10.0-next.0",
+    "@elliemae/ds-icons": "3.10.0-next.0",
+    "@elliemae/ds-popperjs": "3.10.0-next.0",
+    "@elliemae/ds-system": "3.10.0-next.0",
+    "@elliemae/ds-tooltip": "3.10.0-next.0",
+    "@elliemae/ds-utilities": "3.10.0-next.0",
     "d3": "~7.4.4"
   },
   "devDependencies": {

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/parts/Tooltip.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\n\nexport const Tooltip: React.ComponentType<any> = (props) => {\n  const { children, innerRef, isTooltipShown, onFocus, onBlur, ...extraPopperJsProps } = props;\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n\n  return (\n    <div onFocus={onFocus} onBlur={onBlur} tabIndex={0} ref={setReferenceElement} className=\"myclass\">\n      <DSPopperJS\n        referenceElement={referenceElement}\n        showPopover={isTooltipShown}\n        zIndex={3000}\n        {...extraPopperJsProps}\n      >\n        <div style={{ backgroundColor: 'white' }}>{children}</div>\n      </DSPopperJS>\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAgC;AAChC,yBAA2B;AAEpB,MAAM,UAAoC,CAAC,UAAU;AAC1D,QAAM,EAAE,UAAU,UAAU,gBAAgB,SAAS,WAAW,mBAAmB,IAAI;AAEvF,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAiC;AAEjF,SACE,4CAAC;AAAA,IAAI;AAAA,IAAkB;AAAA,IAAgB,UAAU;AAAA,IAAG,KAAK;AAAA,IAAqB,WAAU;AAAA,IACtF,sDAAC;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb,QAAQ;AAAA,MACP,GAAG;AAAA,MAEJ,sDAAC;AAAA,QAAI,OAAO,EAAE,iBAAiB,QAAQ;AAAA,QAAI;AAAA,OAAS;AAAA,KACtD;AAAA,GACF;AAEJ;",
-  "names": []
-}

package/dist/esm/parts/Tooltip.js

@@ -1,29 +0,0 @@
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { DSPopperJS } from "@elliemae/ds-popperjs";
-const Tooltip = (props) => {
-  const { children, innerRef, isTooltipShown, onFocus, onBlur, ...extraPopperJsProps } = props;
-  const [referenceElement, setReferenceElement] = useState();
-  return /* @__PURE__ */ jsx("div", {
-    onFocus,
-    onBlur,
-    tabIndex: 0,
-    ref: setReferenceElement,
-    className: "myclass",
-    children: /* @__PURE__ */ jsx(DSPopperJS, {
-      referenceElement,
-      showPopover: isTooltipShown,
-      zIndex: 3e3,
-      ...extraPopperJsProps,
-      children: /* @__PURE__ */ jsx("div", {
-        style: { backgroundColor: "white" },
-        children
-      })
-    })
-  });
-};
-export {
-  Tooltip
-};
-//# sourceMappingURL=Tooltip.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Tooltip.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\n\nexport const Tooltip: React.ComponentType<any> = (props) => {\n  const { children, innerRef, isTooltipShown, onFocus, onBlur, ...extraPopperJsProps } = props;\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n\n  return (\n    <div onFocus={onFocus} onBlur={onBlur} tabIndex={0} ref={setReferenceElement} className=\"myclass\">\n      <DSPopperJS\n        referenceElement={referenceElement}\n        showPopover={isTooltipShown}\n        zIndex={3000}\n        {...extraPopperJsProps}\n      >\n        <div style={{ backgroundColor: 'white' }}>{children}</div>\n      </DSPopperJS>\n    </div>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,gBAAgB;AAChC,SAAS,kBAAkB;AAEpB,MAAM,UAAoC,CAAC,UAAU;AAC1D,QAAM,EAAE,UAAU,UAAU,gBAAgB,SAAS,WAAW,mBAAmB,IAAI;AAEvF,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiC;AAEjF,SACE,oBAAC;AAAA,IAAI;AAAA,IAAkB;AAAA,IAAgB,UAAU;AAAA,IAAG,KAAK;AAAA,IAAqB,WAAU;AAAA,IACtF,8BAAC;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb,QAAQ;AAAA,MACP,GAAG;AAAA,MAEJ,8BAAC;AAAA,QAAI,OAAO,EAAE,iBAAiB,QAAQ;AAAA,QAAI;AAAA,OAAS;AAAA,KACtD;AAAA,GACF;AAEJ;",
-  "names": []
-}