@linzjs/lui 17.30.0 → 17.31.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [17.31.0](https://github.com/linz/lui/compare/v17.30.0...v17.31.0) (2023-02-07)
+
+
+### Features
+
+* implement a new version LuiHeader ([#838](https://github.com/linz/lui/issues/838)) ([50d2364](https://github.com/linz/lui/commit/50d23648aa92ce36d927239b034ff045a3fd280a))
+* implement new version LuiHeader and associated componenets ([#840](https://github.com/linz/lui/issues/840)) ([c6c9de3](https://github.com/linz/lui/commit/c6c9de36e0d4108d3aaaf445809d78ebefdfce5e))
+
 # [17.30.0](https://github.com/linz/lui/compare/v17.29.1...v17.30.0) (2023-02-07)
 
 ## [17.29.1](https://github.com/linz/lui/compare/v17.29.0...v17.29.1) (2023-02-06)

package/README.md

@@ -42,10 +42,11 @@ We aim to make each component generic, extendable, accessible, and amazing.
 All styles are implemented in SCSS and compiled to plain CSS. This means any team can use the CSS. A ReactJS wrapper
 over the CSS is part of this project.
 
-There are lots of things to do in this project, often things will be left until there is demand. Please join the Slack channel
+There are lots of things to do in this project, often things will be left until there is demand, e.g add new components or implement new version components. Please join the Slack channel
+
 #cop-lui.
 
-## Documentation 
+## Documentation
 
 Storybook is the main source of documentation.
 

package/dist/components/LuiHeader/LuiHeader.d.ts

@@ -9,6 +9,9 @@ interface HeaderProps {
     transparent?: boolean;
     sticky?: boolean;
 }
+/**
+ * @deprecated: this is replaced by LuiHeaderV2
+ */
 declare const LuiHeader: React.FC<React.PropsWithChildren<HeaderProps>>;
 interface ILuiIcon {
     /**
@@ -39,6 +42,8 @@ interface ILuiHeaderMenuItem extends ILuiIcon {
     'data-testid'?: string;
 }
 /**
+ * @deprecated: this is replaced by LuiHeaderMenuItemV2
+ *
  * The \`LuiHeaderMenuItem\` is the base component for all menu items that are to be shown in the header.
  * Note that it depends on it being rendered inside a LuiHeader for its styles to apply properly.
  * To configure the item for responsiveness, ensure to set any of the hideOn* properties.
@@ -56,6 +61,9 @@ interface ILuiCloseableHeaderMenuItem extends Omit<ILuiHeaderMenuItem, 'onClick'
     open: boolean;
     setOpen: (value: boolean) => void;
 }
+/**
+ * @deprecated replaced by LuiCloseableHeaderMenuItemV2
+ */
 declare const LuiCloseableHeaderMenuItem: React.FC<React.PropsWithChildren<ILuiCloseableHeaderMenuItem>>;
 interface ILuiMenuCloseButton extends ILuiIcon {
     'data-testid'?: string;

package/dist/components/LuiHeaderMenu/LuiHeaderMenus.d.ts

@@ -18,13 +18,25 @@ interface ILuiDrawerMenuOption {
      */
     onClick?: () => void;
 }
+/**
+ * @deprecated replaced by LuiDrawerMenuOptionsV2
+ */
 declare const LuiDrawerMenuOptions: React.FC<React.PropsWithChildren<ILuiIcon>>;
+/**
+ * @deprecated replaced by LuiDrawerMenuOptionV2
+ */
 declare const LuiDrawerMenuOption: React.FC<React.PropsWithChildren<ILuiDrawerMenuOption>>;
 declare type ILuiDrawerMenu = Omit<ILuiHeaderMenuItem, 'onClick'> & {
     hasStickyHeader?: boolean;
 };
+/**
+ * @deprecated replaced by LuiDrawerMenuV2
+ */
 declare const LuiDrawerMenu: React.FC<React.PropsWithChildren<ILuiDrawerMenu>>;
 declare type ILuiDropdownMenu = Omit<ILuiHeaderMenuItem, 'onClick'>;
+/**
+ * @deprecated  replaced by LuiDropdownMenuV2
+ */
 declare const LuiDropdownMenu: React.FC<React.PropsWithChildren<ILuiDropdownMenu>>;
 interface ILuiDrawerMenuSection {
     /**

package/dist/components/LuiHeaderMenuV2/LuiHeaderMenusV2.d.ts

@@ -0,0 +1,69 @@
+import { ReactElement, ReactNode } from 'react';
+import { ILuiHeaderMenuItem, ILuiIcon } from '../LuiHeader/LuiHeader';
+import { ILuiDrawerMenu, ILuiDrawerMenuSection } from '../LuiHeaderMenu/LuiHeaderMenus';
+import { Size } from '../common/ResponsiveUtils';
+import { IconSize } from '../LuiIcon/LuiIcon';
+interface ILuiDrawerMenuOptionV2 {
+    /**
+     * The material-ui icon name (see https://material.io/resources/icons/?search=account_c&style=round)
+     */
+    icon?: string | ReactElement;
+    /**
+     * icon color, only applied when using LuiIcon
+     */
+    iconColor?: string;
+    /**
+     * The size of icon, only applied when using LuiIcon, default to 'md'
+     */
+    iconSize?: IconSize;
+    /**
+     * The label shown beside the icon which is aligned at the left of the drawer
+     */
+    label: string | ReactElement;
+    /**
+     * The badge which is shown which is aligned at the right of the drawer
+     */
+    badge?: ReactElement;
+    /**
+     * The function to be bound together with closing the drawer on click
+     */
+    onClick?: () => void;
+}
+declare const LuiDrawerMenuOptionsV2: ({ children, }: ILuiIcon & {
+    children: ReactNode;
+}) => JSX.Element;
+declare const LuiDrawerMenuOptionV2: ({ icon, iconColor, label, badge, iconSize, onClick, }: ILuiDrawerMenuOptionV2) => JSX.Element;
+declare const LuiDrawerMenuV2: ({ children, hasStickyHeader, ...menuPropsCopy }: Omit<ILuiHeaderMenuItem, "onClick"> & {
+    hasStickyHeader?: boolean | undefined;
+} & {
+    children: ReactNode;
+}) => JSX.Element;
+declare type ILuiDropdownMenuV2 = Omit<ILuiHeaderMenuItem, 'onClick'> & {
+    /**
+     * The anchor origin of dropdown, default to left
+     */
+    anchorOrigin?: {
+        horizontal?: 'left' | 'right';
+    };
+    /**
+     * the width of dropdown, default to 'md'
+     */
+    size?: Size | 'xxl';
+};
+declare const LuiDropdownMenuV2: ({ ...restOfProps }: Omit<ILuiHeaderMenuItem, "onClick"> & {
+    /**
+     * The anchor origin of dropdown, default to left
+     */
+    anchorOrigin?: {
+        horizontal?: "left" | "right" | undefined;
+    } | undefined;
+    /**
+     * the width of dropdown, default to 'md'
+     */
+    size?: Size | "xxl" | undefined;
+} & {
+    children: ReactNode;
+}) => JSX.Element;
+declare const LuiDrawerMenuSectionV2: (props: ILuiDrawerMenuSection) => JSX.Element;
+declare const LuiDrawerMenuDividerV2: () => JSX.Element;
+export { LuiDrawerMenuV2, LuiDrawerMenuOptionsV2, LuiDrawerMenuOptionV2, ILuiDropdownMenuV2, LuiDropdownMenuV2, LuiDrawerMenuSectionV2, LuiDrawerMenuDividerV2, ILuiDrawerMenuOptionV2, };

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

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+import { HeaderSize, ILuiCloseableHeaderMenuItem, ILuiHeaderMenuItem } from '../LuiHeader/LuiHeader';
+interface HeaderPropsV2 {
+    headingText?: string;
+    size?: HeaderSize;
+    homeLink?: string | (() => void);
+    transparent?: boolean;
+    sticky?: boolean;
+    appMenu?: ReactNode;
+    children: ReactNode;
+}
+declare const LuiHeaderV2: ({ headingText, size, homeLink, transparent, children, sticky, appMenu, }: HeaderPropsV2) => JSX.Element;
+declare const LuiHeaderMenuItemV2: React.ForwardRefExoticComponent<ILuiHeaderMenuItem & {
+    children?: ReactNode;
+    iconColor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const LuiCloseableHeaderMenuItemV2: ({ open, setOpen, children, ...props }: ILuiCloseableHeaderMenuItem & {
+    children?: ReactNode;
+}) => JSX.Element;
+export { LuiHeaderV2, LuiHeaderMenuItemV2, LuiCloseableHeaderMenuItemV2 };

package/dist/components/LuiIcon/LuiIcon.d.ts

@@ -14,6 +14,7 @@ export interface LuiIconProps {
     className?: string;
     title?: string;
     spanProps?: InputHTMLAttributes<HTMLInputElement>;
+    color?: string;
 }
 export declare const ICON_SIZES: {
     xs: string;
@@ -31,4 +32,4 @@ export declare const ICON_STATUS: {
     interactive: string;
     disabled: string;
 };
-export declare const LuiIcon: ({ name, className, size, title, alt, status, spanProps, }: LuiIconProps) => JSX.Element | null;
+export declare const LuiIcon: ({ name, className, size, title, alt, status, spanProps, color, }: LuiIconProps) => JSX.Element | null;

package/dist/components/common/StorybookSupport.d.ts

@@ -2,5 +2,5 @@
  * Open menu after render so chromatic can see it.
  * Place in useEffect in story. e.g. useEffect(openHeaderMenu, []);
  */
-export declare const openHeaderMenu: () => void;
+export declare const openHeaderMenu: (menuIconClass?: string) => void;
 export declare const expandCollapsedContainer: () => void;

package/dist/components/common/UseMediaQuery.d.ts

@@ -0,0 +1,9 @@
+import { Size } from './ResponsiveUtils';
+export declare type Breakpoint = Exclude<Size | 'xxl', 'xs'>;
+export declare const breakpoints: Record<Breakpoint, number>;
+export declare const breakpointQuery: {
+    up: (bp: Breakpoint) => string;
+    down: (bp: Breakpoint) => string;
+    between: (bp1: Breakpoint, bp2: Breakpoint) => string;
+};
+export declare const useMediaQuery: (query: string) => boolean;

package/dist/index.d.ts

@@ -36,7 +36,9 @@ export { LuiFooter } from './components/LuiFooter/LuiFooter';
 export { LuiComboSelect, LuiComboSelectProps, LuiComboSelectOption, } from './components/LuiForms/LuiComboSelect/LuiComboSelect';
 export { LuiFormSectionHeader, IFormSectionHeaderProps, } from './components/LuiForms/LuiFormSection/LuiFormSectionHeader';
 export * from './components/LuiHeader/LuiHeader';
+export * from './components/LuiHeaderV2/LuiHeaderV2';
 export * from './components/LuiHeaderMenu/LuiHeaderMenus';
+export * from './components/LuiHeaderMenuV2/LuiHeaderMenusV2';
 export { LuiUpdatesSplashModal } from './components/LuiUpdateSplashModal/LuiUpdatesSplashModal';
 export { LuiModal, LuiAlertModal, LuiAlertModalButtons, } from './components/LuiModal/LuiModal';
 export { ISearchInputProps, ISearchGroupedResult, ISearchResult, LuiSearchInput, } from './components/LuiSearchInput/LuiSearchInput';
@@ -67,3 +69,4 @@ export { RadioItemRenderer } from './components/LuiListBox/Renderers/RadioItemRe
 export { CheckboxItemRenderer } from './components/LuiListBox/Renderers/CheckboxItemRenderer';
 export { LuiSideMenu, ILuiSideMenuProps, } from './components/LuiSideMenu/LuiSideMenu';
 export { LuiSideMenuItem, ILuiSideMenuItemProps, LuiMenuItemClickHandler, } from './components/LuiSideMenu/LuiSideMenuItem';
+export { Breakpoint, breakpoints, breakpointQuery, useMediaQuery, } from './components/common/UseMediaQuery';

package/dist/index.js

@@ -549,13 +549,14 @@ var ICON_STATUS = {
     disabled: 'LuiIcon--disabled'
 };
 var LuiIcon = function (_a) {
-    var name = _a.name, className = _a.className, _b = _a.size, size = _b === void 0 ? 'ns' : _b, title = _a.title, alt = _a.alt, _c = _a.status, status = _c === void 0 ? 'none' : _c, spanProps = _a.spanProps;
+    var name = _a.name, className = _a.className, _b = _a.size, size = _b === void 0 ? 'ns' : _b, title = _a.title, alt = _a.alt, _c = _a.status, status = _c === void 0 ? 'none' : _c, spanProps = _a.spanProps, color = _a.color;
     var iconSVG = ICONS[name];
     if (!iconSVG) {
         console.warn("<LuiIcon>: No icon found for: ".concat(iconSVG));
         return null;
     }
-    return (React__namespace.createElement("span", __assign$3({ className: clsx$1('LuiIcon', className, size && ICON_SIZES[size], status && ICON_STATUS[status]), "data-icon": name, title: title, "aria-label": alt }, spanProps), iconSVG));
+    var customStyle = color ? { fill: color } : {};
+    return (React__namespace.createElement("span", __assign$3({ className: clsx$1('LuiIcon', className, size && ICON_SIZES[size], status && ICON_STATUS[status]), "data-icon": name, title: title, "aria-label": alt }, spanProps, { style: customStyle }), iconSVG));
 };
 
 function getMaterialIconForLevel(level) {
@@ -40120,8 +40121,12 @@ var buildHideClassDict = function (_a) {
     };
 };
 
+/**
+ * @deprecated: this is replaced by LuiHeaderV2
+ */
 var LuiHeader = function (_a) {
     var headingText = _a.headingText, _b = _a.size, size = _b === void 0 ? 'small' : _b, homeLink = _a.homeLink, transparent = _a.transparent, children = _a.children, _c = _a.sticky, sticky = _c === void 0 ? true : _c;
+    useDeprecatedWarning('LuiHeader');
     var logoElement = size === 'normal' ? (React__default["default"].createElement("img", { className: "linz-logo", alt: "LINZ Logo", src: logo })) : (React__default["default"].createElement("img", { className: "linz-motif", alt: "LINZ Logo", src: motif }));
     var logoContainer = logoElement;
     if (typeof homeLink === 'string') {
@@ -40146,12 +40151,15 @@ var LuiHeader = function (_a) {
             React__default["default"].createElement("div", { className: "lui-header-col" }, children))));
 };
 /**
+ * @deprecated: this is replaced by LuiHeaderMenuItemV2
+ *
  * The \`LuiHeaderMenuItem\` is the base component for all menu items that are to be shown in the header.
  * Note that it depends on it being rendered inside a LuiHeader for its styles to apply properly.
  * To configure the item for responsiveness, ensure to set any of the hideOn* properties.
  */
 var LuiHeaderMenuItem = React$1.forwardRef(function (_a, ref) {
     var icon = _a.icon, label = _a.label, badge = _a.badge, hide = _a.hide, onClick = _a.onClick, _b = _a["data-testid"], dataTestId = _b === void 0 ? 'menu-item' : _b, children = _a.children;
+    useDeprecatedWarning('LuiHeaderMenuItem');
     var menuItemClasses = clsx$1('lui-header-menu-item', hide && buildHideClassDict(hide));
     var resolvedIcon = !icon && !label ? 'menu' : icon;
     return (React__default["default"].createElement("div", { className: menuItemClasses, ref: ref },
@@ -40166,8 +40174,12 @@ var LuiCloseableHeaderMenuContext = React$1.createContext({
     open: function () { },
     close: function () { }
 });
+/**
+ * @deprecated replaced by LuiCloseableHeaderMenuItemV2
+ */
 var LuiCloseableHeaderMenuItem = function (_a) {
     var open = _a.open, setOpen = _a.setOpen, props = __rest$1(_a, ["open", "setOpen"]);
+    useDeprecatedWarning('LuiCloseableHeaderMenuItem');
     useEscapeFunction(function () { return setOpen(false); });
     var menuDiv = usePageClickFunction(function (event) { return open || event.stopPropagation(); }, function (event) {
         if (!open) {
@@ -40191,12 +40203,77 @@ var LuiMenuCloseButton = function (_a) {
     return (React__default["default"].createElement("i", { className: classes, onClick: menu.close, "data-testid": dataTestId }, icon));
 };
 
+var LuiHeaderV2 = function (_a) {
+    var headingText = _a.headingText, _b = _a.size, size = _b === void 0 ? 'small' : _b, homeLink = _a.homeLink, transparent = _a.transparent, children = _a.children, _c = _a.sticky, sticky = _c === void 0 ? true : _c, appMenu = _a.appMenu;
+    var logoElement = size === 'normal' ? (React__default["default"].createElement("img", { className: "LuiHeaderV2-linz-logo", alt: "LINZ Logo", src: logo })) : (React__default["default"].createElement("img", { className: "LuiHeaderV2-linz-motif", alt: "LINZ Logo", src: motif }));
+    var logoContainer = logoElement;
+    if (typeof homeLink === 'string') {
+        logoContainer = React__default["default"].createElement("a", { href: homeLink }, logoElement);
+    }
+    else if (typeof homeLink === 'function') {
+        logoContainer = (React__default["default"].createElement("div", { className: "clickable", onClick: function () {
+                homeLink();
+            } }, logoElement));
+    }
+    return (React__default["default"].createElement("header", { className: clsx$1({
+            LuiHeaderV2: true,
+            'LuiHeaderV2-transparent': transparent,
+            'LuiHeaderV2-small': size === 'small',
+            'LuiHeaderV2-sticky': sticky
+        }) },
+        React__default["default"].createElement("div", { className: "LuiHeaderV2-row" },
+            React__default["default"].createElement("div", { className: "LuiHeaderV2-col" },
+                !!appMenu && appMenu,
+                React__default["default"].createElement("div", { className: "LuiHeaderV2-logo" }, logoContainer),
+                headingText && (React__default["default"].createElement("div", { className: "LuiHeaderV2-title" },
+                    React__default["default"].createElement("h1", null, headingText)))),
+            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 ? '#ffffff' : _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 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(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));
+});
+var LuiCloseableHeaderMenuItemV2 = function (_a) {
+    var open = _a.open, setOpen = _a.setOpen, children = _a.children, props = __rest$1(_a, ["open", "setOpen", "children"]);
+    useEscapeFunction(function () { return setOpen(false); });
+    var menuDiv = usePageClickFunction(function (event) { return open || event.stopPropagation(); }, function (event) {
+        if (!open) {
+            event.stopPropagation();
+            setOpen(false);
+        }
+    });
+    var menuControls = {
+        isOpen: function () { return open; },
+        open: function () { return setOpen(!open); },
+        close: function () { return setOpen(false); }
+    };
+    var menuItemProps = __assign$3({ onClick: function () { return menuControls.open(); } }, props);
+    return (React__default["default"].createElement(LuiCloseableHeaderMenuContext.Provider, { value: menuControls },
+        React__default["default"].createElement(LuiHeaderMenuItemV2, __assign$3({ ref: menuDiv }, menuItemProps), !!children && children)));
+};
+
+/**
+ * @deprecated replaced by LuiDrawerMenuOptionsV2
+ */
 var LuiDrawerMenuOptions = function (_a) {
     var children = _a.children;
+    useDeprecatedWarning('LuiDrawerMenuOptions');
     return React__default["default"].createElement("div", { className: "lui-menu-drawer-options" }, children);
 };
+/**
+ * @deprecated replaced by LuiDrawerMenuOptionV2
+ */
 var LuiDrawerMenuOption = function (_a) {
     var icon = _a.icon, label = _a.label, badge = _a.badge, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b;
+    useDeprecatedWarning('LuiDrawerMenuOption');
     var menu = React$1.useContext(LuiCloseableHeaderMenuContext);
     return (React__default["default"].createElement("div", { className: "lui-menu-drawer-option", onClick: function () {
             menu.close();
@@ -40207,8 +40284,12 @@ var LuiDrawerMenuOption = function (_a) {
             label),
         badge));
 };
+/**
+ * @deprecated replaced by LuiDrawerMenuV2
+ */
 var LuiDrawerMenu = function (_a) {
     var restOfProps = __rest$1(_a, []);
+    useDeprecatedWarning('LuiDrawerMenu');
     var children = restOfProps.children, _b = restOfProps.hasStickyHeader, hasStickyHeader = _b === void 0 ? true : _b, menuPropsCopy = __rest$1(restOfProps, ["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 ? 'close' : 'menu', onClick: function () { return setOpen(!open); } });
@@ -40231,8 +40312,12 @@ var LuiDrawerMenu = function (_a) {
                 'lui-menu-drawer-closed': !open
             }), "data-testid": 'drawer', "aria-hidden": !open }, children)));
 };
+/**
+ * @deprecated  replaced by LuiDropdownMenuV2
+ */
 var LuiDropdownMenu = function (_a) {
     var restOfProps = __rest$1(_a, []);
+    useDeprecatedWarning('LuiDropdownMenu');
     var children = restOfProps.children, menuPropsCopy = __rest$1(restOfProps, ["children"]);
     var _b = React$1.useState(false), open = _b[0], setOpen = _b[1];
     var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open, setOpen: setOpen });
@@ -40258,6 +40343,82 @@ var LuiDrawerMenuDivider = function () {
     return React__default["default"].createElement("hr", { className: "LuiDrawerMenuDivider" });
 };
 
+var LuiDrawerMenuOptionsV2 = function (_a) {
+    var children = _a.children;
+    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.onClick, onClick = _c === void 0 ? function () { } : _c;
+    var menu = React$1.useContext(LuiCloseableHeaderMenuContext);
+    return (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option", onClick: function () {
+            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),
+        badge));
+};
+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); } });
+    React$1.useEffect(function () {
+        // Support for non-sticky headers. Scroll back to top when menu is opened
+        if (open && !hasStickyHeader) {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+        // Disable page scrolling while menu is open
+        if (open) {
+            document.body.classList.add('LuiHeaderMenuV2-drawer-open');
+        }
+        else {
+            document.body.classList.remove('LuiHeaderMenuV2-drawer-open');
+        }
+    }, [open, hasStickyHeader]);
+    return (React__default["default"].createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
+        React__default["default"].createElement("div", { className: clsx$1({
+                'LuiHeaderMenuV2-drawer': true,
+                'LuiHeaderMenuV2-drawer-closed': !open
+            }), "data-testid": 'drawer', "aria-hidden": !open }, children)));
+};
+var LuiDropdownMenuV2 = function (_a) {
+    var restOfProps = __rest$1(_a, []);
+    var children = restOfProps.children, _b = restOfProps.anchorOrigin, _c = _b === void 0 ? {
+        horizontal: 'left'
+    } : _b, _d = _c.horizontal, horizontal = _d === void 0 ? 'left' : _d, _e = restOfProps.size, size = _e === void 0 ? 'md' : _e, menuPropsCopy = __rest$1(restOfProps, ["children", "anchorOrigin", "size"]);
+    var _f = React$1.useState(null), open = _f[0], setOpen = _f[1];
+    var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open || false, setOpen: function (currentOpen) {
+            setOpen(function (preOpen) {
+                if (preOpen !== null) {
+                    return currentOpen;
+                }
+                // if the menu was not opened before, then ignore close event,
+                // thus apply -closed animation css only if the menu is closed from the open state
+                return currentOpen || null;
+            });
+        } });
+    return (React__default["default"].createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
+        React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-dropdown-container" },
+            React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-dropdown', 'lui-box-shadow', { 'anchor-horizontal-icon-left': horizontal === 'left' }, {
+                    'anchor-horizontal-icon-right': !menuPropsCopy.label && horizontal === 'right'
+                }, {
+                    'anchor-horizontal-label-right': menuPropsCopy.label && horizontal === 'right'
+                }, "dropdown-".concat(size), {
+                    'LuiHeaderMenuV2-dropdown-open': open
+                }, {
+                    'LuiHeaderMenuV2-dropdown-closed': open !== null && !open
+                }), "data-testid": 'dropdown', "aria-hidden": !open },
+                children,
+                ' '))));
+};
+var LuiDrawerMenuSectionV2 = function (props) {
+    return React__default["default"].createElement(LuiDrawerMenuSection, __assign$3({}, props));
+};
+var LuiDrawerMenuDividerV2 = function () {
+    return React__default["default"].createElement(LuiDrawerMenuDivider, null);
+};
+
 var lib = {exports: {}};
 
 var Modal$2 = {};
