oolib 2.198.5 → 2.199.0

package/dist/index.d.ts

@@ -73,6 +73,7 @@ export { default as MetaBlockV2 } from "./v2/components/MetaBlock";
 export { DateRangePicker as DateRangePickerV2 } from "./v2/components/DateRangePicker";
 export { HomeCover as HomeCoverV2 } from "./v2/components/HomeCover";
 export { BarChart } from "./v2/components/dataviz/BarChart";
+export { PieChart } from "./v2/components/dataviz/PieChart";
 export { HeatMapGrid } from "./v2/components/dataviz/HeatMapGrid";
 export { BarGraphCollection } from "./v2/components/dataviz/BarGraphCollection";
 export { DataVizAccordion } from "./v2/components/DataVizAccordion";

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.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;
+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.PieChart = 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; } });
@@ -238,6 +238,8 @@ Object.defineProperty(exports, "HomeCoverV2", { enumerable: true, get: function
 //V2 data viz comps
 var BarChart_1 = require("./v2/components/dataviz/BarChart");
 Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
+var PieChart_1 = require("./v2/components/dataviz/PieChart");
+Object.defineProperty(exports, "PieChart", { enumerable: true, get: function () { return PieChart_1.PieChart; } });
 var HeatMapGrid_1 = require("./v2/components/dataviz/HeatMapGrid");
 Object.defineProperty(exports, "HeatMapGrid", { enumerable: true, get: function () { return HeatMapGrid_1.HeatMapGrid; } });
 var BarGraphCollection_1 = require("./v2/components/dataviz/BarGraphCollection");

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

@@ -173,7 +173,7 @@ exports.default = {
 };
 var dropdownOptions = [
     {
-        display: "Option with a slightly longer name",
+        display: "Option ",
         value: "india",
         color: themes_1.colors.lightRed,
         // image: "xyz",

package/dist/stories/v2/components/Dropdown/Dropdowns.stories.js

@@ -187,13 +187,11 @@ var Dropdowns = function (args) {
                     react_1.default.createElement(Comp, __assign({ key: args.selection }, args, { S: args.size == "S", 
                         // options={dropdownOptionsGroup}
                         options: args.dataOptions === "simple"
-                            ?
-                                dropdownOptions_1.dropdownOptions.map(function (op) { return (__assign(__assign({}, op), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, 
-                                    // image: args.optionImage && [{ publicUrl: args.optionImage }],
-                                    color: args.colors && op.color, loading: args.loading })); })
-                            : dropdownOptions_1.dropdownOptionsGroup.map(function (op) { return (__assign(__assign({}, op), { options: op.options.map(function (option) { return (__assign(__assign({}, option), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, 
-                                    // image: args.optionImage && [{ publicUrl: args.optionImage }],
-                                    color: args.colors && option.color, loading: args.loading })); }) })); }), value: val[args.selection], onChange: function (k, v) {
+                            ? __spreadArray([], dropdownOptions_1.dropdownOptions.map(function (op) { return (__assign(__assign({}, op), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, 
+                                // image: args.optionImage && [{ publicUrl: args.optionImage }],
+                                color: args.colors && op.color, loading: args.loading })); }), true) : dropdownOptions_1.dropdownOptionsGroup.map(function (op) { return (__assign(__assign({}, op), { options: op.options.map(function (option) { return (__assign(__assign({}, option), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, 
+                                // image: args.optionImage && [{ publicUrl: args.optionImage }],
+                                color: args.colors && option.color, loading: args.loading })); }) })); }), value: val[args.selection], onChange: function (k, v) {
                             return setVal(function (prev) {
                                 var _a;
                                 return (__assign(__assign({}, prev), (_a = {}, _a[args.selection] = v, _a)));

package/dist/stories/v2/components/Dropdown/dropdownOptions.js

@@ -4,7 +4,7 @@ exports.dropdownOptionsGroup = exports.dropdownOptions = void 0;
 var themes_1 = require("../../../../themes");
 exports.dropdownOptions = [
     {
-        display: "Option with a slightly longer name",
+        display: "Option",
         value: "india",
         color: themes_1.colors.lightRed,
         // image: "xyz",

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

@@ -35,7 +35,7 @@ var dropdownOptions = [
         value: "india",
         color: themes_1.colors.lightRed,
         // image: "xyz",
-        // icon: "CirclesFour",
+        icon: "CirclesFour",
         // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
     },
     {
@@ -43,31 +43,31 @@ var dropdownOptions = [
         value: "sriLanka",
         color: themes_1.colors.invertRed,
         // image: "xyz",
-        // icon: "Trash",
+        icon: "Trash",
         desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
     },
     {
         display: "Japan",
         value: "japan",
-        color: themes_1.colors.lightBlue
+        color: themes_1.colors.lightBlue,
         // image: "xyz",
-        // icon: "Trash",
+        icon: "Trash",
         // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
     },
     {
         display: "Germany",
         value: "germany",
-        color: themes_1.colors.primaryColor100
+        color: themes_1.colors.primaryColor100,
         // image: "xyz",
-        // icon: "Trash",
+        icon: "Trash",
         // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
     },
     {
         display: "USA",
         value: "usa",
-        color: themes_1.colors.greyColor100
+        color: themes_1.colors.greyColor100,
         // image: "xyz",
-        // icon: "Trash",
+        icon: "Trash",
         // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
     },
     {
@@ -75,7 +75,7 @@ var dropdownOptions = [
         value: "columbia",
         color: themes_1.colors.lightRed,
         // image: "xyz",
-        // icon: "Trash",
+        icon: "Trash",
         // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
     },
     {
@@ -83,7 +83,7 @@ var dropdownOptions = [
         value: "brazil",
         color: themes_1.colors.invertRed,
         // image: "xyz",
-        // icon: "Trash",
+        icon: "Trash",
         // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
     },
     {
@@ -92,7 +92,7 @@ var dropdownOptions = [
         color: themes_1.colors.lightBlue,
         disabled: true,
         // image: "xyz",
-        // icon: "Trash",
+        icon: "Trash",
         // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
     },
 ];
@@ -174,7 +174,7 @@ var List_ = function (args) {
     (0, react_1.useEffect)(function () {
         setFilteredOptions(args.grouped ? dropdownOptions_1.dropdownOptionsGroup : dropdownOptions);
     }, [args.grouped]);
-    var handleSelect = function (option) {
+    var handleSelect = function (id, option) {
         setSelectedValue(option);
         if (args.onSelect) {
             args.onSelect(option);
@@ -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, 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(List_1.List, { options: filteredOptions, value: selectedValue, focussedOp: focussedOption, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: 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/stories/v2/components/TabBar.stories.d.ts

@@ -64,6 +64,8 @@ declare namespace _default {
         export let responsive: boolean;
         let title_1: string;
         export { title_1 as title };
+        export let onlyIcons: boolean;
+        export let onlyText: boolean;
     }
 }
 export default _default;

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

@@ -85,26 +85,56 @@ exports.default = {
         errorTabs: "",
         disabledTabs: "",
         responsive: false,
-        title: "Page"
+        title: "Page",
+        onlyIcons: false,
+        onlyText: false,
     }
 };
 var TabBar_ = function (args) {
     var options = [
-        { display: "display 1", value: "value1", icon: 'Funnel', message: "new" },
+        { display: "display 1", value: "value1", icon: 'Funnel' },
         { display: "display 2", value: "value2", icon: 'ListDashes' },
-        { display: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", value: "value3" },
-        { display: "display 3", value: "value4" },
-        { display: "display 4", value: "value5" },
-        { display: "display 5", value: "value6" },
-        { display: "display 6", value: "value7" },
+        { display: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", value: "value3", icon: "GearSix" },
+        { display: "display 3", value: "value4", icon: "Cube" },
+        { display: "display 4", value: "value5", icon: "XCircle" },
+        { display: "display 5", value: "value6", icon: "Lightbulb" },
+        { display: "display 6", value: "value7", icon: "Cards" },
     ];
     var errorTabs = args.errorTabs && options.filter(function (op) { return args.errorTabs.includes(op.value); });
     var disabledTabs = args.disabledTabs && options.filter(function (op) { return args.disabledTabs.includes(op.value); });
     var _a = (0, react_1.useState)(options[0]), active = _a[0], setActive = _a[1];
-    args.options = options;
+    var filterOptions = function (options, args) {
+        return options.map(function (option) {
+            var newOption = { value: option.value };
+            if (args.onlyText) {
+                if (option.display)
+                    newOption.display = option.display;
+            }
+            else if (args.onlyIcons) {
+                if (option.icon)
+                    newOption.icon = option.icon;
+            }
+            else {
+                // keep both display and icon if they exist
+                if (option.display)
+                    newOption.display = option.display;
+                if (option.icon)
+                    newOption.icon = option.icon;
+            }
+            // Preserve other properties like message if present
+            Object.keys(option).forEach(function (key) {
+                if (!['display', 'icon', 'value'].includes(key)) {
+                    newOption[key] = option[key];
+                }
+            });
+            return newOption;
+        });
+    };
+    args.options = filterOptions(options, args);
     args.value = active;
     args.onChange = function (id, value) { return setActive(value); };
-    return (react_1.default.createElement("div", { style: { width: !args.changeWidth ? '' : '400px' } },
-        react_1.default.createElement(TabBars.TabBarStyle1, __assign({}, args, { errorTabs: errorTabs, disabledTabs: disabledTabs, black: args.color === "black" ? true : false }))));
+    return (react_1.default.createElement("div", { style: { width: !args.changeWidth ? '' : '400px', padding: "4rem", display: "flex", gap: "10rem", flexDirection: "column" } },
+        react_1.default.createElement(TabBars.TabBarStyle1, __assign({}, args, { errorTabs: errorTabs, disabledTabs: disabledTabs, black: args.color === "black" ? true : false })),
+        react_1.default.createElement(TabBars.TabBarStyle1, __assign({}, args, { options: args.options.map(function (item, i) { return !i ? (__assign(__assign({}, item), { message: "New" })) : item; }), errorTabs: errorTabs, disabledTabs: disabledTabs, black: args.color === "black" ? true : false }))));
 };
 exports.TabBar_ = TabBar_;

package/dist/v2/components/Dropdowns/comps/OptionsMulti/index.js

@@ -89,12 +89,17 @@ var OptionsMulti = function (_a) {
         return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement("div", null,
             react_1.default.createElement("div", { style: { padding: "0.4rem 0.8rem" } },
                 react_1.default.createElement(__1.UI_TAG, null, "Selected")),
-            react_1.default.createElement(List_1.List, { key: value, options: selectedOptions, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: handleSelect, setSearchString: setSearchString, optionsClassName: optionsClassName, setFocusSelectTagsInput: setFocusSelectTagsInput, S: S, isMulti: true, style: { padding: "0" }, disableShadow: true }),
+            react_1.default.createElement(List_1.List, { key: value, options: selectedOptions, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) {
+                    return handleSelect(v);
+                }, setSearchString: setSearchString, optionsClassName: optionsClassName, setFocusSelectTagsInput: setFocusSelectTagsInput, S: S, isMulti: true, style: { padding: "0" }, disableShadow: true }),
             react_1.default.createElement("div", { style: { margin: "0.4rem 0rem" } },
                 react_1.default.createElement(__1.Divider, { style: { borderBottom: "0.1rem solid ".concat(__1.colors2.grey20) } }))));
     };
     return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth },
-        react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: handleSelect, optionsClassName: optionsClassName, S: S, grouped: (0, getValue_1.isGroupedData)(options), isMulti: true, disableShadow: true, isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, children: !isTagsStyle && createSelectedOptions() }),
+        react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) {
+                console.log({ id: id, v: v });
+                handleSelect(v);
+            }, optionsClassName: optionsClassName, S: S, grouped: (0, getValue_1.isGroupedData)(options), isMulti: true, disableShadow: true, isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, children: !isTagsStyle && createSelectedOptions() }),
         genCreateTagButton && genCreateTagButton(options)));
 };
 exports.OptionsMulti = OptionsMulti;

package/dist/v2/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/index.d.ts

@@ -1,4 +1,4 @@
-export function OptionsAnimateWrapper({ relativeToRef, showOptions, yOrientation, fixPos, optionsAnchor, children, lightboxStyle, alignDropdown, optionsToggleAnimationDuration }: {
+export function OptionsAnimateWrapper({ relativeToRef, showOptions, yOrientation, fixPos, optionsAnchor, children, lightboxStyle, alignDropdown, optionsRef, options, selectRefwidth, matchSelectInputWidth, optionsToggleAnimationDuration }: {
     relativeToRef: any;
     showOptions: any;
     yOrientation: any;
@@ -7,6 +7,10 @@ export function OptionsAnimateWrapper({ relativeToRef, showOptions, yOrientation
     children: any;
     lightboxStyle: any;
     alignDropdown: any;
+    optionsRef: any;
+    options: any;
+    selectRefwidth: any;
+    matchSelectInputWidth: any;
     optionsToggleAnimationDuration: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/v2/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/index.js

@@ -51,7 +51,7 @@ var useStyleUpdateAfterToggleTransition_1 = require("../../../../../../../utils/
 var OptionsAnimateWrapper = function (_a) {
     var _b;
     var _c;
-    var relativeToRef = _a.relativeToRef, showOptions = _a.showOptions, yOrientation = _a.yOrientation, fixPos = _a.fixPos, optionsAnchor = _a.optionsAnchor, children = _a.children, lightboxStyle = _a.lightboxStyle, alignDropdown = _a.alignDropdown, optionsToggleAnimationDuration = _a.optionsToggleAnimationDuration;
+    var relativeToRef = _a.relativeToRef, showOptions = _a.showOptions, yOrientation = _a.yOrientation, fixPos = _a.fixPos, optionsAnchor = _a.optionsAnchor, children = _a.children, lightboxStyle = _a.lightboxStyle, alignDropdown = _a.alignDropdown, optionsRef = _a.optionsRef, options = _a.options, selectRefwidth = _a.selectRefwidth, matchSelectInputWidth = _a.matchSelectInputWidth, optionsToggleAnimationDuration = _a.optionsToggleAnimationDuration;
     var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
     var viewportWidth = document.documentElement.clientWidth; // excludes scrollbar
     var optionsDisplay = (0, useStyleUpdateAfterToggleTransition_1.useStyleUpdateAfterToggleTransition)({
@@ -61,7 +61,18 @@ var OptionsAnimateWrapper = function (_a) {
         transitionDuration: optionsToggleAnimationDuration
     }).style;
     var lightboxOffsetFromSelect = 4;
-    return (react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { showOptions: showOptions, optionsToggleAnimationDuration: optionsToggleAnimationDuration, style: __assign(__assign(__assign({}, (lightboxStyle || {})), { display: optionsDisplay, zIndex: 100000 }), (fixPos
+    var _d = (0, react_1.useState)({
+        width: undefined,
+        openHeight: undefined,
+    }), _e = _d[0], width = _e.width, openHeight = _e.openHeight, setWidthAndOpenHeight = _d[1];
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c, _d;
+        setWidthAndOpenHeight({
+            width: (_b = (_a = optionsRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width,
+            openHeight: (_d = (_c = optionsRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.height,
+        });
+    }, [options.length, options]);
+    return (react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { showOptions: showOptions, optionsToggleAnimationDuration: optionsToggleAnimationDuration, width: matchSelectInputWidth ? selectRefwidth : width, style: __assign(__assign(__assign({}, (lightboxStyle || {})), { display: optionsDisplay, zIndex: 100000 }), (fixPos
             ? __assign(__assign({ position: "fixed", top: "".concat(fixPos.y - (yOrientation === "top" ? ((selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) + lightboxOffsetFromSelect) || -(lightboxOffsetFromSelect) : -(lightboxOffsetFromSelect)), "px") }, (alignDropdown === "right"
                 ? {
                     right: "".concat(viewportWidth - fixPos.right, "px")

package/dist/v2/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/styled.js

@@ -12,7 +12,10 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var mixins_1 = require("../../../../../../../themes/mixins");
 var themes_1 = require("../../../../../../themes");
 /** for lightbox shell */
-exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  /* width:100%; */\n  overflow: hidden;\n  ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n\n\n  background-color: ", ";\n  border-radius: 0.6rem;\n  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);\n"], ["\n  height: auto;\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  /* width:100%; */\n  overflow: hidden;\n  ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n\n\n  background-color: ", ";\n  border-radius: 0.6rem;\n  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);\n"])), function (_a) {
+exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n\n\n  background-color: ", ";\n  border-radius: 0.6rem;\n  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);\n"], ["\n  height: auto;\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n\n\n  background-color: ", ";\n  border-radius: 0.6rem;\n  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);\n"])), function (_a) {
+    var width = _a.width;
+    return width ? "".concat(width, "px") : "100%";
+}, function (_a) {
     var optionsToggleAnimationDuration = _a.optionsToggleAnimationDuration;
     return (0, mixins_1.transition)("opacity ".concat(optionsToggleAnimationDuration / 2000, "s ease-out"));
 }, function (_a) {

package/dist/v2/components/Dropdowns/comps/OptionsShell/index.js

@@ -48,13 +48,13 @@ var DefaultMobileShell = function (_a) {
     return (react_1.default.createElement("div", { style: { top: 0, left: 0, height: '100dvh', width: '100dvw', position: 'fixed', zIndex: '100000000', background: 'rgba(0,0,0,0.5)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' } }, children));
 };
 exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
-    var _b;
-    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, showDoneButton = _a.showDoneButton, _c = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _c === void 0 ? false : _c, relativeToRef = _a.relativeToRef, S = _a.S, alignDropdown = _a.alignDropdown, matchSelectInputWidth = _a.matchSelectInputWidth;
+    var _b, _c;
+    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, showDoneButton = _a.showDoneButton, _d = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _d === void 0 ? false : _d, relativeToRef = _a.relativeToRef, S = _a.S, alignDropdown = _a.alignDropdown, matchSelectInputWidth = _a.matchSelectInputWidth;
     var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
     var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
     var currentTheme = (0, styled_components_1.useTheme)();
     var MobileShell = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.MobileShell) || DefaultMobileShell;
-    var _d = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _d.fixPos, applyFixedPos = _d.applyFixedPos, removeFixedPos = _d.removeFixedPos, trackerRef = _d.trackerRef;
+    var _e = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _e.fixPos, applyFixedPos = _e.applyFixedPos, removeFixedPos = _e.removeFixedPos, trackerRef = _e.trackerRef;
     (0, react_1.useEffect)(function () {
         if (popOutOfOverflowHiddenParent) {
             if (showOptions)
@@ -66,8 +66,8 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
     var optionsToggleAnimationDuration = 300;
     return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
         popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
-        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children, lightboxStyle: lightboxStyle, alignDropdown: alignDropdown, optionsToggleAnimationDuration: optionsToggleAnimationDuration },
-            react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", showOptions: showOptions, optionsToggleAnimationDuration: optionsToggleAnimationDuration, ref: ref, lightboxHeight: lightboxHeight, matchSelectInputWidth: matchSelectInputWidth, selectRefwidth: (_b = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width, 
+        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children, lightboxStyle: lightboxStyle, alignDropdown: alignDropdown, options: options, matchSelectInputWidth: matchSelectInputWidth, selectRefwidth: (_b = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width, optionsToggleAnimationDuration: optionsToggleAnimationDuration },
+            react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", showOptions: showOptions, optionsToggleAnimationDuration: optionsToggleAnimationDuration, ref: ref, lightboxHeight: lightboxHeight, matchSelectInputWidth: matchSelectInputWidth, selectRefwidth: (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width, 
                 // className={className}
                 style: {
                 // position: "absolute",

package/dist/v2/components/Dropdowns/comps/OptionsShell/styled.js

@@ -13,7 +13,7 @@ var themes_1 = require("../../../../themes");
 var mixins_1 = require("../../../../../themes/mixins");
 var globalVariables_1 = require("../../../../../globalStyles/globalVariables");
 /** for lightbox shell */
-exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"], ["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"])), function (_a) {
+exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: 100%;\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"], ["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: 100%;\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"])), function (_a) {
     var isOpen = _a.isOpen, openHeight = _a.openHeight;
     return isOpen ? (openHeight ? openHeight + 'px' : 'auto') : 0;
 }, function (_a) {
@@ -45,7 +45,7 @@ exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_2 |
         default:
             return '30rem';
     }
-}, themes_1.colors.grey5, themes_1.colors.grey40, themes_1.colors.grey80, (0, mixins_1.mediaQuery)('md'));
+}, themes_1.colors.grey5, themes_1.colors.grey20, themes_1.colors.grey50, (0, mixins_1.mediaQuery)('md'));
 /** for modal shell */
 exports.StyledModalOptionsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  /* overflow: auto; */\n"], ["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  /* overflow: auto; */\n"])), themes_1.colors.white);
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/v2/components/Dropdowns/comps/OptionsSingle/index.js

@@ -75,7 +75,7 @@ var OptionsSingle = function (_a) {
     }, [showOptions]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, SelectComp: SelectComp, handleHideOptions: handleHideOptions, label: label, optionsModalLabel: optionsModalLabel, relativeToRef: relativeToRef, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth, S: S },
-            react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: handleSelect, optionsClassName: optionsClassName, S: S, observerRef: observerRef, grouped: (0, getValue_1.isGroupedData)(options), isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus }),
+            react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) { return handleSelect(v); }, optionsClassName: optionsClassName, S: S, observerRef: observerRef, grouped: (0, getValue_1.isGroupedData)(options), isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus }),
             genCreateTagButton && genCreateTagButton(options))));
 };
 exports.OptionsSingle = OptionsSingle;

package/dist/v2/components/Dropdowns/utils/genIcon.js

@@ -7,6 +7,8 @@ exports.genIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../../../../icons");
 var themes_1 = require("../../../themes");
+var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
+var mixins_1 = require("../../../../themes/mixins");
 var grey40 = themes_1.colors.grey40;
 var genIcon = function (_a) {
     var icon = _a.icon, _b = _a.weight, weight = _b === void 0 ? "bold" : _b, disabled = _a.disabled, S = _a.S, color = _a.color, _c = _a.className, className = _c === void 0 ? '' : _c;
@@ -15,6 +17,8 @@ var genIcon = function (_a) {
     var IconComp = icons_1.icons[icon];
     if (!IconComp)
         return null;
-    return react_1.default.createElement(IconComp, { className: className, size: S ? 16 : 20, style: { color: disabled ? grey40 : (color || undefined) }, weight: weight });
+    var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
+    var isMobile = screenWidth <= (0, mixins_1.getBreakPoint)("sm");
+    return react_1.default.createElement(IconComp, { className: className, size: isMobile ? 18 : 16, style: { color: disabled ? grey40 : (color || undefined) }, weight: weight });
 };
 exports.genIcon = genIcon;

package/dist/v2/components/List/comps/ListGroup.d.ts

@@ -1,12 +1,13 @@
 export const GroupHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const GroupDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
-export function ListGroup({ group, index, value, focussedOp, scrollFocussedOpIntoView, handleSelect, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, setSearchString, setSearchBarFocus, }: {
+export function ListGroup({ id, group, index, value, focussedOp, scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, setSearchString, setSearchBarFocus, }: {
+    id: any;
     group: any;
     index: any;
     value: any;
     focussedOp: any;
     scrollFocussedOpIntoView: any;
-    handleSelect: any;
+    onChange: any;
     optionsClassName: any;
     invert: any;
     S: any;

package/dist/v2/components/List/comps/ListGroup.js

@@ -17,15 +17,15 @@ var ListItem_1 = require("./ListItem");
 exports.GroupHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0.4rem 0.8rem;\n  color: ", ";\n"], ["\n  padding: 0.4rem 0.8rem;\n  color: ", ";\n"])), themes_1.colors.grey50);
 exports.GroupDivider = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0.4rem 0 0.8rem 0;\n"], ["\n  margin: 0.4rem 0 0.8rem 0;\n"])));
 var ListGroup = function (_a) {
-    var group = _a.group, index = _a.index, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, handleSelect = _a.handleSelect, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, isMulti = _a.isMulti, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus;
+    var id = _a.id, group = _a.group, index = _a.index, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, isMulti = _a.isMulti, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus;
     return (react_1.default.createElement("div", null,
         index > 0 && (react_1.default.createElement(exports.GroupDivider, null,
             react_1.default.createElement(Divider_1.Divider, null))),
         react_1.default.createElement(exports.GroupHeader, null,
             react_1.default.createElement(Typo2_1.UI_TAG, null, group.display)),
-        group.options.map(function (option, idx) { return (react_1.default.createElement(ListItem_1.ListItem, { key: option.value, option: option, isSelected: (!option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value), isFocussed: focussedOp === idx, index: idx, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: function () {
+        group.options.map(function (option, idx) { return (react_1.default.createElement(ListItem_1.ListItem, { key: option.value, option: option, isSelected: (!option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value), isFocussed: focussedOp === idx, index: idx, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function () {
                 if (!option.loading) {
-                    handleSelect(option);
+                    parentOnChange(id, option);
                     if (setSearchString)
                         setSearchString("");
                     if (setSearchBarFocus)

package/dist/v2/components/List/comps/ListItem.d.ts

@@ -1,9 +1,10 @@
-export function ListItem({ option, isSelected, isFocussed, scrollFocussedOpIntoView, handleSelect, setSearchString, optionsClassName, S, observerRef, isTagsStyle, isMulti, value, index, }: {
+export function ListItem({ id, option, isSelected, isFocussed, scrollFocussedOpIntoView, onChange: parentOnChange, setSearchString, optionsClassName, S, observerRef, isTagsStyle, isMulti, value, index, }: {
+    id: any;
     option: any;
     isSelected: any;
     isFocussed: any;
     scrollFocussedOpIntoView: any;
-    handleSelect: any;
+    onChange: any;
     setSearchString: any;
     optionsClassName: any;
     S: any;

package/dist/v2/components/List/comps/ListItem.js

@@ -17,13 +17,13 @@ var RadioAndCheckbox_1 = require("../../RadioAndCheckbox");
 var styled_1 = require("./styled");
 var grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, grey60 = themes_1.colors.grey60;
 var ListItem = function (_a) {
-    var option = _a.option, isSelected = _a.isSelected, isFocussed = _a.isFocussed, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, handleSelect = _a.handleSelect, setSearchString = _a.setSearchString, optionsClassName = _a.optionsClassName, S = _a.S, observerRef = _a.observerRef, isTagsStyle = _a.isTagsStyle, isMulti = _a.isMulti, value = _a.value, index = _a.index;
+    var id = _a.id, option = _a.option, isSelected = _a.isSelected, isFocussed = _a.isFocussed, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, setSearchString = _a.setSearchString, optionsClassName = _a.optionsClassName, S = _a.S, observerRef = _a.observerRef, isTagsStyle = _a.isTagsStyle, isMulti = _a.isMulti, value = _a.value, index = _a.index;
     var theme = (0, styled_components_1.useTheme)();
     var TypoComp = S ? Typo2_1.UI_BODY_SM_DF : Typo2_1.UI_BODY_SM_DF;
     var image = option.image, display = option.display, icon = option.icon, desc = option.desc, color = option.color, loading = option.loading, disabled = option.disabled;
     var handleClick = function () {
         if (!loading) {
-            handleSelect(option);
+            parentOnChange(id, option);
             setSearchString && setSearchString("");
         }
     };
@@ -37,7 +37,7 @@ var ListItem = function (_a) {
     return (react_1.default.createElement(styled_1.StyledListItemWrapper, { index: index, isSelected: isSelected, isFocussed: isFocussed, className: "OKE-Dropdown__option", ref: function (el) { return isFocussed && el && scrollFocussedOpIntoView(el); }, onClick: handleClick, S: S, style: { pointerEvents: disabled && "none", cursor: !disabled && "pointer" } },
         react_1.default.createElement("div", { ref: observerRef, style: {
                 display: "flex",
-                alignItems: "flex-start",
+                alignItems: desc ? "flex-start" : "center",
                 maxWidth: "36rem",
                 gap: icon ? "0.6rem" : "0.8rem",
             } },

package/dist/v2/components/List/index.d.ts

@@ -1,10 +1,11 @@
 export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export function List({ options, value, focussedOp, scrollFocussedOpIntoView, handleSelect, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, grouped, disableShadow, isSearchable, searchbarPlaceholder, searchBarFocus, searchString, setSearchString, setSearchBarFocus, children, enableBorder, style }: {
+export function List({ id, options, value, focussedOp, scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, grouped, disableShadow, isSearchable, searchbarPlaceholder, searchBarFocus, searchString, setSearchString, setSearchBarFocus, children, enableBorder, style }: {
+    id: any;
     options?: any[];
     value: any;
     focussedOp: any;
     scrollFocussedOpIntoView: any;
-    handleSelect: any;
+    onChange: any;
     optionsClassName: any;
     invert: any;
     S: any;

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

@@ -57,17 +57,17 @@ exports.StyledListWrapper = styled_components_1.default.div(templateObject_3 ||
 });
 var List = function (_a) {
     // const theme = useTheme();
-    var _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, handleSelect = _a.handleSelect, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, _c = _a.isMulti, isMulti = _c === void 0 ? false : _c, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, _d = _a.grouped, grouped = _d === void 0 ? false : _d, disableShadow = _a.disableShadow, isSearchable = _a.isSearchable, searchbarPlaceholder = _a.searchbarPlaceholder, searchBarFocus = _a.searchBarFocus, searchString = _a.searchString, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus, children = _a.children, enableBorder = _a.enableBorder, style = _a.style;
+    var id = _a.id, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, _c = _a.isMulti, isMulti = _c === void 0 ? false : _c, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, _d = _a.grouped, grouped = _d === void 0 ? false : _d, disableShadow = _a.disableShadow, isSearchable = _a.isSearchable, searchbarPlaceholder = _a.searchbarPlaceholder, searchBarFocus = _a.searchBarFocus, searchString = _a.searchString, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus, children = _a.children, enableBorder = _a.enableBorder, style = _a.style;
     var renderListItems = function () {
         if (options.length === 0) {
             return react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S });
         }
         if (grouped) {
-            return (react_1.default.createElement(react_1.Fragment, null, options.map(function (group, index) { return (react_1.default.createElement(ListGroup_1.ListGroup, { key: "group-".concat(index), group: group, index: index, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: handleSelect, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: observerRef, isMulti: isMulti, isTagsStyle: isTagsStyle, setFocusSelectTagsInput: setFocusSelectTagsInput, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, disableShadow: disableShadow })); })));
+            return (react_1.default.createElement(react_1.Fragment, null, options.map(function (group, index) { return (react_1.default.createElement(ListGroup_1.ListGroup, { id: id, key: "group-".concat(index), group: group, index: index, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: observerRef, isMulti: isMulti, isTagsStyle: isTagsStyle, setFocusSelectTagsInput: setFocusSelectTagsInput, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, disableShadow: disableShadow })); })));
         }
-        return options.map(function (option, index) { return (react_1.default.createElement(ListItem_1.ListItem, { key: option.value, option: option, isSelected: (!option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value), isFocussed: focussedOp === index, index: index, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: function () {
+        return options.map(function (option, index) { return (react_1.default.createElement(ListItem_1.ListItem, { key: option.value, option: option, isSelected: (!option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value), isFocussed: focussedOp === index, index: index, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function () {
                 if (!option.loading) {
-                    handleSelect(option);
+                    parentOnChange(id, option);
                     if (setSearchString)
                         setSearchString("");
                     if (setSearchBarFocus)

package/dist/v2/components/TabBar/index.js

@@ -36,8 +36,10 @@ var Base = function (_a) {
     var handleClick = function (v) {
         onChange && onChange(id, saveValueAsString ? v.value : v);
     };
-    var genIconInTab = function (iconName) {
-        var IconComp = icons_1.icons[iconName];
+    var tabsHasText = options.some(function (tab) { return tab === null || tab === void 0 ? void 0 : tab.display; }); // if false, all tabs have only icons no display text
+    var genIconInTab = function (_a) {
+        var icon = _a.icon;
+        var IconComp = icons_1.icons[icon];
         if (!IconComp)
             return null;
         //else
@@ -48,14 +50,14 @@ var Base = function (_a) {
             !scrollIsAtStart && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { left: true },
                 react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
             react_1.default.createElement("div", { ref: scrollContainerRef, style: { maxWidth: '100%', height: '100%', overflow: 'hidden' } },
-                react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, translateX: scrollX }, options.map(function (op) {
+                react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, translateX: scrollX, tabsHasText: tabsHasText }, options.map(function (op) {
                     var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
                     var tabIsDisabled = disabledTabs && disabledTabs.some(function (tab) { return tab.value === op.value; });
                     var tabIsActive = value && op.value === value.value;
                     return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { tabBarStyle: tabBarStyle, key: op.value, active: tabIsActive, error: tabHasError, disabled: tabIsDisabled, black: black },
-                        react_1.default.createElement(index_styled_1.TabBarTabStyled, { size: size, active: tabIsActive, error: tabHasError, disabled: tabIsDisabled, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); }, black: black },
+                        react_1.default.createElement(index_styled_1.TabBarTabStyled, { tabsHasText: tabsHasText, size: size, active: tabIsActive, error: tabHasError, disabled: tabIsDisabled, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); }, black: black },
                             react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '0.4rem' } },
-                                op.icon && genIconInTab(op.icon),
+                                op.icon && genIconInTab({ icon: op.icon, display: op.display }),
                                 op.display &&
                                     react_1.default.createElement(index_styled_1.STYLED_TYPO, { capitalize: true }, op.display),
                                 op.message &&

package/dist/v2/components/TabBar/index.styled.js

@@ -88,7 +88,10 @@ exports.TabBarStyled = styled_components_1.default.div(templateObject_7 || (temp
     return size === 'S' ? '2.5rem' : 'auto';
 });
 exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  position: relative;\n"], ["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  position: relative;\n"])));
-exports.TabBarRowStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  white-space: nowrap;\n  width: fit-content;\n  gap: 0.4rem;\n  ", ";\n  transform: ", ";\n"], ["\n  display: flex;\n  height: 100%;\n  white-space: nowrap;\n  width: fit-content;\n  gap: 0.4rem;\n  ", ";\n  transform: ", ";\n"])), (0, mixins_1.transition)('transform'), function (_a) {
+exports.TabBarRowStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  white-space: nowrap;\n  width: fit-content;\n  gap: ", ";\n  ", ";\n  transform: ", ";\n"], ["\n  display: flex;\n  height: 100%;\n  white-space: nowrap;\n  width: fit-content;\n  gap: ", ";\n  ", ";\n  transform: ", ";\n"])), function (_a) {
+    var tabsHasText = _a.tabsHasText;
+    return tabsHasText ? "0.4rem" : 0;
+}, (0, mixins_1.transition)('transform'), function (_a) {
     var translateX = _a.translateX;
     return "translateX(".concat(translateX, "px)");
 });
@@ -99,7 +102,10 @@ exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_10 ||
             return exports.wrapperStyles.style1;
     }
 });
-exports.TabBarTabStyled = styled_components_1.default.button(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  padding: 0.45rem 0.8rem;\n  height: 100%;\n  cursor: pointer;\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n\n  ", " \n"], ["\n  padding: 0.45rem 0.8rem;\n  height: 100%;\n  cursor: pointer;\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n\n  ", " \n"])), function (_a) {
+exports.TabBarTabStyled = styled_components_1.default.button(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  padding: ", ";\n  height: 100%;\n  cursor: pointer;\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n\n  ", " \n"], ["\n  padding: ", ";\n  height: 100%;\n  cursor: pointer;\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n\n  ", " \n"])), function (_a) {
+    var tabsHasText = _a.tabsHasText;
+    return tabsHasText ? "0.45rem 0.8rem" : "1rem 1rem";
+}, function (_a) {
     var tabBarStyle = _a.tabBarStyle;
     switch (tabBarStyle) {
         case "1":

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

@@ -36,15 +36,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -54,7 +45,7 @@ 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 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) : '';
 });
@@ -97,24 +88,6 @@ var CustomTooltip = function (props) {
         gap: "1rem",
         // 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];
-    (0, react_1.useEffect)(function () {
-        if (!tooltipTextClampStates) {
-            setTooltipTextClampStates(value === null || value === void 0 ? void 0 : value.map(function (v) { return true; }));
-        }
-    }, [value]);
-    (0, react_1.useEffect)(function () {
-        // console.log({ tooltipLabelLengthRefs });
-        var rowHeightsToSet = tooltipLabelLengthRefs.current.map(function (ref) {
-            var _a;
-            var heightOfLabelText = (_a = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height;
-            // console.log({heightOfLabelText})
-            return heightOfLabelText || null;
-        });
-        setRowHeights(rowHeightsToSet);
-    }, [tooltipTextClampStates.join()]);
     if (!isActive)
         return null;
     return (react_1.default.createElement(react_1.Fragment, null,
@@ -125,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, 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 },
                     react_1.default.createElement("div", { style: {
                             display: "flex",
                             alignItems: "center",
@@ -133,27 +106,15 @@ 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, style: {
-                        height: rowHeights[index]
-                            ? rowHeights[index] + "px"
-                            : "auto",
-                    } },
+                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, { 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, onMouseOver: function () { return setTooltipTextClampStates(function (prev) {
-                        var newState = __spreadArray([], prev, true);
-                        newState[index] = false;
-                        return newState;
-                    }); }, onMouseOut: function () { return setTooltipTextClampStates(function (prev) {
-                        var newState = __spreadArray([], prev, true);
-                        newState[index] = true;
-                        return newState;
-                    }); }, ref: function (el) { return (tooltipLabelLengthRefs.current[index] = el); } },
-                    react_1.default.createElement(UI_CAPTION_DF_WITH_LINE_CLAMP, { clampT: tooltipTextClampStates[index] }, entry.tooltipLabel))); }))))));
+                    } }, 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 = CustomTooltip;
 var templateObject_1;

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

@@ -127,9 +127,9 @@ var renderCustomizedLabel = function (_a) {
 };
 var renderActiveShape = function (props) {
     var cx = props.cx, cy = props.cy, innerRadius = props.innerRadius, outerRadius = props.outerRadius, startAngle = props.startAngle, endAngle = props.endAngle, fill = props.fill, payload = props.payload, midAngle = props.midAngle;
-    var radius = innerRadius + (outerRadius - innerRadius) * 0.45; // Moved closer to center
-    var x = cx + radius * Math.cos(-midAngle * RADIAN);
-    var y = cy + radius * Math.sin(-midAngle * RADIAN);
+    // const radius = innerRadius + (outerRadius - innerRadius) * 0.45; // Moved closer to center
+    // const x = cx + radius * Math.cos(-midAngle * RADIAN);
+    // const y = cy + radius * Math.sin(-midAngle * RADIAN);
     return (react_1.default.createElement("g", null,
         react_1.default.createElement(recharts_1.Sector, { cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius + 6, startAngle: startAngle, endAngle: endAngle, fill: fill })));
 };
@@ -173,7 +173,6 @@ var PieChart = function (_a) {
     };
     if (data.length === 0)
         return react_1.default.createElement("div", null, "No data available");
-    console.log({ mousePosition: mousePosition });
     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 })),
         react_1.default.createElement("div", { style: { flexGrow: 1, position: 'relative' } },

package/dist/v2/themes/colors.js

@@ -4,10 +4,10 @@ exports.colors = exports.dataVizColorsText = exports.dataVizColors = void 0;
 var primary = "#00223D";
 var secondary = "#526070";
 var tertiary = "#30133E";
-var primaryContainer = "#184469";
-var onPrimary = "#BBDAFF";
-var secondaryContainer = "#D9E8FC";
-var onSecondary = "#3E4C5B";
+var primaryContainer = "#0776ED";
+var onPrimary = "#FFFFFF";
+var secondaryContainer = "#C9E2FC";
+var onSecondary = "#0F3257";
 var tertiaryContainer = "#533461";
 var onTertiary = "#F0C8FF";
 var surfaceContainer = "#EEEDF1";

package/package.json

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