@elliemae/ds-dataviz 3.62.1 → 3.70.0-alpha.9

package/dist/cjs/graphs/Chart/SingleStackedBar/SingleStackedBar.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(SingleStackedBar_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_popperjs = require("@elliemae/ds-popperjs");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_system = require("@elliemae/ds-system");
 var import_react = __toESM(require("react"));
@@ -44,9 +44,20 @@ var import_exported_related = require("./exported-related/index.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_styles = require("./styles.js");
 const Bar = import_react.default.memo((props) => {
-  const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
   const [isHover, setIsHover] = (0, import_react.useState)(false);
   const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;
+  const isTooltipOpen = (isFocused || isHover) && !!TooltipRenderer;
+  const {
+    refs,
+    floatingStyles,
+    arrowStyles,
+    context,
+    isOpen: isFloatingOpen
+  } = (0, import_ds_floating_context.useFloatingContext)({
+    externallyControlledIsOpen: isTooltipOpen,
+    withoutAnimation: true,
+    customOffset: [0, 14]
+  });
   const handleRefCallback = (0, import_react.useCallback)(
     (_ref) => {
       if (isFocused) {
@@ -61,20 +72,31 @@ const Bar = import_react.default.memo((props) => {
   const handleMouseLeave = (0, import_react.useCallback)(() => {
     setIsHover(false);
   }, []);
+  const backgroundColor = datum.color in import_colorPallet.COLOR_PALLET ? import_colorPallet.COLOR_PALLET[datum.color] : datum.color;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    (isFocused || isHover) && TooltipRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_popperjs.DSPopperJS, { referenceElement, showPopover: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, { datum }) })
-    ] }) : null,
+    TooltipRenderer && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_ds_floating_context.FloatingWrapper,
+      {
+        innerRef: refs.setFloating,
+        isOpen: isFloatingOpen,
+        floatingStyles,
+        context,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, { datum }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_styles.StyledBar,
       {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        bg,
+        bg: backgroundColor,
         height,
         borderRadius,
-        innerRef: (0, import_ds_system.mergeRefs)(handleRefCallback, setReferenceElement),
+        innerRef: (0, import_ds_system.mergeRefs)(handleRefCallback, refs.setReference),
         tabIndex,
         role: "img",
         "aria-label": `${datum.name} value: ${datum.data}`
@@ -138,21 +160,24 @@ const DSSingleStackedBar = (props) => {
       onBlur: (e) => e.currentTarget !== e.target && setIsChartFocused(false),
       ...xstyledProps,
       ...globalAttributes,
-      children: data.map((datum, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { rows, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          Bar,
-          {
-            datum,
-            isFocused: barNames[keyBarFocused] === datum.name && isChartFocused,
-            borderRadius: getBorderRadius(i),
-            bg: import_colorPallet.COLOR_PALLET[datum.color] ?? datum.color,
-            tabIndex: i === keyBarFocused ? 0 : -1,
-            ...props
-          },
-          datum.name
-        ),
-        LegendRenderer !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LegendRenderer, { datum }, `${datum.name}-legend`) : null
-      ] }))
+      children: data.map((datum, i) => {
+        const backgroundColor = datum.color in import_colorPallet.COLOR_PALLET ? import_colorPallet.COLOR_PALLET[datum.color] : datum.color;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { rows, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Bar,
+            {
+              datum,
+              isFocused: barNames[keyBarFocused] === datum.name && isChartFocused,
+              borderRadius: getBorderRadius(i),
+              bg: backgroundColor,
+              tabIndex: i === keyBarFocused ? 0 : -1,
+              ...props
+            },
+            datum.name
+          ),
+          LegendRenderer !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LegendRenderer, { datum }, `${datum.name}-legend`) : null
+        ] });
+      })
     }
   );
 };

