oolib 2.194.1 → 2.195.1

package/dist/icons/index.d.ts

@@ -124,6 +124,10 @@ export namespace icons {
     export { NotePencil };
     export { CircleNotch };
     export { PaintBucket };
+    export { SquaresFour };
+    export { CaretDoubleLeft };
+    export { TextIndent };
+    export { Share };
     export { OkeGoogleIcon };
     export { LetterH };
     export { IndexIcon };
@@ -313,6 +317,10 @@ import { PaperPlaneTilt } from 'phosphor-react';
 import { NotePencil } from 'phosphor-react';
 import { CircleNotch } from 'phosphor-react';
 import { PaintBucket } from 'phosphor-react';
+import { SquaresFour } from 'phosphor-react';
+import { CaretDoubleLeft } from 'phosphor-react';
+import { TextIndent } from 'phosphor-react';
+import { Share } from 'phosphor-react';
 import { OkeGoogleIcon } from "./custom";
 import { LetterH } from "./custom";
 import { IndexIcon } from "./custom";

package/dist/icons/index.js

@@ -129,6 +129,10 @@ exports.icons = {
     NotePencil: phosphor_react_1.NotePencil,
     CircleNotch: phosphor_react_1.CircleNotch,
     PaintBucket: phosphor_react_1.PaintBucket,
+    SquaresFour: phosphor_react_1.SquaresFour,
+    CaretDoubleLeft: phosphor_react_1.CaretDoubleLeft,
+    TextIndent: phosphor_react_1.TextIndent,
+    Share: phosphor_react_1.Share,
     //custom icons
     OkeGoogleIcon: custom_1.OkeGoogleIcon,
     LetterH: custom_1.LetterH,

package/dist/index.d.ts

@@ -82,6 +82,8 @@ export { CheckboxInput } from "./v2/components/RadioAndCheckbox/comps/CheckboxLi
 export { CheckboxButton } from "./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton";
 export { RadioList } from "./v2/components/RadioAndCheckbox/comps/RadioList/index";
 export { SwitchSingle } from "./v2/components/Switches";
+export { List } from "./v2/components/List";
+export { ListItem } from "./v2/components/List/comps/ListItem";
 export { default as CustomTooltip } from "./v2/components/dataviz/BarChart/comps/CustomTooltip";
 export * as baseStyling from "./v2/themes/utils/baseStyling";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -40,7 +40,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.SwitchDouble = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.baseStyling = exports.CustomTooltip = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.DataVizAccordion = exports.BarGraphCollection = exports.HeatMapGrid = exports.BarChart = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.DropdownMultiV2 = exports.DropdownSingleV2 = exports.HintsProvider = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
+exports.baseStyling = exports.CustomTooltip = exports.ListItem = exports.List = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.DataVizAccordion = exports.BarGraphCollection = exports.HeatMapGrid = exports.BarChart = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.DropdownMultiV2 = exports.DropdownSingleV2 = exports.HintsProvider = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -260,6 +260,10 @@ var index_3 = require("./v2/components/RadioAndCheckbox/comps/RadioList/comps/Ra
 Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return index_3.RadioButton; } });
 var Switches_2 = require("./v2/components/Switches");
 Object.defineProperty(exports, "SwitchSingle", { enumerable: true, get: function () { return Switches_2.SwitchSingle; } });
+var List_1 = require("./v2/components/List");
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.List; } });
+var ListItem_1 = require("./v2/components/List/comps/ListItem");
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return ListItem_1.ListItem; } });
 var CustomTooltip_1 = require("./v2/components/dataviz/BarChart/comps/CustomTooltip");
 Object.defineProperty(exports, "CustomTooltip", { enumerable: true, get: function () { return __importDefault(CustomTooltip_1).default; } });
 exports.baseStyling = __importStar(require("./v2/themes/utils/baseStyling"));

package/dist/stories/v2/components/BarChart.stories.js

