@gen3/frontend 0.10.55 → 0.10.56

package/dist/cjs/index.js

@@ -12,10 +12,10 @@ require('swr');
 var cookiesNext = require('cookies-next');
 var jose = require('jose');
 var notifications = require('@mantine/notifications');
+var tailwindMerge = require('tailwind-merge');
 var iconsReact = require('@tabler/icons-react');
 var Markdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
-var tailwindMerge = require('tailwind-merge');
 var lodash = require('lodash');
 var reactCookie = require('react-cookie');
 var FileSaver = require('file-saver');
@@ -606,6 +606,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] = tailwindMerge.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 ? tailwindMerge.twMerge(defaultValues, userValues) : defaultValues;
+
 const handleSelected = async (isAuthenticated, router, referrer, endSession)=>{
     if (!isAuthenticated) await router.push(`Login?redirect=${referrer}`);
     else {
@@ -615,7 +645,7 @@ const handleSelected = async (isAuthenticated, router, referrer, endSession)=>{
 const LoginButton = ({ icon = /*#__PURE__*/ jsxRuntime.jsx(md.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$1 = router.useRouter();
     const pathname = navigation.usePathname();
     const { endSession } = React.useContext(SessionContext) ?? {
@@ -624,6 +654,7 @@ const LoginButton = ({ icon = /*#__PURE__*/ jsxRuntime.jsx(md.MdLogin, {
     const userStatus = core.useCoreSelector((state)=>core.selectUserAuthStatus(state));
     const authenticated = core.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__*/ jsxRuntime.jsx(core$1.Tooltip, {
         label: tooltip,
         position: "bottom",
@@ -635,7 +666,7 @@ const LoginButton = ({ icon = /*#__PURE__*/ jsxRuntime.jsx(md.MdLogin, {
         children: /*#__PURE__*/ jsxRuntime.jsx(core$1.UnstyledButton, {
             onClick: ()=>handleSelected(authenticated, router$1, pathname, endSession),
             children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: `flex items-center font-medium font-heading ${className}`,
+                className: mergedClassname,
                 children: [
                     !hideText ? authenticated ? 'Logout' : 'Login' : null,
                     icon
@@ -899,8 +930,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":
             {
@@ -968,6 +1002,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 ? tailwindMerge.twMerge(DEFAULT_STYLE, className) : DEFAULT_STYLE;
+                const textString = Array.isArray(text) ? text.join('') : text;
+                return /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: mergedClassname,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                        children: [
+                            textString,
+                            email && /*#__PURE__*/ jsxRuntime.jsx(core$1.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 ? tailwindMerge.twMerge(DEFAULT_STYLE, className) : DEFAULT_STYLE;
+                const textString = Array.isArray(text) ? text.join('') : text;
+                return /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: mergedClassname,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                        children: [
+                            textString,
+                            link && /*#__PURE__*/ jsxRuntime.jsx(core$1.Anchor, {
+                                classNames: {
+                                    root: mergedClassname
+                                },
+                                href: link,
+                                children: ` ${email}.`
+                            })
+                        ]
+                    })
+                });
+            }
         case "text":
         default:
             return /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -979,28 +1055,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 ? tailwindMerge.twMerge(DEFAULT_STYLE, className) : DEFAULT_STYLE;
-    const textString = Array.isArray(text) ? text.join(' ') : text;
-    // TODO: add better support for classnames
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: mergedClassname,
-        children: /*#__PURE__*/ jsxRuntime.jsxs("span", {
-            children: [
-                textString,
-                email && /*#__PURE__*/ jsxRuntime.jsx(core$1.Anchor, {
-                    classNames: {
-                        root: mergedClassname
-                    },
-                    href: `mailto:${email}`,
-                    children: ` ${email}.`
-                })
-            ]
-        })
-    });
-};
-
 const filterRedirect = (redirect)=>{
     let redirectPath = '';
     if (Array.isArray(redirect)) {
@@ -1056,10 +1110,7 @@ const LoginPanel = (loginConfig)=>{
                     loginConfig?.showCredentialsLogin && process.env.NODE_ENV === 'development' && /*#__PURE__*/ jsxRuntime.jsx(CredentialsLogin, {
                         handleLogin: handleCredentialsLogin
                     }),
-                    bottomContent?.map((content, index)=>content?.email ? /*#__PURE__*/ React.createElement(ContactWithEmailContent, {
-                            ...content,
-                            key: `bottomContent-${index}`
-                        }) : /*#__PURE__*/ React.createElement(TextContent, {
+                    bottomContent?.map((content, index)=>/*#__PURE__*/ React.createElement(TextContent, {
                             ...content,
                             key: `bottomContent-${index}`
                         }))
@@ -2396,35 +2447,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] = tailwindMerge.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';
 };
@@ -2475,8 +2497,9 @@ const FooterRowComponent = ({ item, rowClassname })=>{
         case 'Links':
             {
                 const links = item[itemType];
+                const mergedClassname = mergeTailwindClassnameWithDefault(className, 'flex space-x-1');
                 return /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: `flex flex-no-wrap space-x-4 ${className ?? ''}`,
+                    className: mergedClassname,
                     children: links?.links.map((link, i)=>{
                         return /*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
                             children: [
@@ -2611,19 +2634,20 @@ const Gen3Link = ({ className, href, linkType, text, showExternalIcon = false })
     });
 };
 
-const LoginAccountButton = ()=>{
+const LoginAccountButton = ({ className = undefined })=>{
     const router$1 = router.useRouter();
     const handleSelected = async ()=>{
         await router$1.push('Profile');
     };
     const userStatus = core.useCoreSelector((state)=>core.selectUserAuthStatus(state));
     const userInfo = core.useCoreSelector((state)=>core.selectUserDetails(state));
+    const mergedClassname = mergeTailwindClassnameWithDefault(className, 'flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent');
     if (userStatus && core.isAuthenticated(userStatus)) {
         return /*#__PURE__*/ jsxRuntime.jsx(core$1.UnstyledButton, {
             className: "mx-2",
             onClick: ()=>handleSelected(),
             children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: "flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent",
+                className: mergedClassname,
                 children: userInfo?.username
             })
         });
@@ -2690,7 +2714,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__*/ jsxRuntime.jsx("div", {
@@ -2702,9 +2727,12 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, c
                 className: "flex items-center align-middle",
                 children: [
                     processTopBarItems(items, loginButtonVisibility === LoginButtonVisibility.Visible),
-                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsxRuntime.jsx(LoginAccountButton, {}) : null,
+                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsxRuntime.jsx(LoginAccountButton, {
+                        className: extractClassName('login', mergedClassnames)
+                    }) : null,
                     loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsxRuntime.jsx(LoginButton, {
-                        visibility: loginButtonVisibility
+                        visibility: loginButtonVisibility,
+                        className: extractClassName('login', mergedClassnames)
                     }) : null
                 ]
             })
@@ -2733,7 +2761,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',
@@ -2781,9 +2809,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
@@ -2792,13 +2821,31 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
     return /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
         children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
             label: tooltip,
+            disabled: !tooltip,
             multiline: true,
             position: "bottom",
             arrowSize: 8,
             withArrow: true,
             zIndex: 1000,
             w: 220,
-            children: /*#__PURE__*/ jsxRuntime.jsx(Link, {
+            children: noBasePath ? /*#__PURE__*/ jsxRuntime.jsx("a", {
+                href: `${href}`,
+                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: extractClassName('root', mergedClassnames),
+                    role: "navigation",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                            height: iconHeight,
+                            icon: icon,
+                            className: extractClassName('icon', mergedClassnames)
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("p", {
+                            className: extractClassName('label', mergedClassnames),
+                            children: name
+                        })
+                    ]
+                })
+            }) : /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsxs("div", {
@@ -2868,7 +2915,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}`);
                 })
@@ -3035,6 +3083,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__*/ jsxRuntime.jsxs("div", {
         className: "w-full",
         children: [