@linzjs/lui 17.29.0 → 17.29.1-1

package/dist/lui.esm.js

@@ -40090,8 +40090,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.createElement("img", { className: "linz-logo", alt: "LINZ Logo", src: logo })) : (React__default.createElement("img", { className: "linz-motif", alt: "LINZ Logo", src: motif }));
     var logoContainer = logoElement;
     if (typeof homeLink === 'string') {
@@ -40116,12 +40120,15 @@ var LuiHeader = function (_a) {
             React__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 = 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.createElement("div", { className: menuItemClasses, ref: ref },
@@ -40136,8 +40143,12 @@ var LuiCloseableHeaderMenuContext = 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) {
@@ -40161,12 +40172,76 @@ var LuiMenuCloseButton = function (_a) {
     return (React__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.createElement("img", { className: "linz-logo-v2", alt: "LINZ Logo", src: logo })) : (React__default.createElement("img", { className: "linz-motif-v2", alt: "LINZ Logo", src: motif }));
+    var logoContainer = logoElement;
+    if (typeof homeLink === 'string') {
+        logoContainer = React__default.createElement("a", { href: homeLink }, logoElement);
+    }
+    else if (typeof homeLink === 'function') {
+        logoContainer = (React__default.createElement("div", { className: "clickable", onClick: function () {
+                homeLink();
+            } }, logoElement));
+    }
+    return (React__default.createElement("header", { className: clsx$1({
+            'lui-header-v2': true,
+            'lui-header-transparent': transparent,
+            'lui-header-small-v2': size === 'small',
+            'lui-header-sticky-v2': sticky
+        }) },
+        React__default.createElement("div", { className: "lui-header-row-v2" },
+            React__default.createElement("div", { className: "lui-header-col-v2" },
+                !!appMenu && appMenu,
+                React__default.createElement("div", { className: "lui-header-logo-v2" }, logoContainer),
+                headingText && (React__default.createElement("div", { className: "lui-header-title-v2" },
+                    React__default.createElement("h1", null, headingText)))),
+            React__default.createElement("div", { className: "lui-header-col-v2" }, children))));
+};
+var LuiHeaderMenuItemV2 = 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;
+    var menuItemClasses = clsx$1('lui-header-menu-item-v2', hide && buildHideClassDict(hide));
+    var resolvedIcon = !icon && !label ? 'menu' : icon;
+    return (React__default.createElement("div", { className: menuItemClasses, ref: ref },
+        React__default.createElement("div", { className: "lui-header-menu-button" },
+            React__default.createElement("div", { className: clsx$1('lui-header-menu-icon', onClick && 'clickable'), onClick: onClick, "data-testid": dataTestId }, resolvedIcon && (React__default.createElement("i", { title: "Main menu", className: "material-icons-round lui-icon-md" }, resolvedIcon))),
+            label && React__default.createElement("div", { className: "lui-menu-label-v2" }, label),
+            badge && React__default.createElement("div", { className: "badge-v2" }, badge)),
+        children));
+});
+var LuiCloseableHeaderMenuItemV2 = function (_a) {
+    var open = _a.open, setOpen = _a.setOpen, props = __rest$1(_a, ["open", "setOpen"]);
+    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.createElement(LuiCloseableHeaderMenuContext.Provider, { value: menuControls },
+        React__default.createElement(LuiHeaderMenuItemV2, __assign$3({ ref: menuDiv }, menuItemProps), props.children)));
+};
+
+/**
+ * @deprecated replaced by LuiDrawerMenuOptionsV2
+ */
 var LuiDrawerMenuOptions = function (_a) {
     var children = _a.children;
+    useDeprecatedWarning('LuiDrawerMenuOptions');
     return React__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 = useContext(LuiCloseableHeaderMenuContext);
     return (React__default.createElement("div", { className: "lui-menu-drawer-option", onClick: function () {
             menu.close();
@@ -40177,8 +40252,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 = 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); } });
@@ -40201,8 +40280,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 = useState(false), open = _b[0], setOpen = _b[1];
     var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open, setOpen: setOpen });
@@ -40228,6 +40311,81 @@ var LuiDrawerMenuDivider = function () {
     return React__default.createElement("hr", { className: "LuiDrawerMenuDivider" });
 };
 