@@ -39,92 +39,159 @@ var BarChart = function (args) {
     var handleBarClick = function (name) {
         console.log("Bar clicked: ".concat(name));
     };
-    return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px" } },
-        react_1.default.createElement("div", null,
+    return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px", padding: '20px' } },
+        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
             react_1.default.createElement(BarChart_1.BarChart, { showPercent: args.showPercent, data: [
                     {
                         display: "Logged In Once",
-                        // stack1: 60,
-                        stack2: 20,
-                        stack3: 40,
-                        stack4: 10,
-                        stack5: 40,
-                        stack6: 10,
+                        stack1: 45, stack2: 23, stack3: 67, stack4: 12, stack5: 89,
+                        stack6: 34, stack7: 56, stack8: 78, stack9: 21, stack10: 43,
+                        stack11: 65, stack12: 87, stack13: 32, stack14: 54, stack15: 76,
+                        stack16: 19, stack17: 41, stack18: 63, stack19: 85, stack20: 28,
                         stack2Display: 'Labels Path Stack 2 Display'
                     },
                     {
                         display: "Registered Users",
-                        stack1: 100,
-                        stack2: 50,
-                        stack3: 10,
-                        stack4: 15,
-                        stack5: 40,
-                        stack6: 10,
+                        stack1: 92, stack3: 71, stack4: 25, stack5: 84,
+                        stack6: 47, stack7: 69, stack8: 13, stack9: 56, stack10: 91,
+                        stack11: 29, stack12: 73, stack13: 46, stack14: 82, stack15: 17,
+                        stack16: 64, stack17: 39, stack18: 75, stack19: 22, stack20: 58
                     },
                     {
                         display: "Created Profile",
-                        stack1: 20,
-                        stack2: 5,
-                        stack3: 10,
-                        stack4: 15,
-                        stack5: 40,
-                        stack6: 10,
+                        stack1: 33, stack2: 77, stack3: 14, stack4: 59, stack5: 86,
+                        stack6: 31, stack7: 68, stack8: 42, stack9: 95, stack10: 26,
+                        stack11: 71, stack12: 48, stack13: 83, stack14: 16, stack15: 62,
+                        stack16: 37, stack17: 74, stack18: 29, stack19: 85, stack20: 51
                     },
                     {
                         display: "Wrote at least 3 story",
-                        stack1: 8,
-                        stack2: 2,
-                        stack3: 1,
-                        stack4: 1,
-                        stack5: 40,
-                        stack6: 10,
+                        stack1: 18, stack2: 52, stack3: 79, stack4: 35, stack5: 61,
+                        stack6: 93, stack7: 24, stack8: 67, stack9: 41, stack10: 88,
+                        stack11: 15, stack12: 53, stack13: 76, stack14: 32, stack15: 68,
+                        stack16: 94, stack17: 27, stack18: 49, stack19: 81, stack20: 36
                     },
                     {
                         display: "Created Profile again",
-                        stack1: 20,
-                        stack2: 5,
-                        stack3: 10,
-                        stack4: 15,
-                        stack5: 40,
-                        stack6: 10,
+                        stack1: 44, stack2: 87, stack3: 21, stack4: 63, stack5: 96,
+                        stack6: 38, stack7: 72, stack8: 55, stack9: 19, stack10: 81,
+                        stack11: 46, stack12: 92, stack13: 28, stack14: 65, stack15: 37,
+                        stack16: 74, stack17: 51, stack18: 83, stack19: 26, stack20: 69
                     },
                     {
                         display: "Wrote at least 1 story",
-                        stack1: 8,
-                        stack2: 2,
-                        stack3: 1,
-                        stack4: 1,
-                        stack5: 40,
-                        stack6: 10,
+                        stack1: 57, stack2: 23, stack3: 89, stack4: 41, stack5: 76,
+                        stack6: 12, stack7: 64, stack8: 98, stack9: 33, stack10: 78,
+                        stack11: 55, stack12: 17, stack13: 91, stack14: 48, stack15: 82,
+                        stack16: 26, stack17: 69, stack18: 43, stack19: 95, stack20: 31
+                    }
+                ], plotDataPoint: "percentage", valuePath: [
+                    "stack1", "stack2", "stack3", "stack4", "stack5",
+                    // "stack6", "stack7", "stack8", "stack9", "stack10",
+                    // "stack11", "stack12", "stack13", "stack14", "stack15",
+                    // "stack16", "stack17", "stack18", "stack19", "stack20"
+                ], breakdownCategoryName: "Age of org.", tooltipLabelsMapping: {
+                    stack1: 'Stack 1', stack2: 'Stack 2', stack3: 'Stack 3', stack4: 'Stack 4', stack5: 'Stack 5',
+                    stack6: 'Stack 6', stack7: 'Stack 7', stack8: 'Stack 8', stack9: 'Stack 9', stack10: 'Stack 10',
+                    stack11: 'Stack 11', stack12: 'Stack 12', stack13: 'Stack 13', stack14: 'Stack 14', stack15: 'Stack 15',
+                    stack16: 'Stack 16', stack17: 'Stack 17', stack18: 'Stack 18', stack19: 'Stack 19', stack20: 'Stack 20'
+                }, labelPath: "display", title: "This is a Stacked BarChart with 20 Stacks", onClick: handleBarClick, colorIdx: 2 })),
+        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
+            react_1.default.createElement(BarChart_1.BarChart, { data: [
+                    {
+                        display: "Logged In Once During the First Week of Registration and Completed the Basic Profile Section Without Abandoning the Process",
+                        stack1: 60
+                    },
+                    {
+                        display: "Registered Users Who Successfully Verified Their Email Address and Set Up Two-Factor Authentication for Enhanced Account Security",
+                        stack1: 100
+                    },
+                    {
+                        display: "Created Profile With All Recommended Fields Including Biography, Education History, Work Experience, and Personal Interests",
+                        stack1: 20
+                    },
+                    {
+                        display: "Wrote at least 3 stories With Over 2,000 Words Each and Received More Than 50 Positive Engagements from Other Community Members",
+                        stack1: 8
+                    },
+                    {
+                        display: "Created Profile again After Deleting Their Previous One Due to Privacy Concerns or Desire to Start Fresh with New Information",
+                        stack1: 20
+                    },
+                    {
+                        display: "Wrote at least 1 story That Was Featured on the Homepage and Remained in the Top Trending Section for More Than 48 Hours",
+                        stack1: 8
+                    },
+                    {
+                        display: "Completed Onboarding Including All Optional Tutorials and Achieved a Perfect Score on the Platform Knowledge Assessment Test",
+                        stack1: 78
+                    },
+                    {
+                        display: "Added Payment Method and Set Up Recurring Billing for Premium Subscription Without Encountering Any Technical Issues During Checkout",
+                        stack1: 42
+                    },
+                    {
+                        display: "Made First Purchase Within 24 Hours of Creating Their Account and Left a Five-Star Review for the Product or Service",
+                        stack1: 35
+                    },
+                    {
+                        display: "Referred a Friend Through the Official Referral Program and Both Received the Maximum Possible Bonus Credits as a Result",
+                        stack1: 27
+                    },
+                    {
+                        display: "Participated in the Annual User Satisfaction Survey and Provided Detailed Feedback on Potential Platform Improvements",
+                        stack1: 54
+                    },
+                    {
+                        display: "Downloaded the Mobile Application on Multiple Devices and Enabled Cross-Platform Synchronization for Seamless User Experience",
+                        stack1: 89
+                    },
+                    {
+                        display: "Configured Advanced Notification Preferences to Receive Real-Time Alerts for Specific Activities Relevant to Their Interests",
+                        stack1: 31
+                    },
+                    {
+                        display: "Successfully Recovered Account After Forgetting Password by Following the Secure Password Reset Protocol Without Support Assistance",
+                        stack1: 46
                     },
+                    {
+                        display: "Achieved Gold Tier Status in the Loyalty Program by Consistently Engaging with the Platform for More Than Six Consecutive Months",
+                        stack1: 15
+                    },
+                    {
+                        display: "Converted From Free Trial to Paid Subscription Before the Trial Period Ended and Opted for the Annual Payment Plan with Auto-Renewal",
+                        stack1: 67
+                    },
+                    {
+                        display: "Customized Their Dashboard Layout to Optimize Workflow Efficiency Based on Their Unique Usage Patterns and Preferences",
+                        stack1: 72
+                    },
+                    {
+                        display: "Signed Up for Beta Testing Program and Provided Valuable Feedback on Experimental Features Before General Public Release",
+                        stack1: 19
+                    },
+                    {
+                        display: "Linked All Available Social Media Accounts to Enable Cross-Platform Sharing and Enhanced Social Networking Capabilities",
+                        stack1: 38
+                    },
+                    {
+                        display: "Reported a Critical Bug That Was Subsequently Fixed in the Next Software Update and Received Official Recognition for the Contribution",
+                        stack1: 5
+                    }
                 ], plotDataPoint: "percentage" // This can be changed to count
-                , valuePath: [
-                    "stack1",
-                    "stack2",
-                    "stack3",
-                    "stack4",
-                    "stack5",
-                    "stack6",
-                ], tooltipLabelsMapping: {
-                    stack1: 'Stack 1',
-                    stack2: 'Stack 2',
-                    stack3: 'Stack 3',
-                    stack4: 'Stack 4',
-                    stack5: 'Stack 5',
-                    stack6: 'Stack 6',
-                }, 
-                // valuePath="stack1"
-                labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, colorIdx: 2 }),
-            react_1.default.createElement(BarGraphCollection_1.BarGraphCollection, { showPercent: args.showPercent, showCount: args.showCount, data: [
+                , 
+                // valuePath={["stack1", "stack2", "stack3", "stack4", "stack5", "stack6"]}
+                valuePath: "stack1", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 })),
+        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
+            react_1.default.createElement(BarChart_1.BarChart, { data: [
                     {
                         display: "Logged In Once",
-                        // stack1: 60,
+                        stack1: 60,
                         stack2: 20,
                         stack3: 40,
                         stack4: 10,
                         stack5: 40,
                         stack6: 10,
-                        stack2Display: 'Labels Path Stack 2 Display'
                     },
                     {
                         display: "Registered Users",
@@ -180,168 +247,7 @@ var BarChart = function (args) {
                     "stack5",
                     "stack6",
                 ], 
-                // tooltipLabelsMapping={{
-                //   stack1: 'Stack 1',
-                //   stack2: 'Stack 2',
-                //   stack3: 'Stack 3',
-                //   stack4: 'Stack 4',
-                //   stack5: 'Stack 5',
-                //   stack6: 'Stack 6',
-                // }}
                 // valuePath="stack1"
-                labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, colorIdx: 2 })),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "40px" } },
-                react_1.default.createElement(BarChart_1.BarChart, { data: [
-                        {
-                            display: "Logged In Once During the First Week of Registration and Completed the Basic Profile Section Without Abandoning the Process",
-                            stack1: 60
-                        },
-                        {
-                            display: "Registered Users Who Successfully Verified Their Email Address and Set Up Two-Factor Authentication for Enhanced Account Security",
-                            stack1: 100
-                        },
-                        {
-                            display: "Created Profile With All Recommended Fields Including Biography, Education History, Work Experience, and Personal Interests",
-                            stack1: 20
-                        },
-                        {
-                            display: "Wrote at least 3 stories With Over 2,000 Words Each and Received More Than 50 Positive Engagements from Other Community Members",
-                            stack1: 8
-                        },
-                        {
-                            display: "Created Profile again After Deleting Their Previous One Due to Privacy Concerns or Desire to Start Fresh with New Information",
-                            stack1: 20
-                        },
-                        {
-                            display: "Wrote at least 1 story That Was Featured on the Homepage and Remained in the Top Trending Section for More Than 48 Hours",
-                            stack1: 8
-                        },
-                        {
-                            display: "Completed Onboarding Including All Optional Tutorials and Achieved a Perfect Score on the Platform Knowledge Assessment Test",
-                            stack1: 78
-                        },
-                        {
-                            display: "Added Payment Method and Set Up Recurring Billing for Premium Subscription Without Encountering Any Technical Issues During Checkout",
-                            stack1: 42
-                        },
-                        {
-                            display: "Made First Purchase Within 24 Hours of Creating Their Account and Left a Five-Star Review for the Product or Service",
-                            stack1: 35
-                        },
-                        {
-                            display: "Referred a Friend Through the Official Referral Program and Both Received the Maximum Possible Bonus Credits as a Result",
-                            stack1: 27
-                        },
-                        {
-                            display: "Participated in the Annual User Satisfaction Survey and Provided Detailed Feedback on Potential Platform Improvements",
-                            stack1: 54
-                        },
-                        {
-                            display: "Downloaded the Mobile Application on Multiple Devices and Enabled Cross-Platform Synchronization for Seamless User Experience",
-                            stack1: 89
-                        },
-                        {
-                            display: "Configured Advanced Notification Preferences to Receive Real-Time Alerts for Specific Activities Relevant to Their Interests",
-                            stack1: 31
-                        },
-                        {
-                            display: "Successfully Recovered Account After Forgetting Password by Following the Secure Password Reset Protocol Without Support Assistance",
-                            stack1: 46
-                        },
-                        {
-                            display: "Achieved Gold Tier Status in the Loyalty Program by Consistently Engaging with the Platform for More Than Six Consecutive Months",
-                            stack1: 15
-                        },
-                        {
-                            display: "Converted From Free Trial to Paid Subscription Before the Trial Period Ended and Opted for the Annual Payment Plan with Auto-Renewal",
-                            stack1: 67
-                        },
-                        {
-                            display: "Customized Their Dashboard Layout to Optimize Workflow Efficiency Based on Their Unique Usage Patterns and Preferences",
-                            stack1: 72
-                        },
-                        {
-                            display: "Signed Up for Beta Testing Program and Provided Valuable Feedback on Experimental Features Before General Public Release",
-                            stack1: 19
-                        },
-                        {
-                            display: "Linked All Available Social Media Accounts to Enable Cross-Platform Sharing and Enhanced Social Networking Capabilities",
-                            stack1: 38
-                        },
-                        {
-                            display: "Reported a Critical Bug That Was Subsequently Fixed in the Next Software Update and Received Official Recognition for the Contribution",
-                            stack1: 5
-                        }
-                    ], plotDataPoint: "percentage" // This can be changed to count
-                    , 
-                    // valuePath={["stack1", "stack2", "stack3", "stack4", "stack5", "stack6"]}
-                    valuePath: "stack1", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 }),
-                react_1.default.createElement(BarChart_1.BarChart, { data: [
-                        {
-                            display: "Logged In Once",
-                            stack1: 60,
-                            stack2: 20,
-                            stack3: 40,
-                            stack4: 10,
-                            stack5: 40,
-                            stack6: 10,
-                        },
-                        {
-                            display: "Registered Users",
-                            stack1: 100,
-                            stack2: 50,
-                            stack3: 10,
-                            stack4: 15,
-                            stack5: 40,
-                            stack6: 10,
-                        },
-                        {
-                            display: "Created Profile",
-                            stack1: 20,
-                            stack2: 5,
-                            stack3: 10,
-                            stack4: 15,
-                            stack5: 40,
-                            stack6: 10,
-                        },
-                        {
-                            display: "Wrote at least 3 story",
-                            stack1: 8,
-                            stack2: 2,
-                            stack3: 1,
-                            stack4: 1,
-                            stack5: 40,
-                            stack6: 10,
-                        },
-                        {
-                            display: "Created Profile again",
-                            stack1: 20,
-                            stack2: 5,
-                            stack3: 10,
-                            stack4: 15,
-                            stack5: 40,
-                            stack6: 10,
-                        },
-                        {
-                            display: "Wrote at least 1 story",
-                            stack1: 8,
-                            stack2: 2,
-                            stack3: 1,
-                            stack4: 1,
-                            stack5: 40,
-                            stack6: 10,
-                        },
-                    ], plotDataPoint: "percentage" // This can be changed to count
-                    , valuePath: [
-                        "stack1",
-                        "stack2",
-                        "stack3",
-                        "stack4",
-                        "stack5",
-                        "stack6",
-                    ], 
-                    // valuePath="stack1"
-                    breakdownDisplayType: "stacked", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 })))));
+                breakdownDisplayType: "stacked", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 }))));
 };
 exports.BarChart = BarChart;

