oolib 2.199.3 → 2.199.5

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

@@ -55,7 +55,7 @@ declare namespace _default {
             control: string;
             options: string[];
         };
-        statusTagVariant: {
+        statusTagColorPreset: {
             name: string;
             control: string;
             options: string[];

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

@@ -54,7 +54,7 @@ declare namespace _default {
             control: string;
             options: string[];
         };
-        statusTagVariant: {
+        statusTagColorPreset: {
             name: string;
             control: string;
             options: string[];

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

@@ -77,7 +77,7 @@ export namespace commonCardArgTypes {
         let options_1: string[];
         export { options_1 as options };
     }
-    export namespace statusTagVariant {
+    export namespace statusTagColorPreset {
         let name_8: string;
         export { name_8 as name };
         let control_8: string;

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

@@ -49,8 +49,8 @@ exports.commonCardArgTypes = {
         control: 'select',
         options: [undefined, 'primary', 'secondary'],
     },
-    statusTagVariant: {
-        name: "Status Tag Variant",
+    statusTagColorPreset: {
+        name: "Status Tag Color preset",
         control: 'select',
         options: [undefined, 'primary', 'secondary', 'positive', 'inProgress', 'warning', 'negative', 'special', 'grey'],
     },

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, statusTagVariant }: {
+export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaName, metaDate, statusTag, disabled, tagDisplay, highlight, desc, statusTagColorPreset }: {
     cardLabel: any;
     title: any;
     mediaType: any;
@@ -11,7 +11,7 @@ export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaN
     tagDisplay: any;
     highlight: any;
     desc: any;
-    statusTagVariant: any;
+    statusTagColorPreset: any;
 }): {
     data: {
         title: any;
@@ -39,10 +39,10 @@ export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaN
         title: string;
         cardLabel: string;
         tagDisplay: string;
-        statusTagVariant: string;
+        statusTagColorPreset: string;
         desc: string;
     };
     disabled: any;
     highlight: any;
-    statusTagVariant: any;
+    statusTagColorPreset: 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, statusTagVariant = _a.statusTagVariant;
+    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 data = {
         title: title,
         cardLabel: cardLabel,
@@ -34,14 +34,14 @@ var parseCardArgs = function (_a) {
         tagDisplay: tagDisplay,
         desc: desc,
     };
-    var config = __assign(__assign(__assign({ title: "title", cardLabel: "cardLabel", tagDisplay: "tagDisplay", statusTagVariant: 'statusTagVariant', 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', 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,
-        statusTagVariant: statusTagVariant
+        statusTagColorPreset: statusTagColorPreset
     };
 };
 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, statusTagVariant }: {
+export function CardContent({ id, data, config, to, onClick, openInNewTab, highlight, statusTagColorPreset }: {
     id: any;
     data: any;
     config: any;
@@ -6,6 +6,6 @@ export function CardContent({ id, data, config, to, onClick, openInNewTab, highl
     onClick: any;
     openInNewTab: any;
     highlight: any;
-    statusTagVariant: any;
+    statusTagColorPreset: any;
 }): React.JSX.Element;
 import React from "react";

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

@@ -30,13 +30,13 @@ var CardLabelTag = function (_a) {
         react_1.default.createElement(Tags_1.TagDisplay, { display: label.toUpperCase(), title: label, XS: true }))) : null;
 };
 var StatusTag = function (_a) {
-    var display = _a.display, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, statusTagVariant = _a.statusTagVariant, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
+    var display = _a.display, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, statusTagColorPreset = _a.statusTagColorPreset, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
     return display ? (react_1.default.createElement(styled_2.StyledStatusTagWrapper, { isEmbedPresent: isEmbedPresent, isHighlightPresent: isHighlightPresent, bothTagsDisplayTogether: bothTagsDisplayTogether },
-        react_1.default.createElement(Tags_1.TagDisplay, { display: display, title: display, XS: true, variant: statusTagVariant || "positive" }))) : null;
+        react_1.default.createElement(Tags_1.TagDisplay, { display: display, title: display, XS: true, colorPreset: statusTagColorPreset || "positive" }))) : null;
 };
 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
-    statusTagVariant = _a.statusTagVariant;
+    statusTagColorPreset = _a.statusTagColorPreset;
     var theme = (0, styled_components_1.useTheme)();
     var localize = (0, utilsOolib_1.useLocale)();
     var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
@@ -56,23 +56,19 @@ 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, statusTagVariant: statusTagVariant }),
+                    react_1.default.createElement(CardLabelTag, { label: cardLabel, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagColorPreset: statusTagColorPreset }),
                     (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(StatusTag, { display: tagDisplay, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagVariant: statusTagVariant, bothTagsDisplayTogether: bothTagsDisplayTogether }))),
+                    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 ))" } })),
-                showEmbedSection && (react_1.default.createElement(StatusTag, { display: tagDisplay, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagVariant: statusTagVariant })),
+                showEmbedSection && (react_1.default.createElement(StatusTag, { display: tagDisplay, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagColorPreset: statusTagColorPreset })),
                 title ? (react_1.default.createElement(styled_2.StyledTitleWrapper, { highlight: highlight, showEmbedSection: showEmbedSection },
                     react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { title: title, noOfLines_M: 6 },
                         react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" }, localize(title))))) : null,
                 description ? (react_1.default.createElement(styled_2.StyledDescription, null,
-                    react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { title: description, noOfLines_M: 6 }, description))) : null),
-            react_1.default.createElement("div", null, (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 ? (
-            //show only two meta for cardContent
-            react_1.default.createElement(styled_2.StyledMetaBlockWrapper, null,
-                react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock }))) : null))));
+                    react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { title: description, noOfLines_M: 6 }, description))) : null))));
 };
 exports.CardContent = CardContent;

