@linzjs/lui 17.36.7 → 17.36.8

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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;
+    clickOutsideOptions?: {
+        ignoreClickOutside?: boolean | undefined;
+        onClickOutside?: (() => void) | undefined;
+    } | undefined;
+    escapeOptions?: {
+        ignoreEscape?: boolean | undefined;
+        onEscape?: (() => void) | undefined;
+    } | undefined;
+    /**
+     * used to overwrite internal selected status
+     */
+    isSelected?: boolean | 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,13 +40329,36 @@ 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];
+    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, _d = _a.clickOutsideOptions, _e = _d === void 0 ? {
+        ignoreClickOutside: false
+    } : _d, _f = _e.ignoreClickOutside, ignoreClickOutside = _f === void 0 ? false : _f, onClickOutside = _e.onClickOutside, _g = _a.escapeOptions, _h = _g === void 0 ? {
+        ignoreEscape: false
+    } : _g, _j = _h.ignoreEscape, ignoreEscape = _j === void 0 ? false : _j, onEscape = _h.onEscape, isSelected = _a.isSelected, children = _a.children;
+    var _k = React$1.useState(false), selected = _k[0], setSelected = _k[1];
+    React$1.useEffect(function () {
+        if (isSelected !== undefined) {
+            setSelected(isSelected);
+        }
+    }, [isSelected]);
     // clicking toggle selected
     // escape and click outside unselect
-    useEscapeFunction(function () { return setSelected(false); });
+    useEscapeFunction(function () {
+        if (!ignoreEscape) {
+            setSelected(false);
+        }
+        if (onEscape) {
+            onEscape();
+        }
+    });
     var innerItemRef = usePageClickFunction(function () { return setSelected(function (prevSelected) { return !prevSelected; }); }, // toggle selcted
-    function () { return setSelected(false); });
+    function () {
+        if (!ignoreClickOutside) {
+            setSelected(false);
+        }
+        if (onClickOutside) {
+            onClickOutside();
+        }
+    });
     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 },
@@ -40490,10 +40514,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, []);