oolib 3.2.0 → 3.3.1

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/dist/v2/components/Tooltip/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { TooltipProps } from './types';
-export default function Tooltip({ text, heading, primaryContent, secondaryContent, progressiveDelay, progressiveGap, children, placement, showPointer, showDelay, hideDelay, animation, followCursor, cursorOffset, invert, wrapperDisplay, wrapperStyle, trigger, style, }: TooltipProps): React.JSX.Element;
+export default function Tooltip({ text, heading, primaryContent, secondaryContent, progressiveDelay, progressiveGap, children, placement, showPointer, showDelay, hideDelay, animation, followCursor, cursorOffset, invert, wrapperDisplay, wrapperStyle, trigger, pinOnClick, style, }: TooltipProps): React.JSX.Element;

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

@@ -53,15 +53,15 @@ var utils_1 = require("./utils");
 var styled_1 = require("./styled");
 var CURSOR_HEIGHT = 20;
 function Tooltip(_a) {
-    var text = _a.text, heading = _a.heading, primaryContent = _a.primaryContent, secondaryContent = _a.secondaryContent, _b = _a.progressiveDelay, progressiveDelay = _b === void 0 ? 600 : _b, _c = _a.progressiveGap, progressiveGap = _c === void 0 ? 8 : _c, children = _a.children, _d = _a.placement, placement = _d === void 0 ? 'top' : _d, _e = _a.showPointer, showPointer = _e === void 0 ? true : _e, _f = _a.showDelay, showDelay = _f === void 0 ? 600 : _f, _g = _a.hideDelay, hideDelay = _g === void 0 ? 0 : _g, _h = _a.animation, animation = _h === void 0 ? 'fade' : _h, _j = _a.followCursor, followCursor = _j === void 0 ? false : _j, _k = _a.cursorOffset, cursorOffset = _k === void 0 ? 10 : _k, _l = _a.invert, invert = _l === void 0 ? false : _l, wrapperDisplay = _a.wrapperDisplay, wrapperStyle = _a.wrapperStyle, _m = _a.trigger, trigger = _m === void 0 ? 'hover' : _m, style = _a.style;
+    var text = _a.text, heading = _a.heading, primaryContent = _a.primaryContent, secondaryContent = _a.secondaryContent, _b = _a.progressiveDelay, progressiveDelay = _b === void 0 ? 600 : _b, _c = _a.progressiveGap, progressiveGap = _c === void 0 ? 8 : _c, children = _a.children, _d = _a.placement, placement = _d === void 0 ? 'top' : _d, _e = _a.showPointer, showPointer = _e === void 0 ? true : _e, _f = _a.showDelay, showDelay = _f === void 0 ? 600 : _f, _g = _a.hideDelay, hideDelay = _g === void 0 ? 0 : _g, _h = _a.animation, animation = _h === void 0 ? 'fade' : _h, _j = _a.followCursor, followCursor = _j === void 0 ? false : _j, _k = _a.cursorOffset, cursorOffset = _k === void 0 ? 10 : _k, _l = _a.invert, invert = _l === void 0 ? false : _l, wrapperDisplay = _a.wrapperDisplay, wrapperStyle = _a.wrapperStyle, _m = _a.trigger, trigger = _m === void 0 ? 'hover' : _m, _o = _a.pinOnClick, pinOnClick = _o === void 0 ? true : _o, style = _a.style;
     var bgColor = invert ? __1.colors2.white : __1.colors2.black;
     var textColor = invert ? __1.colors2.black : __1.colors2.white;
     var resolvedPrimaryContent = (0, utils_1.resolvePrimaryContent)(text, heading, primaryContent);
-    var _o = (0, react_1.useState)(false), isOpen = _o[0], setIsOpen = _o[1];
-    var _p = (0, react_1.useState)(false), showSecondary = _p[0], setShowSecondary = _p[1];
-    var _q = (0, react_1.useState)(false), isPinned = _q[0], setIsPinned = _q[1];
-    var _r = (0, react_1.useState)({ x: 0, y: 0 }), mousePos = _r[0], setMousePos = _r[1];
-    var _s = (0, react_1.useState)({}), cursorTooltipStyle = _s[0], setCursorTooltipStyle = _s[1];
+    var _p = (0, react_1.useState)(false), isOpen = _p[0], setIsOpen = _p[1];
+    var _q = (0, react_1.useState)(false), showSecondary = _q[0], setShowSecondary = _q[1];
+    var _r = (0, react_1.useState)(false), isPinned = _r[0], setIsPinned = _r[1];
+    var _s = (0, react_1.useState)({ x: 0, y: 0 }), mousePos = _s[0], setMousePos = _s[1];
+    var _t = (0, react_1.useState)({}), cursorTooltipStyle = _t[0], setCursorTooltipStyle = _t[1];
     var progressiveTimerRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
     var arrowRef = (0, react_1.useRef)(null);
@@ -89,7 +89,7 @@ function Tooltip(_a) {
         close: { opacity: 0 },
     } : undefined;
     var isClickTrigger = trigger === 'click';
-    var _t = (0, useFloatingPosition_1.useFloatingPosition)({
+    var _u = (0, useFloatingPosition_1.useFloatingPosition)({
         open: isOpen,
         onOpenChange: function (open) {
             if (followCursor)
@@ -129,7 +129,7 @@ function Tooltip(_a) {
             shift: { enabled: true, config: { padding: 8 } },
             flip: { enabled: true, config: followCursor ? { fallbackPlacements: ['top-start'] } : { fallbackAxisSideDirection: 'start' } },
         },
-    }), refs = _t.refs, floatingStyles = _t.floatingStyles, context = _t.context, getReferenceProps = _t.getReferenceProps, getFloatingProps = _t.getFloatingProps, isMounted = _t.isMounted, transitionStyles = _t.transitionStyles;
+    }), refs = _u.refs, floatingStyles = _u.floatingStyles, context = _u.context, getReferenceProps = _u.getReferenceProps, getFloatingProps = _u.getFloatingProps, isMounted = _u.isMounted, transitionStyles = _u.transitionStyles;
     var handleMouseMove = (0, react_1.useCallback)(function (e) {
         if (followCursor) {
             setMousePos({ x: e.clientX, y: e.clientY });
@@ -149,6 +149,8 @@ function Tooltip(_a) {
     var handleClick = function (e) {
         if (followCursor || isClickTrigger)
             return; //useClick
+        if (!pinOnClick)
+            return; // clickable child owns the click — don't swallow or pin
         e.stopPropagation();
         if (isOpen) {
             setIsPinned(false);

package/dist/v2/components/Tooltip/types.d.ts

@@ -61,6 +61,15 @@ export interface TooltipProps {
      */
     wrapperStyle?: React.CSSProperties;
     trigger?: 'hover' | 'click';
+    /**
+     * Hover-trigger only. By default, clicking the wrapped child pins the
+     * tooltip open AND stops the click from propagating — which silently
+     * swallows clicks meant for an interactive child (or an ancestor click
+     * handler, e.g. a popover trigger wrapping this tooltip). Set false when
+     * `children` is clickable: the click passes through untouched and the
+     * tooltip never pins.
+     */
+    pinOnClick?: boolean;
     style?: React.CSSProperties;
 }
 export interface GetBorderRadiusOptions {

package/package.json

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