@linzjs/lui 17.41.10 → 17.43.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [17.43.0](https://github.com/linz/lui/compare/v17.42.0...v17.43.0) (2023-03-19)
+
+
+### Features
+
+* **headerV2:** Support href inside menu item ([#893](https://github.com/linz/lui/issues/893)) ([83cf363](https://github.com/linz/lui/commit/83cf36305de370229e8157e62ac71a0c46259657))
+
+# [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/LuiHeaderMenuV2/LuiHeaderMenusV2.d.ts

@@ -33,11 +33,15 @@ interface LuiDrawerMenuOptionV2Props {
      * false - remains open on clicking
      */
     closeMenuOnClick?: boolean;
+    /**
+     * Open link in a new tab
+     */
+    url?: string;
 }
 declare const LuiDrawerMenuOptionsV2: ({ children, }: {
     children: ReactNode;
 }) => JSX.Element;
-declare const LuiDrawerMenuOptionV2: ({ icon, iconColor, label, badge, iconSize, closeMenuOnClick, onClick, }: LuiDrawerMenuOptionV2Props) => JSX.Element;
+declare const LuiDrawerMenuOptionV2: ({ icon, iconColor, label, badge, iconSize, closeMenuOnClick, onClick, url, }: LuiDrawerMenuOptionV2Props) => JSX.Element;
 declare type LuiDrawerMenuV2Props = Omit<LuiHeaderMenuItemV2Props, 'onClick' | 'isSelected'> & {
     hasStickyHeader?: boolean;
     size?: Exclude<Size, 'xs'>;

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 }))),
@@ -40517,17 +40517,18 @@ var LuiDrawerMenuOptionsV2 = function (_a) {
     return (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-options" }, children));
 };
 var LuiDrawerMenuOptionV2 = function (_a) {
-    var icon = _a.icon, iconColor = _a.iconColor, label = _a.label, badge = _a.badge, _b = _a.iconSize, iconSize = _b === void 0 ? 'md' : _b, _c = _a.closeMenuOnClick, closeMenuOnClick = _c === void 0 ? true : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d;
+    var icon = _a.icon, iconColor = _a.iconColor, label = _a.label, badge = _a.badge, _b = _a.iconSize, iconSize = _b === void 0 ? 'md' : _b, _c = _a.closeMenuOnClick, closeMenuOnClick = _c === void 0 ? true : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, url = _a.url;
     var menu = useLuiCloseableHeaderMenuContextV2();
+    var optionLabel = (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option-label" },
+        typeof icon === 'string' ? (React__default["default"].createElement(LuiIcon, { size: iconSize, name: icon, alt: '', color: iconColor, "data-testid": 'drawer-option-icon' })) : (icon),
+        label));
     return (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option", onClick: function () {
             if (closeMenuOnClick) {
                 menu.close();
             }
             onClick();
         }, "data-testid": 'drawer-option' },
-        React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option-label" },
-            typeof icon === 'string' ? (React__default["default"].createElement(LuiIcon, { size: iconSize, name: icon, alt: '', color: iconColor, "data-testid": 'drawer-option-icon' })) : (icon),
-            label),
+        url ? (React__default["default"].createElement("a", { target: "_blank", href: url, rel: "noreferrer" }, optionLabel)) : (optionLabel),
         badge && (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option-badge" }, badge))));
 };
 /**