@linzjs/lui 17.41.3 → 17.41.5

package/dist/lui.esm.js

@@ -15614,14 +15614,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 '';
     }
 };
 
@@ -40161,8 +40162,8 @@ var useEscapeFunction = function (onEscape) {
  */
 var usePageClickFunction = function (onClickInsideArg, onClickOutsideArg) {
     var elementRef = useRef(null);
-    var onClickInside = useCallback(onClickInsideArg, []);
-    var onClickOutside = useCallback(onClickOutsideArg, []);
+    var onClickInside = useCallback(onClickInsideArg, [onClickInsideArg]);
+    var onClickOutside = useCallback(onClickOutsideArg, [onClickOutsideArg]);
     useEffect(function () {
         var handleClick = function (e) {
             var _a;
@@ -40260,7 +40261,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);
         }
@@ -40326,12 +40328,12 @@ var LuiHeaderMenuItemV2 = 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);
         }
@@ -40340,46 +40342,63 @@ var LuiHeaderMenuItemV2 = 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.createElement("span", { className: "tooltip ".concat(anchorOrigin, " ").concat(theme) }, text);
+        return (React__default.createElement("span", { className: "menu-tooltip ".concat(anchorOrigin, " ").concat(theme) }, text));
     };
-    return (React__default.createElement("div", { className: "LuiHeaderV2-menu-item", ref: ref },
-        React__default.createElement("div", { ref: innerItemRef, className: clsx$1('LuiHeaderV2-menu-button', { selected: selected }, { unselected: !selected }) },
+    return (React__default.createElement("div", { className: rootStyle, ref: ref },
+        React__default.createElement("div", { ref: innerItemRef, className: clsx$1("".concat(rootStyle, "-button"), { selected: selected }, { unselected: !selected }) },
             tooltip && React__default.createElement(TooltipElement, null),
-            resolvedIcon && (React__default.createElement("div", { className: clsx$1('LuiHeaderV2-menu-icon', {
+            resolvedIcon && (React__default.createElement("div", { className: clsx$1("".concat(rootStyle, "-button-icon"), {
                     clickable: !!onClick
                 }), "data-testid": dataTestId, onClick: onClick },
                 React__default.createElement(LuiIcon, { size: "lg", name: resolvedIcon, alt: '', color: iconColor }))),
-            label && (React__default.createElement("div", { className: clsx$1(onClick && 'clickable', { 'LuiHeaderV2-menu-label': !!resolvedIcon }, { 'LuiHeaderV2-menu-label-only': !resolvedIcon }), onClick: onClick }, label)),
-            badge && React__default.createElement("div", { className: "LuiHeaderV2-badge" }, badge)),
-        !!children && React__default.createElement("div", { onClick: onClick }, children)));
+            label && (React__default.createElement("div", { className: clsx$1(resolvedIcon
+                    ? "".concat(rootStyle, "-button-label")
+                    : "".concat(rootStyle, "-button-label-only"), { clickable: !!onClick }), onClick: onClick }, label)),
+            badge && React__default.createElement("div", { className: "".concat(rootStyle, "-button-badge") }, badge)),
+        !!children && React__default.createElement("div", null, children)));
 });
 var LuiCloseableHeaderMenuContextV2 = createContext({
-    isOpen: function () { return false; },
+    isOpen: false,
+    toggle: function () { },
     open: function () { },
     close: function () { }
 });
+var useLuiCloseableHeaderMenuContextV2 = function () {
+    return 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.createElement(LuiCloseableHeaderMenuContext.Provider, { value: menuControls },
+    var menuItemProps = __assign$3(__assign$3({ onClick: function () { return toggle(); } }, props), { isSelected: isOpen });
+    return (React__default.createElement(LuiCloseableHeaderMenuContextV2.Provider, { value: {
+            isOpen: isOpen,
+            toggle: toggle,
+            open: function () { return setOpen(true); },
+            close: function () { return setOpen(false); }
+        } },
         React__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.createElement("div", { onClick: function () { return menu.close(); }, style: { display: hide ? 'none' : 'block' }, "data-testid": dataTestId },
+        React__default.createElement(LuiIcon, { alt: "", name: icon, size: iconSize, color: iconColor })));
 };
 
 /**
@@ -40470,10 +40489,10 @@ var LuiDrawerMenuOptionsV2 = function (_a) {
     return (React__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 = 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.createElement("div", { className: "LuiHeaderMenuV2-drawer-option", onClick: function () {
-            if (!subMenu) {
+            if (closeMenuOnClick) {
                 menu.close();
             }
             onClick();
@@ -40483,28 +40502,53 @@ var LuiDrawerMenuOptionV2 = function (_a) {
             label),
         badge && (React__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 = 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 = 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); }
+        } });
     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.createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
-        React__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.createElement("div", { className: clsx$1('LuiHeaderMenuV2-drawer-container', {
+                drawer: type === 'drawer'
+            }, { dropdown: type === 'dropdown' }) },
+            React__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.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 = 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 = 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.createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
         React__default.createElement("div", { className: "LuiHeaderMenuV2-dropdown-container" },
             React__default.createElement("div", { className: clsx$1('LuiHeaderMenuV2-dropdown', { 'anchor-horizontal-icon-left': horizontal === 'left' }, {
@@ -40513,7 +40557,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.createElement(LuiDropdownMenuV2DropContent, null, children)))));
 };
 var LuiDrawerMenuSectionV2 = function (props) {
     var children = props.children, title = props.title, collapsible = props.collapsible;
@@ -40521,8 +40566,7 @@ var LuiDrawerMenuSectionV2 = function (props) {
         collapsible && (React__default.createElement(LuiExpandableBanner, { label: title || '', className: "LuiDrawerMenuSectionV2-header" }, children)),
         !collapsible && (React__default.createElement(React__default.Fragment, null,
             title && (React__default.createElement("div", { className: "LuiDrawerMenuSectionV2-header" },
-                React__default.createElement("div", { className: 'lui-expand-header', style: { cursor: 'default' } },
-                    React__default.createElement("h3", null, title)))),
+                React__default.createElement("div", { className: 'lui-expand-header' }, title))),
             children))));
 };
 var LuiDrawerMenuDividerV2 = function () {
@@ -58529,5 +58573,5 @@ var useMediaQuery = function (query) {
     return matches;
 };
 
-export { CheckboxItemRenderer, FIRM_KEY, FIRM_NAME_KEY, GLOBAL_CLIENT_REFERENCE_KEY, LOLActiveFirmMessage, LOLAuthorisedLink, LOLCommonDrawerMenu, LOLCommonDrawerMenuAfterLinks, LOLDrawerMenu, LOLFirmSwitcherMenu, LOLGlobalClientRefContext, LOLGlobalClientRefContextProvider, LOLLogoutLink, LOLSearchBox, LOLUserContext, LOLUserContextProvider, LOLUserLastLogin, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAlertModal, LuiAlertModalButtons, LuiBadge, LuiBanner, LuiBannerContent, LuiBearingFormikInput, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFloatingWindow, FloatingWindowContextProvider as LuiFloatingWindowContextProvider, LuiFooter, LuiFormSectionHeader, LuiFormikCheckbox, LuiFormikForm, LuiFormikFormLabel, LuiFormikFormSubmitButton, LuiFormikRadioButton, LuiFormikRadioGroup, LuiFormikSelect, LuiFormikTextInput, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiLoadingSpinnerChristmas, LuiLoadingSpinnerEaster, LuiMenu, LuiMenuCloseButton, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, breakpointQuery, breakpoints, getDefaultSearchMenuOptions, isChromatic, useClickedOutsideElement, useEscapeFunction, useLOLGlobalClientRefContext, useLOLUserContext, useFloatingWindow as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage };
+export { CheckboxItemRenderer, FIRM_KEY, FIRM_NAME_KEY, GLOBAL_CLIENT_REFERENCE_KEY, LOLActiveFirmMessage, LOLAuthorisedLink, LOLCommonDrawerMenu, LOLCommonDrawerMenuAfterLinks, LOLDrawerMenu, LOLFirmSwitcherMenu, LOLGlobalClientRefContext, LOLGlobalClientRefContextProvider, LOLLogoutLink, LOLSearchBox, LOLUserContext, LOLUserContextProvider, LOLUserLastLogin, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAlertModal, LuiAlertModalButtons, LuiBadge, LuiBanner, LuiBannerContent, LuiBearingFormikInput, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFloatingWindow, FloatingWindowContextProvider as LuiFloatingWindowContextProvider, LuiFooter, LuiFormSectionHeader, LuiFormikCheckbox, LuiFormikForm, LuiFormikFormLabel, LuiFormikFormSubmitButton, LuiFormikRadioButton, LuiFormikRadioGroup, LuiFormikSelect, LuiFormikTextInput, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiLoadingSpinnerChristmas, LuiLoadingSpinnerEaster, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, breakpointQuery, breakpoints, getDefaultSearchMenuOptions, isChromatic, useClickedOutsideElement, useEscapeFunction, useLOLGlobalClientRefContext, useLOLUserContext, useLuiCloseableHeaderMenuContextV2, useFloatingWindow as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage };
 //# sourceMappingURL=lui.esm.js.map