@linzjs/lui 17.41.3 → 17.41.5

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [17.41.5](https://github.com/linz/lui/compare/v17.41.4...v17.41.5) (2023-03-13)
+
+
+### Bug Fixes
+
+* fix LuiHeaderV2 and it associated component as per UX review feedback ([#884](https://github.com/linz/lui/issues/884)) ([5436cdd](https://github.com/linz/lui/commit/5436cdd75e70080a3a242ee4ead8f8f871d58869))
+
+## [17.41.4](https://github.com/linz/lui/compare/v17.41.3...v17.41.4) (2023-03-12)
+
+
+### Bug Fixes
+
+* **LuiDateInput:** Update args types for date parsing fn ([#883](https://github.com/linz/lui/issues/883)) ([f95baff](https://github.com/linz/lui/commit/f95baff5c859b33f39fedb7f7dcde1a8c51a644a))
+
 ## [17.41.3](https://github.com/linz/lui/compare/v17.41.2...v17.41.3) (2023-03-09)
 
 

package/dist/components/LuiFormElements/LuiDateInput/DateInputHelper.d.ts

@@ -2,5 +2,5 @@
 declare type ParseOptions = {
     allowTwoDigitYear?: boolean;
 };
-export declare const parseTextDate: (value: JSX.IntrinsicElements['input']['value'], options?: ParseOptions) => string | undefined;
+export declare const parseTextDate: (value: JSX.IntrinsicElements['input']['value'] | null, options?: ParseOptions) => string;
 export {};

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

@@ -1,11 +1,10 @@
 import { ReactElement, ReactNode } from 'react';
-import { ILuiHeaderMenuItem, ILuiIcon } from '../LuiHeader/LuiHeader';
-import { ILuiDrawerMenu, ILuiDrawerMenuSection } from '../LuiHeaderMenu/LuiHeaderMenus';
+import { LuiHeaderMenuItemV2Props } from '../LuiHeaderV2/LuiHeaderV2';
 import { Size } from '../common/ResponsiveUtils';
 import { IconSize } from '../LuiIcon/LuiIcon';
-interface ILuiDrawerMenuOptionV2 {
+interface LuiDrawerMenuOptionV2Props {
     /**
-     * The material-ui icon name (see https://material.io/resources/icons/?search=account_c&style=round)
+     * The LUI icon name or icon element
      */
     icon?: string | ReactElement;
     /**
@@ -29,21 +28,32 @@ interface ILuiDrawerMenuOptionV2 {
      */
     onClick?: () => void;
     /**
-     * Whether the option is a sub menu, if true, the drawer will not be closed on click
+     * whether close drawer menu on clicking, default to true
+     * true - close menu on clicking
+     * false - remains open on clicking
      */
-    subMenu?: boolean;
+    closeMenuOnClick?: boolean;
 }
-declare const LuiDrawerMenuOptionsV2: ({ children, }: ILuiIcon & {
+declare const LuiDrawerMenuOptionsV2: ({ children, }: {
     children: ReactNode;
 }) => JSX.Element;
-declare const LuiDrawerMenuOptionV2: ({ icon, iconColor, label, badge, iconSize, subMenu, onClick, }: ILuiDrawerMenuOptionV2) => JSX.Element;
-declare const LuiDrawerMenuV2: ({ children, hasStickyHeader, size, ...menuPropsCopy }: Omit<ILuiHeaderMenuItem, "onClick"> & {
+declare const LuiDrawerMenuOptionV2: ({ icon, iconColor, label, badge, iconSize, closeMenuOnClick, onClick, }: LuiDrawerMenuOptionV2Props) => JSX.Element;
+declare type LuiDrawerMenuV2Props = Omit<LuiHeaderMenuItemV2Props, 'onClick' | 'isSelected'> & {
+    hasStickyHeader?: boolean;
+    size?: Exclude<Size, 'xs'>;
+    type?: 'drawer' | 'dropdown';
+};
+/**
+ * Drawer menu support both sliding and dropdown
+ */
+declare const LuiDrawerMenuV2: ({ children, hasStickyHeader, size, type, ...menuPropsCopy }: Omit<LuiHeaderMenuItemV2Props, "onClick" | "isSelected"> & {
     hasStickyHeader?: boolean | undefined;
-} & {
     size?: "sm" | "md" | "lg" | "xl" | undefined;
+    type?: "drawer" | "dropdown" | undefined;
+} & {
     children: ReactNode;
 }) => JSX.Element;
-declare type ILuiDropdownMenuV2 = Omit<ILuiHeaderMenuItem, 'onClick'> & {
+declare type LuiDropdownMenuV2Props = Omit<LuiHeaderMenuItemV2Props, 'onClick' | 'isSelected'> & {
     /**
      * The anchor origin of dropdown, default to left
      */
@@ -55,7 +65,13 @@ declare type ILuiDropdownMenuV2 = Omit<ILuiHeaderMenuItem, 'onClick'> & {
      */
     size?: Size | 'xxl';
 };
-declare const LuiDropdownMenuV2: ({ ...restOfProps }: Omit<ILuiHeaderMenuItem, "onClick"> & {
+/**
+ * LuiDropdownMenuV2 dropdown content element
+ */
+export declare const LuiDropdownMenuV2DropContent: ({ children, }: {
+    children: ReactNode;
+}) => JSX.Element;
+declare const LuiDropdownMenuV2: (props: Omit<LuiHeaderMenuItemV2Props, "onClick" | "isSelected"> & {
     /**
      * The anchor origin of dropdown, default to left
      */
@@ -69,6 +85,14 @@ declare const LuiDropdownMenuV2: ({ ...restOfProps }: Omit<ILuiHeaderMenuItem, "
 } & {
     children: ReactNode;
 }) => JSX.Element;
-declare const LuiDrawerMenuSectionV2: (props: ILuiDrawerMenuSection) => JSX.Element;
+declare type LuiDrawerMenuSectionV2Props = {
+    /**
+     * Optional tile, displays a header if set
+     */
+    title?: string;
+    collapsible?: boolean;
+    children: ReactNode;
+};
+declare const LuiDrawerMenuSectionV2: (props: LuiDrawerMenuSectionV2Props) => JSX.Element;
 declare const LuiDrawerMenuDividerV2: () => JSX.Element;
-export { LuiDrawerMenuV2, LuiDrawerMenuOptionsV2, LuiDrawerMenuOptionV2, ILuiDropdownMenuV2, LuiDropdownMenuV2, LuiDrawerMenuSectionV2, LuiDrawerMenuDividerV2, ILuiDrawerMenuOptionV2, };
+export { LuiDrawerMenuV2Props, LuiDrawerMenuV2, LuiDrawerMenuOptionV2Props, LuiDrawerMenuOptionV2, LuiDrawerMenuOptionsV2, LuiDrawerMenuSectionV2Props, LuiDrawerMenuSectionV2, LuiDropdownMenuV2Props, LuiDropdownMenuV2, LuiDrawerMenuDividerV2, };

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

@@ -1,38 +1,105 @@
-import React, { ReactNode } from 'react';
-import { HeaderSize, ILuiCloseableHeaderMenuItem, ILuiHeaderMenuItem } from '../LuiHeader/LuiHeader';
-interface HeaderPropsV2 {
+import React, { ReactElement, ReactNode } from 'react';
+import { HeaderSize } from '../LuiHeader/LuiHeader';
+import { IconSize } from '../LuiIcon/LuiIcon';
+declare type LuiHeaderV2Props = {
     headingText?: string;
     size?: HeaderSize;
     homeLink?: string | (() => void);
     transparent?: boolean;
     sticky?: boolean;
     appMenu?: ReactNode;
+};
+declare const LuiHeaderV2: ({ headingText, size, homeLink, transparent, children, sticky, appMenu, }: LuiHeaderV2Props & {
     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;
+}) => JSX.Element;
+declare type LuiHeaderMenuItemV2Props = {
+    /**
+     * LuiIcon name
+     */
+    icon?: string;
+    /**
+     * icon color,
+     */
+    iconColor?: string;
     /**
-     * allow to control selected status externally,
-     * and expect to use onClickOutside and onEscape to handle selected changes
+     * The label that will show up beside (right) the icon, if not specified then it won't show up
+     */
+    label?: string | ReactElement;
+    /**
+     * The string that will show up as a notification badge which will show up at the upper right corner of the icon
+     */
+    badge?: string;
+    /**
+     * The callback handler to be registered which will be called when menu item is clicked
+     */
+    onClick?: () => void;
+    /**
+     * The test id used to reference the html element which is bound to the onClick function
+     */
+    'data-testid'?: string;
+    /**
+     * Allow the selected state to be controlled externally
+     */
+    isSelected?: boolean;
+    /**
+     * The callback handler to be registered which will be called when outside of menu item is clicked
+     */
+    onClickOutside?: () => void;
+    /**
+     * The callback handler to be registered which will be called when Escape key is pressed
+     */
+    onEscape?: () => void;
+    /**
+     * The tooltip when mouse over the menu item
      */
-    isSelected?: boolean | undefined;
-    onClickOutside?: (() => void) | undefined;
-    onEscape?: (() => void) | undefined;
     tooltip?: {
+        /**
+         * The tooltip text
+         */
         text: string;
-        anchorOrigin?: "left" | "right" | undefined;
-        theme?: "dark" | "light" | undefined;
-    } | undefined;
+        /**
+         * The tooltip anchor origin, default to left
+         */
+        anchorOrigin?: 'left' | 'right';
+        /**
+         * The tooltip theme, default to dark
+         */
+        theme?: 'dark' | 'light';
+    };
+};
+declare const LuiHeaderMenuItemV2: React.ForwardRefExoticComponent<LuiHeaderMenuItemV2Props & {
+    children?: ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
-interface ILuiCloseableHeaderMenuContextV2 {
-    isOpen: () => boolean;
+export declare type LuiCloseableHeaderMenuContextType = {
+    isOpen: boolean;
+    toggle: () => void;
     open: () => void;
     close: () => void;
-}
-declare const LuiCloseableHeaderMenuContextV2: React.Context<ILuiCloseableHeaderMenuContextV2>;
-declare const LuiCloseableHeaderMenuItemV2: ({ open, setOpen, children, ...props }: ILuiCloseableHeaderMenuItem & {
+};
+export declare const LuiCloseableHeaderMenuContextV2: React.Context<LuiCloseableHeaderMenuContextType>;
+declare const useLuiCloseableHeaderMenuContextV2: () => LuiCloseableHeaderMenuContextType;
+declare type LuiCloseableHeaderMenuItemV2Props = Omit<LuiHeaderMenuItemV2Props, 'onClick' | 'isSelected'> & {
+    menuControls: {
+        isOpen: boolean;
+        toggle: () => void;
+        setOpen: (open: boolean) => void;
+    };
+};
+declare const LuiCloseableHeaderMenuItemV2: ({ children, menuControls, ...props }: Omit<LuiHeaderMenuItemV2Props, "onClick" | "isSelected"> & {
+    menuControls: {
+        isOpen: boolean;
+        toggle: () => void;
+        setOpen: (open: boolean) => void;
+    };
+} & {
     children?: ReactNode;
 }) => JSX.Element;
-export { LuiHeaderV2, LuiHeaderMenuItemV2, LuiCloseableHeaderMenuItemV2, LuiCloseableHeaderMenuContextV2, };
+declare type LuiMenuCloseButtonV2Props = {
+    'data-testid'?: string;
+    hide?: boolean;
+    icon?: string;
+    iconSize?: IconSize;
+    iconColor?: string;
+};
+declare const LuiMenuCloseButtonV2: ({ icon, hide, iconSize, iconColor, "data-testid": dataTestId, }: LuiMenuCloseButtonV2Props) => JSX.Element;
+export { LuiHeaderV2Props, LuiHeaderV2, LuiHeaderMenuItemV2Props, LuiHeaderMenuItemV2, LuiCloseableHeaderMenuItemV2Props, LuiCloseableHeaderMenuItemV2, useLuiCloseableHeaderMenuContextV2, LuiMenuCloseButtonV2Props, LuiMenuCloseButtonV2, };

package/dist/index.js

@@ -15643,14 +15643,15 @@ var parse$2 = function (value, options) {
     return isValidDate ? result : undefined;
 };
 var parseTextDate = function (value, options) {
+    var _a;
     if (!value || typeof value !== 'string') {
-        return;
+        return '';
     }
     try {
-        return parse$2(value, options);
+        return (_a = parse$2(value, options)) !== null && _a !== void 0 ? _a : '';
     }
-    catch (_a) {
-        return;
+    catch (_b) {
+        return '';
     }
 };
 
@@ -40190,8 +40191,8 @@ var useEscapeFunction = function (onEscape) {
  */
 var usePageClickFunction = function (onClickInsideArg, onClickOutsideArg) {
     var elementRef = React$1.useRef(null);
-    var onClickInside = React$1.useCallback(onClickInsideArg, []);
-    var onClickOutside = React$1.useCallback(onClickOutsideArg, []);
+    var onClickInside = React$1.useCallback(onClickInsideArg, [onClickInsideArg]);
+    var onClickOutside = React$1.useCallback(onClickOutsideArg, [onClickOutsideArg]);
     React$1.useEffect(function () {
         var handleClick = function (e) {
             var _a;
@@ -40289,7 +40290,8 @@ var LuiCloseableHeaderMenuItem = function (_a) {
     useDeprecatedWarning('LuiCloseableHeaderMenuItem');
     useEscapeFunction(function () { return setOpen(false); });
     var menuDiv = usePageClickFunction(function (event) { return open || event.stopPropagation(); }, function (event) {
-        if (!open) {
+        // if it was open, close it
+        if (open) {
             event.stopPropagation();
             setOpen(false);
         }
@@ -40355,12 +40357,12 @@ var LuiHeaderMenuItemV2 = React$1.forwardRef(function (_a, ref) {
         }
     });
     var innerItemRef = usePageClickFunction(function () {
-        // toggle selected when there is no externalSelected provided
+        // toggle selected when 'externalSelected' is not provided
         if (useInternalSelectedStatus) {
             setInternalSelected(function (prevSelected) { return !prevSelected; });
         }
     }, function () {
-        // unselcted when press outside when there is no externalSelected provided
+        // unselected on clicking outside when 'externalSelected' is not  provided
         if (useInternalSelectedStatus) {
             setInternalSelected(false);
         }
@@ -40369,46 +40371,63 @@ var LuiHeaderMenuItemV2 = React$1.forwardRef(function (_a, ref) {
         }
     });
     var resolvedIcon = !icon && !label ? 'ic_menu' : icon;
+    var rootStyle = 'LuiHeaderV2-menu-item';
     var TooltipElement = function () {
         if (!tooltip) {
             return null;
         }
         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: "tooltip ".concat(anchorOrigin, " ").concat(theme) }, text);
+        return (React__default["default"].createElement("span", { className: "menu-tooltip ".concat(anchorOrigin, " ").concat(theme) }, text));
     };
-    return (React__default["default"].createElement("div", { className: "LuiHeaderV2-menu-item", ref: ref },
-        React__default["default"].createElement("div", { ref: innerItemRef, className: clsx$1('LuiHeaderV2-menu-button', { selected: selected }, { unselected: !selected }) },
+    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 }) },
             tooltip && React__default["default"].createElement(TooltipElement, null),
-            resolvedIcon && (React__default["default"].createElement("div", { className: clsx$1('LuiHeaderV2-menu-icon', {
+            resolvedIcon && (React__default["default"].createElement("div", { className: clsx$1("".concat(rootStyle, "-button-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 && React__default["default"].createElement("div", { onClick: onClick }, children)));
+            label && (React__default["default"].createElement("div", { className: clsx$1(resolvedIcon
+                    ? "".concat(rootStyle, "-button-label")
+                    : "".concat(rootStyle, "-button-label-only"), { clickable: !!onClick }), onClick: onClick }, label)),
+            badge && React__default["default"].createElement("div", { className: "".concat(rootStyle, "-button-badge") }, badge)),
+        !!children && React__default["default"].createElement("div", null, children)));
 });
 var LuiCloseableHeaderMenuContextV2 = React$1.createContext({
-    isOpen: function () { return false; },
+    isOpen: false,
+    toggle: function () { },
     open: function () { },
     close: function () { }
 });
+var useLuiCloseableHeaderMenuContextV2 = function () {
+    return React$1.useContext(LuiCloseableHeaderMenuContextV2);
+};
 var LuiCloseableHeaderMenuItemV2 = function (_a) {
-    var open = _a.open, setOpen = _a.setOpen, children = _a.children, props = __rest$1(_a, ["open", "setOpen", "children"]);
+    var children = _a.children, menuControls = _a.menuControls, props = __rest$1(_a, ["children", "menuControls"]);
+    var isOpen = menuControls.isOpen, setOpen = menuControls.setOpen, toggle = menuControls.toggle;
+    // close on escape
     useEscapeFunction(function () { return setOpen(false); });
-    var menuDiv = usePageClickFunction(function (event) { return open || event.stopPropagation(); }, function (event) {
-        if (!open) {
+    var menuDiv = usePageClickFunction(function (event) { return event.stopPropagation(); }, // do nothing, let menu item click invoke toggle
+    function (event) {
+        // if it was open, close it
+        if (isOpen) {
             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 },
+    var menuItemProps = __assign$3(__assign$3({ onClick: function () { return toggle(); } }, props), { isSelected: isOpen });
+    return (React__default["default"].createElement(LuiCloseableHeaderMenuContextV2.Provider, { value: {
+            isOpen: isOpen,
+            toggle: toggle,
+            open: function () { return setOpen(true); },
+            close: function () { return setOpen(false); }
+        } },
         React__default["default"].createElement(LuiHeaderMenuItemV2, __assign$3({ ref: menuDiv }, menuItemProps), !!children && children)));
+};
+var LuiMenuCloseButtonV2 = function (_a) {
+    var _b = _a.icon, icon = _b === void 0 ? 'ic_clear' : _b, _c = _a.hide, hide = _c === void 0 ? false : _c, _d = _a.iconSize, iconSize = _d === void 0 ? 'md' : _d, iconColor = _a.iconColor, _e = _a["data-testid"], dataTestId = _e === void 0 ? 'close-button' : _e;
+    var menu = useLuiCloseableHeaderMenuContextV2();
+    return (React__default["default"].createElement("div", { onClick: function () { return menu.close(); }, style: { display: hide ? 'none' : 'block' }, "data-testid": dataTestId },
+        React__default["default"].createElement(LuiIcon, { alt: "", name: icon, size: iconSize, color: iconColor })));
 };
 
 /**
@@ -40499,10 +40518,10 @@ 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.subMenu, subMenu = _c === void 0 ? false : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d;
-    var menu = React$1.useContext(LuiCloseableHeaderMenuContextV2);
+    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 menu = useLuiCloseableHeaderMenuContextV2();
     return (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option", onClick: function () {
-            if (!subMenu) {
+            if (closeMenuOnClick) {
                 menu.close();
             }
             onClick();
@@ -40512,28 +40531,53 @@ var LuiDrawerMenuOptionV2 = function (_a) {
             label),
         badge && (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option-badge" }, badge))));
 };
+/**
+ * Drawer menu support both sliding and dropdown
+ */
 var LuiDrawerMenuV2 = function (_a) {
-    var children = _a.children, _b = _a.hasStickyHeader, hasStickyHeader = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'lg' : _c, menuPropsCopy = __rest$1(_a, ["children", "hasStickyHeader", "size"]);
-    var _d = React$1.useState(false), open = _d[0], setOpen = _d[1];
-    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; }); } });
+    var children = _a.children, _b = _a.hasStickyHeader, hasStickyHeader = _b === void 0 ? true : _b, // only applied when menu is drawer type
+    _c = _a.size, // only applied when menu is drawer type
+    size = _c === void 0 ? 'lg' : _c, _d = _a.type, type = _d === void 0 ? 'drawer' : _d, menuPropsCopy = __rest$1(_a, ["children", "hasStickyHeader", "size", "type"]);
+    var _e = React$1.useState(false), open = _e[0], setOpen = _e[1];
+    // if drawer is on dropdown mode, don't need to switch icon when open/close
+    var icon = type === 'dropdown' ? 'ic_menu' : open ? 'ic_clear' : 'ic_menu';
+    var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { icon: icon, menuControls: {
+            isOpen: open,
+            toggle: function () { return setOpen(function (preOpen) { return !preOpen; }); },
+            setOpen: function (open) { return setOpen(open); }
+        } });
     React$1.useEffect(function () {
         // Support for non-sticky headers. Scroll back to top when menu is opened
-        if (open && !hasStickyHeader) {
+        if (type === 'drawer' && open && !hasStickyHeader) {
             window.scrollTo({ top: 0, behavior: 'smooth' });
         }
-    }, [open, hasStickyHeader]);
+    }, [open, hasStickyHeader, type]);
     return (React__default["default"].createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
-        React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-drawer', size, {
-                open: open
-            }, { sticky: hasStickyHeader }, { 'non-sticky': !hasStickyHeader }), "data-testid": 'drawer', "aria-hidden": !open }, children)));
+        React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-drawer-container', {
+                drawer: type === 'drawer'
+            }, { dropdown: type === 'dropdown' }) },
+            React__default["default"].createElement("div", { className: clsx$1('LuiHeaderMenuV2-drawer', size, {
+                    open: open
+                }, { drawer: type === 'drawer' }, { dropdown: type === 'dropdown' }, { sticky: type === 'drawer' && hasStickyHeader }, { 'non-sticky': type === 'drawer' && !hasStickyHeader }), "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 ? {
+/**
+ * LuiDropdownMenuV2 dropdown content element
+ */
+var LuiDropdownMenuV2DropContent = function (_a) {
+    var children = _a.children;
+    var menu = useLuiCloseableHeaderMenuContextV2();
+    return React__default["default"].createElement("div", { onClick: function () { return menu.close(); } }, children);
+};
+var LuiDropdownMenuV2 = function (props) {
+    var children = props.children, _a = props.anchorOrigin, _b = _a === 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(false), open = _f[0], setOpen = _f[1];
-    var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open, setOpen: setOpen });
+    } : _a, _c = _b.horizontal, horizontal = _c === void 0 ? 'left' : _c, _d = props.size, size = _d === void 0 ? 'md' : _d, menuPropsCopy = __rest$1(props, ["children", "anchorOrigin", "size"]);
+    var _e = React$1.useState(false), open = _e[0], setOpen = _e[1];
+    var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { menuControls: {
+            isOpen: open,
+            toggle: function () { return setOpen(function (preOpen) { return !preOpen; }); },
+            setOpen: function (open) { return setOpen(open); }
+        } });
     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', { 'anchor-horizontal-icon-left': horizontal === 'left' }, {
@@ -40542,7 +40586,8 @@ var LuiDropdownMenuV2 = function (_a) {
                     'anchor-horizontal-label-right': menuPropsCopy.label && horizontal === 'right'
                 }, "dropdown-".concat(size), {
                     open: open
-                }), "data-testid": 'dropdown', "aria-hidden": !open }, children))));
+                }), "data-testid": 'dropdown', "aria-hidden": !open },
+                React__default["default"].createElement(LuiDropdownMenuV2DropContent, null, children)))));
 };
 var LuiDrawerMenuSectionV2 = function (props) {
     var children = props.children, title = props.title, collapsible = props.collapsible;
@@ -40550,8 +40595,7 @@ var LuiDrawerMenuSectionV2 = function (props) {
         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)))),
+                React__default["default"].createElement("div", { className: 'lui-expand-header' }, title))),
             children))));
 };
 var LuiDrawerMenuDividerV2 = function () {
@@ -58607,6 +58651,7 @@ exports.LuiDrawerMenuSectionV2 = LuiDrawerMenuSectionV2;
 exports.LuiDrawerMenuV2 = LuiDrawerMenuV2;
 exports.LuiDropdownMenu = LuiDropdownMenu;
 exports.LuiDropdownMenuV2 = LuiDropdownMenuV2;
+exports.LuiDropdownMenuV2DropContent = LuiDropdownMenuV2DropContent;
 exports.LuiErrorPage = LuiErrorPage;
 exports.LuiExpandableBanner = LuiExpandableBanner;
 exports.LuiFileInputBox = LuiFileInputBox;
@@ -58635,6 +58680,7 @@ exports.LuiLoadingSpinnerChristmas = LuiLoadingSpinnerChristmas;
 exports.LuiLoadingSpinnerEaster = LuiLoadingSpinnerEaster;
 exports.LuiMenu = LuiMenu;
 exports.LuiMenuCloseButton = LuiMenuCloseButton;
+exports.LuiMenuCloseButtonV2 = LuiMenuCloseButtonV2;
 exports.LuiMessagingContextProvider = LuiMessagingContextProvider;
 exports.LuiMiniSpinner = LuiMiniSpinner;
 exports.LuiModal = LuiModal;
@@ -58675,6 +58721,7 @@ exports.useClickedOutsideElement = useClickedOutsideElement;
 exports.useEscapeFunction = useEscapeFunction;
 exports.useLOLGlobalClientRefContext = useLOLGlobalClientRefContext;
 exports.useLOLUserContext = useLOLUserContext;
+exports.useLuiCloseableHeaderMenuContextV2 = useLuiCloseableHeaderMenuContextV2;
 exports.useLuiFloatingWindow = useFloatingWindow;
 exports.useMediaQuery = useMediaQuery;
 exports.usePageClickFunction = usePageClickFunction;