@linzjs/lui 17.41.9 → 17.42.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [17.42.0](https://github.com/linz/lui/compare/v17.41.10...v17.42.0) (2023-03-19)
+
+
+### Features
+
+* **headerV2:** Support custom class in header menu ([#894](https://github.com/linz/lui/issues/894)) ([1813f25](https://github.com/linz/lui/commit/1813f25b227f5a55bc98dbffdc0361debb2f182a))
+
+## [17.41.10](https://github.com/linz/lui/compare/v17.41.9...v17.41.10) (2023-03-17)
+
+
+### Bug Fixes
+
+* update data-testid in LuiHeaderMenuItemV2 ([#892](https://github.com/linz/lui/issues/892)) ([c6fc645](https://github.com/linz/lui/commit/c6fc64533ddd5e21d5f81b8d1f644c1082803dfb))
+
 ## [17.41.9](https://github.com/linz/lui/compare/v17.41.8...v17.41.9) (2023-03-17)
 
 

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

@@ -66,6 +66,10 @@ declare type LuiHeaderMenuItemV2Props = {
          */
         theme?: 'dark' | 'light';
     };
+    /**
+     * Allow appending custom class
+     */
+    className?: string;
 };
 declare const LuiHeaderMenuItemV2: React.ForwardRefExoticComponent<LuiHeaderMenuItemV2Props & {
     children?: ReactNode;

package/dist/index.js

@@ -40339,7 +40339,7 @@ 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, 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 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, className = _a.className;
     var _d = React$1.useState(false), internalSelected = _d[0], setInternalSelected = _d[1];
     var useInternalSelectedStatus = externalSelected === undefined;
     // overwrite internalSelected status when externalSelected is provided
@@ -40378,16 +40378,16 @@ var LuiHeaderMenuItemV2 = React$1.forwardRef(function (_a, ref) {
         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: "menu-tooltip ".concat(anchorOrigin, " ").concat(theme) }, text));
     };
-    return (React__default["default"].createElement("div", { className: rootStyle, ref: ref },
-        React__default["default"].createElement("div", { ref: innerItemRef, className: clsx$1("".concat(rootStyle, "-button"), { selected: selected }, { unselected: !selected }) },
+    return (React__default["default"].createElement("div", { className: clsx$1(rootStyle, className), ref: ref },
+        React__default["default"].createElement("div", { ref: innerItemRef, className: clsx$1("".concat(rootStyle, "-button"), { selected: selected }, { unselected: !selected }, "".concat(className, "-button"), { clickable: !!onClick }), "data-testid": dataTestId, onClick: onClick },
             tooltip && React__default["default"].createElement(TooltipElement, null),
-            resolvedIcon && (React__default["default"].createElement("div", { className: clsx$1("".concat(rootStyle, "-button-icon"), {
+            resolvedIcon && (React__default["default"].createElement("div", { className: clsx$1("".concat(rootStyle, "-button-icon"), "".concat(className, "-button-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(resolvedIcon
                     ? "".concat(rootStyle, "-button-label")
-                    : "".concat(rootStyle, "-button-label-only"), { clickable: !!onClick }), onClick: onClick }, label)),
+                    : "".concat(rootStyle, "-button-label-only"), { clickable: !!onClick }) }, label)),
             badge && React__default["default"].createElement("div", { className: "".concat(rootStyle, "-button-badge") }, badge)),
         !!children && React__default["default"].createElement("div", null, children)));
 });
@@ -40413,7 +40413,7 @@ var LuiCloseableHeaderMenuItemV2 = function (_a) {
             setOpen(false);
         }
     });
-    var menuItemProps = __assign$3(__assign$3({ onClick: function () { return toggle(); } }, props), { isSelected: isOpen });
+    var menuItemProps = __assign$3(__assign$3({}, props), { onClick: function () { return toggle(); }, isSelected: isOpen });
     return (React__default["default"].createElement(LuiCloseableHeaderMenuContextV2.Provider, { value: {
             isOpen: isOpen,
             toggle: toggle,