@@ -57990,6 +58151,34 @@ function LuiSideMenuItem(_a) {
             React__default["default"].createElement("span", { className: "navText" }, label))));
 }
 
+var breakpoints = {
+    sm: 480,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    xxl: 1600
+};
+var breakpointQuery = {
+    up: function (bp) { return "(min-width: ".concat(breakpoints[bp], "px)"); },
+    down: function (bp) { return "(max-width: ".concat(breakpoints[bp], "px)"); },
+    between: function (bp1, bp2) {
+        return "(min-width: ".concat(breakpoints[bp1], "px) and (max-width: ").concat(breakpoints[bp2], "px)");
+    }
+};
+var useMediaQuery = function (query) {
+    var _a = React$1.useState(false), matches = _a[0], setMatches = _a[1];
+    React$1.useEffect(function () {
+        var media = window.matchMedia(query);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        var listener = function () { return setMatches(media.matches); };
+        window.addEventListener('resize', listener);
+        return function () { return window.removeEventListener('resize', listener); };
+    }, [matches, query]);
+    return matches;
+};
+
 exports.CheckboxItemRenderer = CheckboxItemRenderer;
 exports.FIRM_KEY = FIRM_KEY;
 exports.FIRM_NAME_KEY = FIRM_NAME_KEY;
