@linzjs/lui 17.41.10 → 17.42.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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)
 
 

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,10 +40378,10 @@ 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 }, { clickable: !!onClick }), "data-testid": dataTestId, onClick: onClick },
+    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
                 }) },
                 React__default["default"].createElement(LuiIcon, { size: "lg", name: resolvedIcon, alt: '', color: iconColor }))),