package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/OptimizedTooltip.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TooltipProps } from "recharts";
+interface OptimizedTooltipProps extends TooltipProps<number, string> {
+    showPercent?: boolean;
+    breakdownCategoryName?: string;
+}
+declare const OptimizedTooltip: React.FC<OptimizedTooltipProps>;
+export default OptimizedTooltip;

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

@@ -0,0 +1,118 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var __1 = require("../../../../../..");
+var Typo2_1 = require("../../../../Typo2");
+var LegendTooltipGlyph_1 = require("../LegendTooltipGlyph");
+var UI_CAPTION_DF_WITH_LINE_CLAMP = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* ", " */\n"], ["\n  /* ", " */\n"])), function (_a) {
+    var clampT = _a.clampT;
+    return (clampT ? (0, __1.clampText)(3) : "");
+});
+var OptimizedTooltip = (0, react_1.memo)(function (_a) {
+    var _b, _c;
+    var active = _a.active, payload = _a.payload, label = _a.label, _d = _a.showPercent, showPercent = _d === void 0 ? false : _d, breakdownCategoryName = _a.breakdownCategoryName;
+    // Early return for better performance
+    if (!active || !(payload === null || payload === void 0 ? void 0 : payload.length))
+        return null;
+    // Transform payload data to match your original tooltip structure
+    var value = ((_c = (_b = payload === null || payload === void 0 ? void 0 : payload[0]) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.map(function (entry) {
+        return {
+            barColor: entry.labels.barColor,
+            percentage: entry.labels.percentage || 0,
+            count: entry.labels.count,
+            tooltipLabel: entry.labels.tooltipLabel,
+            name: entry.labels.name,
+        };
+    })) || [];
+    var style = {
+        backgroundColor: __1.colors2.black,
+        color: __1.colors2.white,
+        border: "1px solid ".concat(__1.colors2.grey10),
+        borderRadius: "6px",
+        padding: "8px",
+        boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.12)",
+        zIndex: 100000,
+        width: "max-content",
+        maxWidth: "300px",
+        maxHeight: "500px",
+        overflow: "auto",
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        fontSize: "12px",
+    };
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement("div", { style: style },
+            breakdownCategoryName && (react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, breakdownCategoryName)),
+            react_1.default.createElement("div", { style: {
+                    display: "grid",
+                    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",
+                            alignItems: "center",
+                            gap: "0.6rem",
+                        } },
+                        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 },
+                    react_1.default.createElement(Typo2_1.UI_CAPTION_DF, null, 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 },
+                    react_1.default.createElement(UI_CAPTION_DF_WITH_LINE_CLAMP, null, entry.tooltipLabel))); }))))));
+});
+exports.default = OptimizedTooltip;
+var templateObject_1;

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

@@ -55,8 +55,8 @@ var CustomizedLabel_1 = require("./comps/CustomizedLabel");
 var __1 = require("../../../..");
 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 OptimizedTooltip_1 = __importDefault(require("./comps/CustomTooltip/OptimizedTooltip"));
 var useTrackMousePosition = function () {
     var _a = (0, react_1.useState)({
         x: 0,
@@ -268,14 +268,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, { content: function (props) {
-                    var _a;
-                    return (react_1.default.createElement(CustomTooltip_1.default, __assign({}, props, { breakdownCategoryName: breakdownCategoryName, activeBar: activeBar, mousePosition: mousePosition, showPercent: showPercent, 
-                        // god knows why the dataindex gets stored against props.label.
-                        // this is some internal recharts thing for tooltips specifically.
-                        // we dont do this.
-                        value: (_a = data[props.label]) === null || _a === void 0 ? void 0 : _a.map(function (item, idx) { return (__assign({}, item.labels)); }) })));
-                }, cursor: false, allowEscapeViewBox: { x: true, y: true } })),
+            isBreakdown && (react_1.default.createElement(recharts_1.Tooltip, { cursor: false, content: react_1.default.createElement(OptimizedTooltip_1.default, null), animationDuration: 0, isAnimationActive: false, allowEscapeViewBox: { x: false, y: false }, position: { x: undefined, y: undefined } })),
             isBreakdown
                 ? data[0].map(function (_, stackIndex) {
                     //note that this map renders the individual bars within a breakdown group

package/package.json

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