@linzjs/lui 17.36.8 → 17.36.10

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [17.36.10](https://github.com/linz/lui/compare/v17.36.9...v17.36.10) (2023-03-02)
+
+
+### Bug Fixes
+
+* add common styles to helpers.scss ([#869](https://github.com/linz/lui/issues/869)) ([b29fcb5](https://github.com/linz/lui/commit/b29fcb5cd32400caf24ff9e020302280de692f2a))
+
+## [17.36.9](https://github.com/linz/lui/compare/v17.36.8...v17.36.9) (2023-03-02)
+
+
+### Bug Fixes
+
+* add toolptip and external selected status in HeaderMenuItemV2 ([#868](https://github.com/linz/lui/issues/868)) ([66478b0](https://github.com/linz/lui/commit/66478b0f2b782ef771defd30355e73a7ca93abcf))
+
 ## [17.36.8](https://github.com/linz/lui/compare/v17.36.7...v17.36.8) (2023-03-01)
 
 

package/dist/components/LuiHeaderV2/LuiHeaderV2.d.ts

@@ -13,18 +13,18 @@ declare const LuiHeaderV2: ({ headingText, size, homeLink, transparent, children
 declare const LuiHeaderMenuItemV2: React.ForwardRefExoticComponent<ILuiHeaderMenuItem & {
     children?: ReactNode;
     iconColor?: string | undefined;
-    clickOutsideOptions?: {
-        ignoreClickOutside?: boolean | undefined;
-        onClickOutside?: (() => void) | undefined;
-    } | undefined;
-    escapeOptions?: {
-        ignoreEscape?: boolean | undefined;
-        onEscape?: (() => void) | undefined;
-    } | undefined;
     /**
-     * used to overwrite internal selected status
+     * allow to control selected status externally,
+     * and expect to use onClickOutside and onEscape to handle selected changes
      */
     isSelected?: boolean | undefined;
+    onClickOutside?: (() => void) | undefined;
+    onEscape?: (() => void) | undefined;
+    tooltip?: {
+        text: string;
+        anchorOrigin?: "left" | "right" | undefined;
+        theme?: "dark" | "light" | undefined;
+    } | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 interface ILuiCloseableHeaderMenuContextV2 {
     isOpen: () => boolean;

package/dist/index.js

@@ -40329,40 +40329,47 @@ var LuiHeaderV2 = function (_a) {
             React__default["default"].createElement("div", { className: "LuiHeaderV2-col" }, children))));
 };
 var LuiHeaderMenuItemV2 = React$1.forwardRef(function (_a, ref) {
-    var icon = _a.icon, _b = _a.iconColor, iconColor = _b === void 0 ? '#E2F3F7' : _b, label = _a.label, badge = _a.badge, hide = _a.hide, onClick = _a.onClick, _c = _a["data-testid"], dataTestId = _c === void 0 ? 'menu-item' : _c, _d = _a.clickOutsideOptions, _e = _d === void 0 ? {
-        ignoreClickOutside: false
-    } : _d, _f = _e.ignoreClickOutside, ignoreClickOutside = _f === void 0 ? false : _f, onClickOutside = _e.onClickOutside, _g = _a.escapeOptions, _h = _g === void 0 ? {
-        ignoreEscape: false
-    } : _g, _j = _h.ignoreEscape, ignoreEscape = _j === void 0 ? false : _j, onEscape = _h.onEscape, isSelected = _a.isSelected, children = _a.children;
-    var _k = React$1.useState(false), selected = _k[0], setSelected = _k[1];
-    React$1.useEffect(function () {
-        if (isSelected !== undefined) {
-            setSelected(isSelected);
-        }
-    }, [isSelected]);
-    // clicking toggle selected
-    // escape and click outside unselect
+    var icon = _a.icon, _b = _a.iconColor, iconColor = _b === void 0 ? '#E2F3F7' : _b, label = _a.label, badge = _a.badge, onClick = _a.onClick, _c = _a["data-testid"], dataTestId = _c === void 0 ? 'menu-item' : _c, externalSelected = _a.isSelected, onClickOutside = _a.onClickOutside, onEscape = _a.onEscape, tooltip = _a.tooltip, children = _a.children;
+    var _d = React$1.useState(false), internalSelected = _d[0], setInternalSelected = _d[1];
+    var useInternalSelectedStatus = externalSelected === undefined;
+    // overwrite internalSelected status when externalSelected is provided
+    var selected = useInternalSelectedStatus
+        ? internalSelected
+        : externalSelected;
+    // unselcted when press escape when there is no externalSelected provided
     useEscapeFunction(function () {
-        if (!ignoreEscape) {
-            setSelected(false);
+        if (useInternalSelectedStatus) {
+            setInternalSelected(false);
         }
         if (onEscape) {
             onEscape();
         }
     });
-    var innerItemRef = usePageClickFunction(function () { return setSelected(function (prevSelected) { return !prevSelected; }); }, // toggle selcted
-    function () {
-        if (!ignoreClickOutside) {
-            setSelected(false);
+    var innerItemRef = usePageClickFunction(function () {
+        // toggle selected when there is no externalSelected provided
+        if (useInternalSelectedStatus) {
+            setInternalSelected(function (prevSelected) { return !prevSelected; });
+        }
+    }, function () {
+        // unselcted when press outside when there is no externalSelected provided
+        if (useInternalSelectedStatus) {
+            setInternalSelected(false);
         }
         if (onClickOutside) {
             onClickOutside();
         }
     });
-    var menuItemClasses = clsx$1('LuiHeaderV2-menu-item', hide && buildHideClassDict(hide));
     var resolvedIcon = !icon && !label ? 'ic_menu' : icon;
-    return (React__default["default"].createElement("div", { className: menuItemClasses, ref: ref },
+    var TooltipElement = function () {
+        if (!tooltip) {
+            return null;
+        }
+        var text = tooltip.text, _a = tooltip.anchorOrigin, anchorOrigin = _a === void 0 ? 'left' : _a, _b = tooltip.theme, theme = _b === void 0 ? 'dark' : _b;
+        return React__default["default"].createElement("span", { className: "tooltip ".concat(anchorOrigin, " ").concat(theme) }, text);
+    };
+    return (React__default["default"].createElement("div", { className: "LuiHeaderV2-menu-item", ref: ref },
         React__default["default"].createElement("div", { ref: innerItemRef, className: clsx$1('LuiHeaderV2-menu-button', { selected: selected }, { unselected: !selected }) },
+            tooltip && React__default["default"].createElement(TooltipElement, null),
             resolvedIcon && (React__default["default"].createElement("div", { className: clsx$1('LuiHeaderV2-menu-icon', {
                     clickable: !!onClick
                 }), "data-testid": dataTestId, onClick: onClick },