@@ -58022,14 +58211,21 @@ exports.LuiButtonGroup = LuiButtonGroup;
 exports.LuiCheckboxInput = LuiCheckboxInput;
 exports.LuiCloseableHeaderMenuContext = LuiCloseableHeaderMenuContext;
 exports.LuiCloseableHeaderMenuItem = LuiCloseableHeaderMenuItem;
+exports.LuiCloseableHeaderMenuItemV2 = LuiCloseableHeaderMenuItemV2;
 exports.LuiComboSelect = LuiComboSelect;
 exports.LuiControlledMenu = LuiControlledMenu;
 exports.LuiDrawerMenu = LuiDrawerMenu;
 exports.LuiDrawerMenuDivider = LuiDrawerMenuDivider;
+exports.LuiDrawerMenuDividerV2 = LuiDrawerMenuDividerV2;
 exports.LuiDrawerMenuOption = LuiDrawerMenuOption;
+exports.LuiDrawerMenuOptionV2 = LuiDrawerMenuOptionV2;
 exports.LuiDrawerMenuOptions = LuiDrawerMenuOptions;
+exports.LuiDrawerMenuOptionsV2 = LuiDrawerMenuOptionsV2;
 exports.LuiDrawerMenuSection = LuiDrawerMenuSection;
+exports.LuiDrawerMenuSectionV2 = LuiDrawerMenuSectionV2;
+exports.LuiDrawerMenuV2 = LuiDrawerMenuV2;
 exports.LuiDropdownMenu = LuiDropdownMenu;
