oolib 3.2.0 → 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/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/package.json

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