@linzjs/lui 17.36.11 → 17.37.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [17.37.0](https://github.com/linz/lui/compare/v17.36.12...v17.37.0) (2023-03-06)
+
+
+### Features
+
+* added optional help button to modal header ([#872](https://github.com/linz/lui/issues/872)) ([07baded](https://github.com/linz/lui/commit/07baded35af9229f31a5eab65d5dbbc8a8eea63c))
+
+## [17.36.12](https://github.com/linz/lui/compare/v17.36.11...v17.36.12) (2023-03-05)
+
+
+### Bug Fixes
+
+* fix drawer position issue when LuiHeaderV2 is non-sticky ([#871](https://github.com/linz/lui/issues/871)) ([6105280](https://github.com/linz/lui/commit/61052806e0ae9e455aae8460e2b6e0bbd93a8b53))
+
 ## [17.36.11](https://github.com/linz/lui/compare/v17.36.10...v17.36.11) (2023-03-05)
 
 

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

@@ -37,9 +37,10 @@ declare const LuiDrawerMenuOptionsV2: ({ children, }: ILuiIcon & {
     children: ReactNode;
 }) => JSX.Element;
 declare const LuiDrawerMenuOptionV2: ({ icon, iconColor, label, badge, iconSize, subMenu, onClick, }: ILuiDrawerMenuOptionV2) => JSX.Element;
-declare const LuiDrawerMenuV2: ({ children, hasStickyHeader, ...menuPropsCopy }: Omit<ILuiHeaderMenuItem, "onClick"> & {
+declare const LuiDrawerMenuV2: ({ children, hasStickyHeader, size, ...menuPropsCopy }: Omit<ILuiHeaderMenuItem, "onClick"> & {
     hasStickyHeader?: boolean | undefined;
 } & {
+    size?: "sm" | "md" | "lg" | "xl" | undefined;
     children: ReactNode;
 }) => JSX.Element;
 declare type ILuiDropdownMenuV2 = Omit<ILuiHeaderMenuItem, 'onClick'> & {

package/dist/components/LuiModal/LuiModal.d.ts

@@ -6,6 +6,7 @@ interface ILuiModal {
     className?: string;
     maxWidth?: boolean;
     headingText?: string;
+    helpLink?: string;
     lowContrast?: boolean;
     preventAutoFocus?: boolean;
     appendToElement?: () => HTMLElement;
@@ -17,6 +18,7 @@ export declare const LuiAlertModal: React.FC<React.PropsWithChildren<{
 export declare const LuiAlertModalButtons: React.FC<React.PropsWithChildren<unknown>>;
 interface IModalHeader {
     headingText?: string;
+    helpLink?: string;
     onClose?: () => void;
 }
 export declare const LuiModalHeader: React.FC<React.PropsWithChildren<IModalHeader>>;

package/dist/index.d.ts

@@ -71,3 +71,4 @@ export { CheckboxItemRenderer } from './components/LuiListBox/Renderers/Checkbox
 export { LuiSideMenu, ILuiSideMenuProps, } from './components/LuiSideMenu/LuiSideMenu';
 export { LuiSideMenuItem, ILuiSideMenuItemProps, LuiMenuItemClickHandler, } from './components/LuiSideMenu/LuiSideMenuItem';
 export { Breakpoint, breakpoints, breakpointQuery, useMediaQuery, } from './components/common/UseMediaQuery';
+export { useEscapeFunction, usePageClickFunction, } from './components/common/Hooks';

package/dist/index.js

@@ -40505,25 +40505,18 @@ var LuiDrawerMenuOptionV2 = function (_a) {
         badge && (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option-badge" }, 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 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; }); } });
     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', {
-                'LuiHeaderMenuV2-drawer-closed': !open
+        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)));
 };
 var LuiDropdownMenuV2 = function (_a) {
@@ -40531,17 +40524,8 @@ var LuiDropdownMenuV2 = function (_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;
-            });
-        } });
+    var _f = React$1.useState(false), open = _f[0], setOpen = _f[1];
+    var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open, setOpen: setOpen });
     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' }, {
@@ -40549,9 +40533,7 @@ var LuiDropdownMenuV2 = function (_a) {
                 }, {
                     'anchor-horizontal-label-right': menuPropsCopy.label && horizontal === 'right'
                 }, "dropdown-".concat(size), {
-                    'LuiHeaderMenuV2-dropdown-open': open
-                }, {
-                    'LuiHeaderMenuV2-dropdown-closed': open !== null && !open
+                    open: open
                 }), "data-testid": 'dropdown', "aria-hidden": !open }, children))));
 };
 var LuiDrawerMenuSectionV2 = function (props) {
@@ -42436,7 +42418,7 @@ var LuiModal = function (props) {
         parentSelector: props.appendToElement
     })),
         React__default["default"].createElement("div", { ref: node, className: clsx$1('lui-modal lui-box-shadow', props.maxWidth && 'lui-max-width', props.headingText && 'lui-modal-no-padding', props.className) },
-            props.headingText && (React__default["default"].createElement(LuiModalHeader, { headingText: props.headingText, onClose: props.onClose })),
+            props.headingText && (React__default["default"].createElement(LuiModalHeader, { headingText: props.headingText, helpLink: props.helpLink, onClose: props.onClose })),
             React__default["default"].createElement("div", { className: clsx$1(props.headingText && 'lui-modal-container'), ref: function (element) {
                     if (!props.preventAutoFocus &&
                         element &&
@@ -42458,8 +42440,11 @@ var LuiAlertModalButtons = function (props) {
 var LuiModalHeader = function (props) {
     return (React__default["default"].createElement("header", { className: "lui-modal-header" }, props.headingText && (React__default["default"].createElement("div", { className: "lui-modal-header-title" },
         React__default["default"].createElement("h1", null, props.headingText),
-        props.onClose && (React__default["default"].createElement("button", { className: "lui-modal-header-close-btn", onClick: props.onClose },
-            React__default["default"].createElement("i", { className: "material-icons-round lui-modal-header-btn-size" }, "close")))))));
+        React__default["default"].createElement("div", { className: "lui-modal-header-buttons" },
+            props.helpLink && (React__default["default"].createElement("button", { className: "lui-modal-header-help-btn", onClick: function () { return window.open(props.helpLink); } },
+                React__default["default"].createElement("i", { className: "material-icons-round lui-modal-header-btn-size" }, "help_outline"))),
+            props.onClose && (React__default["default"].createElement("button", { className: "lui-modal-header-close-btn", onClick: props.onClose },
+                React__default["default"].createElement("i", { className: "material-icons-round lui-modal-header-btn-size" }, "close"))))))));
 };
 
 var css_248z$6 = "@keyframes react-loading-skeleton {\n    100% {\n        transform: translateX(100%);\n    }\n}\n\n.react-loading-skeleton {\n    --base-color: #ebebeb;\n    --highlight-color: #f5f5f5;\n    --animation-duration: 1.5s;\n    --animation-direction: normal;\n    --pseudo-element-display: block; /* Enable animation */\n\n    background-color: var(--base-color);\n\n    width: 100%;\n    border-radius: 0.25rem;\n    display: inline-flex;\n    line-height: 1;\n\n    position: relative;\n    overflow: hidden;\n    z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n    content: ' ';\n    display: var(--pseudo-element-display);\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    background-repeat: no-repeat;\n    background-image: linear-gradient(\n        90deg,\n        var(--base-color),\n        var(--highlight-color),\n        var(--base-color)\n    );\n    transform: translateX(-100%);\n\n    animation-name: react-loading-skeleton;\n    animation-direction: var(--animation-direction);\n    animation-duration: var(--animation-duration);\n    animation-timing-function: ease-in-out;\n    animation-iteration-count: infinite;\n}\n";
@@ -58675,9 +58660,11 @@ exports.breakpoints = breakpoints;
 exports.getDefaultSearchMenuOptions = getDefaultSearchMenuOptions;
 exports.isChromatic = isChromatic;
 exports.useClickedOutsideElement = useClickedOutsideElement;
+exports.useEscapeFunction = useEscapeFunction;
 exports.useLOLGlobalClientRefContext = useLOLGlobalClientRefContext;
 exports.useLOLUserContext = useLOLUserContext;
 exports.useLuiFloatingWindow = useFloatingWindow;
 exports.useMediaQuery = useMediaQuery;
+exports.usePageClickFunction = usePageClickFunction;
 exports.useShowLUIMessage = useShowLUIMessage;
 //# sourceMappingURL=index.js.map