oolib 3.1.2 → 3.3.0

package/dist/stories/v2/components/Dropdown/dropdownOptions.d.ts

@@ -2,6 +2,17 @@ export const dropdownOptions: ({
     display: string;
     value: string;
     color: string;
+    iconAfter?: undefined;
+    iconAfterColor?: undefined;
+    desc?: undefined;
+    icon?: undefined;
+    image?: undefined;
+} | {
+    display: string;
+    value: string;
+    color: string;
+    iconAfter: string;
+    iconAfterColor: string;
     desc?: undefined;
     icon?: undefined;
     image?: undefined;
@@ -10,6 +21,8 @@ export const dropdownOptions: ({
     value: string;
     color: string;
     desc: string;
+    iconAfter?: undefined;
+    iconAfterColor?: undefined;
     icon?: undefined;
     image?: undefined;
 } | {
@@ -17,6 +30,8 @@ export const dropdownOptions: ({
     value: string;
     color: string;
     icon: string;
+    iconAfter?: undefined;
+    iconAfterColor?: undefined;
     desc?: undefined;
     image?: undefined;
 } | {
@@ -24,6 +39,8 @@ export const dropdownOptions: ({
     value: string;
     color: string;
     image: string;
+    iconAfter?: undefined;
+    iconAfterColor?: undefined;
     desc?: undefined;
     icon?: undefined;
 } | {
@@ -33,14 +50,23 @@ export const dropdownOptions: ({
     image: string;
     icon: string;
     desc: string;
+    iconAfter?: undefined;
+    iconAfterColor?: undefined;
 })[];
 export const dropdownOptionsGroup: {
     display: string;
     value: string;
-    options: {
+    options: ({
         display: string;
         value: string;
         color: string;
         desc: string;
-    }[];
+        iconAfter?: undefined;
+    } | {
+        display: string;
+        value: string;
+        desc: string;
+        color: string;
+        iconAfter: string;
+    })[];
 }[];

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

@@ -17,6 +17,9 @@ exports.dropdownOptions = [
         color: themes_1.colors.invertRed,
         // image: "xyz",
         // icon: "Trash", 
+        iconAfter: "WarningDiamond",
+        // Per-option colour too; omit it and the icon stays the default grey.
+        iconAfterColor: themes_1.colors.red,
         // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
     },
     {
@@ -1889,7 +1892,10 @@ exports.dropdownOptionsGroup = [
                 display: "Mumbai",
                 value: "mumbai",
                 desc: "Mumbai is India's financial center and largest city with a population of over 20 million people.",
-                color: themes_1.colors.lightBlue
+                color: themes_1.colors.lightBlue,
+                // Same per-option marker, but inside a GROUP — covers the ListGroup path,
+                // which is what grouped consumers (e.g. the field-type dropdown) hit.
+                iconAfter: "WarningDiamond"
             }
         ],
     },

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

@@ -46,6 +46,7 @@ var dropdownOptions = [
         color: themes_1.colors.invertRed,
         // image: "xyz",
         icon: "Trash",
+        iconAfter: "WarningDiamond",
         desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
     },
     {

package/dist/stories/v2/components/Tags/TagDisplay.stories.d.ts

@@ -7,5 +7,6 @@ declare namespace _default {
 }
 export default _default;
 export function Tag_Display(args: any): React.JSX.Element;
+export function Text_Wrap_Max_Lines(): React.JSX.Element;
 export function playground(args: any): React.JSX.Element;
 import React from "react";

package/dist/stories/v2/components/Tags/TagDisplay.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.playground = exports.Tag_Display = void 0;
+exports.playground = exports.Text_Wrap_Max_Lines = exports.Tag_Display = void 0;
 var react_1 = __importDefault(require("react"));
 var Tags_1 = require("../../../../v2/components/Tags");
 var tagArgTypes_1 = require("./utils/tagArgTypes");
@@ -65,6 +65,29 @@ var Tag_Display = function (args) {
         react_1.default.createElement(Tags_1.TagDisplay, __assign({ display: "Tag Display" }, args))));
 };
 exports.Tag_Display = Tag_Display;
+// textWrapMaxLines showcase — long labels in a narrow container: default
+// single-line ellipsis vs wrap-to-N-lines (pill grows vertically, then
+// ellipsizes).
+var Text_Wrap_Max_Lines = function () {
+    var long = "Outcome-driven product evaluation with a deliberately long tail so the label overflows a narrow card";
+    return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "2rem", padding: "2rem", width: "220px", border: "1px dashed #ccc" } },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "Default (1 line + ellipsis)"),
+            react_1.default.createElement(Tags_1.TagDisplay, { display: long })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "textWrapMaxLines = 2"),
+            react_1.default.createElement(Tags_1.TagDisplay, { display: long, textWrapMaxLines: 2 })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "textWrapMaxLines = 3"),
+            react_1.default.createElement(Tags_1.TagDisplay, { display: long, textWrapMaxLines: 3 })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "Short label, textWrapMaxLines = 2 (no visual change)"),
+            react_1.default.createElement(Tags_1.TagDisplay, { display: "Pain Points", textWrapMaxLines: 2 })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "Unbroken token, textWrapMaxLines = 2"),
+            react_1.default.createElement(Tags_1.TagDisplay, { display: "Supercalifragilisticexpialidocious-annotation-topic", textWrapMaxLines: 2 }))));
+};
+exports.Text_Wrap_Max_Lines = Text_Wrap_Max_Lines;
 var playground = function (args) {
     return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "3rem", padding: "1rem" } },
         react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },

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

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

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