+var LuiDrawerMenuOptionsV2 = function (_a) {
+    var children = _a.children;
+    return React__default.createElement("div", { className: "lui-menu-drawer-v2-options" }, children);
+};
+/**
+ * display badge on the left
+ */
+var LuiDrawerMenuOptionV2 = function (_a) {
+    var icon = _a.icon, label = _a.label, badge = _a.badge, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b;
+    var menu = useContext(LuiCloseableHeaderMenuContext);
+    return (React__default.createElement("div", { className: "lui-menu-drawer-v2-option", onClick: function () {
+            menu.close();
+            onClick();
+        }, "data-testid": 'drawer-option' },
+        React__default.createElement("div", { className: "lui-menu-drawer-v2-option-label" },
+            badge,
+            typeof icon === 'string' ? (React__default.createElement("i", { className: "material-icons-round", "data-testid": 'drawer-option-icon' }, icon)) : (icon),
+            label)));
+};
+var LuiDrawerMenuV2 = function (_a) {
+    var restOfProps = __rest$1(_a, []);
+    var children = restOfProps.children, _b = restOfProps.hasStickyHeader, hasStickyHeader = _b === void 0 ? true : _b, menuPropsCopy = __rest$1(restOfProps, ["children", "hasStickyHeader"]);
+    var _c = 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); } });
+    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('lui-menu-drawer-v2-open');
+        }
+        else {
+            document.body.classList.remove('lui-menu-drawer-v2-open');
+        }
+    }, [open, hasStickyHeader]);
+    return (React__default.createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
+        React__default.createElement("div", { className: clsx$1({
+                'lui-menu-drawer-v2': true,
+                'lui-menu-drawer-v2-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 = useState(false), open = _f[0], setOpen = _f[1];
+    var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open, setOpen: setOpen });
+    return (React__default.createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
+        React__default.createElement("div", { className: "lui-menu-dropdown-container" },
+            React__default.createElement("div", { className: clsx$1({
+                    'lui-menu-dropdown-v2': true,
+                    'dropdown-horizontal-right': horizontal === 'right',
+                    'dropdown-horizontal-left': horizontal === 'left',
+                    'dropdown-xxl': size === 'xxl',
+                    'dropdown-xl': size === 'xl',
+                    'dropdown-lg': size === 'lg',
+                    'dropdown-md': size === 'md',
+                    'dropdown-sm': size === 'sm',
+                    'dropdown-xs': size === 'xs',
+                    'lui-box-shadow': true,
+                    'lui-menu-dropdown-v2-closed': !open
+                }), "data-testid": 'dropdown', "aria-hidden": !open },
+                children,
+                ' '))));
+};
+var LuiDrawerMenuSectionV2 = function (props) {
+    return React__default.createElement(LuiDrawerMenuSection, __assign$3({}, props));
+};
+var LuiDrawerMenuDividerV2 = function () {
+    return React__default.createElement(LuiDrawerMenuDivider, null);
+};
+
 var lib = {exports: {}};
 
 var Modal$2 = {};
@@ -57960,5 +58118,33 @@ function LuiSideMenuItem(_a) {
             React__default.createElement("span", { className: "navText" }, label))));
 }
 
-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, LuiCloseableHeaderMenuItem, LuiComboSelect, LuiControlledMenu, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuOption, LuiDrawerMenuOptions, LuiDrawerMenuSection, LuiDropdownMenu, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFloatingWindow, FloatingWindowContextProvider as LuiFloatingWindowContextProvider, LuiFooter, LuiFormSectionHeader, LuiFormikCheckbox, LuiFormikForm, LuiFormikFormLabel, LuiFormikFormSubmitButton, LuiFormikRadioButton, LuiFormikRadioGroup, LuiFormikSelect, LuiFormikTextInput, LuiHeader, LuiHeaderMenuItem, 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, getDefaultSearchMenuOptions, isChromatic, useClickedOutsideElement, useLOLGlobalClientRefContext, useLOLUserContext, useFloatingWindow as useLuiFloatingWindow, useShowLUIMessage };
+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 = useState(false), matches = _a[0], setMatches = _a[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;
+};
+
+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, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, 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, useLOLGlobalClientRefContext, useLOLUserContext, useFloatingWindow as useLuiFloatingWindow, useMediaQuery, useShowLUIMessage };
 //# sourceMappingURL=lui.esm.js.map