package/dist/cjs/graphs/Chart/SingleStackedBar/SingleStackedBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/SingleStackedBar/SingleStackedBar.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { DSSingleStackedBarName } from './exported-related/index.js';\nimport { DSSingleStackedBarPropTypes, defaultProps, type DSSingleStackedBarT } from './react-desc-prop-types.js';\nimport { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from './styles.js';\nconst Bar = React.memo((props: DSSingleStackedBarT.BarT) => {\n  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);\n  const [isHover, setIsHover] = useState(false);\n  const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;\n  const handleRefCallback = useCallback(\n    (_ref: HTMLDivElement | null) => {\n      if (isFocused) {\n        _ref?.focus();\n      }\n    },\n    [isFocused],\n  );\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHover(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHover(false);\n  }, []);\n  return (\n    <div>\n      {(isFocused || isHover) && TooltipRenderer ? (\n        <DSPopperJS referenceElement={referenceElement} showPopover>\n          <StyledMouseOverDetectionBox />\n          <StyledTooltipContainer>\n            <TooltipRenderer datum={datum} />\n          </StyledTooltipContainer>\n        </DSPopperJS>\n      ) : null}\n      <StyledBar\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        bg={bg}\n        height={height}\n        borderRadius={borderRadius}\n        innerRef={mergeRefs(handleRefCallback, setReferenceElement)}\n        tabIndex={tabIndex}\n        role=\"img\"\n        // until uziel work is merged we keep this default value\n        aria-label={`${datum.name} value: ${datum.data}`}\n      />\n    </div>\n  );\n});\n\nconst DSSingleStackedBar: React.ComponentType<DSSingleStackedBarT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSSingleStackedBarT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSSingleStackedBarPropTypes, 'DSSingleStackedBar');\n\n  const globalAttributes = useGetGlobalAttributes<DSSingleStackedBarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    propsWithDefaults,\n  );\n\n  const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const { data, LegendRenderer, gutter, height } = propsWithDefaults;\n  const [keyBarFocused, setKeyBarFocused] = useState<number>(0);\n  const [isChartFocused, setIsChartFocused] = useState(false);\n\n  const total = useMemo(() => data.map((datum) => datum.data).reduce((acc, curr) => acc + curr, 0), [data]);\n  const cols = useMemo(() => data.map((datum) => `${Math.ceil(datum.data * 100) / total}%`), [data, total]);\n  const rows = useMemo(\n    () => (LegendRenderer !== undefined ? [`${height}px`, 'auto'] : [`${height}px`]),\n    [LegendRenderer, height],\n  );\n  const barNames = useMemo(() => data.map((datum) => datum.name), [data]);\n  const getBorderRadius = useCallback(\n    (index: number) => {\n      if (index === 0) return '50px 0 0 50px';\n      if (index === data.length - 1) return '0 50px 50px 0';\n      return undefined;\n    },\n    [data.length],\n  );\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowRight') {\n        if (barNames[keyBarFocused + 1]) {\n          setKeyBarFocused(keyBarFocused + 1);\n        } else {\n          setKeyBarFocused(0);\n        }\n      }\n      if (e.code === 'ArrowLeft') {\n        if (barNames[keyBarFocused - 1]) {\n          setKeyBarFocused(keyBarFocused - 1);\n        } else {\n          setKeyBarFocused(barNames.length - 1);\n        }\n      }\n    },\n    [keyBarFocused, barNames],\n  );\n\n  return (\n    <Wrapper\n      cols={cols}\n      gutter={gutter}\n      role=\"region\"\n      onKeyDown={handleOnKeyDown}\n      tabIndex={-1}\n      onFocus={() => setIsChartFocused(true)}\n      onBlur={(e) => e.currentTarget !== e.target && setIsChartFocused(false)}\n      {...xstyledProps}\n      {...globalAttributes}\n    >\n      {data.map((datum, i) => (\n        <Grid rows={rows}>\n          <Bar\n            key={datum.name}\n            datum={datum}\n            isFocused={barNames[keyBarFocused] === datum.name && isChartFocused}\n            borderRadius={getBorderRadius(i)}\n            bg={COLOR_PALLET[datum.color as keyof typeof COLOR_PALLET] ?? datum.color}\n            tabIndex={i === keyBarFocused ? 0 : -1}\n            {...props}\n          />\n          {LegendRenderer !== undefined ? <LegendRenderer key={`${datum.name}-legend`} datum={datum} /> : null}\n        </Grid>\n      ))}\n    </Wrapper>\n  );\n};\n\nDSSingleStackedBar.displayName = DSSingleStackedBarName;\nconst DSSingleStackedBarWithSchema = describe(DSSingleStackedBar);\nDSSingleStackedBarWithSchema.propTypes =\n  DSSingleStackedBarPropTypes as unknown as WeakValidationMap<DSSingleStackedBarT.Props>;\n\nexport { DSSingleStackedBar, DSSingleStackedBarWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useFloatingContext, FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { DSSingleStackedBarName } from './exported-related/index.js';\nimport { DSSingleStackedBarPropTypes, defaultProps, type DSSingleStackedBarT } from './react-desc-prop-types.js';\nimport { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from './styles.js';\nconst Bar = React.memo((props: DSSingleStackedBarT.BarT) => {\n  const [isHover, setIsHover] = useState(false);\n  const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;\n\n  const isTooltipOpen = (isFocused || isHover) && !!TooltipRenderer;\n  const {\n    refs,\n    floatingStyles,\n    arrowStyles,\n    context,\n    isOpen: isFloatingOpen,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isTooltipOpen,\n    withoutAnimation: true,\n    customOffset: [0, 14],\n  });\n\n  const handleRefCallback = useCallback(\n    (_ref: HTMLDivElement | null) => {\n      if (isFocused) {\n        _ref?.focus();\n      }\n    },\n    [isFocused],\n  );\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHover(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHover(false);\n  }, []);\n\n  const backgroundColor =\n    datum.color in COLOR_PALLET ? COLOR_PALLET[datum.color as keyof typeof COLOR_PALLET] : datum.color;\n  return (\n    <div>\n      {TooltipRenderer && (\n        <FloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={isFloatingOpen}\n          floatingStyles={floatingStyles}\n          context={context}\n        >\n          <StyledMouseOverDetectionBox />\n          <StyledTooltipContainer>\n            <TooltipRenderer datum={datum} />\n          </StyledTooltipContainer>\n          <PopoverArrow {...arrowStyles} />\n        </FloatingWrapper>\n      )}\n      <StyledBar\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        bg={backgroundColor}\n        height={height}\n        borderRadius={borderRadius}\n        innerRef={mergeRefs(handleRefCallback, refs.setReference)}\n        tabIndex={tabIndex}\n        role=\"img\"\n        // until uziel work is merged we keep this default value\n        aria-label={`${datum.name} value: ${datum.data}`}\n      />\n    </div>\n  );\n});\n\nconst DSSingleStackedBar: React.ComponentType<DSSingleStackedBarT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSSingleStackedBarT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSSingleStackedBarPropTypes, 'DSSingleStackedBar');\n\n  const globalAttributes = useGetGlobalAttributes<DSSingleStackedBarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    propsWithDefaults,\n  );\n\n  const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const { data, LegendRenderer, gutter, height } = propsWithDefaults;\n  const [keyBarFocused, setKeyBarFocused] = useState<number>(0);\n  const [isChartFocused, setIsChartFocused] = useState(false);\n\n  const total = useMemo(() => data.map((datum) => datum.data).reduce((acc, curr) => acc + curr, 0), [data]);\n  const cols = useMemo(() => data.map((datum) => `${Math.ceil(datum.data * 100) / total}%`), [data, total]);\n  const rows = useMemo(\n    () => (LegendRenderer !== undefined ? [`${height}px`, 'auto'] : [`${height}px`]),\n    [LegendRenderer, height],\n  );\n  const barNames = useMemo(() => data.map((datum) => datum.name), [data]);\n  const getBorderRadius = useCallback(\n    (index: number) => {\n      if (index === 0) return '50px 0 0 50px';\n      if (index === data.length - 1) return '0 50px 50px 0';\n      return undefined;\n    },\n    [data.length],\n  );\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowRight') {\n        if (barNames[keyBarFocused + 1]) {\n          setKeyBarFocused(keyBarFocused + 1);\n        } else {\n          setKeyBarFocused(0);\n        }\n      }\n      if (e.code === 'ArrowLeft') {\n        if (barNames[keyBarFocused - 1]) {\n          setKeyBarFocused(keyBarFocused - 1);\n        } else {\n          setKeyBarFocused(barNames.length - 1);\n        }\n      }\n    },\n    [keyBarFocused, barNames],\n  );\n\n  return (\n    <Wrapper\n      cols={cols}\n      gutter={gutter}\n      role=\"region\"\n      onKeyDown={handleOnKeyDown}\n      tabIndex={-1}\n      onFocus={() => setIsChartFocused(true)}\n      onBlur={(e) => e.currentTarget !== e.target && setIsChartFocused(false)}\n      {...xstyledProps}\n      {...globalAttributes}\n    >\n      {data.map((datum, i) => {\n        const backgroundColor =\n          datum.color in COLOR_PALLET ? COLOR_PALLET[datum.color as keyof typeof COLOR_PALLET] : datum.color;\n        return (\n          <Grid rows={rows}>\n            <Bar\n              key={datum.name}\n              datum={datum}\n              isFocused={barNames[keyBarFocused] === datum.name && isChartFocused}\n              borderRadius={getBorderRadius(i)}\n              bg={backgroundColor}\n              tabIndex={i === keyBarFocused ? 0 : -1}\n              {...props}\n            />\n            {LegendRenderer !== undefined ? <LegendRenderer key={`${datum.name}-legend`} datum={datum} /> : null}\n          </Grid>\n        );\n      })}\n    </Wrapper>\n  );\n};\n\nDSSingleStackedBar.displayName = DSSingleStackedBarName;\nconst DSSingleStackedBarWithSchema = describe(DSSingleStackedBar);\nDSSingleStackedBarWithSchema.propTypes =\n  DSSingleStackedBarPropTypes as unknown as WeakValidationMap<DSSingleStackedBarT.Props>;\n\nexport { DSSingleStackedBar, DSSingleStackedBarWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/SingleStackedBar/react-desc-prop-types.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { type BackgroundProps, type BorderProps } from '@elliemae/ds-system';\n\nexport declare namespace DSSingleStackedBarT {\n  export type DatumT = {\n    name: string;\n    data: number;\n    color: string;\n  };\n  export type SingleStackedBarDatumT = DatumT[];\n  export type TooltipRenderDataT = {\n    datum: DatumT;\n  };\n  export interface SingleStackedBarT {\n    data: SingleStackedBarDatumT;\n    TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n    LegendRenderer?: React.ComponentType<TooltipRenderDataT>;\n    height: string | number;\n    gutter?: string | number;\n  }\n\n  export interface BarT extends SingleStackedBarT {\n    isFocused: boolean;\n    borderRadius?: BorderProps['borderRadius'];\n    bg: BackgroundProps['bg'];\n    tabIndex?: 0 | -1;\n    datum: DatumT;\n  }\n\n  export interface RequiredProps {\n    height: string | number;\n    data: DatumT[];\n  }\n\n  export interface DefaultProps {\n    gutter: string;\n  }\n\n  export interface OptionalProps {\n    TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n    LegendRenderer?: React.ComponentType<TooltipRenderDataT>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSSingleStackedBarT.DefaultProps = {\n  gutter: 'xxxs',\n};\n\nexport const DSSingleStackedBarPropTypes: DSPropTypesSchema<DSSingleStackedBarT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  height: PropTypes.string.description('Height of the bar').isRequired,\n  gutter: PropTypes.string.description('Gap between the bars').defaultValue('xxxs'),\n  TooltipRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the tooltip'),\n  LegendRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the legend'),\n  data: PropTypes.arrayOf(\n    PropTypes.shape({ name: PropTypes.string, data: PropTypes.number, color: PropTypes.string }),\n  ).description('Array of the series which represent the chart'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;AA2DhE,MAAM,eAAiD;AAAA,EAC5D,QAAQ;AACV;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,QAAQ,kCAAU,OAAO,YAAY,mBAAmB,EAAE;AAAA,EAC1D,QAAQ,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAChF,iBAAiB,kCAAU,KAAK,YAAY,kEAAkE;AAAA,EAC9G,gBAAgB,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,MAAM,kCAAU;AAAA,IACd,kCAAU,MAAM,EAAE,MAAM,kCAAU,QAAQ,MAAM,kCAAU,QAAQ,OAAO,kCAAU,OAAO,CAAC;AAAA,EAC7F,EAAE,YAAY,+CAA+C;AAC/D;",
+  "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type BorderProps } from '@elliemae/ds-system';\n\nexport declare namespace DSSingleStackedBarT {\n  export type DatumT = {\n    name: string;\n    data: number;\n    color: string;\n  };\n  export type SingleStackedBarDatumT = DatumT[];\n  export type TooltipRenderDataT = {\n    datum: DatumT;\n  };\n  export interface SingleStackedBarT {\n    data: SingleStackedBarDatumT;\n    TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n    LegendRenderer?: React.ComponentType<TooltipRenderDataT>;\n    height: string | number;\n    gutter?: string | number;\n  }\n\n  export interface BarT extends SingleStackedBarT {\n    isFocused: boolean;\n    borderRadius?: BorderProps['borderRadius'];\n    bg: string;\n    tabIndex?: 0 | -1;\n    datum: DatumT;\n  }\n\n  export interface RequiredProps {\n    height: string | number;\n    data: DatumT[];\n  }\n\n  export interface DefaultProps {\n    gutter: string;\n  }\n\n  export interface OptionalProps {\n    TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n    LegendRenderer?: React.ComponentType<TooltipRenderDataT>;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSSingleStackedBarT.DefaultProps = {\n  gutter: 'xxxs',\n};\n\nexport const DSSingleStackedBarPropTypes: DSPropTypesSchema<DSSingleStackedBarT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  height: PropTypes.string.description('Height of the bar').isRequired,\n  gutter: PropTypes.string.description('Gap between the bars').defaultValue('xxxs'),\n  TooltipRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the tooltip'),\n  LegendRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the legend'),\n  data: PropTypes.arrayOf(\n    PropTypes.shape({ name: PropTypes.string, data: PropTypes.number, color: PropTypes.string }),\n  ).description('Array of the series which represent the chart'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AA4DhE,MAAM,eAAiD;AAAA,EAC5D,QAAQ;AACV;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,QAAQ,kCAAU,OAAO,YAAY,mBAAmB,EAAE;AAAA,EAC1D,QAAQ,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAChF,iBAAiB,kCAAU,KAAK,YAAY,kEAAkE;AAAA,EAC9G,gBAAgB,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,MAAM,kCAAU;AAAA,IACd,kCAAU,MAAM,EAAE,MAAM,kCAAU,QAAQ,MAAM,kCAAU,QAAQ,OAAO,kCAAU,OAAO,CAAC;AAAA,EAC7F,EAAE,YAAY,+CAA+C;AAC/D;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/FocusableRegion.js

@@ -34,28 +34,34 @@ module.exports = __toCommonJS(FocusableRegion_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_ds_popperjs = require("@elliemae/ds-popperjs");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
 var import_ds_system = require("@elliemae/ds-system");
 var import_styles = require("../styles.js");
 const FocusableRegion = (props) => {
-  const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
   const theme = (0, import_react.useContext)(import_ds_system.ThemeContext);
   const { content, ...rest } = props;
+  const { refs, floatingStyles, arrowStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
+    externallyControlledIsOpen: true,
+    withoutAnimation: true,
+    customOffset: [0, 14]
+  });
   return (0, import_react.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", { ...rest, ref: setReferenceElement, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_ds_popperjs.DSPopperJS,
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", { ...rest, ref: refs.setReference, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_ds_floating_context.FloatingWrapper,
       {
-        withoutAnimation: true,
-        referenceElement,
-        showPopover: true,
-        zIndex: theme.zIndex.tooltip,
+        innerRef: refs.setFloating,
+        isOpen: true,
+        floatingStyles: { ...floatingStyles, zIndex: theme.zIndex.tooltip },
+        context,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, { children: content })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, { children: content }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
         ]
       }
     ) }),