package/dist/stories/v2/components/List.stories.js

@@ -185,7 +185,7 @@ var List_ = function (args) {
     };
     return (React.createElement(__1.Container, { style: { background: "#eff" } },
         React.createElement(__1.PaddingTop40, null),
-        React.createElement(List_1.List, { options: filteredOptions, value: selectedValue, focussedOp: focussedOption, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: handleSelect, isSearchable: args.isSearchable, searchbarPlaceholder: args.searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, grouped: args.grouped, isMulti: args.isMulti, isTagsStyle: args.isTagsStyle, invert: args.invert, disableShadow: args.disableShadow, enableBorder: args.enableBorder }),
+        React.createElement(List_1.List, { options: filteredOptions, value: selectedValue, focussedOp: focussedOption, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: handleSelect, grouped: args.grouped, isMulti: args.isMulti, isTagsStyle: args.isTagsStyle, invert: args.invert, disableShadow: args.disableShadow, enableBorder: args.enableBorder, isSearchable: args.isSearchable, searchbarPlaceholder: args.searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus }),
         React.createElement(__1.PaddingBottom40, null)));
 };
 exports.List_ = List_;

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

@@ -2,6 +2,7 @@ export interface BaseBarChartUIConfigs {
     barHeight: number;
     labelToBarGap: number;
     labelHeight: number;
+    gapBetweenTwoLabels: number;
     labelToNextBarGap: number;
     barRadius: number;
     gapBetweenBarSections: number;

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

@@ -11,6 +11,7 @@ exports._base_barchart_ui_configs = {
     barHeight: 10,
     labelToBarGap: 6,
     labelHeight: 16.5667,
+    gapBetweenTwoLabels: 2,
     labelToNextBarGap: 14,
     //other bar section related properties
     barRadius: 2,

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

@@ -4,6 +4,8 @@ import { CountVizLabels } from "../../../types";
 interface CustomTooltipProps extends TooltipProps<number, string> {
     value?: CountVizLabels[];
     showPercent?: boolean;
+    activeBar?: string;
+    breakdownCategoryName?: string;
     mousePosition?: {
         x: number;
         y: number;

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

@@ -53,12 +53,15 @@ 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  \n  ", "\n"])), function (_a) {
     var clampT = _a.clampT;
     return clampT ? (0, __1.clampText)(3) : '';
 });
 var CustomTooltip = function (props) {
-    var active = props.active, value = props.value, showPercent = props.showPercent, mousePosition = props.mousePosition;
+    var _a;
+    var value = props.value, showPercent = props.showPercent, mousePosition = props.mousePosition, activeBar = props.activeBar, breakdownCategoryName = props.breakdownCategoryName;
+    var isActive = activeBar && ((_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.name) === activeBar;
     var tooltipWrapperRef = (0, react_1.useRef)(null);
     var calcTooltipTop = function (_a) {
         var _b, _c;
@@ -96,8 +99,8 @@ var CustomTooltip = function (props) {
         // pointerEvents: "none", // Add this to prevent tooltip from interfering with mouse events
     };
     var tooltipLabelLengthRefs = (0, react_1.useRef)([]);
-    var _a = (0, react_1.useState)([]), rowHeights = _a[0], setRowHeights = _a[1];
-    var _b = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value.map(function (v) { return true; })) || []), tooltipTextClampStates = _b[0], setTooltipTextClampStates = _b[1];
+    var _b = (0, react_1.useState)([]), rowHeights = _b[0], setRowHeights = _b[1];
+    var _c = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value.map(function (v) { return true; })) || []), tooltipTextClampStates = _c[0], setTooltipTextClampStates = _c[1];
     (0, react_1.useEffect)(function () {
         if (!tooltipTextClampStates) {
             setTooltipTextClampStates(value === null || value === void 0 ? void 0 : value.map(function (v) { return true; }));
@@ -113,28 +116,24 @@ var CustomTooltip = function (props) {
         });
         setRowHeights(rowHeightsToSet);
     }, [tooltipTextClampStates.join()]);
-    if (!active)
+    if (!isActive)
         return null;
     return (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement("div", { ref: tooltipWrapperRef, 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", { style: { height: rowHeights[index] ? rowHeights[index] + "px" : "auto" } },
+                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, style: { height: rowHeights[index] ? rowHeights[index] + "px" : "auto" } },
                     react_1.default.createElement("div", { style: {
                             display: "flex",
                             alignItems: "center",
                             gap: "0.6rem",
                         } },
-                        react_1.default.createElement("div", { key: index, style: {
-                                width: "1.2rem",
-                                height: "1.2rem",
-                                borderRadius: "50%",
-                                backgroundColor: entry.color,
-                            } }),
-                        react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, { key: index }, showPercent ? entry.percentage + "%" : entry.count || "0")))); })),
+                        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", { style: {
                         height: rowHeights[index]
                             ? rowHeights[index] + "px"

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

