@linzjs/lui 17.36.1 → 17.36.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [17.36.2](https://github.com/linz/lui/compare/v17.36.1...v17.36.2) (2023-02-20)
+
+
+### Bug Fixes
+
+* update LiuHeaderHeaderV2 menuitem selected/hover colors, close … ([#860](https://github.com/linz/lui/issues/860)) ([6ab1023](https://github.com/linz/lui/commit/6ab10232cf8bac5be52575cb509ebfb00e2b25e2))
+
 ## [17.36.1](https://github.com/linz/lui/compare/v17.36.0...v17.36.1) (2023-02-19)
 
 

package/dist/index.js

@@ -40329,15 +40329,23 @@ var LuiHeaderV2 = function (_a) {
 };
 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 resolvedIcon = !icon && !label ? 'ic_menu' : icon;
     return (React__default["default"].createElement("div", { className: menuItemClasses, ref: ref },
-        React__default["default"].createElement("div", { className: "LuiHeaderV2-menu-button" },
-            resolvedIcon && (React__default["default"].createElement("div", { className: clsx$1('LuiHeaderV2-menu-icon', onClick && 'clickable'), "data-testid": dataTestId, onClick: onClick },
+        React__default["default"].createElement("div", { ref: innerItemRef, className: clsx$1('LuiHeaderV2-menu-button', { selected: selected }, { unselected: !selected }) },
+            resolvedIcon && (React__default["default"].createElement("div", { className: clsx$1('LuiHeaderV2-menu-icon', {
+                    clickable: !!onClick
+                }), "data-testid": dataTestId, onClick: onClick },
                 React__default["default"].createElement(LuiIcon, { size: "lg", name: resolvedIcon, alt: '', color: iconColor }))),
             label && (React__default["default"].createElement("div", { className: clsx$1(onClick && 'clickable', { 'LuiHeaderV2-menu-label': !!resolvedIcon }, { 'LuiHeaderV2-menu-label-only': !resolvedIcon }), onClick: onClick }, label)),
             badge && React__default["default"].createElement("div", { className: "LuiHeaderV2-badge" }, badge)),
-        !!children && children));
+        !!children && React__default["default"].createElement("div", { onClick: onClick }, children)));
 });
 var LuiCloseableHeaderMenuItemV2 = function (_a) {
     var open = _a.open, setOpen = _a.setOpen, children = _a.children, props = __rest$1(_a, ["open", "setOpen", "children"]);
@@ -40462,7 +40470,7 @@ var LuiDrawerMenuOptionV2 = function (_a) {
 var LuiDrawerMenuV2 = function (_a) {
     var children = _a.children, _b = _a.hasStickyHeader, hasStickyHeader = _b === void 0 ? true : _b, menuPropsCopy = __rest$1(_a, ["children", "hasStickyHeader"]);
     var _c = React$1.useState(false), open = _c[0], setOpen = _c[1];
-    var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open, setOpen: setOpen, icon: open ? 'ic_clear' : 'ic_menu', onClick: function () { return setOpen(!open); } });
+    var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open, setOpen: setOpen, icon: open ? 'ic_clear' : 'ic_menu', onClick: function () { return setOpen(function (preOpen) { return !preOpen; }); } });
     React$1.useEffect(function () {
         // Support for non-sticky headers. Scroll back to top when menu is opened
         if (open && !hasStickyHeader) {
@@ -40508,9 +40516,7 @@ var LuiDropdownMenuV2 = function (_a) {
                     'LuiHeaderMenuV2-dropdown-open': open
                 }, {
                     'LuiHeaderMenuV2-dropdown-closed': open !== null && !open
-                }), "data-testid": 'dropdown', "aria-hidden": !open },
-                children,
-                ' '))));
+                }), "data-testid": 'dropdown', "aria-hidden": !open }, children))));
 };
 var LuiDrawerMenuSectionV2 = function (props) {
     return React__default["default"].createElement(LuiDrawerMenuSection, __assign$3({}, props));