@@ -62,10 +62,12 @@ var styled_1 = require("./styled");
 var Tooltip_1 = __importDefault(require("../../Tooltip"));
 var grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, grey60 = themes_1.colors.grey60;
 var ListItem = function (_a) {
-    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, _b = _a.alignCheckbox, alignCheckbox = _b === void 0 ? "left" : _b, iconAfter = _a.iconAfter;
+    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, _b = _a.alignCheckbox, alignCheckbox = _b === void 0 ? "left" : _b, allOptionsIconAfter = _a.iconAfter // might not be used anywhere keeping it here just in case
+    ;
     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, tooltip = option.tooltip;
+    var image = option.image, display = option.display, icon = option.icon, desc = option.desc, color = option.color, loading = option.loading, disabled = option.disabled, tooltip = option.tooltip, optionIconAfter = option.iconAfter, iconAfterColor = option.iconAfterColor;
+    var iconAfter = allOptionsIconAfter || optionIconAfter;
     var handleClick = function () {
         if (!loading) {
             parentOnChange(id, option);
@@ -117,7 +119,8 @@ var ListItem = function (_a) {
                 icon: iconAfter,
                 S: S,
                 className: "OKE-Dropdown__optionIcon",
-                disabled: disabled
+                disabled: disabled,
+                color: iconAfterColor
             }))));
     if (tooltip) {
         var tooltipProps = typeof tooltip === 'string' ? { text: tooltip } : tooltip;

package/dist/v2/components/Tags/Comps/TagDisplay/index.d.ts

@@ -10,5 +10,8 @@ export interface TagDisplayInterface extends Omit<TagInterface, 'variant'> {
     icon?: string;
     weight?: "bold" | "light" | "default";
     colorPreset?: 'positive' | 'inProgress' | 'warning' | 'negative' | 'special' | "default";
+    /** Wrap the label up to this many lines before ellipsizing (the pill grows
+     *  vertically to fit). Unset = existing single-line ellipsis behaviour. */
+    textWrapMaxLines?: number;
 }
 export declare const TagDisplay: React.FunctionComponent<TagDisplayInterface>;

package/dist/v2/components/Tags/Comps/TagDisplay/index.js

@@ -27,10 +27,33 @@ var getTagDisplayStyles_1 = require("./getTagDisplayStyles");
 var styled_components_1 = __importDefault(require("styled-components"));
 var mixins_1 = require("../../../../../themes/mixins");
 var white = themes_1.colors.white;
-var STYLED_UI_TAG_DF = (0, styled_components_1.default)(Typo2_1.UI_TAG_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), mixins_1.ellipsis);
+var STYLED_UI_TAG_DF = (0, styled_components_1.default)(Typo2_1.UI_TAG_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+    // textWrapMaxLines variants — text wraps up to N lines, then ellipsis
+    // (clampText), and the pill grows vertically to fit. white-space: normal
+    // overrides both the ellipsis mixin's nowrap and StyledTag's container-level
+    // nowrap; overflow-wrap catches single unbroken tokens longer than the pill.
+    // One styled component per distinct line count, cached — a fresh styled()
+    // per render would remount the text node and churn generated classes.
+])), mixins_1.ellipsis);
+// textWrapMaxLines variants — text wraps up to N lines, then ellipsis
+// (clampText), and the pill grows vertically to fit. white-space: normal
+// overrides both the ellipsis mixin's nowrap and StyledTag's container-level
+// nowrap; overflow-wrap catches single unbroken tokens longer than the pill.
+// One styled component per distinct line count, cached — a fresh styled()
+// per render would remount the text node and churn generated classes.
+var wrapTypoByLines = {};
+var getWrapTypo = function (lines) {
+    if (!wrapTypoByLines[lines]) {
+        wrapTypoByLines[lines] = (0, styled_components_1.default)(Typo2_1.UI_TAG_DF)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n      white-space: normal;\n      overflow-wrap: anywhere;\n    "], ["\n      ", "\n      white-space: normal;\n      overflow-wrap: anywhere;\n    "])), (0, mixins_1.clampText)(lines));
+    }
+    return wrapTypoByLines[lines];
+};
 var TagDisplay = function (_a) {
-    var id = _a.id, display = _a.display, size = _a.size, tagColor = _a.tagColor, textColor = _a.textColor, fill = _a.fill, icon = _a.icon, badgeColor = _a.badgeColor, _b = _a.colorPreset, colorPreset = _b === void 0 ? 'default' : _b, weight = _a.weight;
-    return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, badgeColor: badgeColor, size: size, fill: fill, style: __assign(__assign(__assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset })), (tagColor ? { backgroundColor: tagColor } : {})), (textColor ? { color: textColor } : {})), typo: STYLED_UI_TAG_DF }));
+    var id = _a.id, display = _a.display, size = _a.size, tagColor = _a.tagColor, textColor = _a.textColor, fill = _a.fill, icon = _a.icon, badgeColor = _a.badgeColor, _b = _a.colorPreset, colorPreset = _b === void 0 ? 'default' : _b, weight = _a.weight, textWrapMaxLines = _a.textWrapMaxLines;
+    var typo = textWrapMaxLines && textWrapMaxLines > 0
+        ? getWrapTypo(Math.floor(textWrapMaxLines))
+        : STYLED_UI_TAG_DF;
+    return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, badgeColor: badgeColor, size: size, fill: fill, style: __assign(__assign(__assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset })), (tagColor ? { backgroundColor: tagColor } : {})), (textColor ? { color: textColor } : {})), typo: typo }));
 };
 exports.TagDisplay = TagDisplay;
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/package.json

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