@linzjs/lui 17.36.1 → 17.36.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [17.36.3](https://github.com/linz/lui/compare/v17.36.2...v17.36.3) (2023-02-20)
+
+
+### Bug Fixes
+
+* add LuiCloseableHeaderMenuContextV2 and update LuiDrawerMenuOptionsV2 ([#861](https://github.com/linz/lui/issues/861)) ([612c6b4](https://github.com/linz/lui/commit/612c6b47970107023dd9a00c175a3fbfe9a1f742))
+
+## [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/components/LuiHeaderV2/LuiHeaderV2.d.ts

@@ -14,7 +14,13 @@ declare const LuiHeaderMenuItemV2: React.ForwardRefExoticComponent<ILuiHeaderMen
     children?: ReactNode;
     iconColor?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
+interface ILuiCloseableHeaderMenuContextV2 {
+    isOpen: () => boolean;
+    open: () => void;
+    close: () => void;
+}
+declare const LuiCloseableHeaderMenuContextV2: React.Context<ILuiCloseableHeaderMenuContextV2>;
 declare const LuiCloseableHeaderMenuItemV2: ({ open, setOpen, children, ...props }: ILuiCloseableHeaderMenuItem & {
     children?: ReactNode;
 }) => JSX.Element;
-export { LuiHeaderV2, LuiHeaderMenuItemV2, LuiCloseableHeaderMenuItemV2 };
+export { LuiHeaderV2, LuiHeaderMenuItemV2, LuiCloseableHeaderMenuItemV2, LuiCloseableHeaderMenuContextV2, };

package/dist/index.js

@@ -40329,15 +40329,28 @@ 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 LuiCloseableHeaderMenuContextV2 = React$1.createContext({
+    isOpen: function () { return false; },
+    open: function () { },
+    close: function () { }
 });
 var LuiCloseableHeaderMenuItemV2 = function (_a) {
     var open = _a.open, setOpen = _a.setOpen, children = _a.children, props = __rest$1(_a, ["open", "setOpen", "children"]);
@@ -40447,7 +40460,7 @@ var LuiDrawerMenuOptionsV2 = function (_a) {
 };
 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.subMenu, subMenu = _c === void 0 ? false : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d;
-    var menu = React$1.useContext(LuiCloseableHeaderMenuContext);
+    var menu = React$1.useContext(LuiCloseableHeaderMenuContextV2);
     return (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option", onClick: function () {
             if (!subMenu) {
                 menu.close();
@@ -40462,7 +40475,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,15 +40521,20 @@ 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));
+    var children = props.children, title = props.title, collapsible = props.collapsible;
+    return (React__default["default"].createElement("div", null,
+        collapsible && (React__default["default"].createElement(LuiExpandableBanner, { label: title || '', className: "LuiDrawerMenuSectionV2-header" }, children)),
+        !collapsible && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            title && (React__default["default"].createElement("div", { className: "LuiDrawerMenuSectionV2-header" },
+                React__default["default"].createElement("div", { className: 'lui-expand-header', style: { cursor: 'default' } },
+                    React__default["default"].createElement("h3", null, title)))),
+            children))));
 };
 var LuiDrawerMenuDividerV2 = function () {
-    return React__default["default"].createElement(LuiDrawerMenuDivider, null);
+    return React__default["default"].createElement("hr", { className: "LuiDrawerMenuDividerV2" });
 };
 
 var lib = {exports: {}};
@@ -58550,6 +58568,7 @@ exports.LuiButton = LuiButton;
 exports.LuiButtonGroup = LuiButtonGroup;
 exports.LuiCheckboxInput = LuiCheckboxInput;
 exports.LuiCloseableHeaderMenuContext = LuiCloseableHeaderMenuContext;
+exports.LuiCloseableHeaderMenuContextV2 = LuiCloseableHeaderMenuContextV2;
 exports.LuiCloseableHeaderMenuItem = LuiCloseableHeaderMenuItem;
 exports.LuiCloseableHeaderMenuItemV2 = LuiCloseableHeaderMenuItemV2;
 exports.LuiComboSelect = LuiComboSelect;