-    [content, referenceElement, rest, theme.zIndex.tooltip]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [content, refs, floatingStyles, context, rest, theme.zIndex.tooltip]
   );
 };
 //# sourceMappingURL=FocusableRegion.js.map

package/dist/cjs/graphs/Chart/parts/FocusableRegion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/parts/FocusableRegion.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useContext, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles.js';\n\ninterface FocusableRegionProps {\n  content: React.ReactNode;\n  id: string;\n  width: number;\n  height: number;\n  x?: number;\n  y?: number;\n  transform?: string;\n  tabIndex?: number;\n  style?: React.CSSProperties;\n}\n\nexport const FocusableRegion: React.ComponentType<FocusableRegionProps> = (props) => {\n  const [referenceElement, setReferenceElement] = useState<HTMLOrSVGElement | null>(null);\n  const theme = useContext(ThemeContext);\n\n  const { content, ...rest } = props;\n\n  return useMemo(\n    () => (\n      <foreignObject {...rest} ref={setReferenceElement}>\n        <DSPopperJS\n          withoutAnimation\n          referenceElement={referenceElement as HTMLElement}\n          showPopover\n          zIndex={theme.zIndex.tooltip}\n        >\n          <StyledMouseOverDetectionBox />\n          <StyledTooltipContainer>{content}</StyledTooltipContainer>\n        </DSPopperJS>\n      </foreignObject>\n    ),\n    [content, referenceElement, rest, theme.zIndex.tooltip],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Bf;AA1BR,mBAAqD;AACrD,yBAA2B;AAC3B,uBAA6B;AAC7B,oBAAoE;AAc7D,MAAM,kBAA6D,CAAC,UAAU;AACnF,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAkC,IAAI;AACtF,QAAM,YAAQ,yBAAW,6BAAY;AAErC,QAAM,EAAE,SAAS,GAAG,KAAK,IAAI;AAE7B,aAAO;AAAA,IACL,MACE,4CAAC,mBAAe,GAAG,MAAM,KAAK,qBAC5B;AAAA,MAAC;AAAA;AAAA,QACC,kBAAgB;AAAA,QAChB;AAAA,QACA,aAAW;AAAA,QACX,QAAQ,MAAM,OAAO;AAAA,QAErB;AAAA,sDAAC,6CAA4B;AAAA,UAC7B,4CAAC,wCAAwB,mBAAQ;AAAA;AAAA;AAAA,IACnC,GACF;AAAA,IAEF,CAAC,SAAS,kBAAkB,MAAM,MAAM,OAAO,OAAO;AAAA,EACxD;AACF;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext, useMemo } from 'react';\nimport { useFloatingContext, FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles.js';\n\ninterface FocusableRegionProps {\n  content: React.ReactNode;\n  id: string;\n  width: number;\n  height: number;\n  x?: number;\n  y?: number;\n  transform?: string;\n  tabIndex?: number;\n  style?: React.CSSProperties;\n}\n\nexport const FocusableRegion: React.ComponentType<FocusableRegionProps> = (props) => {\n  const theme = useContext(ThemeContext);\n  const { content, ...rest } = props;\n\n  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n    externallyControlledIsOpen: true,\n    withoutAnimation: true,\n    customOffset: [0, 14],\n  });\n\n  return useMemo(\n    () => (\n      <foreignObject {...rest} ref={refs.setReference as React.Ref<SVGForeignObjectElement>}>\n        <FloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen\n          floatingStyles={{ ...floatingStyles, zIndex: theme.zIndex.tooltip }}\n          context={context}\n        >\n          <StyledMouseOverDetectionBox />\n          <StyledTooltipContainer>{content}</StyledTooltipContainer>\n          <PopoverArrow {...arrowStyles} />\n        </FloatingWrapper>\n      </foreignObject>\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [content, refs, floatingStyles, context, rest, theme.zIndex.tooltip],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Bf;AA9BR,mBAA2C;AAC3C,iCAAkE;AAClE,uBAA6B;AAC7B,oBAAoE;AAc7D,MAAM,kBAA6D,CAAC,UAAU;AACnF,QAAM,YAAQ,yBAAW,6BAAY;AACrC,QAAM,EAAE,SAAS,GAAG,KAAK,IAAI;AAE7B,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,EAAE;AAAA,EACtB,CAAC;AAED,aAAO;AAAA,IACL,MACE,4CAAC,mBAAe,GAAG,MAAM,KAAK,KAAK,cACjC;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAM;AAAA,QACN,gBAAgB,EAAE,GAAG,gBAAgB,QAAQ,MAAM,OAAO,QAAQ;AAAA,QAClE;AAAA,QAEA;AAAA,sDAAC,6CAA4B;AAAA,UAC7B,4CAAC,wCAAwB,mBAAQ;AAAA,UACjC,4CAAC,2CAAc,GAAG,aAAa;AAAA;AAAA;AAAA,IACjC,GACF;AAAA;AAAA,IAGF,CAAC,SAAS,MAAM,gBAAgB,SAAS,MAAM,MAAM,OAAO,OAAO;AAAA,EACrE;AACF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Scrapper/ScrapperLine.js

@@ -34,7 +34,7 @@ module.exports = __toCommonJS(ScrapperLine_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_ds_popperjs = require("@elliemae/ds-popperjs");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ChartContext = require("../../ChartContext.js");
 var import_styles = require("../../styles.js");
@@ -49,25 +49,28 @@ const ScrapperLine = ({ yPosition, datum }) => {
     props: { TooltipRenderer, scrapper }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const theme = (0, import_react.useContext)(import_ds_system.ThemeContext);
-  const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
   const yPositionString = yPosition;
+  const isActive = scrapperPosY === yPositionString;
+  const { refs, floatingStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
+    externallyControlledIsOpen: isActive && !!TooltipRenderer,
+    withoutAnimation: true,
+    customOffset: [0, 5],
+    placement: scrapper?.tooltipPreference
+  });
   const handleOnMouseEnter = (0, import_react.useCallback)(() => {
     if (!isGrabbed) setScrapperPosY(yPositionString);
     setActivePoint(null);
   }, [isGrabbed, setScrapperPosY, setActivePoint, yPositionString]);
   const strokeDetectorWidth = yScale?.type === "BAND" ? yScale?.getBandwidth() : "4px";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-    scrapperPosY === yPositionString ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
       TooltipRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_ds_popperjs.DSPopperJS,
+        import_ds_floating_context.FloatingWrapper,
         {
-          withoutAnimation: true,
-          withoutArrow: true,
-          customOffset: [0, 5],
-          referenceElement,
-          showPopover: true,
-          zIndex: theme.zIndex.tooltip,
-          startPlacementPreference: scrapper?.tooltipPreference,
+          innerRef: refs.setFloating,
+          isOpen: isActive,
+          floatingStyles: { ...floatingStyles, zIndex: theme.zIndex.tooltip },
+          context,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {}),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, { data: datum }) })
@@ -77,7 +80,7 @@ const ScrapperLine = ({ yPosition, datum }) => {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "line",
         {
-          ref: setReferenceElement,
+          ref: refs.setReference,
           x1: innerWidth,
           strokeWidth: "2px",
           stroke: "transparent",

package/dist/cjs/graphs/Chart/parts/Scrapper/ScrapperLine.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scrapper/ScrapperLine.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext.js';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles.js';\nimport type { DSChartT } from '../../react-desc-prop-types.js';\ninterface ScrapperLineProps {\n  yPosition: number;\n  datum: DSChartT.ScrapperDatum[];\n}\n\nexport const ScrapperLine: React.ComponentType<ScrapperLineProps> = ({ yPosition, datum }) => {\n  const {\n    scrapperPosY,\n    setScrapperPosY,\n    innerWidth,\n    yScale,\n    setActivePoint,\n    isGrabbed,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<HTMLOrSVGElement | null>(null);\n\n  const yPositionString = yPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosY(yPositionString);\n    setActivePoint(null);\n  }, [isGrabbed, setScrapperPosY, setActivePoint, yPositionString]);\n\n  const strokeDetectorWidth = yScale?.type === 'BAND' ? yScale?.getBandwidth() : '4px';\n\n  return (\n    <g>\n      {scrapperPosY === yPositionString ? (\n        <g>\n          {TooltipRenderer ? (\n            <foreignObject>\n              <DSPopperJS\n                withoutAnimation\n                withoutArrow\n                customOffset={[0, 5]}\n                referenceElement={referenceElement as HTMLElement}\n                showPopover\n                zIndex={theme.zIndex.tooltip}\n                startPlacementPreference={scrapper?.tooltipPreference}\n              >\n                <StyledMouseOverDetectionBox />\n                <StyledTooltipContainer>\n                  <TooltipRenderer data={datum} />\n                </StyledTooltipContainer>\n              </DSPopperJS>\n            </foreignObject>\n          ) : null}\n          <line\n            ref={setReferenceElement}\n            x1={innerWidth}\n            strokeWidth=\"2px\"\n            stroke=\"transparent\"\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n          <line\n            x1={0}\n            strokeWidth=\"2px\"\n            stroke=\"grey\"\n            strokeDasharray=\"4 4\"\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n        </g>\n      ) : null}\n      <line\n        onMouseEnter={handleOnMouseEnter}\n        x1={0}\n        strokeWidth={strokeDetectorWidth}\n        stroke=\"transparent\"\n        y1={yPosition}\n        x2={innerWidth}\n        y2={yPosition}\n      />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCT;AAtCd,mBAAyD;AACzD,yBAA2B;AAC3B,uBAA6B;AAC7B,0BAA6B;AAC7B,oBAAoE;AAO7D,MAAM,eAAuD,CAAC,EAAE,WAAW,MAAM,MAAM;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,QAAI,yBAAW,gCAAY;AAC3B,QAAM,YAAQ,yBAAW,6BAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAkC,IAAI;AAEtF,QAAM,kBAAkB;AACxB,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,CAAC,UAAW,iBAAgB,eAAe;AAC/C,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,iBAAiB,gBAAgB,eAAe,CAAC;AAEhE,QAAM,sBAAsB,QAAQ,SAAS,SAAS,QAAQ,aAAa,IAAI;AAE/E,SACE,6CAAC,OACE;AAAA,qBAAiB,kBAChB,6CAAC,OACE;AAAA,wBACC,4CAAC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,kBAAgB;AAAA,UAChB,cAAY;AAAA,UACZ,cAAc,CAAC,GAAG,CAAC;AAAA,UACnB;AAAA,UACA,aAAW;AAAA,UACX,QAAQ,MAAM,OAAO;AAAA,UACrB,0BAA0B,UAAU;AAAA,UAEpC;AAAA,wDAAC,6CAA4B;AAAA,YAC7B,4CAAC,wCACC,sDAAC,mBAAgB,MAAM,OAAO,GAChC;AAAA;AAAA;AAAA,MACF,GACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA;AAAA,MACN;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,iBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA;AAAA,MACN;AAAA,OACF,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,cAAc;AAAA,QACd,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,QAAO;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext.js';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles.js';\nimport type { DSChartT } from '../../react-desc-prop-types.js';\ninterface ScrapperLineProps {\n  yPosition: number;\n  datum: DSChartT.ScrapperDatum[];\n}\n\nexport const ScrapperLine: React.ComponentType<ScrapperLineProps> = ({ yPosition, datum }) => {\n  const {\n    scrapperPosY,\n    setScrapperPosY,\n    innerWidth,\n    yScale,\n    setActivePoint,\n    isGrabbed,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n\n  const yPositionString = yPosition;\n  const isActive = scrapperPosY === yPositionString;\n\n  const { refs, floatingStyles, context } = useFloatingContext({\n    externallyControlledIsOpen: isActive && !!TooltipRenderer,\n    withoutAnimation: true,\n    customOffset: [0, 5],\n    placement: scrapper?.tooltipPreference,\n  });\n\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosY(yPositionString);\n    setActivePoint(null);\n  }, [isGrabbed, setScrapperPosY, setActivePoint, yPositionString]);\n\n  const strokeDetectorWidth = yScale?.type === 'BAND' ? yScale?.getBandwidth() : '4px';\n\n  return (\n    <g>\n      {isActive ? (\n        <g>\n          {TooltipRenderer ? (\n            <foreignObject>\n              <FloatingWrapper\n                innerRef={refs.setFloating}\n                isOpen={isActive}\n                floatingStyles={{ ...floatingStyles, zIndex: theme.zIndex.tooltip }}\n                context={context}\n              >\n                <StyledMouseOverDetectionBox />\n                <StyledTooltipContainer>\n                  <TooltipRenderer data={datum} />\n                </StyledTooltipContainer>\n              </FloatingWrapper>\n            </foreignObject>\n          ) : null}\n          <line\n            ref={refs.setReference as React.Ref<SVGLineElement>}\n            x1={innerWidth}\n            strokeWidth=\"2px\"\n            stroke=\"transparent\"\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n          <line\n            x1={0}\n            strokeWidth=\"2px\"\n            stroke=\"grey\"\n            strokeDasharray=\"4 4\"\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n        </g>\n      ) : null}\n      <line\n        onMouseEnter={handleOnMouseEnter}\n        x1={0}\n        strokeWidth={strokeDetectorWidth}\n        stroke=\"transparent\"\n        y1={yPosition}\n        x2={innerWidth}\n        y2={yPosition}\n      />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CT;AA9Cd,mBAA+C;AAC/C,iCAAoD;AACpD,uBAA6B;AAC7B,0BAA6B;AAC7B,oBAAoE;AAO7D,MAAM,eAAuD,CAAC,EAAE,WAAW,MAAM,MAAM;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,QAAI,yBAAW,gCAAY;AAC3B,QAAM,YAAQ,yBAAW,6BAAY;AAErC,QAAM,kBAAkB;AACxB,QAAM,WAAW,iBAAiB;AAElC,QAAM,EAAE,MAAM,gBAAgB,QAAQ,QAAI,+CAAmB;AAAA,IAC3D,4BAA4B,YAAY,CAAC,CAAC;AAAA,IAC1C,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,WAAW,UAAU;AAAA,EACvB,CAAC;AAED,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,CAAC,UAAW,iBAAgB,eAAe;AAC/C,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,iBAAiB,gBAAgB,eAAe,CAAC;AAEhE,QAAM,sBAAsB,QAAQ,SAAS,SAAS,QAAQ,aAAa,IAAI;AAE/E,SACE,6CAAC,OACE;AAAA,eACC,6CAAC,OACE;AAAA,wBACC,4CAAC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,KAAK;AAAA,UACf,QAAQ;AAAA,UACR,gBAAgB,EAAE,GAAG,gBAAgB,QAAQ,MAAM,OAAO,QAAQ;AAAA,UAClE;AAAA,UAEA;AAAA,wDAAC,6CAA4B;AAAA,YAC7B,4CAAC,wCACC,sDAAC,mBAAgB,MAAM,OAAO,GAChC;AAAA;AAAA;AAAA,MACF,GACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,KAAK;AAAA,UACV,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA;AAAA,MACN;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,iBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA;AAAA,MACN;AAAA,OACF,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,cAAc;AAAA,QACd,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,QAAO;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js

@@ -34,7 +34,7 @@ module.exports = __toCommonJS(VerticalScrapperLine_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_ds_popperjs = require("@elliemae/ds-popperjs");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
 var import_ds_system = require("@elliemae/ds-system");
 var import_styles = require("../../styles.js");
 const VerticalScrapperLine = import_react.default.memo(
@@ -52,8 +52,13 @@ const VerticalScrapperLine = import_react.default.memo(
     scrapper
   }) => {
     const theme = (0, import_react.useContext)(import_ds_system.ThemeContext);
-    const [referenceElement, setReferenceElement] = (0, import_react.useState)();
     const isActive = scrapperPosX === xPosition;
+    const { refs, floatingStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
+      externallyControlledIsOpen: isActive && !isGrabbed && !!TooltipRenderer,
+      withoutAnimation: true,
+      customOffset: [0, 5],
+      placement: scrapper.tooltipPreference
+    });
     const handleOnMouseEnter = (0, import_react.useCallback)(() => {
       if (!isGrabbed) setScrapperPosX(xPosition);
       setActivePoint(null);
@@ -62,15 +67,12 @@ const VerticalScrapperLine = import_react.default.memo(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${nonNullXscale.type === "BAND" ? nonNullXscale.getBandwidth() / 2 : 0}, 0)`, children: [
       isActive && !isGrabbed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
         TooltipRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_ds_popperjs.DSPopperJS,
+          import_ds_floating_context.FloatingWrapper,
           {
-            withoutAnimation: true,
-            withoutArrow: true,
-            customOffset: [0, 5],
-            referenceElement,
-            showPopover: true,
-            zIndex: theme.zIndex.tooltip,
-            startPlacementPreference: scrapper.tooltipPreference,
+            innerRef: refs.setFloating,
+            isOpen: isActive && !isGrabbed,
+            floatingStyles: { ...floatingStyles, zIndex: theme.zIndex.tooltip },
+            context,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {}),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, { data }) })
@@ -80,7 +82,7 @@ const VerticalScrapperLine = import_react.default.memo(
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "line",
           {
-            ref: setReferenceElement,
+            ref: refs.setReference,
             x1: xPosition,
             strokeWidth: "2px",
             stroke: scrapper.color,

package/dist/cjs/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scrapper/VerticalScrapperLine.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles.js';\nimport type { DSChartT } from '../../react-desc-prop-types.js';\nimport type { ScaleT } from '../../scales/index.js';\ninterface VerticalScrapperLineProps {\n  rectDetector?: { left: number; right: number };\n  xPosition: number;\n  data: DSChartT.ScrapperDatum[];\n  scrapperPosX: number;\n  setScrapperPosX: (x: number) => void;\n  isGrabbed: boolean;\n  xScale: ScaleT | null;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  innerHeight: number;\n  TooltipRenderer?:\n    | React.ComponentType<{\n        data: {\n          name: string;\n          xValue: string | number | Date | null;\n          yValue: string | number | Date | null;\n          datum: DSChartT.InternalDatum;\n        }[];\n      }>\n    | undefined;\n  scrapper: DSChartT.ScrapperT;\n}\n\nexport const VerticalScrapperLine: React.ComponentType<VerticalScrapperLineProps> = React.memo(\n  ({\n    rectDetector,\n    xPosition,\n    data,\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    setActivePoint,\n    innerHeight,\n    TooltipRenderer,\n    scrapper,\n  }) => {\n    const theme = useContext(ThemeContext);\n    const [referenceElement, setReferenceElement] = useState<HTMLOrSVGElement | null>();\n    const isActive = scrapperPosX === xPosition;\n    const handleOnMouseEnter = useCallback(() => {\n      if (!isGrabbed) setScrapperPosX(xPosition);\n      setActivePoint(null);\n    }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);\n    // the code was abusing `xScale?.` even in place where it could lead to NaN\n    // I am not sure what the `?.` was solving but xScale typescript says | null\n    //   this line is a monkeypatch to avoid the NaN but it charts should be properly revisited to use typesafe code and algorithms\n    const nonNullXscale = xScale ?? { type: 'notBANDAndEverythingElseIsCurrentlyTreatedTheSame' };\n    return (\n      <g transform={`translate(${nonNullXscale.type === 'BAND' ? nonNullXscale.getBandwidth() / 2 : 0}, 0)`}>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <DSPopperJS\n                  withoutAnimation\n                  withoutArrow\n                  customOffset={[0, 5]}\n                  referenceElement={referenceElement as HTMLElement}\n                  showPopover\n                  zIndex={theme.zIndex.tooltip}\n                  startPlacementPreference={scrapper.tooltipPreference}\n                >\n                  <StyledMouseOverDetectionBox />\n                  <StyledTooltipContainer>\n                    <TooltipRenderer data={data} />\n                  </StyledTooltipContainer>\n                </DSPopperJS>\n              </foreignObject>\n            ) : null}\n            <line\n              ref={setReferenceElement}\n              x1={xPosition}\n              strokeWidth=\"2px\"\n              stroke={scrapper.color}\n              y1={0}\n              x2={xPosition}\n              y2={innerHeight}\n              strokeDasharray=\"4 4\"\n            />\n          </g>\n        ) : null}\n        <rect\n          onMouseOver={handleOnMouseEnter}\n          x={\n            nonNullXscale.type === 'BAND'\n              ? xPosition - nonNullXscale.getBandwidth() / 2\n              : xPosition - (rectDetector?.left ?? 0)\n          }\n          fill=\"transparent\"\n          y={0}\n          width={\n            nonNullXscale.type === 'BAND'\n              ? nonNullXscale.getBandwidth()\n              : (rectDetector?.right ?? 0) + (rectDetector?.left ?? 0)\n          }\n          height={innerHeight}\n        />\n      </g>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6DP;AA5DhB,mBAAyD;AACzD,yBAA2B;AAC3B,uBAA6B;AAC7B,oBAAoE;AA0B7D,MAAM,uBAAuE,aAAAA,QAAM;AAAA,EACxF,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,YAAQ,yBAAW,6BAAY;AACrC,UAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAkC;AAClF,UAAM,WAAW,iBAAiB;AAClC,UAAM,yBAAqB,0BAAY,MAAM;AAC3C,UAAI,CAAC,UAAW,iBAAgB,SAAS;AACzC,qBAAe,IAAI;AAAA,IACrB,GAAG,CAAC,WAAW,gBAAgB,iBAAiB,SAAS,CAAC;AAI1D,UAAM,gBAAgB,UAAU,EAAE,MAAM,oDAAoD;AAC5F,WACE,6CAAC,OAAE,WAAW,aAAa,cAAc,SAAS,SAAS,cAAc,aAAa,IAAI,IAAI,CAAC,QAC5F;AAAA,kBAAY,CAAC,YACZ,6CAAC,OACE;AAAA,0BACC,4CAAC,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,kBAAgB;AAAA,YAChB,cAAY;AAAA,YACZ,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAW;AAAA,YACX,QAAQ,MAAM,OAAO;AAAA,YACrB,0BAA0B,SAAS;AAAA,YAEnC;AAAA,0DAAC,6CAA4B;AAAA,cAC7B,4CAAC,wCACC,sDAAC,mBAAgB,MAAY,GAC/B;AAAA;AAAA;AAAA,QACF,GACF,IACE;AAAA,QACJ;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAQ,SAAS;AAAA,YACjB,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,iBAAgB;AAAA;AAAA,QAClB;AAAA,SACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,GACE,cAAc,SAAS,SACnB,YAAY,cAAc,aAAa,IAAI,IAC3C,aAAa,cAAc,QAAQ;AAAA,UAEzC,MAAK;AAAA,UACL,GAAG;AAAA,UACH,OACE,cAAc,SAAS,SACnB,cAAc,aAAa,KAC1B,cAAc,SAAS,MAAM,cAAc,QAAQ;AAAA,UAE1D,QAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles.js';\nimport type { DSChartT } from '../../react-desc-prop-types.js';\nimport type { ScaleT } from '../../scales/index.js';\ninterface VerticalScrapperLineProps {\n  rectDetector?: { left: number; right: number };\n  xPosition: number;\n  data: DSChartT.ScrapperDatum[];\n  scrapperPosX: number;\n  setScrapperPosX: (x: number) => void;\n  isGrabbed: boolean;\n  xScale: ScaleT | null;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  innerHeight: number;\n  TooltipRenderer?:\n    | React.ComponentType<{\n        data: {\n          name: string;\n          xValue: string | number | Date | null;\n          yValue: string | number | Date | null;\n          datum: DSChartT.InternalDatum;\n        }[];\n      }>\n    | undefined;\n  scrapper: DSChartT.ScrapperT;\n}\n\nexport const VerticalScrapperLine: React.ComponentType<VerticalScrapperLineProps> = React.memo(\n  ({\n    rectDetector,\n    xPosition,\n    data,\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    setActivePoint,\n    innerHeight,\n    TooltipRenderer,\n    scrapper,\n  }) => {\n    const theme = useContext(ThemeContext);\n    const isActive = scrapperPosX === xPosition;\n\n    const { refs, floatingStyles, context } = useFloatingContext({\n      externallyControlledIsOpen: isActive && !isGrabbed && !!TooltipRenderer,\n      withoutAnimation: true,\n      customOffset: [0, 5],\n      placement: scrapper.tooltipPreference,\n    });\n\n    const handleOnMouseEnter = useCallback(() => {\n      if (!isGrabbed) setScrapperPosX(xPosition);\n      setActivePoint(null);\n    }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);\n    // the code was abusing `xScale?.` even in place where it could lead to NaN\n    // I am not sure what the `?.` was solving but xScale typescript says | null\n    //   this line is a monkeypatch to avoid the NaN but it charts should be properly revisited to use typesafe code and algorithms\n    const nonNullXscale = xScale ?? { type: 'notBANDAndEverythingElseIsCurrentlyTreatedTheSame' };\n    return (\n      <g transform={`translate(${nonNullXscale.type === 'BAND' ? nonNullXscale.getBandwidth() / 2 : 0}, 0)`}>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <FloatingWrapper\n                  innerRef={refs.setFloating}\n                  isOpen={isActive && !isGrabbed}\n                  floatingStyles={{ ...floatingStyles, zIndex: theme.zIndex.tooltip }}\n                  context={context}\n                >\n                  <StyledMouseOverDetectionBox />\n                  <StyledTooltipContainer>\n                    <TooltipRenderer data={data} />\n                  </StyledTooltipContainer>\n                </FloatingWrapper>\n              </foreignObject>\n            ) : null}\n            <line\n              ref={refs.setReference as React.Ref<SVGLineElement>}\n              x1={xPosition}\n              strokeWidth=\"2px\"\n              stroke={scrapper.color}\n              y1={0}\n              x2={xPosition}\n              y2={innerHeight}\n              strokeDasharray=\"4 4\"\n            />\n          </g>\n        ) : null}\n        <rect\n          onMouseOver={handleOnMouseEnter}\n          x={\n            nonNullXscale.type === 'BAND'\n              ? xPosition - nonNullXscale.getBandwidth() / 2\n              : xPosition - (rectDetector?.left ?? 0)\n          }\n          fill=\"transparent\"\n          y={0}\n          width={\n            nonNullXscale.type === 'BAND'\n              ? nonNullXscale.getBandwidth()\n              : (rectDetector?.right ?? 0) + (rectDetector?.left ?? 0)\n          }\n          height={innerHeight}\n        />\n      </g>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoEP;AAnEhB,mBAA+C;AAC/C,iCAAoD;AACpD,uBAA6B;AAC7B,oBAAoE;AA0B7D,MAAM,uBAAuE,aAAAA,QAAM;AAAA,EACxF,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,YAAQ,yBAAW,6BAAY;AACrC,UAAM,WAAW,iBAAiB;AAElC,UAAM,EAAE,MAAM,gBAAgB,QAAQ,QAAI,+CAAmB;AAAA,MAC3D,4BAA4B,YAAY,CAAC,aAAa,CAAC,CAAC;AAAA,MACxD,kBAAkB;AAAA,MAClB,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB,WAAW,SAAS;AAAA,IACtB,CAAC;AAED,UAAM,yBAAqB,0BAAY,MAAM;AAC3C,UAAI,CAAC,UAAW,iBAAgB,SAAS;AACzC,qBAAe,IAAI;AAAA,IACrB,GAAG,CAAC,WAAW,gBAAgB,iBAAiB,SAAS,CAAC;AAI1D,UAAM,gBAAgB,UAAU,EAAE,MAAM,oDAAoD;AAC5F,WACE,6CAAC,OAAE,WAAW,aAAa,cAAc,SAAS,SAAS,cAAc,aAAa,IAAI,IAAI,CAAC,QAC5F;AAAA,kBAAY,CAAC,YACZ,6CAAC,OACE;AAAA,0BACC,4CAAC,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ,YAAY,CAAC;AAAA,YACrB,gBAAgB,EAAE,GAAG,gBAAgB,QAAQ,MAAM,OAAO,QAAQ;AAAA,YAClE;AAAA,YAEA;AAAA,0DAAC,6CAA4B;AAAA,cAC7B,4CAAC,wCACC,sDAAC,mBAAgB,MAAY,GAC/B;AAAA;AAAA;AAAA,QACF,GACF,IACE;AAAA,QACJ;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,KAAK;AAAA,YACV,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAQ,SAAS;AAAA,YACjB,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,iBAAgB;AAAA;AAAA,QAClB;AAAA,SACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,GACE,cAAc,SAAS,SACnB,YAAY,cAAc,aAAa,IAAI,IAC3C,aAAa,cAAc,QAAQ;AAAA,UAEzC,MAAK;AAAA,UACL,GAAG;AAAA,UACH,OACE,cAAc,SAAS,SACnB,cAAc,aAAa,KAC1B,cAAc,SAAS,MAAM,cAAc,QAAQ;AAAA,UAE1D,QAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/react-desc-prop-types.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { Series, ScaleLinear, ScaleBand } from 'd3';\nimport { type DSPopperJST } from '@elliemae/ds-popperjs';\nimport { type SERIE_TYPES } from '../constants.js';\nexport declare namespace DSChartT {\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n  export type SeriesTypes = (typeof SERIE_TYPES)[keyof typeof SERIE_TYPES];\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number | string | Date; y: number }>;\n    type: SeriesTypes;\n    scale?: string;\n    color: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n    pointStyle?: string;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: DSPopperJST.PopperPlacementsT;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface LegendT {\n    position: 'right' | 'bottom' | 'left' | 'top';\n    preventFilterAction?: boolean;\n  }\n\n  export interface AxisTickT {\n    tickValues?: number[] | Date[];\n    tickFormat?: ((value: string | number | Date) => string) | string;\n    tickCount?: number;\n    tickRotation?: number;\n    overwriteTicks?: boolean;\n    color?: string;\n  }\n\n  export type IntervalT = 'DAY' | 'WEEK' | 'MONTH' | 'YEAR';\n\n  export interface AxisT {\n    type: AxisTypeT;\n    showGrid?: boolean;\n    color?: string;\n    label?: string;\n    cols?: string[];\n    domainPadding?: number | number[];\n    intervalType?: IntervalT;\n    hideAxis?: boolean;\n    beginAtZero?: boolean;\n    advanced?: {\n      pointSpacing: {\n        type: string;\n        value: number;\n      };\n    };\n    tick?: AxisTickT;\n    plotRange?: number[];\n    min?: number | Date;\n    max?: number | Date;\n    domainPaddingType?: string;\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n    scale: string;\n    color: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: SeriesTypes;\n    scale?: string | undefined;\n    color: string;\n    dashStyle?: string;\n    pointRadius?: number;\n    pointStyle?: string;\n    curveStyle?: string;\n  }\n\n  export type InternalData = InternalSerie[];\n  export interface TooltipRenderDataT {\n    data: {\n      datum: InternalDatum;\n      name: string;\n      xValue: string | number | Date | null;\n      yValue: string | number | Date | null;\n    }[];\n  }\n  export interface OptionalProps {\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper?: ScrapperT;\n    withTrendHighlight?: boolean;\n    TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n    height?: number;\n    width?: number;\n    legend?: LegendT;\n    xScroll?: boolean;\n    yScroll?: boolean;\n    y2Axis?: AxisT;\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface DefaultProps {\n    series: SeriesT[];\n  }\n\n  export interface RequiredProps {}\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n\n  export interface ScrapperDatum {\n    position: number | undefined;\n    name: string;\n    xValue: string | number | Date | null;\n    yValue: string | number | Date | null;\n    key: number;\n    datum: DSChartT.InternalDatum;\n  }\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n  series: [\n    {\n      name: '1',\n      data: [0],\n      color: 'grey-100',\n      type: 'bar',\n    },\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"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { Series, ScaleLinear, ScaleBand } from 'd3';\nimport { type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { type SERIE_TYPES } from '../constants.js';\nexport declare namespace DSChartT {\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n  export type SeriesTypes = (typeof SERIE_TYPES)[keyof typeof SERIE_TYPES];\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number | string | Date; y: number }>;\n    type: SeriesTypes;\n    scale?: string;\n    color: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n    pointStyle?: string;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: DSHookFloatingContextT.PopperPlacementsT;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface LegendT {\n    position: 'right' | 'bottom' | 'left' | 'top';\n    preventFilterAction?: boolean;\n  }\n\n  export interface AxisTickT {\n    tickValues?: number[] | Date[];\n    tickFormat?: ((value: string | number | Date) => string) | string;\n    tickCount?: number;\n    tickRotation?: number;\n    overwriteTicks?: boolean;\n    color?: string;\n  }\n\n  export type IntervalT = 'DAY' | 'WEEK' | 'MONTH' | 'YEAR';\n\n  export interface AxisT {\n    type: AxisTypeT;\n    showGrid?: boolean;\n    color?: string;\n    label?: string;\n    cols?: string[];\n    domainPadding?: number | number[];\n    intervalType?: IntervalT;\n    hideAxis?: boolean;\n    beginAtZero?: boolean;\n    advanced?: {\n      pointSpacing: {\n        type: string;\n        value: number;\n      };\n    };\n    tick?: AxisTickT;\n    plotRange?: number[];\n    min?: number | Date;\n    max?: number | Date;\n    domainPaddingType?: string;\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n    scale: string;\n    color: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: SeriesTypes;\n    scale?: string | undefined;\n    color: string;\n    dashStyle?: string;\n    pointRadius?: number;\n    pointStyle?: string;\n    curveStyle?: string;\n  }\n\n  export type InternalData = InternalSerie[];\n  export interface TooltipRenderDataT {\n    data: {\n      datum: InternalDatum;\n      name: string;\n      xValue: string | number | Date | null;\n      yValue: string | number | Date | null;\n    }[];\n  }\n  export interface OptionalProps {\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper?: ScrapperT;\n    withTrendHighlight?: boolean;\n    TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n    height?: number;\n    width?: number;\n    legend?: LegendT;\n    xScroll?: boolean;\n    yScroll?: boolean;\n    y2Axis?: AxisT;\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface DefaultProps {\n    series: SeriesT[];\n  }\n\n  export interface RequiredProps {}\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n\n  export interface ScrapperDatum {\n    position: number | undefined;\n    name: string;\n    xValue: string | number | Date | null;\n    yValue: string | number | Date | null;\n    key: number;\n    datum: DSChartT.InternalDatum;\n  }\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n  series: [\n    {\n      name: '1',\n      data: [0],\n      color: 'grey-100',\n      type: 'bar',\n    },\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;AAAA;ACAA,YAAuB;ADCvB,8BAAqD;AAgJ9C,MAAM,eAAsC;AAAA,EACjD,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM,CAAC,CAAC;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,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/graphs/Chart/SingleStackedBar/SingleStackedBar.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Grid } from "@elliemae/ds-grid";
-import { DSPopperJS } from "@elliemae/ds-popperjs";
+import { useFloatingContext, FloatingWrapper, PopoverArrow } from "@elliemae/ds-floating-context";
 import {
   describe,
   useGetGlobalAttributes,
@@ -16,9 +16,20 @@ import { DSSingleStackedBarName } from "./exported-related/index.js";
 import { DSSingleStackedBarPropTypes, defaultProps } from "./react-desc-prop-types.js";
 import { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from "./styles.js";
 const Bar = React2.memo((props) => {
-  const [referenceElement, setReferenceElement] = useState(null);
   const [isHover, setIsHover] = useState(false);
   const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;
+  const isTooltipOpen = (isFocused || isHover) && !!TooltipRenderer;
+  const {
+    refs,
+    floatingStyles,
+    arrowStyles,
+    context,
+    isOpen: isFloatingOpen
+  } = useFloatingContext({
+    externallyControlledIsOpen: isTooltipOpen,
+    withoutAnimation: true,
+    customOffset: [0, 14]
+  });
   const handleRefCallback = useCallback(
     (_ref) => {
       if (isFocused) {
@@ -33,20 +44,31 @@ const Bar = React2.memo((props) => {
   const handleMouseLeave = useCallback(() => {
     setIsHover(false);
   }, []);
+  const backgroundColor = datum.color in COLOR_PALLET ? COLOR_PALLET[datum.color] : datum.color;
   return /* @__PURE__ */ jsxs("div", { children: [
-    (isFocused || isHover) && TooltipRenderer ? /* @__PURE__ */ jsxs(DSPopperJS, { referenceElement, showPopover: true, children: [
-      /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {}),
-      /* @__PURE__ */ jsx(StyledTooltipContainer, { children: /* @__PURE__ */ jsx(TooltipRenderer, { datum }) })
-    ] }) : null,
+    TooltipRenderer && /* @__PURE__ */ jsxs(
+      FloatingWrapper,
+      {
+        innerRef: refs.setFloating,
+        isOpen: isFloatingOpen,
+        floatingStyles,
+        context,
+        children: [
+          /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {}),
+          /* @__PURE__ */ jsx(StyledTooltipContainer, { children: /* @__PURE__ */ jsx(TooltipRenderer, { datum }) }),
+          /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(
       StyledBar,
       {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        bg,
+        bg: backgroundColor,
         height,
         borderRadius,
-        innerRef: mergeRefs(handleRefCallback, setReferenceElement),
+        innerRef: mergeRefs(handleRefCallback, refs.setReference),
         tabIndex,
         role: "img",
         "aria-label": `${datum.name} value: ${datum.data}`
@@ -110,21 +132,24 @@ const DSSingleStackedBar = (props) => {
       onBlur: (e) => e.currentTarget !== e.target && setIsChartFocused(false),
       ...xstyledProps,
       ...globalAttributes,
-      children: data.map((datum, i) => /* @__PURE__ */ jsxs(Grid, { rows, children: [
-        /* @__PURE__ */ jsx(
-          Bar,
-          {
-            datum,
-            isFocused: barNames[keyBarFocused] === datum.name && isChartFocused,
-            borderRadius: getBorderRadius(i),
-            bg: COLOR_PALLET[datum.color] ?? datum.color,
-            tabIndex: i === keyBarFocused ? 0 : -1,
-            ...props
-          },
-          datum.name
-        ),
-        LegendRenderer !== void 0 ? /* @__PURE__ */ jsx(LegendRenderer, { datum }, `${datum.name}-legend`) : null
-      ] }))
+      children: data.map((datum, i) => {
+        const backgroundColor = datum.color in COLOR_PALLET ? COLOR_PALLET[datum.color] : datum.color;
+        return /* @__PURE__ */ jsxs(Grid, { rows, children: [
+          /* @__PURE__ */ jsx(
+            Bar,
+            {
+              datum,
+              isFocused: barNames[keyBarFocused] === datum.name && isChartFocused,
+              borderRadius: getBorderRadius(i),
+              bg: backgroundColor,
+              tabIndex: i === keyBarFocused ? 0 : -1,
+              ...props
+            },
+            datum.name
+          ),
+          LegendRenderer !== void 0 ? /* @__PURE__ */ jsx(LegendRenderer, { datum }, `${datum.name}-legend`) : null
+        ] });
+      })
     }
   );
 };