@@ -16,12 +16,14 @@ interface CustomizedLabelProps {
     _base_barchart_ui_configs: BaseBarChartUIConfigs;
     _debug_controls: DebugControls;
     TOT_HEIGHT_SINGLE_BAR_SECTION: number;
+    TOT_HEIGHT_STACKED_BAR_SECTION: number;
     TOT_HEIGHT_GROUPED_BAR_SECTION: number;
     CALC_SINGLE_BAR_SECTION_Y_POS: (index: number) => number;
+    CALC_STACKED_BAR_SECTION_Y_POS: (index: number) => number;
     showSumOfBreakdownValues?: boolean;
     onMouseOver?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: CustomizedLabelValue) => void;
     onMouseOut?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: CustomizedLabelValue) => void;
     onMouseDown?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: CustomizedLabelValue) => void;
 }
-export declare const CustomizedLabel: ({ y, width, height, value, showPercent, showCount, opacity, _base_barchart_ui_configs, _debug_controls, onMouseOver, onMouseOut, onMouseDown, activeBar, TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_GROUPED_BAR_SECTION, CALC_SINGLE_BAR_SECTION_Y_POS, breakdownDisplayType, showSumOfBreakdownValues }: CustomizedLabelProps) => React.JSX.Element;
+export declare const CustomizedLabel: ({ y, width, height, value, showPercent, showCount, opacity, _base_barchart_ui_configs, _debug_controls, onMouseOver, onMouseOut, onMouseDown, activeBar, TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_STACKED_BAR_SECTION, TOT_HEIGHT_GROUPED_BAR_SECTION, CALC_SINGLE_BAR_SECTION_Y_POS, CALC_STACKED_BAR_SECTION_Y_POS, breakdownDisplayType, showSumOfBreakdownValues, }: CustomizedLabelProps) => React.JSX.Element;
 export {};