+exports.LuiDropdownMenuV2 = LuiDropdownMenuV2;
 exports.LuiErrorPage = LuiErrorPage;
 exports.LuiExpandableBanner = LuiExpandableBanner;
 exports.LuiFileInputBox = LuiFileInputBox;
@@ -58049,6 +58245,8 @@ exports.LuiFormikSelect = LuiFormikSelect;
 exports.LuiFormikTextInput = LuiFormikTextInput;
 exports.LuiHeader = LuiHeader;
 exports.LuiHeaderMenuItem = LuiHeaderMenuItem;
+exports.LuiHeaderMenuItemV2 = LuiHeaderMenuItemV2;
+exports.LuiHeaderV2 = LuiHeaderV2;
 exports.LuiIcon = LuiIcon;
 exports.LuiListBox = LuiListBox;
 exports.LuiLoadingSpinner = LuiLoadingSpinner;
@@ -58088,11 +58286,14 @@ exports.LuiToastMessage = LuiToastMessage;
 exports.LuiTooltip = LuiTooltip;
 exports.LuiUpdatesSplashModal = LuiUpdatesSplashModal;
 exports.RadioItemRenderer = RadioItemRenderer;
+exports.breakpointQuery = breakpointQuery;
+exports.breakpoints = breakpoints;
 exports.getDefaultSearchMenuOptions = getDefaultSearchMenuOptions;
 exports.isChromatic = isChromatic;
 exports.useClickedOutsideElement = useClickedOutsideElement;
 exports.useLOLGlobalClientRefContext = useLOLGlobalClientRefContext;
 exports.useLOLUserContext = useLOLUserContext;
 exports.useLuiFloatingWindow = useFloatingWindow;
+exports.useMediaQuery = useMediaQuery;
 exports.useShowLUIMessage = useShowLUIMessage;
 //# sourceMappingURL=index.js.map