@gen3/frontend 0.10.55 → 0.10.56

package/dist/esm/index.js

@@ -11,10 +11,10 @@ import 'swr';
 import { getCookie, deleteCookie, setCookie } from 'cookies-next';
 import { decodeJwt } from 'jose';
 import { notifications, showNotification, cleanNotifications, Notifications } from '@mantine/notifications';
+import { twMerge } from 'tailwind-merge';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { twMerge } from 'tailwind-merge';
 import { isArray, toString, capitalize as capitalize$1, get, partial, omit } from 'lodash';
 import { useCookies } from 'react-cookie';
 import FileSaver from 'file-saver';
@@ -586,6 +586,36 @@ var LoginButtonVisibility;
     LoginButtonVisibility["LogoutOnly"] = "logoutOnly";
 })(LoginButtonVisibility || (LoginButtonVisibility = {}));
 
+/**
+ * Merges default and user values for Tailwind classnames.
+ *
+ * @param {RecordType} defaultValues - The default values for the classnames.
+ * @param {RecordType} userValues - The user-defined values for the classnames.
+ * @param {StylingMergeMode} mode - Whether to merge or replace the default and user values. Default is merge.
+ * @returns {RecordType} - The merged default and user values for the classnames.
+ */ const mergeDefaultTailwindClassnames = (defaultValues, { mode = 'merge', ...userValues })=>{
+    const defaultKeys = Object.keys(defaultValues);
+    const mergedValues = {
+        ...defaultValues
+    };
+    if (mode === 'merge') {
+        defaultKeys.forEach((key)=>{
+            if (userValues[key]) {
+                mergedValues[key] = twMerge(defaultValues[key], userValues[key]);
+            }
+        });
+    }
+    if (mode === 'replace') {
+        defaultKeys.forEach((key)=>{
+            if (userValues[key]) {
+                mergedValues[key] = userValues[key];
+            }
+        });
+    }
+    return mergedValues;
+};
+const mergeTailwindClassnameWithDefault = (userValues, defaultValues)=>userValues ? twMerge(defaultValues, userValues) : defaultValues;
+
 const handleSelected = async (isAuthenticated, router, referrer, endSession)=>{
     if (!isAuthenticated) await router.push(`Login?redirect=${referrer}`);
     else {
@@ -595,7 +625,7 @@ const handleSelected = async (isAuthenticated, router, referrer, endSession)=>{
 const LoginButton = ({ icon = /*#__PURE__*/ jsx(MdLogin, {
     className: "pl-1",
     size: '1.55rem'
-}), hideText = false, className = 'flex flex-nowrap items-center font-content text-secondary-contrast-lighter align-middle border-b-2 hover:border-accent border-transparent mx-2', tooltip, visibility })=>{
+}), hideText = false, className = undefined, tooltip, visibility })=>{
     const router = useRouter();
     const pathname = usePathname();
     const { endSession } = useContext(SessionContext) ?? {
@@ -604,6 +634,7 @@ const LoginButton = ({ icon = /*#__PURE__*/ jsx(MdLogin, {
     const userStatus = useCoreSelector((state)=>selectUserAuthStatus(state));
     const authenticated = isAuthenticated(userStatus);
     if (visibility === LoginButtonVisibility.LogoutOnly && !authenticated) return null;
+    const mergedClassname = mergeTailwindClassnameWithDefault(className, 'flex flex-nowrap items-center font-content text-secondary-contrast-lighter align-middle border-b-2 hover:border-accent border-transparent mx-2');
     return /*#__PURE__*/ jsx(Tooltip, {
         label: tooltip,
         position: "bottom",
@@ -615,7 +646,7 @@ const LoginButton = ({ icon = /*#__PURE__*/ jsx(MdLogin, {
         children: /*#__PURE__*/ jsx(UnstyledButton, {
             onClick: ()=>handleSelected(authenticated, router, pathname, endSession),
             children: /*#__PURE__*/ jsxs("div", {
-                className: `flex items-center font-medium font-heading ${className}`,
+                className: mergedClassname,
                 children: [
                     !hideText ? authenticated ? 'Logout' : 'Login' : null,
                     icon
@@ -879,8 +910,11 @@ var ContentType;
     ContentType["TextArray"] = "textArray";
     ContentType["Html"] = "html";
     ContentType["Markdown"] = "markdown";
+    ContentType["TextWithEmail"] = "textWithEmail";
+    ContentType["TextWithLink"] = "textWithLink";
+    ContentType["Link"] = "link";
 })(ContentType || (ContentType = {}));
-const TextContent = ({ text, className = 'inline text-base-contrast color-red-500 font-medium margin-block-start-1 margin-block-end-1', type = "text" })=>{
+const TextContent = ({ text, className = 'inline text-base-contrast color-red-500 font-medium margin-block-start-1 margin-block-end-1', type = "text", email = undefined, link = undefined })=>{
     switch(type){
         case "html":
             {
@@ -948,6 +982,48 @@ const TextContent = ({ text, className = 'inline text-base-contrast color-red-50
                     })
                 });
             }
+        case "textWithEmail":
+            {
+                const DEFAULT_STYLE = 'inline color-ink font-medium margin-block-start-1 margin-block-end-1';
+                const mergedClassname = className ? twMerge(DEFAULT_STYLE, className) : DEFAULT_STYLE;
+                const textString = Array.isArray(text) ? text.join('') : text;
+                return /*#__PURE__*/ jsx("div", {
+                    className: mergedClassname,
+                    children: /*#__PURE__*/ jsxs("span", {
+                        children: [
+                            textString,
+                            email && /*#__PURE__*/ jsx(Anchor, {
+                                classNames: {
+                                    root: mergedClassname
+                                },
+                                href: `mailto:${email}`,
+                                children: ` ${email}.`
+                            })
+                        ]
+                    })
+                });
+            }
+        case "textWithLink":
+            {
+                const DEFAULT_STYLE = 'inline color-ink font-medium margin-block-start-1 margin-block-end-1';
+                const mergedClassname = className ? twMerge(DEFAULT_STYLE, className) : DEFAULT_STYLE;
+                const textString = Array.isArray(text) ? text.join('') : text;
+                return /*#__PURE__*/ jsx("div", {
+                    className: mergedClassname,
+                    children: /*#__PURE__*/ jsxs("span", {
+                        children: [
+                            textString,
+                            link && /*#__PURE__*/ jsx(Anchor, {
+                                classNames: {
+                                    root: mergedClassname
+                                },
+                                href: link,
+                                children: ` ${email}.`
+                            })
+                        ]
+                    })
+                });
+            }
         case "text":
         default:
             return /*#__PURE__*/ jsx("div", {
@@ -959,28 +1035,6 @@ const TextContent = ({ text, className = 'inline text-base-contrast color-red-50
     }
 };
 
-const DEFAULT_STYLE = 'inline color-ink font-medium margin-block-start-1 margin-block-end-1';
-const ContactWithEmailContent = ({ text, email, className })=>{
-    const mergedClassname = className ? twMerge(DEFAULT_STYLE, className) : DEFAULT_STYLE;
-    const textString = Array.isArray(text) ? text.join(' ') : text;
-    // TODO: add better support for classnames
-    return /*#__PURE__*/ jsx("div", {
-        className: mergedClassname,
-        children: /*#__PURE__*/ jsxs("span", {
-            children: [
-                textString,
-                email && /*#__PURE__*/ jsx(Anchor, {
-                    classNames: {
-                        root: mergedClassname
-                    },
-                    href: `mailto:${email}`,
-                    children: ` ${email}.`
-                })
-            ]
-        })
-    });
-};
-
 const filterRedirect = (redirect)=>{
     let redirectPath = '';
     if (Array.isArray(redirect)) {
@@ -1036,10 +1090,7 @@ const LoginPanel = (loginConfig)=>{
                     loginConfig?.showCredentialsLogin && process.env.NODE_ENV === 'development' && /*#__PURE__*/ jsx(CredentialsLogin, {
                         handleLogin: handleCredentialsLogin
                     }),
-                    bottomContent?.map((content, index)=>content?.email ? /*#__PURE__*/ createElement(ContactWithEmailContent, {
-                            ...content,
-                            key: `bottomContent-${index}`
-                        }) : /*#__PURE__*/ createElement(TextContent, {
+                    bottomContent?.map((content, index)=>/*#__PURE__*/ createElement(TextContent, {
                             ...content,
                             key: `bottomContent-${index}`
                         }))
@@ -2376,35 +2427,6 @@ const extractClassName = (key, classNames)=>{
     return '';
 };
 
-/**
- * Merges default and user values for Tailwind classnames.
- *
- * @param {RecordType} defaultValues - The default values for the classnames.
- * @param {RecordType} userValues - The user-defined values for the classnames.
- * @param {StylingMergeMode} mode - Whether to merge or replace the default and user values. Default is merge.
- * @returns {RecordType} - The merged default and user values for the classnames.
- */ const mergeDefaultTailwindClassnames = (defaultValues, { mode = 'merge', ...userValues })=>{
-    const defaultKeys = Object.keys(defaultValues);
-    const mergedValues = {
-        ...defaultValues
-    };
-    if (mode === 'merge') {
-        defaultKeys.forEach((key)=>{
-            if (userValues[key]) {
-                mergedValues[key] = twMerge(defaultValues[key], userValues[key]);
-            }
-        });
-    }
-    if (mode === 'replace') {
-        defaultKeys.forEach((key)=>{
-            if (userValues[key]) {
-                mergedValues[key] = userValues[key];
-            }
-        });
-    }
-    return mergedValues;
-};
-
 const isPropertyKey = (value)=>{
     return typeof value === 'string' || typeof value === 'number' || typeof value === 'symbol';
 };
@@ -2455,8 +2477,9 @@ const FooterRowComponent = ({ item, rowClassname })=>{
         case 'Links':
             {
                 const links = item[itemType];
+                const mergedClassname = mergeTailwindClassnameWithDefault(className, 'flex space-x-1');
                 return /*#__PURE__*/ jsx("div", {
-                    className: `flex flex-no-wrap space-x-4 ${className ?? ''}`,
+                    className: mergedClassname,
                     children: links?.links.map((link, i)=>{
                         return /*#__PURE__*/ jsxs(React__default.Fragment, {
                             children: [
@@ -2591,19 +2614,20 @@ const Gen3Link = ({ className, href, linkType, text, showExternalIcon = false })
     });
 };
 
-const LoginAccountButton = ()=>{
+const LoginAccountButton = ({ className = undefined })=>{
     const router = useRouter();
     const handleSelected = async ()=>{
         await router.push('Profile');
     };
     const userStatus = useCoreSelector((state)=>selectUserAuthStatus(state));
     const userInfo = useCoreSelector((state)=>selectUserDetails(state));
+    const mergedClassname = mergeTailwindClassnameWithDefault(className, 'flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent');
     if (userStatus && isAuthenticated(userStatus)) {
         return /*#__PURE__*/ jsx(UnstyledButton, {
             className: "mx-2",
             onClick: ()=>handleSelected(),
             children: /*#__PURE__*/ jsx("div", {
-                className: "flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent",
+                className: mergedClassname,
                 children: userInfo?.username
             })
         });
@@ -2670,7 +2694,8 @@ const processTopBarItems = (items, showLogin)=>{
 };
 const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, classNames = {} })=>{
     const classNamesDefaults = {
-        root: 'flex justify-end items-center align-middle w-100 bg-secondary-lighter'
+        root: 'flex justify-end items-center align-middle w-100 bg-secondary-lighter',
+        login: 'font-content hover:border-accent'
     };
     const mergedClassnames = mergeDefaultTailwindClassnames(classNamesDefaults, classNames);
     return /*#__PURE__*/ jsx("div", {
@@ -2682,9 +2707,12 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, c
                 className: "flex items-center align-middle",
                 children: [
                     processTopBarItems(items, loginButtonVisibility === LoginButtonVisibility.Visible),
-                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsx(LoginAccountButton, {}) : null,
+                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsx(LoginAccountButton, {
+                        className: extractClassName('login', mergedClassnames)
+                    }) : null,
                     loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsx(LoginButton, {
-                        visibility: loginButtonVisibility
+                        visibility: loginButtonVisibility,
+                        className: extractClassName('login', mergedClassnames)
                     }) : null
                 ]
             })
@@ -2713,7 +2741,7 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, c
 
 const NavigationLogo = ({ src, title, description, width, height, divider = false, basePath = '', classNames = {} })=>{
     const classNamesDefaults = {
-        root: 'relative flex py-2 justify-start items-center align-middle font-heading font-bold tracking-wide text-xl ml-[5px] mr-[20px]',
+        root: 'relative flex py-0 justify-start items-center align-middle font-heading font-bold tracking-wide text-xl ml-[5px] mr-[20px]',
         link: 'relative object-contain',
         logo: 'px-3',
         title: 'border-solid border-base-darker ml-1 mr-3',
@@ -2761,9 +2789,10 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
  * @param name - the name of the button
  * @param iconHeight - the height of the icon
  * @param classNames - the class names to use for root, label, icon/tooltip and arrow'
- */ const NavigationBarButton = ({ tooltip, icon, href, name, iconHeight = '27px', classNames = {} })=>{
+ * @param noBasePath - set to true to avoid prepending a basePath to the link
+ */ const NavigationBarButton = ({ tooltip, icon, href, name, iconHeight = '27px', classNames = {}, noBasePath = false })=>{
     const classNamesDefaults = {
-        root: `flex flex-col flex-nowrap px-3 py-2 pt-4 items-center align-center text-primary hover:text-accent opacity-80 hover:opacity-100`,
+        root: 'flex flex-col flex-nowrap px-3 py-2 pt-4 items-center align-center text-primary hover:text-accent opacity-80 hover:opacity-100',
         label: 'pt-1.5 body-typo font-heading text-sm text-nowrap',
         icon: 'mt-0.5 ml-1',
         ...TooltipStyle
@@ -2772,13 +2801,31 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
     return /*#__PURE__*/ jsx(React__default.Fragment, {
         children: /*#__PURE__*/ jsx(Tooltip, {
             label: tooltip,
+            disabled: !tooltip,
             multiline: true,
             position: "bottom",
             arrowSize: 8,
             withArrow: true,
             zIndex: 1000,
             w: 220,
-            children: /*#__PURE__*/ jsx(Link, {
+            children: noBasePath ? /*#__PURE__*/ jsx("a", {
+                href: `${href}`,
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: extractClassName('root', mergedClassnames),
+                    role: "navigation",
+                    children: [
+                        /*#__PURE__*/ jsx(Icon, {
+                            height: iconHeight,
+                            icon: icon,
+                            className: extractClassName('icon', mergedClassnames)
+                        }),
+                        /*#__PURE__*/ jsx("p", {
+                            className: extractClassName('label', mergedClassnames),
+                            children: name
+                        })
+                    ]
+                })
+            }) : /*#__PURE__*/ jsx(Link, {
                 href: `${// need this to preserve running in hybrid mode
                 process.env.NEXT_PUBLIC_PORTAL_BASENAME && process.env.NEXT_PUBLIC_PORTAL_BASENAME !== '/' ? process.env.NEXT_PUBLIC_PORTAL_BASENAME : ''}${href}`,
                 children: /*#__PURE__*/ jsxs("div", {
@@ -2848,7 +2895,8 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
                             icon: x.icon,
                             href: x.href,
                             name: x.name,
-                            classNames: x.classNames
+                            classNames: x.classNames,
+                            noBasePath: x?.noBasePath
                         })
                     }, `${x.name}-${index}`);
                 })
@@ -3015,6 +3063,7 @@ const HorizontalNavigationBar = ({ actions, items, logo = undefined, loginIcon =
  * @param {string} props.type - The type of header to render. Default value is 'original'.
  * @returns {JSX.Element} - The rendered Header component.
  */ const Header = ({ top, navigation, banners, type = 'original' })=>{
+    console.log('top', top);
     return type === 'horizontal' ? /*#__PURE__*/ jsxs("div", {
         className: "w-full",
         children: [