oolib 2.201.1 → 2.202.0

package/dist/components/SimpleTable/index.js

@@ -103,6 +103,7 @@ function SimpleTable(_a) {
         blockConfig: [undefined, { comp: 'DropdownSingle', props: {} }, { comp: 'DropdownSingle', props: {} }]
     } : _b, _value = _a.value, onChange = _a.onChange, _c = _a.defaultColWidth, defaultColWidth = _c === void 0 ? 200 : _c;
     var props = arguments[0];
+    var localize = (0, utilsOolib_1.useLocale)();
     var theme = (0, styled_components_1.useTheme)();
     var _d = theme || {}, RichTextEditor = _d.RichTextEditor /*: _RichTextEditor*/, convertToRichText = _d.convertToRichText;
     //memoizing cuz we dont want all cell rtes to render everytime one cell changes
@@ -271,7 +272,7 @@ function SimpleTable(_a) {
                     react_1.default.createElement(Typo2_1.UI_BODY_BOLD_SM, null, config.headerForRowHeadersColumn),
                     react_1.default.createElement(ArrowDown, { size: 14, weight: "bold" })))) : (genCell({
                 cell: (0, convertRowHeaderConfigToCellData_1.convertRowHeaderConfigToCellData)({
-                    rowHeaderData: config.rowHeaderData,
+                    rowHeaderData: config.rowHeaderData.map(function (d) { return localize(d); }),
                     convertToRichText: convertToRichText,
                     rowIdx: rowIdx
                 }),
@@ -343,7 +344,7 @@ function SimpleTable(_a) {
                         config.colHeaderData &&
                             genRow({
                                 row: (0, convertColHeaderConfigToRowData_1.convertColHeaderConfigToRowData)({
-                                    colHeaderData: config.colHeaderData,
+                                    colHeaderData: config.colHeaderData.map(function (d) { return localize(d); }),
                                     convertToRichText: convertToRichText,
                                 }),
                             }),

package/dist/stories/Oolib/components/SimpleTable.stories.d.ts

@@ -53,6 +53,7 @@ declare namespace _default {
         export { defaultColWidth_1 as defaultColWidth };
         export let disableAddRow: boolean;
         export let disableRowActionsMenu: boolean;
+        export let readOnly: boolean;
     }
     namespace parameters {
         namespace docs {

package/dist/stories/Oolib/components/SimpleTable.stories.js

@@ -84,6 +84,7 @@ exports.default = {
         defaultColWidth: 200,
         disableAddRow: false,
         disableRowActionsMenu: false,
+        readOnly: false,
     },
     parameters: {
         docs: {
@@ -113,7 +114,8 @@ var SimpleTable = function (args) {
         },
         defaultColWidth: args.defaultColWidth,
         value: val,
-        onChange: function (k, v) { return setVal(v); }
+        onChange: function (k, v) { return setVal(v); },
+        readOnly: args.readOnly
     };
     // useEffect(() => {
     //     console.log({data: props})

package/dist/stories/v2/components/cards/CardContent.stories.d.ts

@@ -60,6 +60,11 @@ declare namespace _default {
             control: string;
             options: string[];
         };
+        labelTagColorPreset: {
+            name: string;
+            control: string;
+            options: string[];
+        };
     };
     let args: {
         cardLabel: string;

package/dist/stories/v2/components/cards/ListContent.stories.d.ts

@@ -59,6 +59,11 @@ declare namespace _default {
             control: string;
             options: string[];
         };
+        labelTagColorPreset: {
+            name: string;
+            control: string;
+            options: string[];
+        };
     };
     let args: {
         cardLabel: string;

package/dist/stories/v2/components/cards/utils/cardArgTypes.d.ts

@@ -85,43 +85,51 @@ export namespace commonCardArgTypes {
         let options_2: string[];
         export { options_2 as options };
     }
-}
-export namespace cardContentArgTypes {
-    export namespace tagDisplay {
+    export namespace labelTagColorPreset {
         let name_9: string;
         export { name_9 as name };
-        export namespace control_9 {
-            let type: string;
-        }
+        let control_9: string;
         export { control_9 as control };
+        let options_3: string[];
+        export { options_3 as options };
     }
-    export namespace desc_1 {
+}
+export namespace cardContentArgTypes {
+    export namespace tagDisplay {
         let name_10: string;
         export { name_10 as name };
         export namespace control_10 {
+            let type: string;
+        }
+        export { control_10 as control };
+    }
+    export namespace desc_1 {
+        let name_11: string;
+        export { name_11 as name };
+        export namespace control_11 {
             let type_1: string;
             export { type_1 as type };
         }
-        export { control_10 as control };
+        export { control_11 as control };
     }
     export { desc_1 as desc };
 }
 export namespace listContentArgTypes {
     namespace statusTag {
-        let name_11: string;
-        export { name_11 as name };
-        export namespace control_11 {
+        let name_12: string;
+        export { name_12 as name };
+        export namespace control_12 {
             let type_2: string;
             export { type_2 as type };
         }
-        export { control_11 as control };
+        export { control_12 as control };
     }
     namespace variant {
-        let name_12: string;
-        export { name_12 as name };
-        let control_12: string;
-        export { control_12 as control };
-        let options_3: string[];
-        export { options_3 as options };
+        let name_13: string;
+        export { name_13 as name };
+        let control_13: string;
+        export { control_13 as control };
+        let options_4: string[];
+        export { options_4 as options };
     }
 }

package/dist/stories/v2/components/cards/utils/cardArgTypes.js

@@ -54,6 +54,11 @@ exports.commonCardArgTypes = {
         control: 'select',
         options: [undefined, 'primary', 'secondary', 'positive', 'inProgress', 'warning', 'negative', 'special', 'grey'],
     },
+    labelTagColorPreset: {
+        name: "Label Tag Color preset",
+        control: 'select',
+        options: [undefined, 'primary', 'secondary', 'positive', 'inProgress', 'warning', 'negative', 'special', 'grey'],
+    },
 };
 exports.cardContentArgTypes = {
     tagDisplay: {

package/dist/stories/v2/components/cards/utils/parseCardArgs.d.ts

@@ -1,4 +1,4 @@
-export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaName, metaDate, statusTag, disabled, tagDisplay, highlight, desc, statusTagColorPreset }: {
+export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaName, metaDate, statusTag, disabled, tagDisplay, highlight, desc, statusTagColorPreset, labelTagColorPreset }: {
     cardLabel: any;
     title: any;
     mediaType: any;
@@ -12,6 +12,7 @@ export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaN
     highlight: any;
     desc: any;
     statusTagColorPreset: any;
+    labelTagColorPreset: any;
 }): {
     data: {
         title: any;
@@ -40,9 +41,11 @@ export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaN
         cardLabel: string;
         tagDisplay: string;
         statusTagColorPreset: string;
+        labelTagColorPreset: string;
         desc: string;
     };
     disabled: any;
     highlight: any;
     statusTagColorPreset: any;
+    labelTagColorPreset: any;
 };

package/dist/stories/v2/components/cards/utils/parseCardArgs.js

@@ -22,7 +22,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseCardArgs = void 0;
 var parseCardArgs = function (_a) {
-    var cardLabel = _a.cardLabel, title = _a.title, mediaType = _a.mediaType, image = _a.image, video = _a.video, metaName = _a.metaName, metaDate = _a.metaDate, statusTag = _a.statusTag, disabled = _a.disabled, tagDisplay = _a.tagDisplay, highlight = _a.highlight, desc = _a.desc, statusTagColorPreset = _a.statusTagColorPreset;
+    var cardLabel = _a.cardLabel, title = _a.title, mediaType = _a.mediaType, image = _a.image, video = _a.video, metaName = _a.metaName, metaDate = _a.metaDate, statusTag = _a.statusTag, disabled = _a.disabled, tagDisplay = _a.tagDisplay, highlight = _a.highlight, desc = _a.desc, statusTagColorPreset = _a.statusTagColorPreset, labelTagColorPreset = _a.labelTagColorPreset;
     var data = {
         title: title,
         cardLabel: cardLabel,
@@ -34,14 +34,15 @@ var parseCardArgs = function (_a) {
         tagDisplay: tagDisplay,
         desc: desc,
     };
-    var config = __assign(__assign(__assign({ title: "title", cardLabel: "cardLabel", tagDisplay: "tagDisplay", statusTagColorPreset: 'statusTagColorPreset', desc: "desc" }, (mediaType === "image" ? { image: "image" } : {})), (mediaType === "video" ? { video: "video" } : {})), { metaBlock: __spreadArray(__spreadArray([], (metaName ? [{ key: "name", valuePath: "name" }] : []), true), (metaDate ? [{ key: "date", valuePath: "date" }] : []), true) });
+    var config = __assign(__assign(__assign({ title: "title", cardLabel: "cardLabel", tagDisplay: "tagDisplay", statusTagColorPreset: 'statusTagColorPreset', labelTagColorPreset: 'labelTagColorPreset', desc: "desc" }, (mediaType === "image" ? { image: "image" } : {})), (mediaType === "video" ? { video: "video" } : {})), { metaBlock: __spreadArray(__spreadArray([], (metaName ? [{ key: "name", valuePath: "name" }] : []), true), (metaDate ? [{ key: "date", valuePath: "date" }] : []), true) });
     return {
         data: data,
         statusTag: statusTag,
         config: config,
         disabled: disabled,
         highlight: highlight,
-        statusTagColorPreset: statusTagColorPreset
+        statusTagColorPreset: statusTagColorPreset,
+        labelTagColorPreset: labelTagColorPreset
     };
 };
 exports.parseCardArgs = parseCardArgs;

package/dist/v2/components/cards/CardContent/index.d.ts

@@ -1,4 +1,4 @@
-export function CardContent({ id, data, config, to, onClick, openInNewTab, highlight, statusTagColorPreset }: {
+export function CardContent({ id, data, config, to, onClick, openInNewTab, highlight, statusTagColorPreset, labelTagColorPreset }: {
     id: any;
     data: any;
     config: any;
@@ -7,5 +7,6 @@ export function CardContent({ id, data, config, to, onClick, openInNewTab, highl
     openInNewTab: any;
     highlight: any;
     statusTagColorPreset: any;
+    labelTagColorPreset: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/v2/components/cards/CardContent/index.js

@@ -25,9 +25,9 @@ var ImagePlaceholder_1 = require("../../ImagePlaceholder");
 var Star = icons_1.icons.Star, CrownSimple = icons_1.icons.CrownSimple;
 var success = themes_1.colors.success, white = themes_1.colors.white;
 var CardLabelTag = function (_a) {
-    var label = _a.label, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
+    var label = _a.label, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, labelTagColorPreset = _a.labelTagColorPreset, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
     return label ? (react_1.default.createElement(styled_2.StyledCardLabelWrapper, { isEmbedPresent: isEmbedPresent, isHighlightPresent: isHighlightPresent, bothTagsDisplayTogether: bothTagsDisplayTogether },
-        react_1.default.createElement(Tags_1.TagDisplay, { display: label.toUpperCase(), title: label, XS: true }))) : null;
+        react_1.default.createElement(Tags_1.TagDisplay, { display: label.toUpperCase(), title: label, colorPreset: labelTagColorPreset, XS: true }))) : null;
 };
 var StatusTag = function (_a) {
     var display = _a.display, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, statusTagColorPreset = _a.statusTagColorPreset, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
@@ -36,7 +36,7 @@ var StatusTag = function (_a) {
 };
 var CardContent = function (_a) {
     var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, highlight = _a.highlight, // primary | secondary
-    statusTagColorPreset = _a.statusTagColorPreset;
+    statusTagColorPreset = _a.statusTagColorPreset, labelTagColorPreset = _a.labelTagColorPreset;
     var theme = (0, styled_components_1.useTheme)();
     var localize = (0, utilsOolib_1.useLocale)();
     var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
@@ -56,11 +56,11 @@ var CardContent = function (_a) {
         react_1.default.createElement(styled_2.StyledCardWrapper, { id: id, highlight: highlight, onClick: onClick ? function (e) { return onClick(e, data); } : undefined },
             react_1.default.createElement("div", null,
                 showEmbedSection ? (react_1.default.createElement(styled_2.StyledEmbedSection, null,
-                    react_1.default.createElement(CardLabelTag, { label: cardLabel, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagColorPreset: statusTagColorPreset }),
+                    react_1.default.createElement(CardLabelTag, { label: cardLabel, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagColorPreset: statusTagColorPreset, labelTagColorPreset: labelTagColorPreset }),
                     (0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement("div", { style: { width: "100%" } }, react_1.default.createElement(ImageInput_1.ImageInput, { value: image, aspectRatio: "5/3", readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true }))) : (0, mediaDataExists_1.videoDataExists)(video) ? (react_1.default.createElement("div", { style: { width: "100%", position: 'relative' } },
                         react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true }),
                         react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }))) : (react_1.default.createElement(ImagePlaceholder_1.ImagePlaceholder, { title: title })))) : (react_1.default.createElement(styled_2.StyledCardLabelAndStatusTagWrapper, null,
-                    react_1.default.createElement(CardLabelTag, { label: cardLabel, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, bothTagsDisplayTogether: bothTagsDisplayTogether }),
+                    react_1.default.createElement(CardLabelTag, { label: cardLabel, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, bothTagsDisplayTogether: bothTagsDisplayTogether, labelTagColorPreset: labelTagColorPreset }),
                     react_1.default.createElement(StatusTag, { display: tagDisplay, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagColorPreset: statusTagColorPreset, bothTagsDisplayTogether: bothTagsDisplayTogether }))),
                 highlight && react_1.default.createElement(styled_2.StyledStarWrapper, { highlight: highlight },
                     react_1.default.createElement(HighLightIcon, { size: 18, color: white, weight: "fill", style: { filter: "drop-shadow(0px 2px 8.2px rgba(0, 0, 0, 0.50 ))" } })),

package/dist/v2/components/cards/ListContent/index.d.ts

@@ -1,4 +1,4 @@
-export function ListContent({ id, data, config, to, onClick, openInNewTab, statusTag, variant, highlight, statusTagVariant, }: {
+export function ListContent({ id, data, config, to, onClick, openInNewTab, statusTag, variant, highlight, statusTagColorPreset, labelTagColorPreset }: {
     id: any;
     data: any;
     config: any;
@@ -8,6 +8,7 @@ export function ListContent({ id, data, config, to, onClick, openInNewTab, statu
     statusTag: any;
     variant?: string;
     highlight: any;
-    statusTagVariant: any;
+    statusTagColorPreset: any;
+    labelTagColorPreset: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/v2/components/cards/ListContent/index.js

@@ -29,14 +29,14 @@ var styled_2 = require("../CardContent/styled");
 var white = themes_1.colors.white;
 var Star = icons_1.icons.Star, CrownSimple = icons_1.icons.CrownSimple;
 var CustomTag = function (_a) {
-    var displayText = _a.displayText, tagVariant = _a.tagVariant, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
+    var displayText = _a.displayText, tagPreset = _a.tagPreset, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
     return displayText ? (react_1.default.createElement(styled_js_1.StyledTagWrapper, { bothTagsDisplayTogether: bothTagsDisplayTogether },
-        react_1.default.createElement(Tags_1.TagDisplay, { display: displayText, title: displayText, variant: tagVariant, XS: true }))) : null;
+        react_1.default.createElement(Tags_1.TagDisplay, { display: displayText, title: displayText, colorPreset: tagPreset, XS: true }))) : null;
 };
 var ListContent = function (_a) {
     var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, statusTag = _a.statusTag, _b = _a.variant, variant = _b === void 0 ? "content" : _b, //alt = profile | contentEmbed -> contentEmbed just changes the borderStyle
     highlight = _a.highlight, // primary | secondary
-    statusTagVariant = _a.statusTagVariant;
+    statusTagColorPreset = _a.statusTagColorPreset, labelTagColorPreset = _a.labelTagColorPreset;
     var theme = (0, styled_components_1.useTheme)();
     var localize = (0, utilsOolib_1.useLocale)();
     var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
@@ -62,8 +62,8 @@ var ListContent = function (_a) {
                 react_1.default.createElement(styled_js_1.StyledMainSection, null,
                     react_1.default.createElement("div", null,
                         (cardLabel || statusTag) && (react_1.default.createElement(styled_js_1.StyledLabelAndStatusTagWrapper, { highlight: highlight, mediaConfigExists: mediaConfigExists },
-                            react_1.default.createElement(CustomTag, { displayText: cardLabel, tagVariant: "primary", bothTagsDisplayTogether: bothTagsDisplayTogether }),
-                            react_1.default.createElement(CustomTag, { displayText: statusTag, tagVariant: statusTagVariant ? statusTagVariant : highlight == "primary" ? "positive" : "warning", bothTagsDisplayTogether: bothTagsDisplayTogether }))),
+                            react_1.default.createElement(CustomTag, { displayText: cardLabel, tagPreset: labelTagColorPreset, bothTagsDisplayTogether: bothTagsDisplayTogether }),
+                            react_1.default.createElement(CustomTag, { displayText: statusTag, tagPreset: statusTagColorPreset ? statusTagColorPreset : highlight == "primary" ? "positive" : "warning", bothTagsDisplayTogether: bothTagsDisplayTogether }))),
                         title ? (react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 4, noOfLines_D: 3, title: title },
                             react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
                                 react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title))))) : null,

package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/index.js

@@ -98,7 +98,7 @@ var CustomTooltip = function (props) {
                     gridTemplateColumns: showPercent ? "auto auto auto" : "auto auto",
                     gap: "0.6rem",
                 } },
-                react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index },
+                react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: "count-".concat(entry.name, "-").concat(index) },
                     react_1.default.createElement("div", { style: {
                             display: "flex",
                             alignItems: "center",
@@ -106,14 +106,14 @@ var CustomTooltip = function (props) {
                         } },
                         react_1.default.createElement(LegendTooltipGlyph_1.LegendTooltipGlyph, { color: entry.barColor }),
                         react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, showPercent ? entry.percentage + "%" : entry.count || "0")))); })),
-                showPercent && (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index },
+                showPercent && (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: "percent-".concat(entry.name, "-").concat(index) },
                     react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { key: index }, entry.count || "0"))); }))),
                 react_1.default.createElement("div", { style: {
                         paddingLeft: "0.8rem",
                         display: "flex",
                         flexDirection: "column",
                         gap: "1rem",
-                    } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index },
+                    } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: "label-".concat(entry.name, "-").concat(index) },
                     react_1.default.createElement(UI_CAPTION_DF_WITH_LINE_CLAMP, null, entry.tooltipLabel))); }))))));
 };
 exports.default = CustomTooltip;

