@strapi/admin 0.0.0-experimental.62ce06180fe9a772eaeb3d43d238b26644f39f7c → 0.0.0-experimental.6340da17068c3bed7fb006e7bcc554c71129e282

package/dist/admin/admin/src/components/MainNav/NavLink.mjs

@@ -0,0 +1,140 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { Tooltip, AccessibleIcon, Badge } from '@strapi/design-system';
+import { NavLink as NavLink$1 } from 'react-router-dom';
+import { styled, css } from 'styled-components';
+
+const isExternalLink = (to)=>typeof to === 'string' && (to.startsWith('http://') || to.startsWith('https://'));
+/* -------------------------------------------------------------------------------------------------
+ * Link
+ * -----------------------------------------------------------------------------------------------*/ const MainNavLinkStyles = css`
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.neutral0};
+  color: ${({ theme })=>theme.colors.neutral500};
+  position: relative;
+  width: 100%;
+  padding-block: 0.4rem;
+  padding-inline: 1.2rem;
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    padding-block: 0.6rem;
+    padding-inline: 0.6rem;
+  }
+
+  &:hover {
+    svg path {
+      fill: ${({ theme })=>theme.colors.neutral600};
+    }
+    background: ${({ theme })=>theme.colors.neutral100};
+  }
+
+  &.active {
+    svg path {
+      fill: ${({ theme })=>theme.colors.primary600};
+    }
+    background: ${({ theme })=>theme.colors.primary100};
+  }
+`;
+const MainNavLinkWrapper = styled(NavLink$1)`
+  ${MainNavLinkStyles}
+`;
+const MainNavLinkAnchor = styled.a`
+  ${MainNavLinkStyles}
+`;
+const MainNavButtonStyles = css`
+  padding-block: 1rem;
+  padding-inline: 1rem;
+`;
+const MainNavButtonWrapper = styled(MainNavLinkWrapper)`
+  ${MainNavButtonStyles}
+`;
+const MainNavButtonAnchor = styled(MainNavLinkAnchor)`
+  ${MainNavButtonStyles}
+`;
+const LinkImpl = ({ children, to, ...props })=>{
+    if (isExternalLink(to)) {
+        return /*#__PURE__*/ jsx(MainNavLinkAnchor, {
+            href: to,
+            ...props,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsx(MainNavLinkWrapper, {
+        to: to,
+        ...props,
+        children: children
+    });
+};
+const NavButtonImpl = ({ children, to, ...props })=>{
+    if (isExternalLink(to)) {
+        return /*#__PURE__*/ jsx(MainNavButtonAnchor, {
+            href: to,
+            ...props,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsx(MainNavButtonWrapper, {
+        to: to,
+        ...props,
+        children: children
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Tooltip
+ * -----------------------------------------------------------------------------------------------*/ const TooltipImpl = ({ children, label, position = 'right' })=>{
+    return /*#__PURE__*/ jsx(Tooltip, {
+        side: position,
+        label: label,
+        delayDuration: 0,
+        children: /*#__PURE__*/ jsx("span", {
+            children: children
+        })
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Icon
+ * -----------------------------------------------------------------------------------------------*/ const IconImpl = ({ label, children })=>{
+    if (!children) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(AccessibleIcon, {
+        label: label,
+        children: children
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Badge
+ * -----------------------------------------------------------------------------------------------*/ const CustomBadge = styled(Badge)`
+  /* override default badge styles to change the border radius of the Base element in the Design System */
+  border-radius: ${({ theme })=>theme.spaces[10]};
+  height: 2rem;
+`;
+const BadgeImpl = ({ children, label, ...props })=>{
+    if (!children) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(CustomBadge, {
+        position: "absolute",
+        top: "-0.8rem",
+        left: "1.7rem",
+        "aria-label": label,
+        active: false,
+        ...props,
+        children: children
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * EXPORTS
+ * -----------------------------------------------------------------------------------------------*/ const NavLink = {
+    Link: LinkImpl,
+    NavButton: NavButtonImpl,
+    Tooltip: TooltipImpl,
+    Icon: IconImpl,
+    Badge: BadgeImpl
+};
+
+export { NavLink };
+//# sourceMappingURL=NavLink.mjs.map

package/dist/admin/admin/src/components/MainNav/NavLink.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavLink.mjs","sources":["../../../../../../admin/src/components/MainNav/NavLink.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Tooltip,\n  TooltipProps as DSTooltipProps,\n  Badge,\n  BadgeProps,\n  AccessibleIcon,\n} from '@strapi/design-system';\nimport { NavLink as RouterLink, LinkProps } from 'react-router-dom';\nimport { styled, css } from 'styled-components';\n\nconst isExternalLink = (to: LinkProps['to']) =>\n  typeof to === 'string' && (to.startsWith('http://') || to.startsWith('https://'));\n\n/* -------------------------------------------------------------------------------------------------\n * Link\n * -----------------------------------------------------------------------------------------------*/\nconst MainNavLinkStyles = css`\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral500};\n  position: relative;\n  width: 100%;\n  padding-block: 0.4rem;\n  padding-inline: 1.2rem;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    padding-block: 0.6rem;\n    padding-inline: 0.6rem;\n  }\n\n  &:hover {\n    svg path {\n      fill: ${({ theme }) => theme.colors.neutral600};\n    }\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  &.active {\n    svg path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n    background: ${({ theme }) => theme.colors.primary100};\n  }\n`;\n\nconst MainNavLinkWrapper = styled(RouterLink)`\n  ${MainNavLinkStyles}\n`;\n\nconst MainNavLinkAnchor = styled.a`\n  ${MainNavLinkStyles}\n`;\n\nconst MainNavButtonStyles = css`\n  padding-block: 1rem;\n  padding-inline: 1rem;\n`;\n\nconst MainNavButtonWrapper = styled(MainNavLinkWrapper)`\n  ${MainNavButtonStyles}\n`;\n\nconst MainNavButtonAnchor = styled(MainNavLinkAnchor)`\n  ${MainNavButtonStyles}\n`;\n\nconst LinkImpl = ({ children, to, ...props }: LinkProps) => {\n  if (isExternalLink(to)) {\n    return (\n      <MainNavLinkAnchor href={to as string} {...props}>\n        {children}\n      </MainNavLinkAnchor>\n    );\n  }\n  return (\n    <MainNavLinkWrapper to={to} {...props}>\n      {children}\n    </MainNavLinkWrapper>\n  );\n};\n\nconst NavButtonImpl = ({ children, to, ...props }: LinkProps) => {\n  if (isExternalLink(to)) {\n    return (\n      <MainNavButtonAnchor href={to as string} {...props}>\n        {children}\n      </MainNavButtonAnchor>\n    );\n  }\n\n  return (\n    <MainNavButtonWrapper to={to} {...props}>\n      {children}\n    </MainNavButtonWrapper>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Tooltip\n * -----------------------------------------------------------------------------------------------*/\nconst TooltipImpl = ({ children, label, position = 'right' }: NavLink.TooltipProps) => {\n  return (\n    <Tooltip side={position} label={label} delayDuration={0}>\n      <span>{children}</span>\n    </Tooltip>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Icon\n * -----------------------------------------------------------------------------------------------*/\nconst IconImpl = ({ label, children }: { label: string; children: React.ReactNode }) => {\n  if (!children) {\n    return null;\n  }\n  return <AccessibleIcon label={label}>{children}</AccessibleIcon>;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Badge\n * -----------------------------------------------------------------------------------------------*/\nconst CustomBadge = styled(Badge)`\n  /* override default badge styles to change the border radius of the Base element in the Design System */\n  border-radius: ${({ theme }) => theme.spaces[10]};\n  height: 2rem;\n`;\n\nconst BadgeImpl = ({ children, label, ...props }: NavLink.NavBadgeProps) => {\n  if (!children) {\n    return null;\n  }\n  return (\n    <CustomBadge\n      position=\"absolute\"\n      top=\"-0.8rem\"\n      left=\"1.7rem\"\n      aria-label={label}\n      active={false}\n      {...props}\n    >\n      {children}\n    </CustomBadge>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EXPORTS\n * -----------------------------------------------------------------------------------------------*/\n\nconst NavLink = {\n  Link: LinkImpl,\n  NavButton: NavButtonImpl,\n  Tooltip: TooltipImpl,\n  Icon: IconImpl,\n  Badge: BadgeImpl,\n};\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace NavLink {\n  export interface NavBadgeProps extends BadgeProps {\n    children: React.ReactNode;\n    label: string;\n  }\n\n  export interface TooltipProps {\n    children: React.ReactNode;\n    label?: string;\n    position?: DSTooltipProps['side'];\n  }\n}\n\nexport { NavLink };\n"],"names":["isExternalLink","to","startsWith","MainNavLinkStyles","css","theme","borderRadius","colors","neutral0","neutral500","breakpoints","medium","neutral600","neutral100","primary600","primary100","MainNavLinkWrapper","styled","RouterLink","MainNavLinkAnchor","a","MainNavButtonStyles","MainNavButtonWrapper","MainNavButtonAnchor","LinkImpl","children","props","_jsx","href","NavButtonImpl","TooltipImpl","label","position","Tooltip","side","delayDuration","span","IconImpl","AccessibleIcon","CustomBadge","Badge","spaces","BadgeImpl","top","left","aria-label","active","NavLink","Link","NavButton","Icon"],"mappings":"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"}

package/dist/admin/admin/src/components/MainNav/NavUser.js

@@ -0,0 +1,155 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var styled = require('styled-components');
+var Auth = require('../../features/Auth.js');
+var users = require('../../utils/users.js');
+
+const MenuTrigger = styled.styled(designSystem.Menu.Trigger)`
+  padding: 0;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    width: 4rem;
+    height: 4rem;
+    justify-content: center;
+  }
+`;
+const MenuIcon = styled.styled(designSystem.Flex)`
+  height: ${({ theme })=>theme.spaces[7]};
+  width: ${({ theme })=>theme.spaces[7]};
+  border: none;
+  border-radius: 50%;
+  padding: 0;
+  overflow: hidden;
+`;
+const MenuContent = styled.styled(designSystem.Menu.Content)`
+  max-height: fit-content;
+  width: 200px;
+`;
+const UserInfo = styled.styled(designSystem.Flex)`
+  && {
+    padding: ${({ theme })=>theme.spaces[3]};
+  }
+  align-items: flex-start;
+`;
+const BadgeWrapper = styled.styled(designSystem.Flex)`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme })=>theme.spaces[1]};
+
+  width: 100%;
+`;
+const StyledTypography = styled.styled(designSystem.Typography)`
+  word-break: break-word;
+  margin-bottom: ${({ theme })=>theme.spaces[3]};
+`;
+const NavUser = ({ initials, showDisplayName = false, children, ...props })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const navigate = reactRouterDom.useNavigate();
+    const user = Auth.useAuth('User', (state)=>state.user);
+    const logout = Auth.useAuth('Logout', (state)=>state.logout);
+    const userDisplayName = users.getDisplayName(user);
+    const handleProfile = ()=>{
+        const redirection = '/me';
+        navigate(redirection);
+    };
+    const handleSessions = ()=>{
+        navigate('/me/sessions');
+    };
+    const handleLogout = ()=>{
+        const redirection = '/auth/login';
+        logout();
+        navigate(redirection);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        ...props,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(MenuTrigger, {
+                    endIcon: null,
+                    fullWidth: true,
+                    justifyContent: "flex-start",
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        alignItems: "center",
+                        gap: 3,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(MenuIcon, {
+                                justifyContent: "center",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Avatar.Item, {
+                                    delayMs: 0,
+                                    fallback: initials || users.getInitials(user)
+                                })
+                            }),
+                            showDisplayName ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                variant: "omega",
+                                children: children || userDisplayName
+                            }) : /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                                tag: "span",
+                                children: children || userDisplayName
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(MenuContent, {
+                    popoverPlacement: "top-start",
+                    zIndex: 3,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs(UserInfo, {
+                            direction: "column",
+                            gap: 0,
+                            alignItems: "flex-start",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    variant: "omega",
+                                    fontWeight: "bold",
+                                    textTransform: "none",
+                                    children: children || userDisplayName
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(StyledTypography, {
+                                    variant: "pi",
+                                    textColor: "neutral600",
+                                    children: user?.email
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(BadgeWrapper, {
+                                    children: user?.roles?.map((role)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Badge, {
+                                            children: role.name
+                                        }, role.id))
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                            onSelect: handleProfile,
+                            children: formatMessage({
+                                id: 'global.profile.settings',
+                                defaultMessage: 'Profile settings'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                            onSelect: handleSessions,
+                            children: formatMessage({
+                                id: 'global.sessions.active-devices',
+                                defaultMessage: 'Active devices'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                            variant: "danger",
+                            onSelect: handleLogout,
+                            color: "danger600",
+                            children: formatMessage({
+                                id: 'app.components.LeftMenu.logout',
+                                defaultMessage: 'Log out'
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+exports.NavUser = NavUser;
+//# sourceMappingURL=NavUser.js.map

package/dist/admin/admin/src/components/MainNav/NavUser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavUser.js","sources":["../../../../../../admin/src/components/MainNav/NavUser.tsx"],"sourcesContent":["import { Flex, Menu, VisuallyHidden, Avatar, Typography, Badge } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useAuth } from '../../features/Auth';\nimport { getInitials, getDisplayName } from '../../utils/users';\n\nconst MenuTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    width: 4rem;\n    height: 4rem;\n    justify-content: center;\n  }\n`;\n\nconst MenuIcon = styled(Flex)`\n  height: ${({ theme }) => theme.spaces[7]};\n  width: ${({ theme }) => theme.spaces[7]};\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  overflow: hidden;\n`;\n\nconst MenuContent = styled(Menu.Content)`\n  max-height: fit-content;\n  width: 200px;\n`;\n\nconst UserInfo = styled(Flex)`\n  && {\n    padding: ${({ theme }) => theme.spaces[3]};\n  }\n  align-items: flex-start;\n`;\n\nconst BadgeWrapper = styled(Flex)`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ theme }) => theme.spaces[1]};\n\n  width: 100%;\n`;\nconst StyledTypography = styled(Typography)`\n  word-break: break-word;\n  margin-bottom: ${({ theme }) => theme.spaces[3]};\n`;\n\nexport interface NavUserProps {\n  initials?: string;\n  children?: React.ReactNode;\n  showDisplayName?: boolean;\n}\n\nexport const NavUser = ({\n  initials,\n  showDisplayName = false,\n  children,\n  ...props\n}: NavUserProps) => {\n  const { formatMessage } = useIntl();\n  const navigate = useNavigate();\n  const user = useAuth('User', (state) => state.user);\n  const logout = useAuth('Logout', (state) => state.logout);\n  const userDisplayName = getDisplayName(user);\n\n  const handleProfile = () => {\n    const redirection = '/me';\n    navigate(redirection);\n  };\n\n  const handleSessions = () => {\n    navigate('/me/sessions');\n  };\n\n  const handleLogout = () => {\n    const redirection = '/auth/login';\n    logout();\n    navigate(redirection);\n  };\n\n  return (\n    <Flex {...props}>\n      <Menu.Root>\n        <MenuTrigger endIcon={null} fullWidth justifyContent=\"flex-start\">\n          <Flex alignItems=\"center\" gap={3}>\n            <MenuIcon justifyContent=\"center\">\n              <Avatar.Item delayMs={0} fallback={initials || getInitials(user)} />\n            </MenuIcon>\n            {showDisplayName ? (\n              <Typography variant=\"omega\">{children || userDisplayName}</Typography>\n            ) : (\n              <VisuallyHidden tag=\"span\">{children || userDisplayName}</VisuallyHidden>\n            )}\n          </Flex>\n        </MenuTrigger>\n\n        <MenuContent popoverPlacement=\"top-start\" zIndex={3}>\n          <UserInfo direction=\"column\" gap={0} alignItems=\"flex-start\">\n            <Typography variant=\"omega\" fontWeight=\"bold\" textTransform=\"none\">\n              {children || userDisplayName}\n            </Typography>\n            <StyledTypography variant=\"pi\" textColor=\"neutral600\">\n              {user?.email}\n            </StyledTypography>\n            <BadgeWrapper>\n              {user?.roles?.map((role) => <Badge key={role.id}>{role.name}</Badge>)}\n            </BadgeWrapper>\n          </UserInfo>\n\n          <Menu.Separator />\n\n          <Menu.Item onSelect={handleProfile}>\n            {formatMessage({\n              id: 'global.profile.settings',\n              defaultMessage: 'Profile settings',\n            })}\n          </Menu.Item>\n\n          <Menu.Item onSelect={handleSessions}>\n            {formatMessage({\n              id: 'global.sessions.active-devices',\n              defaultMessage: 'Active devices',\n            })}\n          </Menu.Item>\n\n          <Menu.Item variant=\"danger\" onSelect={handleLogout} color=\"danger600\">\n            {formatMessage({\n              id: 'app.components.LeftMenu.logout',\n              defaultMessage: 'Log out',\n            })}\n          </Menu.Item>\n        </MenuContent>\n      </Menu.Root>\n    </Flex>\n  );\n};\n"],"names":["MenuTrigger","styled","Menu","Trigger","theme","breakpoints","large","MenuIcon","Flex","spaces","MenuContent","Content","UserInfo","BadgeWrapper","StyledTypography","Typography","NavUser","initials","showDisplayName","children","props","formatMessage","useIntl","navigate","useNavigate","user","useAuth","state","logout","userDisplayName","getDisplayName","handleProfile","redirection","handleSessions","handleLogout","_jsx","_jsxs","Root","endIcon","fullWidth","justifyContent","alignItems","gap","Avatar","Item","delayMs","fallback","getInitials","variant","VisuallyHidden","tag","popoverPlacement","zIndex","direction","fontWeight","textTransform","textColor","email","roles","map","role","Badge","name","id","Separator","onSelect","defaultMessage","color"],"mappings":"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"}

package/dist/admin/admin/src/components/MainNav/NavUser.mjs

@@ -0,0 +1,153 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Flex, Menu, Avatar, Typography, VisuallyHidden, Badge } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useNavigate } from 'react-router-dom';
+import { styled } from 'styled-components';
+import { useAuth } from '../../features/Auth.mjs';
+import { getDisplayName, getInitials } from '../../utils/users.mjs';
+
+const MenuTrigger = styled(Menu.Trigger)`
+  padding: 0;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    width: 4rem;
+    height: 4rem;
+    justify-content: center;
+  }
+`;
+const MenuIcon = styled(Flex)`
+  height: ${({ theme })=>theme.spaces[7]};
+  width: ${({ theme })=>theme.spaces[7]};
+  border: none;
+  border-radius: 50%;
+  padding: 0;
+  overflow: hidden;
+`;
+const MenuContent = styled(Menu.Content)`
+  max-height: fit-content;
+  width: 200px;
+`;
+const UserInfo = styled(Flex)`
+  && {
+    padding: ${({ theme })=>theme.spaces[3]};
+  }
+  align-items: flex-start;
+`;
+const BadgeWrapper = styled(Flex)`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme })=>theme.spaces[1]};
+
+  width: 100%;
+`;
+const StyledTypography = styled(Typography)`
+  word-break: break-word;
+  margin-bottom: ${({ theme })=>theme.spaces[3]};
+`;
+const NavUser = ({ initials, showDisplayName = false, children, ...props })=>{
+    const { formatMessage } = useIntl();
+    const navigate = useNavigate();
+    const user = useAuth('User', (state)=>state.user);
+    const logout = useAuth('Logout', (state)=>state.logout);
+    const userDisplayName = getDisplayName(user);
+    const handleProfile = ()=>{
+        const redirection = '/me';
+        navigate(redirection);
+    };
+    const handleSessions = ()=>{
+        navigate('/me/sessions');
+    };
+    const handleLogout = ()=>{
+        const redirection = '/auth/login';
+        logout();
+        navigate(redirection);
+    };
+    return /*#__PURE__*/ jsx(Flex, {
+        ...props,
+        children: /*#__PURE__*/ jsxs(Menu.Root, {
+            children: [
+                /*#__PURE__*/ jsx(MenuTrigger, {
+                    endIcon: null,
+                    fullWidth: true,
+                    justifyContent: "flex-start",
+                    children: /*#__PURE__*/ jsxs(Flex, {
+                        alignItems: "center",
+                        gap: 3,
+                        children: [
+                            /*#__PURE__*/ jsx(MenuIcon, {
+                                justifyContent: "center",
+                                children: /*#__PURE__*/ jsx(Avatar.Item, {
+                                    delayMs: 0,
+                                    fallback: initials || getInitials(user)
+                                })
+                            }),
+                            showDisplayName ? /*#__PURE__*/ jsx(Typography, {
+                                variant: "omega",
+                                children: children || userDisplayName
+                            }) : /*#__PURE__*/ jsx(VisuallyHidden, {
+                                tag: "span",
+                                children: children || userDisplayName
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxs(MenuContent, {
+                    popoverPlacement: "top-start",
+                    zIndex: 3,
+                    children: [
+                        /*#__PURE__*/ jsxs(UserInfo, {
+                            direction: "column",
+                            gap: 0,
+                            alignItems: "flex-start",
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    variant: "omega",
+                                    fontWeight: "bold",
+                                    textTransform: "none",
+                                    children: children || userDisplayName
+                                }),
+                                /*#__PURE__*/ jsx(StyledTypography, {
+                                    variant: "pi",
+                                    textColor: "neutral600",
+                                    children: user?.email
+                                }),
+                                /*#__PURE__*/ jsx(BadgeWrapper, {
+                                    children: user?.roles?.map((role)=>/*#__PURE__*/ jsx(Badge, {
+                                            children: role.name
+                                        }, role.id))
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Menu.Separator, {}),
+                        /*#__PURE__*/ jsx(Menu.Item, {
+                            onSelect: handleProfile,
+                            children: formatMessage({
+                                id: 'global.profile.settings',
+                                defaultMessage: 'Profile settings'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Menu.Item, {
+                            onSelect: handleSessions,
+                            children: formatMessage({
+                                id: 'global.sessions.active-devices',
+                                defaultMessage: 'Active devices'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Menu.Item, {
+                            variant: "danger",
+                            onSelect: handleLogout,
+                            color: "danger600",
+                            children: formatMessage({
+                                id: 'app.components.LeftMenu.logout',
+                                defaultMessage: 'Log out'
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+export { NavUser };
+//# sourceMappingURL=NavUser.mjs.map

package/dist/admin/admin/src/components/MainNav/NavUser.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavUser.mjs","sources":["../../../../../../admin/src/components/MainNav/NavUser.tsx"],"sourcesContent":["import { Flex, Menu, VisuallyHidden, Avatar, Typography, Badge } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useAuth } from '../../features/Auth';\nimport { getInitials, getDisplayName } from '../../utils/users';\n\nconst MenuTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    width: 4rem;\n    height: 4rem;\n    justify-content: center;\n  }\n`;\n\nconst MenuIcon = styled(Flex)`\n  height: ${({ theme }) => theme.spaces[7]};\n  width: ${({ theme }) => theme.spaces[7]};\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  overflow: hidden;\n`;\n\nconst MenuContent = styled(Menu.Content)`\n  max-height: fit-content;\n  width: 200px;\n`;\n\nconst UserInfo = styled(Flex)`\n  && {\n    padding: ${({ theme }) => theme.spaces[3]};\n  }\n  align-items: flex-start;\n`;\n\nconst BadgeWrapper = styled(Flex)`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ theme }) => theme.spaces[1]};\n\n  width: 100%;\n`;\nconst StyledTypography = styled(Typography)`\n  word-break: break-word;\n  margin-bottom: ${({ theme }) => theme.spaces[3]};\n`;\n\nexport interface NavUserProps {\n  initials?: string;\n  children?: React.ReactNode;\n  showDisplayName?: boolean;\n}\n\nexport const NavUser = ({\n  initials,\n  showDisplayName = false,\n  children,\n  ...props\n}: NavUserProps) => {\n  const { formatMessage } = useIntl();\n  const navigate = useNavigate();\n  const user = useAuth('User', (state) => state.user);\n  const logout = useAuth('Logout', (state) => state.logout);\n  const userDisplayName = getDisplayName(user);\n\n  const handleProfile = () => {\n    const redirection = '/me';\n    navigate(redirection);\n  };\n\n  const handleSessions = () => {\n    navigate('/me/sessions');\n  };\n\n  const handleLogout = () => {\n    const redirection = '/auth/login';\n    logout();\n    navigate(redirection);\n  };\n\n  return (\n    <Flex {...props}>\n      <Menu.Root>\n        <MenuTrigger endIcon={null} fullWidth justifyContent=\"flex-start\">\n          <Flex alignItems=\"center\" gap={3}>\n            <MenuIcon justifyContent=\"center\">\n              <Avatar.Item delayMs={0} fallback={initials || getInitials(user)} />\n            </MenuIcon>\n            {showDisplayName ? (\n              <Typography variant=\"omega\">{children || userDisplayName}</Typography>\n            ) : (\n              <VisuallyHidden tag=\"span\">{children || userDisplayName}</VisuallyHidden>\n            )}\n          </Flex>\n        </MenuTrigger>\n\n        <MenuContent popoverPlacement=\"top-start\" zIndex={3}>\n          <UserInfo direction=\"column\" gap={0} alignItems=\"flex-start\">\n            <Typography variant=\"omega\" fontWeight=\"bold\" textTransform=\"none\">\n              {children || userDisplayName}\n            </Typography>\n            <StyledTypography variant=\"pi\" textColor=\"neutral600\">\n              {user?.email}\n            </StyledTypography>\n            <BadgeWrapper>\n              {user?.roles?.map((role) => <Badge key={role.id}>{role.name}</Badge>)}\n            </BadgeWrapper>\n          </UserInfo>\n\n          <Menu.Separator />\n\n          <Menu.Item onSelect={handleProfile}>\n            {formatMessage({\n              id: 'global.profile.settings',\n              defaultMessage: 'Profile settings',\n            })}\n          </Menu.Item>\n\n          <Menu.Item onSelect={handleSessions}>\n            {formatMessage({\n              id: 'global.sessions.active-devices',\n              defaultMessage: 'Active devices',\n            })}\n          </Menu.Item>\n\n          <Menu.Item variant=\"danger\" onSelect={handleLogout} color=\"danger600\">\n            {formatMessage({\n              id: 'app.components.LeftMenu.logout',\n              defaultMessage: 'Log out',\n            })}\n          </Menu.Item>\n        </MenuContent>\n      </Menu.Root>\n    </Flex>\n  );\n};\n"],"names":["MenuTrigger","styled","Menu","Trigger","theme","breakpoints","large","MenuIcon","Flex","spaces","MenuContent","Content","UserInfo","BadgeWrapper","StyledTypography","Typography","NavUser","initials","showDisplayName","children","props","formatMessage","useIntl","navigate","useNavigate","user","useAuth","state","logout","userDisplayName","getDisplayName","handleProfile","redirection","handleSessions","handleLogout","_jsx","_jsxs","Root","endIcon","fullWidth","justifyContent","alignItems","gap","Avatar","Item","delayMs","fallback","getInitials","variant","VisuallyHidden","tag","popoverPlacement","zIndex","direction","fontWeight","textTransform","textColor","email","roles","map","role","Badge","name","id","Separator","onSelect","defaultMessage","color"],"mappings":"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"}

package/dist/admin/admin/src/components/MainNav/TrialCountdown.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ee = require('@strapi/admin/strapi-admin/ee');
+var designSystem = require('@strapi/design-system');
+var dateFns = require('date-fns');
+var reactIntl = require('react-intl');
+var styled = require('styled-components');
+var admin = require('../../services/admin.js');
+
+const CircleProgressBar = ({ percentage })=>{
+    const theme = styled.useTheme();
+    const radius = 45;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference * (1 - percentage / 100);
+    return /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+        width: "32",
+        height: "32",
+        viewBox: "0 0 100 100",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("defs", {
+                children: /*#__PURE__*/ jsxRuntime.jsxs("linearGradient", {
+                    id: "progressGradient",
+                    x1: "0%",
+                    y1: "0%",
+                    x2: "100%",
+                    y2: "0%",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx("stop", {
+                            offset: "0%",
+                            stopColor: theme.colors.primary600
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("stop", {
+                            offset: "100%",
+                            stopColor: theme.colors.alternative600
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("circle", {
+                cx: "50",
+                cy: "50",
+                r: radius,
+                stroke: "#ccc",
+                strokeWidth: "10",
+                fill: "none"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("circle", {
+                cx: "50",
+                cy: "50",
+                r: radius,
+                stroke: "url(#progressGradient)",
+                strokeWidth: "10",
+                fill: "none",
+                strokeDasharray: circumference,
+                strokeDashoffset: offset,
+                transform: "rotate(-90 50 50)",
+                strokeLinecap: "round"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                x: "35",
+                y: "25",
+                width: "50",
+                height: "50",
+                viewBox: "0 0 32 32",
+                children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                    fill: "url(#progressGradient)",
+                    d: "m21.731 14.683-14 15a1 1 0 0 1-1.711-.875l1.832-9.167L.65 16.936a1 1 0 0 1-.375-1.625l14-15a1 1 0 0 1 1.71.875l-1.837 9.177 7.204 2.7a1 1 0 0 1 .375 1.62z"
+                })
+            })
+        ]
+    });
+};
+const Container = styled.styled(designSystem.Flex)`
+  display: none;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    display: flex;
+  }
+`;
+const TrialCountdown = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { license, isError, isLoading } = ee.useLicenseLimits();
+    const timeLeftData = admin.useGetLicenseTrialTimeLeftQuery(undefined, {
+        skip: !license?.isTrial
+    });
+    if (isError || isLoading || !license?.isTrial || timeLeftData.isLoading || timeLeftData.isError || !timeLeftData.data || !timeLeftData.data.trialEndsAt) {
+        return null;
+    }
+    const targetDate = new Date(timeLeftData.data.trialEndsAt);
+    const now = new Date();
+    const isTargetDateInPast = dateFns.isBefore(targetDate, dateFns.startOfToday());
+    const millisecondsPerDay = 1000 * 60 * 60 * 24;
+    const timeDifference = targetDate.getTime() - now.getTime();
+    const daysLeft = Math.ceil(timeDifference / millisecondsPerDay) <= 0 ? 0 : Math.ceil(timeDifference / millisecondsPerDay);
+    return /*#__PURE__*/ jsxRuntime.jsx(Container, {
+        justifyContent: "center",
+        padding: 3,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+            label: formatMessage(isTargetDateInPast ? {
+                id: 'app.components.LeftMenu.trialCountdown.endedAt',
+                defaultMessage: 'Your trial ended on {date}'
+            } : {
+                id: 'app.components.LeftMenu.trialCountdown.endsAt',
+                defaultMessage: 'Your trial ends on {date}'
+            }, {
+                date: dateFns.format(new Date(timeLeftData.data.trialEndsAt), 'PPP')
+            }),
+            side: "right",
+            children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                "data-testid": "trial-countdown",
+                children: /*#__PURE__*/ jsxRuntime.jsx(CircleProgressBar, {
+                    percentage: (30 - daysLeft) * 100 / 30
+                })
+            })
+        })
+    });
+};
+
+exports.TrialCountdown = TrialCountdown;
+//# sourceMappingURL=TrialCountdown.js.map

package/dist/admin/admin/src/components/MainNav/TrialCountdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrialCountdown.js","sources":["../../../../../../admin/src/components/MainNav/TrialCountdown.tsx"],"sourcesContent":["import { useLicenseLimits } from '@strapi/admin/strapi-admin/ee';\nimport { Flex, Tooltip } from '@strapi/design-system';\nimport { format, isBefore, startOfToday } from 'date-fns';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { useGetLicenseTrialTimeLeftQuery } from '../../../src/services/admin';\n\ntype CircleProgressBarProps = {\n  percentage: number;\n};\n\nconst CircleProgressBar = ({ percentage }: CircleProgressBarProps) => {\n  const theme = useTheme();\n\n  const radius = 45;\n  const circumference = 2 * Math.PI * radius;\n  const offset = circumference * (1 - percentage / 100);\n\n  return (\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 100 100\">\n      <defs>\n        <linearGradient id=\"progressGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" stopColor={theme.colors.primary600} />\n          <stop offset=\"100%\" stopColor={theme.colors.alternative600} />\n        </linearGradient>\n      </defs>\n      <circle cx=\"50\" cy=\"50\" r={radius} stroke=\"#ccc\" strokeWidth=\"10\" fill=\"none\" />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r={radius}\n        stroke=\"url(#progressGradient)\"\n        strokeWidth=\"10\"\n        fill=\"none\"\n        strokeDasharray={circumference}\n        strokeDashoffset={offset}\n        transform=\"rotate(-90 50 50)\"\n        strokeLinecap=\"round\"\n      />\n      <svg x=\"35\" y=\"25\" width=\"50\" height=\"50\" viewBox=\"0 0 32 32\">\n        <path\n          fill=\"url(#progressGradient)\"\n          d=\"m21.731 14.683-14 15a1 1 0 0 1-1.711-.875l1.832-9.167L.65 16.936a1 1 0 0 1-.375-1.625l14-15a1 1 0 0 1 1.71.875l-1.837 9.177 7.204 2.7a1 1 0 0 1 .375 1.62z\"\n        />\n      </svg>\n    </svg>\n  );\n};\n\nconst Container = styled(Flex)`\n  display: none;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    display: flex;\n  }\n`;\n\nconst TrialCountdown = () => {\n  const { formatMessage } = useIntl();\n  const { license, isError, isLoading } = useLicenseLimits();\n\n  const timeLeftData = useGetLicenseTrialTimeLeftQuery(undefined, {\n    skip: !license?.isTrial,\n  });\n\n  if (\n    isError ||\n    isLoading ||\n    !license?.isTrial ||\n    timeLeftData.isLoading ||\n    timeLeftData.isError ||\n    !timeLeftData.data ||\n    !timeLeftData.data.trialEndsAt\n  ) {\n    return null;\n  }\n\n  const targetDate = new Date(timeLeftData.data.trialEndsAt);\n  const now = new Date();\n  const isTargetDateInPast = isBefore(targetDate, startOfToday());\n\n  const millisecondsPerDay = 1000 * 60 * 60 * 24;\n  const timeDifference = targetDate.getTime() - now.getTime();\n\n  const daysLeft =\n    Math.ceil(timeDifference / millisecondsPerDay) <= 0\n      ? 0\n      : Math.ceil(timeDifference / millisecondsPerDay);\n\n  return (\n    <Container justifyContent=\"center\" padding={3}>\n      <Tooltip\n        label={formatMessage(\n          isTargetDateInPast\n            ? {\n                id: 'app.components.LeftMenu.trialCountdown.endedAt',\n                defaultMessage: 'Your trial ended on {date}',\n              }\n            : {\n                id: 'app.components.LeftMenu.trialCountdown.endsAt',\n                defaultMessage: 'Your trial ends on {date}',\n              },\n          {\n            date: format(new Date(timeLeftData.data.trialEndsAt), 'PPP'),\n          }\n        )}\n        side=\"right\"\n      >\n        <div data-testid=\"trial-countdown\">\n          <CircleProgressBar percentage={((30 - daysLeft) * 100) / 30} />\n        </div>\n      </Tooltip>\n    </Container>\n  );\n};\n\nexport { TrialCountdown };\n"],"names":["CircleProgressBar","percentage","theme","useTheme","radius","circumference","Math","PI","offset","_jsxs","svg","width","height","viewBox","_jsx","defs","linearGradient","id","x1","y1","x2","y2","stop","stopColor","colors","primary600","alternative600","circle","cx","cy","r","stroke","strokeWidth","fill","strokeDasharray","strokeDashoffset","transform","strokeLinecap","x","y","path","d","Container","styled","Flex","breakpoints","large","TrialCountdown","formatMessage","useIntl","license","isError","isLoading","useLicenseLimits","timeLeftData","useGetLicenseTrialTimeLeftQuery","undefined","skip","isTrial","data","trialEndsAt","targetDate","Date","now","isTargetDateInPast","isBefore","startOfToday","millisecondsPerDay","timeDifference","getTime","daysLeft","ceil","justifyContent","padding","Tooltip","label","defaultMessage","date","format","side","div","data-testid"],"mappings":"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"}