@linzjs/lui 17.36.7 → 17.36.9

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
+
+
+### Bug Fixes
+
+* adjust style for non sticky HeaderV2 and drawer ([#866](https://github.com/linz/lui/issues/866)) ([deeae2e](https://github.com/linz/lui/commit/deeae2e4de4d44a3ee80dcf0e2a7862dec52043c))
+
 ## [17.36.7](https://github.com/linz/lui/compare/v17.36.6...v17.36.7) (2023-02-28)
 
 

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

@@ -13,6 +13,18 @@ declare const LuiHeaderV2: ({ headingText, size, homeLink, transparent, children
 declare const LuiHeaderMenuItemV2: React.ForwardRefExoticComponent<ILuiHeaderMenuItem & {
     children?: ReactNode;
     iconColor?: string | undefined;
+    /**
+     * 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

@@ -40317,7 +40317,8 @@ var LuiHeaderV2 = function (_a) {
             LuiHeaderV2: true,
             'LuiHeaderV2-transparent': transparent,
             'LuiHeaderV2-small': size === 'small',
-            'LuiHeaderV2-sticky': sticky
+            'LuiHeaderV2-sticky': sticky,
+            'LuiHeaderV2-non-sticky': !sticky
         }) },
         React__default["default"].createElement("div", { className: "LuiHeaderV2-row" },
             React__default["default"].createElement("div", { className: "LuiHeaderV2-col" },
@@ -40328,17 +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, children = _a.children;
-    var _d = React$1.useState(false), selected = _d[0], setSelected = _d[1];
-    // clicking toggle selected
-    // escape and click outside unselect
-    useEscapeFunction(function () { return setSelected(false); });
-    var innerItemRef = usePageClickFunction(function () { return setSelected(function (prevSelected) { return !prevSelected; }); }, // toggle selcted
-    function () { return setSelected(false); });
-    var menuItemClasses = clsx$1('LuiHeaderV2-menu-item', hide && buildHideClassDict(hide));
+    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 (useInternalSelectedStatus) {
+            setInternalSelected(false);
+        }
+        if (onEscape) {
+            onEscape();
+        }
+    });
+    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 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 },
@@ -40490,10 +40521,9 @@ var LuiDrawerMenuV2 = function (_a) {
         }
     }, [open, hasStickyHeader]);
     return (React__default["default"].createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
-        React__default["default"].createElement("div", { className: clsx$1({
-                'LuiHeaderMenuV2-drawer': true,
+        React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-drawer', {
                 'LuiHeaderMenuV2-drawer-closed': !open
-            }), "data-testid": 'drawer', "aria-hidden": !open }, children)));
+            }, { sticky: hasStickyHeader }, { 'non-sticky': !hasStickyHeader }), "data-testid": 'drawer', "aria-hidden": !open }, children)));
 };
 var LuiDropdownMenuV2 = function (_a) {
     var restOfProps = __rest$1(_a, []);