package/dist/v2/components/dataviz/BarChart/index.d.ts

@@ -4,11 +4,14 @@ export interface DebugControls {
     mouseEventDetectorOpacity: number;
     chartWrapperBgColor: string;
 }
-export declare const useTrackMousePosition: () => {
+export declare const useTrackMousePosition: ({ containerRef }: {
+    containerRef: React.RefObject<HTMLDivElement>;
+}) => {
     mousePosition: {
         x: number;
         y: number;
     };
+    isHovering: boolean;
 };
 type BreakdownDisplayType = "grouped" | "stacked";
 export interface BarChartProps {
@@ -38,5 +41,5 @@ export declare const useDecideLegendOrientation: (options?: {
 export declare const FadeGradientWhenScroll: ({ style }: {
     style?: {};
 }) => React.JSX.Element;
-export declare const BarChart: React.FC<BarChartProps>;
+export declare const BarChart: React.FunctionComponent<BarChartProps>;
 export {};

package/dist/v2/components/dataviz/BarChart/index.js

@@ -57,26 +57,42 @@ var usePrepareData_1 = require("../utils/usePrepareData");
 var _base_barchart_ui_configs_1 = require("./_base_barchart_ui_configs");
 var CustomTooltip_1 = __importDefault(require("./comps/CustomTooltip"));
 var Legend_1 = require("./comps/Legend");
-var useTrackMousePosition = function () {
-    var _a = (0, react_1.useState)({
-        x: 0,
-        y: 0,
-    }), mousePosition = _a[0], setMousePosition = _a[1];
-    // Create a throttled version of the mouse move handler
-    var throttledHandleMouseMove = (0, react_1.useCallback)(lodash_1.default.throttle(function (e) {
-        setMousePosition({ x: e.clientX, y: e.clientY });
-    }, 16), // ~60fps (1000ms / 60 = 16.67ms)
-    []);
+var useTrackMousePosition = function (_a) {
+    var containerRef = _a.containerRef;
+    var _b = (0, react_1.useState)(null), mousePosition = _b[0], setMousePosition = _b[1];
+    var isHoveringRef = (0, react_1.useRef)(false);
+    var throttledHandleMouseMove = (0, react_1.useRef)(lodash_1.default.throttle(function (e) {
+        var element = containerRef.current;
+        if (!element)
+            return;
+        var rect = element.getBoundingClientRect();
+        var isInside = (e.clientX >= rect.left &&
+            e.clientX <= rect.right &&
+            e.clientY >= rect.top &&
+            e.clientY <= rect.bottom);
+        if (isInside) {
+            var newPosition = { x: e.clientX, y: e.clientY };
+            setMousePosition(newPosition);
+            isHoveringRef.current = true;
+        }
+        else if (isHoveringRef.current) {
+            // Only update state when transitioning from inside to outside
+            setMousePosition(null);
+            isHoveringRef.current = false;
+        }
+    }, 16));
     (0, react_1.useEffect)(function () {
-        window.addEventListener("mousemove", throttledHandleMouseMove);
-        // Clean up
+        document.addEventListener("mousemove", throttledHandleMouseMove.current);
         return function () {
-            window.removeEventListener("mousemove", throttledHandleMouseMove);
-            // Cancel any pending throttled calls
-            throttledHandleMouseMove.cancel();
+            document.removeEventListener("mousemove", throttledHandleMouseMove.current);
+            throttledHandleMouseMove.current.cancel();
         };
-    }, [throttledHandleMouseMove]);
-    return { mousePosition: mousePosition };
+    }, []);
+    // Only return isHovering as a boolean when mousePosition exists
+    return {
+        mousePosition: mousePosition,
+        isHovering: mousePosition !== null
+    };
 };
 exports.useTrackMousePosition = useTrackMousePosition;
 // CHART_OFFSET_TOP & CHART_OFFSET_TOP_BREAKDOWN is the y shift on top of the entire chart, because otherwise the chart starts with bar 1 at 0,0 coordinates
@@ -173,7 +189,7 @@ var renderBar = function (_a) {
         ? data[0].length
         : 1;
     var currentStackId = activeConfig.getStackId(stackIndex, breakdownDisplayType);
-    return (react_1.default.createElement(recharts_1.Bar, { key: "stack-".concat(stackIndex), radius: activeConfig.getBarRadius(stackIndex, breakdownDisplayType, totalStacks), dataKey: activeConfig.getDataKey(stackIndex), stackId: currentStackId },
+    return (react_1.default.createElement(recharts_1.Bar, { key: "stack-".concat(stackIndex), radius: activeConfig.getBarRadius(stackIndex, breakdownDisplayType, totalStacks), dataKey: activeConfig.getDataKey(stackIndex), stackId: currentStackId, isAnimationActive: false },
         (!isBreakdown || stackIndex === 0) && (react_1.default.createElement(recharts_1.LabelList, { dataKey: isBreakdown ? function (dataPoint) { return dataPoint; } : "labels", offset: 0, position: "bottom", content: function (props) { return (react_1.default.createElement(CustomizedLabel_1.CustomizedLabel, __assign({ CALC_SINGLE_BAR_SECTION_Y_POS: CALC_SINGLE_BAR_SECTION_Y_POS, CALC_STACKED_BAR_SECTION_Y_POS: CALC_STACKED_BAR_SECTION_Y_POS, TOT_HEIGHT_SINGLE_BAR_SECTION: TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_STACKED_BAR_SECTION: TOT_HEIGHT_STACKED_BAR_SECTION, TOT_HEIGHT_GROUPED_BAR_SECTION: isBreakdown &&
                     breakdownDisplayType === "grouped"
                     ? CALC_TOTAL_HEIGHT_GROUPED_BAR_SECTION(data[0].length)
@@ -253,8 +269,11 @@ exports.useDecideLegendOrientation = useDecideLegendOrientation;
 var BarChartRenderer = function (_a) {
     var data = _a.data, isBreakdown = _a.isBreakdown, breakdownDisplayType = _a.breakdownDisplayType, showSumOfBreakdownValues = _a.showSumOfBreakdownValues, showPercent = _a.showPercent, showCount = _a.showCount, activeBar = _a.activeBar, setActiveBar = _a.setActiveBar, onClick = _a.onClick, 
     //
-    mousePosition = _a.mousePosition, dataMaxValue = _a.dataMaxValue, breakdownCategoryName = _a.breakdownCategoryName;
-    return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: CALC_TOTAL_HEIGHT_OF_CHART({
+    // mousePosition,
+    dataMaxValue = _a.dataMaxValue, breakdownCategoryName = _a.breakdownCategoryName;
+    var containerRef = (0, react_1.useRef)();
+    var _b = (0, exports.useTrackMousePosition)({ containerRef: containerRef }), mousePosition = _b.mousePosition, isHovering = _b.isHovering;
+    return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", ref: containerRef, height: CALC_TOTAL_HEIGHT_OF_CHART({
             isBreakdown: isBreakdown,
             breakdownDisplayType: breakdownDisplayType,
             showSumOfBreakdownValues: showSumOfBreakdownValues,
@@ -268,7 +287,7 @@ var BarChartRenderer = function (_a) {
             } },
             react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number", domain: [0, dataMaxValue] }),
             react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category" }),
-            isBreakdown && (react_1.default.createElement(recharts_1.Tooltip, { cursor: false, 
+            (isBreakdown && mousePosition && isHovering) && (react_1.default.createElement(recharts_1.Tooltip, { cursor: false, 
                 //   content={<OptimizedTooltip />}
                 //   animationDuration={0}
                 //   isAnimationActive={false}
@@ -332,23 +351,27 @@ var BarChart = function (_a) {
         summarizeAfterIdx: summarizeAfterIdx,
         colorIdx: colorIdx
     }), data = _j.data, dataMaxValue = _j.dataMaxValue, dataToSummarize = _j.dataToSummarize;
-    console.log({ data: data, valuePath: valuePath });
     var _k = (0, exports.useDecideLegendOrientation)({
         widthThreshold: 500
     }), vizWrapperRef = _k.vizWrapperRef, orientation = _k.orientation;
     var _l = (0, react_1.useState)(undefined), activeBar = _l[0], setActiveBar = _l[1];
     // const mousePosition = {x: 0, y: 0}
-    var mousePosition = (0, exports.useTrackMousePosition)().mousePosition;
+    // const { mousePosition, isHovering } = useTrackMousePosition({ wrapperRef: vizWrapperRef});
+    //  { mousePosition : 0 } 
     // menu options for grouped and stacked
     if (data.length === 0)
         return react_1.default.createElement("div", null, "No data available");
     return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", background: _debug_controls.chartWrapperBgColor, display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative', overflow: 'auto' }) },
         react_1.default.createElement("div", { style: { flexGrow: 1, position: 'relative' } },
-            react_1.default.createElement(BarChartRenderer, { data: data, dataToSummarize: dataToSummarize, isBreakdown: isBreakdown, breakdownDisplayType: breakdownDisplayType, showSumOfBreakdownValues: false, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue, breakdownCategoryName: breakdownCategoryName }),
+            react_1.default.createElement(BarChartRenderer, { data: data, dataToSummarize: dataToSummarize, isBreakdown: isBreakdown, breakdownDisplayType: breakdownDisplayType, showSumOfBreakdownValues: false, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, 
+                // mousePosition: isHovering ? mousePosition : null,
+                dataMaxValue: dataMaxValue, breakdownCategoryName: breakdownCategoryName }),
             dataToSummarize && (react_1.default.createElement(BarChartRenderer, { data: dataToSummarize,
                 isBreakdown: true,
                 breakdownDisplayType: "stacked",
-                showSumOfBreakdownValues: true, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue, breakdownCategoryName: breakdownCategoryName })),
+                showSumOfBreakdownValues: true, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, 
+                // mousePosition: isHovering ? mousePosition : null,
+                dataMaxValue: dataMaxValue, breakdownCategoryName: breakdownCategoryName })),
             orientation === 'vertical' && react_1.default.createElement(exports.FadeGradientWhenScroll, null)),
         isBreakdown && react_1.default.createElement("div", { style: __assign({ position: 'sticky' }, (orientation === 'vertical' ? { top: 0 } : { bottom: 0, background: __1.colors2.white })) },
             orientation === 'horizontal' && react_1.default.createElement(exports.FadeGradientWhenScroll, { style: { transform: 'translateY(-100%)', top: 0, bottom: 'unset', position: 'absolute', } }),

package/dist/v2/components/dataviz/BarGraphCollection/index.js

@@ -45,6 +45,7 @@ var useGetDimensions_1 = require("./utils/useGetDimensions");
 // import { __GetContentTypeConfigNew } from "../../../../../utils/getters/gettersV2";
 var CustomTooltip_1 = __importDefault(require("../BarChart/comps/CustomTooltip"));
 var usePrepareData_1 = require("./utils/usePrepareData");
+var BarChart_1 = require("../BarChart");
 var grey5 = __1.colors2.grey5;
 exports.BAR_GRAPH_HEIGHT = 250;
 exports.DEFAULT_SINGLE_BAR_WIDTH = 24;
@@ -115,17 +116,8 @@ exports.BarGraphCollection = BarGraphCollection;
 var BarGraph = function (_a) {
     var _b;
     var tagCategory = _a.tagCategory, index1 = _a.index1, _c = _a.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, onClick = _a.onClick, debug = _a.debug;
-    var _e = (0, react_1.useState)({ x: 0, y: 0 }), mousePosition = _e[0], setMousePosition = _e[1];
-    var _f = (0, react_1.useState)(null), activeTooltip = _f[0], setActiveTooltip = _f[1];
-    (0, react_1.useEffect)(function () {
-        var handleMouseMove = function (e) {
-            setMousePosition({ x: e.clientX, y: e.clientY });
-        };
-        window.addEventListener('mousemove', handleMouseMove);
-        return function () {
-            window.removeEventListener('mousemove', handleMouseMove);
-        };
-    }, []);
+    var containerRef = (0, react_1.useRef)();
+    var _e = (0, BarChart_1.useTrackMousePosition)({ containerRef: containerRef }), mousePosition = _e.mousePosition, isHovering = _e.isHovering;
     var truncateText = function (text, maxLength) {
         if (maxLength === void 0) { maxLength = 30; }
         if (!text)
@@ -145,7 +137,7 @@ var BarGraph = function (_a) {
             onClick(tag.display);
         }
     };
-    return (react_1.default.createElement(styled_1.StyledBarGraphWrapper, { style: {
+    return (react_1.default.createElement(styled_1.StyledBarGraphWrapper, { ref: containerRef, style: {
             height: "".concat(exports.BAR_GRAPH_HEIGHT, "px"),
             gap: "".concat(exports.BAR_GAP, "rem"),
         } }, (_b = tagCategory === null || tagCategory === void 0 ? void 0 : tagCategory.tagSpecificCount) === null || _b === void 0 ? void 0 : _b.map(function (tag, index) {
@@ -162,7 +154,7 @@ var BarGraph = function (_a) {
                     } }),
                 react_1.default.createElement(styled_1.StyledLabelWrapper, null,
                     react_1.default.createElement(__2.UI_BODY_SM, null, truncateText(tag === null || tag === void 0 ? void 0 : tag.display, 30))),
-                activeTooltip === index && (react_1.default.createElement(CustomTooltip_1.default, { active: true, payload: [tag], mousePosition: mousePosition, value: tooltipData, showPercent: showPercent })))));
+                (isHovering && mousePosition) && (react_1.default.createElement(CustomTooltip_1.default, { active: true, payload: [tag], mousePosition: mousePosition, value: tooltipData, showPercent: showPercent })))));
     })));
 };
 exports.BarGraph = BarGraph;

package/dist/v2/components/dataviz/HeatMapGrid/index.js

@@ -71,8 +71,8 @@ var _configs = {
 };
 var HeatMapCell = function (_a) {
     var value = _a.value, dataMaxValue = _a.dataMaxValue, _b = _a.dataMinValue, dataMinValue = _b === void 0 ? 0 : _b, showPercent = _a.showPercent;
-    var mousePosition = (0, BarChart_1.useTrackMousePosition)().mousePosition;
-    var _c = (0, react_1.useState)(false), showTooltip = _c[0], setShowTooltip = _c[1];
+    var containerRef = (0, react_1.useRef)();
+    var _c = (0, BarChart_1.useTrackMousePosition)({ containerRef: containerRef }), mousePosition = _c.mousePosition, isHovering = _c.isHovering;
     var cellColor = (0, mapValueToColor_1.mapValueToColor)(value.labels.count, dataMinValue, dataMaxValue);
     var getCellColorLightness = function () {
         var splitUp = cellColor.trim().replace('hsl(', '');
@@ -84,8 +84,8 @@ var HeatMapCell = function (_a) {
     var textColor = value.labels.count === 0
         ? __1.colors2.black
         : getCellColorLightness() > 60 ? __1.colors2.black : __1.colors2.white;
-    return (react_1.default.createElement("div", { onMouseOver: function () { return setShowTooltip(true); }, onMouseOut: function () { return setShowTooltip(false); } },
-        showTooltip && (react_1.default.createElement(CustomTooltip_1.default, { active: true, value: [__assign(__assign({}, value.labels), { tooltipLabel: value.labels.name + ' | ' + value.labels.tooltipLabel //bit of a hack but will sort later
+    return (react_1.default.createElement("div", { ref: containerRef },
+        (isHovering) && (react_1.default.createElement(CustomTooltip_1.default, { active: true, value: [__assign(__assign({}, value.labels), { tooltipLabel: value.labels.name + ' | ' + value.labels.tooltipLabel //bit of a hack but will sort later
                  })], showPercent: showPercent, mousePosition: mousePosition })),
         react_1.default.createElement("div", { style: {
                 height: _configs.cellSize + "px",
@@ -137,7 +137,7 @@ var HeatMapGrid = function (_a) {
                     alignItems: "center",
                     gap: _configs.gridGap + "px",
                     minWidth: 'max-content',
-                } }, (_b = data[0]) === null || _b === void 0 ? void 0 : _b.map(function (dd, index) { return (react_1.default.createElement("div", { key: dd.labels.tooltipLabel, style: {
+                } }, (_b = data[0]) === null || _b === void 0 ? void 0 : _b.map(function (dd, index) { return (react_1.default.createElement("div", { key: "label-".concat(dd.labels.tooltipLabel, "-").concat(index), style: {
                     width: _configs.cellSize + "px",
                     height: xWidth + "px",
                     display: "flex",
@@ -175,8 +175,8 @@ var HeatMapGrid = function (_a) {
                     scrollableRef.current.scrollTop = e.target.scrollTop;
                 }
             } }, data.map(function (d, idx) {
-            var _a;
-            return (react_1.default.createElement("div", { key: idx, style: {
+            var _a, _b;
+            return (react_1.default.createElement("div", { key: "name-".concat((_a = d[0]) === null || _a === void 0 ? void 0 : _a.labels.name, "-").concat(idx), style: {
                     height: _configs.cellSize + "px",
                     textAlign: "right",
                     display: "flex",
@@ -185,7 +185,7 @@ var HeatMapGrid = function (_a) {
                     flexShrink: 0,
                 } },
                 react_1.default.createElement("div", { ref: function (el) { return setVerticalRef(idx, el); } },
-                    react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: { maxWidth: yWidth + "px" } }, (_a = d[0]) === null || _a === void 0 ? void 0 : _a.labels.name))));
+                    react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: { maxWidth: yWidth + "px" } }, (_b = d[0]) === null || _b === void 0 ? void 0 : _b.labels.name))));
         })),
         react_1.default.createElement("div", { ref: scrollableRef, style: {
                 gridRow: 2,

package/dist/v2/components/dataviz/HeatMapGrid/utils/useAxisMeasure.js

@@ -9,11 +9,11 @@ var useAxisMeasure = function (defaultAxisLabelWidth) {
     var verticalRefs = (0, react_1.useRef)([]);
     // Functions to set refs
     var setHorizontalRef = function (index, el) {
-        console.log({ horEL: el });
+        // console.log({horEL: el})
         horizontalRefs.current[index] = el;
     };
     var setVerticalRef = function (index, el) {
-        console.log({ verEL: el });
+        // console.log({verEL: el})
         verticalRefs.current[index] = el;
     };
     console.log({ horizontalRefs: horizontalRefs, verticalRefs: verticalRefs });

package/dist/v2/components/dataviz/PieChart/index.js

@@ -135,9 +135,7 @@ var renderActiveShape = function (props) {
 };
 var PieChart = function (_a) {
     var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, breakdownCategoryName = _a.breakdownCategoryName, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.colors, colors = _c === void 0 ? chartColors : _c, _d = _a.colorIdx, colorIdx = _d === void 0 ? 0 : _d, _e = _a.plotDataPoint, plotDataPoint = _e === void 0 ? "percentage" : _e, _f = _a.showPercent, showPercent = _f === void 0 ? true : _f, _g = _a.showCount, showCount = _g === void 0 ? false : _g, innerLabel = _a.innerLabel, style = _a.style;
-    var mousePosition = (0, BarChart_2.useTrackMousePosition)().mousePosition; // Add this line
-    var _h = (0, react_1.useState)(false), showTooltip = _h[0], setShowTooltip = _h[1]; // Add this line
-    var _j = (0, react_1.useState)(null), tooltipData = _j[0], setTooltipData = _j[1]; // Add this line
+    var _h = (0, react_1.useState)(null), tooltipData = _h[0], setTooltipData = _h[1]; // Add this line
     var isBreakdown = Array.isArray(valuePath);
     var barChartData = (0, usePrepareData_1.usePrepareData)({
         _data: _data,
@@ -152,18 +150,17 @@ var PieChart = function (_a) {
     }).data;
     // Adapt the BarChart data format to PieChart format
     var data = usePieChartData(barChartData, isBreakdown);
-    var _k = (0, BarChart_1.useDecideLegendOrientation)({
+    var _j = (0, BarChart_1.useDecideLegendOrientation)({
         widthThreshold: 500
-    }), vizWrapperRef = _k.vizWrapperRef, orientation = _k.orientation;
+    }), vizWrapperRef = _j.vizWrapperRef, orientation = _j.orientation;
+    var _k = (0, BarChart_2.useTrackMousePosition)({ containerRef: vizWrapperRef }), mousePosition = _k.mousePosition, isHovering = _k.isHovering;
     var _l = (0, react_1.useState)(), activeIndex = _l[0], setActiveIndex = _l[1];
     var onPieEnter = function (data, index) {
         setActiveIndex(index);
-        setShowTooltip(true);
         setTooltipData(data.payload);
     };
     var onPieLeave = function () {
         setActiveIndex(undefined);
-        setShowTooltip(false);
         setTooltipData(null);
     };
     var onPieClick = function (_, index) {
@@ -174,7 +171,7 @@ var PieChart = function (_a) {
     if (data.length === 0)
         return react_1.default.createElement("div", null, "No data available");
     return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative' }) },
-        showTooltip && tooltipData && (react_1.default.createElement(CustomTooltip_1.default, { active: true, value: [tooltipData.labels], showPercent: showPercent, mousePosition: mousePosition })),
+        (isHovering && tooltipData) && (react_1.default.createElement(CustomTooltip_1.default, { active: true, value: [tooltipData.labels], showPercent: showPercent, mousePosition: mousePosition })),
         react_1.default.createElement("div", { style: { flexGrow: 1, position: 'relative' } },
             react_1.default.createElement("div", { className: "w-full", style: { height: "100%" } },
                 react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.201.1",
+  "version": "2.202.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",