@stack-spot/portal-layout 2.23.3 → 2.24.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.24.1](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.24.0...portal-layout@v2.24.1) (2025-02-06)
+
+
+### Bug Fixes
+
+* sidebar alignment 2212 ([#690](https://github.com/stack-spot/portal-commons/issues/690)) ([f684550](https://github.com/stack-spot/portal-commons/commit/f684550509128d206f60277dc67636cea1753e78))
+
+## [2.24.0](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.23.3...portal-layout@v2.24.0) (2025-02-05)
+
+
+### Features
+
+* conditional render using the userImage parameter ([#682](https://github.com/stack-spot/portal-commons/issues/682)) ([420ef30](https://github.com/stack-spot/portal-commons/commit/420ef30665f80ddb191266eac90ca918a6948a2d))
+
 ## [2.23.3](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.23.2...portal-layout@v2.23.3) (2025-02-03)
 
 

package/dist/components/Header.d.ts

@@ -14,6 +14,10 @@ export interface HeaderProps {
      * The username to show in the user menu.
      */
     userName?: string;
+    /**
+     * The user image to show in the user menu.
+     */
+    userImage?: string;
     /**
      * The email to show in the user menu.
      */
@@ -43,5 +47,5 @@ export interface HeaderProps {
  * The page header.
  * @param props the React props for the header {@link HeaderProps}.
  */
-export declare const Header: ({ logo, logoHref, center, right, userName, email, options, portalSwitch, showNotificationCenter }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Header: ({ logo, logoHref, center, right, userName, email, options, portalSwitch, showNotificationCenter, userImage }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Header.d.ts.map

package/dist/components/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;AAGhF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAGtE,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAC9C;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,sGAAuG,WAAW,4CAepI,CAAA"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;AAGhF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAGtE,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAC9C;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,iHAUJ,WAAW,4CAezB,CAAA"}

package/dist/components/Header.js

@@ -9,10 +9,10 @@ import { UserMenu } from './UserMenu.js';
  * The page header.
  * @param props the React props for the header {@link HeaderProps}.
  */
-export const Header = ({ logo, logoHref, center, right, userName, email, options, portalSwitch, showNotificationCenter }) => {
+export const Header = ({ logo, logoHref, center, right, userName, email, options, portalSwitch, showNotificationCenter, userImage }) => {
     const Link = useAnchorTag();
     return (_jsxs(_Fragment, { children: [portalSwitch ?
                 _jsx(PortalSwitcher, { portals: portalSwitch }) :
-                _jsx(Link, { href: logoHref, title: "Home", children: logo ?? _jsx(Logo, { style: { width: 130 } }) }), _jsx(Flex, { flex: 1, children: center }), right, showNotificationCenter && _jsx(NotificationCenter, {}), userName && _jsx(UserMenu, { userName: userName, email: email, options: options })] }));
+                _jsx(Link, { href: logoHref, title: "Home", children: logo ?? _jsx(Logo, { style: { width: 130 } }) }), _jsx(Flex, { flex: 1, children: center }), right, showNotificationCenter && _jsx(NotificationCenter, {}), userName && _jsx(UserMenu, { userName: userName, email: email, options: options, userImage: userImage })] }));
 };
 //# sourceMappingURL=Header.js.map

package/dist/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAA;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAA;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAyCrC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,sBAAsB,EAAe,EAAE,EAAE;IACvI,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAE3B,OAAO,CACL,8BACG,YAAY,CAAC,CAAC;gBACb,KAAC,cAAc,IAAC,OAAO,EAAE,YAAY,GAAI,CAAC,CAAC;gBAC3C,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,YAAE,IAAI,IAAI,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,GAAI,GAAQ,EAErF,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,YAAG,MAAM,GAAQ,EAC7B,KAAK,EACL,sBAAsB,IAAI,KAAC,kBAAkB,KAAG,EAChD,QAAQ,IAAI,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,IAC5E,CACJ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAA;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAA;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AA6CrC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,EACP,YAAY,EACZ,sBAAsB,EACtB,SAAS,EAAe,EAAE,EAAE;IAC5B,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAE3B,OAAO,CACL,8BACG,YAAY,CAAC,CAAC;gBACb,KAAC,cAAc,IAAC,OAAO,EAAE,YAAY,GAAI,CAAC,CAAC;gBAC3C,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,YAAE,IAAI,IAAI,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,GAAI,GAAQ,EAErF,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,YAAG,MAAM,GAAQ,EAC7B,KAAK,EACL,sBAAsB,IAAI,KAAC,kBAAkB,KAAG,EAChD,QAAQ,IAAI,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,GAAI,IAClG,CACJ,CAAA;AACH,CAAC,CAAA"}

package/dist/components/UserMenu.d.ts

@@ -4,6 +4,10 @@ interface Props {
      * The user name.
      */
     userName: string;
+    /**
+     * The user image to show in the user menu.
+     */
+    userImage?: string;
     /**
      * The user email.
      */
@@ -17,6 +21,6 @@ interface Props {
  * Renders the user menu.
  * @param props the component's props {@link Props}.
  */
-export declare const UserMenu: ({ userName, email, options }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const UserMenu: ({ userName, email, options, userImage }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=UserMenu.d.ts.map

package/dist/components/UserMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../../src/components/UserMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;AAO/F,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;CACvC;AAsDD;;;GAGG;AACH,eAAO,MAAM,QAAQ,iCAAkC,KAAK,4CAoC3D,CAAA"}
+{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../../src/components/UserMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;AAO/F,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;CACvC;AAsDD;;;GAGG;AACH,eAAO,MAAM,QAAQ,4CAA6C,KAAK,4CAwCtE,CAAA"}

package/dist/components/UserMenu.js

@@ -50,17 +50,17 @@ const UserMenuBox = styled.div `
     transition: transform ease-out 0.3s;
   }
 `;
-const UserMenuHeader = ({ userName, email }) => (_jsxs("div", { className: "user-menu-header", children: [_jsx(Avatar, { size: "xs", children: userName }), _jsx(Text, { appearance: "body1", className: "username", children: userName }), email && _jsx(Text, { appearance: "microtext1", className: "email", colorScheme: "light.700", children: email })] }));
+const UserMenuHeader = ({ userName, email, userImage }) => (_jsxs("div", { className: "user-menu-header", children: [_jsx(Avatar, { size: "xs", children: userImage ? (_jsx("img", { src: userImage })) : userName }), _jsx(Text, { appearance: "body1", className: "username", children: userName }), email && _jsx(Text, { appearance: "microtext1", className: "email", colorScheme: "light.700", children: email })] }));
 /**
  * Renders the user menu.
  * @param props the component's props {@link Props}.
  */
-export const UserMenu = ({ userName, email, options }) => {
+export const UserMenu = ({ userName, email, options, userImage }) => {
     const t = useTranslate(dictionary);
     const [visible, setVisible] = useState(false);
     useEffect(() => userMenuManager.subscribe(setVisible), []);
-    return (_jsxs(UserMenuBox, { children: [_jsx(LinkBox, { as: "button", onClick: () => setVisible(v => !v), "aria-controls": USER_MENU_ID, "aria-expanded": visible, "aria-label": interpolate(t.accountMenu, [userName]), children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Avatar, { size: "xs", "aria-label": interpolate(t.accountMenu, [userName]), children: userName }), _jsx(IconBox, { colorIcon: "inverse.500", className: "chevron", style: visible ? { transform: 'rotate(180deg)' } : undefined, children: _jsx(ChevronDown, {}) })] }) }), options?.length
-                ? _jsx(SelectionList, { id: USER_MENU_ID, visible: visible, before: _jsx(UserMenuHeader, { userName: userName, email: email }), items: options, onHide: () => setVisible(false), maxHeight: "600px" })
+    return (_jsxs(UserMenuBox, { children: [_jsx(LinkBox, { as: "button", onClick: () => setVisible(v => !v), "aria-controls": USER_MENU_ID, "aria-expanded": visible, "aria-label": interpolate(t.accountMenu, [userName]), children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Avatar, { size: "xs", "aria-label": interpolate(t.accountMenu, [userName]), children: userImage ? (_jsx("img", { src: userImage })) : userName }), _jsx(IconBox, { colorIcon: "inverse.500", className: "chevron", style: visible ? { transform: 'rotate(180deg)' } : undefined, children: _jsx(ChevronDown, {}) })] }) }), options?.length
+                ? _jsx(SelectionList, { id: USER_MENU_ID, visible: visible, before: _jsx(UserMenuHeader, { userName: userName, email: email, userImage: userImage }), items: options, onHide: () => setVisible(false), maxHeight: "600px" })
                 : null] }));
 };
 const dictionary = {

package/dist/components/UserMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserMenu.js","sourceRoot":"","sources":["../../src/components/UserMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"UserMenu.js","sourceRoot":"","sources":["../../src/components/UserMenu.tsx"],"names":[],"mappings":"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"}

package/dist/layout.css

@@ -173,6 +173,7 @@ body {
 
 #menuSections .sections-footer {
   padding: 16px;
+  padding-left: 8px;
 }
 
 #menuSections .toggle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "2.23.3",
+  "version": "2.24.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Header.tsx

@@ -20,6 +20,10 @@ export interface HeaderProps {
    * The username to show in the user menu.
    */
   userName?: string,
+  /**
+   * The user image to show in the user menu.
+   */
+  userImage?: string,
   /**
    * The email to show in the user menu.
    */
@@ -50,7 +54,17 @@ export interface HeaderProps {
  * The page header.
  * @param props the React props for the header {@link HeaderProps}.
  */
-export const Header = ({ logo, logoHref, center, right, userName, email, options, portalSwitch, showNotificationCenter }: HeaderProps) => {
+export const Header = ({
+  logo,
+  logoHref,
+  center,
+  right,
+  userName,
+  email,
+  options,
+  portalSwitch,
+  showNotificationCenter,
+  userImage }: HeaderProps) => {
   const Link = useAnchorTag()
 
   return (
@@ -62,7 +76,7 @@ export const Header = ({ logo, logoHref, center, right, userName, email, options
       <Flex flex={1}>{center}</Flex>
       {right}
       {showNotificationCenter && <NotificationCenter />}
-      {userName && <UserMenu userName={userName} email={email} options={options} />}
+      {userName && <UserMenu userName={userName} email={email} options={options} userImage={userImage} />}
     </>
   )
 }

package/src/components/UserMenu.tsx

@@ -13,6 +13,10 @@ interface Props {
    * The user name.
    */
   userName: string,
+  /**
+   * The user image to show in the user menu.
+   */
+  userImage?: string,
   /**
    * The user email.
    */
@@ -67,9 +71,9 @@ const UserMenuBox = styled.div`
   }
 `
 
-const UserMenuHeader = ({ userName, email }: Omit<Props, 'options'>) => (
+const UserMenuHeader = ({ userName, email, userImage }: Omit<Props, 'options'>) => (
   <div className="user-menu-header">
-    <Avatar size="xs">{userName}</Avatar>
+    <Avatar size="xs">{userImage ? (<img src={userImage} />) : userName}</Avatar>
     <Text appearance="body1" className="username">{userName}</Text>
     {email && <Text appearance="microtext1" className="email" colorScheme="light.700">{email}</Text>}
   </div>
@@ -79,12 +83,11 @@ const UserMenuHeader = ({ userName, email }: Omit<Props, 'options'>) => (
  * Renders the user menu.
  * @param props the component's props {@link Props}.
  */
-export const UserMenu = ({ userName, email, options }: Props) => {
+export const UserMenu = ({ userName, email, options, userImage }: Props) => {
   const t = useTranslate(dictionary)
   const [visible, setVisible] = useState(false)
 
   useEffect(() => userMenuManager.subscribe(setVisible), [])
-
   return (
     <UserMenuBox>
       <LinkBox
@@ -95,7 +98,12 @@ export const UserMenu = ({ userName, email, options }: Props) => {
         aria-label={interpolate(t.accountMenu, [userName])}
       >
         <Flex alignItems="center">
-          <Avatar size="xs" aria-label={interpolate(t.accountMenu, [userName])}>{userName}</Avatar>
+          <Avatar size="xs"
+            aria-label={
+              interpolate(t.accountMenu, [userName])}>
+            {userImage ? (
+              <img src={userImage} />
+            ) : userName}</Avatar>
           <IconBox colorIcon="inverse.500" className="chevron" style={visible ? { transform: 'rotate(180deg)' } : undefined}>
             <ChevronDown />
           </IconBox>
@@ -106,7 +114,7 @@ export const UserMenu = ({ userName, email, options }: Props) => {
         ? <SelectionList
           id={USER_MENU_ID}
           visible={visible}
-          before={<UserMenuHeader userName={userName} email={email} />}
+          before={<UserMenuHeader userName={userName} email={email} userImage={userImage} />}
           items={options!}
           onHide={() => setVisible(false)}
           maxHeight="600px"

package/src/layout.css

@@ -173,6 +173,7 @@ body {
 
 #menuSections .sections-footer {
   padding: 16px;
+  padding-left: 8px;
 }
 
 #menuSections .toggle,