@linagora/twake-mui 10.0.0 → 10.1.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# @linagora/twake-mui [10.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.0.0...@linagora/twake-mui@10.1.0) (2026-10-06)
+
+
+### Features
+
+* **twake-mui:** Extract NavLink into dumber components ([c5c3581](https://github.com/linagora/twake-ui/commit/c5c358176c6cdd47666e261575a9e9576bbb8b84))
+* **twake-mui:** Resolve comments ([2b5a9c8](https://github.com/linagora/twake-ui/commit/2b5a9c8aa828991804858aedd1319ce78f910572))
+* **twake-mui:** Update NavDesktopLimiter as secondary variant of NavItem ([8124b58](https://github.com/linagora/twake-ui/commit/8124b58176f38919f8be4399b05854a097ed043f))
+* **twake-mui:** Update NavText to handle secondary and tertiary text ([bd976ce](https://github.com/linagora/twake-ui/commit/bd976ce73fd715d927f2fae967d4a27b01b89f77))
+* **twake-mui:** Update new NavItem ([915a508](https://github.com/linagora/twake-ui/commit/915a50801197c39dc3f60d4d6f00da833d34554d))
+* **twake-mui:** Update new NavLink ([e966794](https://github.com/linagora/twake-ui/commit/e966794971daa5fccd4205d0cf87bc0ccb964bc2))
+* **twake-mui:** Update storybooks of Layout and Sidebar with new NavItem ([b792097](https://github.com/linagora/twake-ui/commit/b7920972992db48fb271aa4daf3dc078de72b605))
+
 # @linagora/twake-mui [10.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.17.0...@linagora/twake-mui@10.0.0) (2026-10-05)
 
 

package/dist/components/Layout/Layout.stories.js

@@ -7,8 +7,8 @@ import { NavDesktopDropdown } from '../NavDesktopDropdown';
 import { NavDesktopLimiter } from '../NavDesktopLimiter';
 import { NavIcon } from '../NavIcon';
 import { NavItem } from '../NavItem';
-import { NavLink } from '../NavLink';
-import { NavText } from '../NavText';
+import { NavLink } from '../NavLink/NavLink';
+import NavText from '../NavText';
 import { Sidebar } from '../Sidebar';
 const paragraph = 'Ada Lovelace was an English mathematician chiefly known for her work on Charles Babbage’s proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation.';
 const TopBar = () => (React.createElement(Box, { id: "coz-bar", role: "banner", sx: theme => ({
@@ -42,7 +42,7 @@ const LayoutDemo = ({ monoColumn = false, withTopBar = true, ...props }) => {
                             React.createElement(NavLink, { ...makeProps(['Section 1']) },
                                 React.createElement(NavIcon, { icon: Warn }),
                                 React.createElement(NavText, null, "Section 1"))),
-                        React.createElement(NavDesktopLimiter, null, Array.from(Array(10).keys()).map(i => (React.createElement(NavItem, { secondary: true, key: i },
+                        React.createElement(NavDesktopLimiter, null, Array.from(Array(10).keys()).map(i => (React.createElement(NavItem, { variant: "secondary", key: i },
                             React.createElement(NavLink, { ...makeProps(['Section 1', `Subsection ${i}`]) },
                                 React.createElement(NavText, null,
                                     "Subsection ",
@@ -55,7 +55,7 @@ const LayoutDemo = ({ monoColumn = false, withTopBar = true, ...props }) => {
                             React.createElement(NavLink, { ...makeProps(['Section 3']) },
                                 React.createElement(NavIcon, { icon: Download }),
                                 React.createElement(NavText, null, "Section 3"))),
-                        React.createElement(NavDesktopDropdown, { label: "Section 4" }, Array.from(Array(6).keys()).map(i => (React.createElement(NavItem, { secondary: true, key: i },
+                        React.createElement(NavDesktopDropdown, { label: "Section 4" }, Array.from(Array(6).keys()).map(i => (React.createElement(NavItem, { variant: "secondary", key: i },
                             React.createElement(NavLink, { ...makeProps(['Section 4', `Subsection ${i}`]) },
                                 React.createElement(NavText, null,
                                     "Subsection ",

package/dist/components/NavDesktopLimiter/index.js

@@ -3,8 +3,8 @@ import React, { Children, isValidElement, useState } from 'react';
 import { useExtendI18n, useI18n } from 'twake-i18n';
 import { NavIcon } from '../NavIcon';
 import { NavItem } from '../NavItem';
-import { NavLink } from '../NavLink';
-import { NavText } from '../NavText';
+import { NavLink } from '../NavLink/NavLink';
+import NavText from '../NavText';
 import en from './locales/en.json';
 import fr from './locales/fr.json';
 import ru from './locales/ru.json';
@@ -22,7 +22,7 @@ export const NavDesktopLimiter = ({ children, max = 5 }) => {
         return null;
     return (React.createElement(React.Fragment, null,
         viewingAll ? items : items.slice(0, max),
-        amountHidden > 0 && (React.createElement(NavItem, { secondary: true },
+        amountHidden > 0 && (React.createElement(NavItem, { variant: "secondary" },
             React.createElement(NavLink, { onClick: () => setViewingAll(current => !current) },
                 React.createElement(NavIcon, { icon: viewingAll ? Top : Bottom }),
                 React.createElement(NavText, null, viewingAll

package/dist/components/NavItem/NavBadge.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@mui/material/styles';
+export declare const NavBadge: import("@emotion/styled").StyledComponent<import("@mui/material").BadgeOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style" | "color" | "className" | "max" | "children" | "classes" | "sx" | "variant" | "slotProps" | "slots" | "anchorOrigin" | "badgeContent" | "invisible" | "overlap" | "showZero"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

package/dist/components/NavItem/NavBadge.js

@@ -0,0 +1,12 @@
+import { Badge, badgeClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const NavBadge = styled(Badge)(({ theme }) => ({
+    [`& .${badgeClasses.badge}`]: {
+        border: 'none',
+        position: 'static',
+        transform: 'none',
+        backgroundColor: theme.vars.palette.action.selected,
+        color: theme.vars.palette.text.primary,
+        fontWeight: 500
+    }
+}));

package/dist/components/NavItem/NavIndicator.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@mui/material/styles';
+export declare const NavIndicator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/NavItem/NavIndicator.js

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material/styles';
+export const NavIndicator = styled('div')(({ theme }) => ({
+    width: 10,
+    height: 10,
+    borderRadius: '50%',
+    backgroundColor: theme.vars.palette.error.main
+}));

package/dist/components/NavItem/NavItem.stories.d.ts

@@ -0,0 +1,30 @@
+import { Heart } from '@linagora/twake-icons';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { NavItemProps } from './index';
+declare const icons: {
+    Heart: typeof Heart;
+    None: undefined;
+};
+declare const secondaryActions: {
+    None: undefined;
+    Dots: React.JSX.Element;
+};
+type NavItemStoryArgs = NavItemProps & {
+    text: string;
+    secondaryText: string;
+    tertiaryText: string;
+    tertiaryIcon: keyof typeof icons;
+    leftIcon: keyof typeof icons;
+    divider: boolean;
+    badge: number | string;
+    hasIndicator: boolean;
+    secondaryAction: keyof typeof secondaryActions;
+    hasDropdown: boolean;
+    disablePadding: boolean;
+};
+declare const meta: Meta<NavItemStoryArgs>;
+export default meta;
+type Story = StoryObj<NavItemStoryArgs>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/components/NavItem/NavItem.stories.js

@@ -0,0 +1,110 @@
+import { Folder, Heart, Warn, Dots, Icon } from '@linagora/twake-icons';
+import { IconButton } from '@mui/material';
+import React from 'react';
+import { NavIcon } from '../NavIcon';
+import { NavDropdown } from '../NavLink/NavDropdown';
+import { NavLink } from '../NavLink/NavLink';
+import NavText from '../NavText';
+import { NavItem } from './index';
+const icons = { Heart, None: undefined };
+const secondaryActions = {
+    None: undefined,
+    Dots: (React.createElement(IconButton, { size: "small", edge: "end", sx: { p: 0.5 }, onClick: event => event.stopPropagation() },
+        React.createElement(Icon, { icon: Dots, rotate: 90, size: 10 })))
+};
+const meta = {
+    title: 'NavItem',
+    component: NavItem,
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'tertiary'],
+            description: 'The indentation variant of the NavItem.'
+        },
+        selected: { control: 'boolean' },
+        text: { control: 'text' },
+        secondaryText: { control: 'text' },
+        tertiaryText: { control: 'text' },
+        tertiaryIcon: {
+            options: Object.keys(icons),
+            control: { type: 'select' }
+        },
+        leftIcon: {
+            options: Object.keys(icons),
+            control: { type: 'select' }
+        },
+        divider: { control: 'boolean' },
+        badge: { control: 'text' },
+        hasIndicator: { control: 'boolean' },
+        secondaryAction: {
+            options: Object.keys(secondaryActions),
+            mapping: secondaryActions,
+            control: { type: 'select' }
+        },
+        hasDropdown: { control: 'boolean' },
+        disablePadding: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        variant: 'primary',
+        selected: false,
+        text: 'Item',
+        secondaryText: '',
+        tertiaryText: '',
+        tertiaryIcon: 'None',
+        leftIcon: 'Heart',
+        divider: false,
+        badge: 1,
+        hasIndicator: true,
+        secondaryAction: 'Dots',
+        hasDropdown: false,
+        disablePadding: true
+    },
+    render: ({ selected, text, secondaryText, tertiaryText, tertiaryIcon, leftIcon, divider, badge, hasIndicator, secondaryAction, hasDropdown, disablePadding, ...args }) => {
+        const IconComponent = icons[leftIcon];
+        const TertiaryIconComponent = icons[tertiaryIcon];
+        const [open, setOpen] = React.useState(false);
+        return (React.createElement("div", { style: { width: 300 } },
+            React.createElement(NavItem, { ...args, hasIndicator: hasIndicator, badge: badge, secondaryAction: secondaryAction, divider: divider, disablePadding: disablePadding }, hasDropdown ? (React.createElement(NavDropdown, { selected: Boolean(selected), open: open, onClick: () => setOpen(!open) },
+                IconComponent && React.createElement(NavIcon, { icon: IconComponent }),
+                React.createElement(NavText, { secondaryText: secondaryText, tertiaryText: tertiaryText, tertiaryIcon: TertiaryIconComponent ? React.createElement(TertiaryIconComponent, null) : undefined }, text))) : (React.createElement(NavLink, { selected: Boolean(selected) },
+                IconComponent && React.createElement(NavIcon, { icon: IconComponent }),
+                React.createElement(NavText, { secondaryText: secondaryText, tertiaryText: tertiaryText, tertiaryIcon: TertiaryIconComponent ? React.createElement(TertiaryIconComponent, null) : undefined }, text))))));
+    }
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => {
+        return (React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '16px',
+                width: 300
+            } },
+            React.createElement("section", null,
+                React.createElement("h3", null, "Primary"),
+                React.createElement(NavItem, { disablePadding: true, hasIndicator: true, badge: 1, secondaryAction: secondaryActions.Dots },
+                    React.createElement(NavDropdown, null,
+                        React.createElement(NavIcon, { icon: Heart }),
+                        React.createElement(NavText, { secondaryText: "Secondary", tertiaryText: "Tertiary" }, "Primary Item")))),
+            React.createElement("section", null,
+                React.createElement("h3", null, "Secondary"),
+                React.createElement(NavItem, { disablePadding: true, variant: "secondary", selected: true },
+                    React.createElement(NavDropdown, null,
+                        React.createElement(NavText, null, "Secondary Item")))),
+            React.createElement("section", null,
+                React.createElement("h3", null, "Tertiary"),
+                React.createElement(NavItem, { disablePadding: true, variant: "tertiary" },
+                    React.createElement(NavLink, null,
+                        React.createElement(NavText, { tertiaryIcon: React.createElement(Warn, null) }, "Tertiary Item")))),
+            React.createElement("section", null,
+                React.createElement("h3", null, "Divider"),
+                React.createElement(NavItem, { disablePadding: true, divider: true },
+                    React.createElement(NavLink, null,
+                        React.createElement(NavIcon, { icon: Folder }),
+                        React.createElement(NavText, null, "Item with Divider"))))));
+    }
+};

package/dist/components/NavItem/NavItemActions.d.ts

@@ -0,0 +1 @@
+export declare const NavItemActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/NavItem/NavItemActions.js

@@ -0,0 +1,11 @@
+import { styled } from '@mui/material/styles';
+export const NavItemActions = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    position: 'absolute',
+    right: 8,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    flexShrink: 0
+});

package/dist/components/NavItem/NavItemRoot.d.ts

@@ -0,0 +1,3 @@
+export declare const NavItemRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style" | "className" | "children" | "alignItems" | "dense" | "disablePadding" | "disableGutters" | "classes" | "sx" | "divider" | "slotProps" | "slots" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    variant?: "primary" | "secondary" | "tertiary";
+}, {}, {}>;

package/dist/components/NavItem/NavItemRoot.js

@@ -0,0 +1,49 @@
+import { ListItem } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const NavItemRoot = styled(ListItem, {
+    shouldForwardProp: prop => prop !== 'secondary' && prop !== 'variant'
+})(({ theme, variant = 'primary' }) => {
+    const isSecondary = variant === 'secondary';
+    const isTertiary = variant === 'tertiary';
+    return {
+        padding: 0,
+        minHeight: 36,
+        height: 'auto',
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+        borderRadius: 8,
+        cursor: 'pointer',
+        margin: '0 16px',
+        width: 'calc(100% - 32px)',
+        transition: theme.transitions.create('background-color'),
+        '&:hover': {
+            backgroundColor: theme.vars.palette.action.hover
+        },
+        [`&.Mui-selected, &:has(.Mui-selected), &:has(.active)`]: {
+            color: theme.vars.palette.primary.main,
+            backgroundColor: theme.vars.palette.action.selected,
+            '&:hover': {
+                backgroundColor: theme.vars.palette.action.focus
+            }
+        },
+        [theme.breakpoints.down('lg')]: {
+            display: 'block',
+            height: 'auto',
+            margin: '0 12px',
+            flex: '0 0 40px',
+            [`&.Mui-selected, &:has(.Mui-selected), &:has(.active)`]: {
+                color: theme.vars.palette.text.primary,
+                backgroundColor: 'transparent',
+                '&:hover': {
+                    backgroundColor: 'transparent'
+                }
+            }
+        },
+        ...((isSecondary || isTertiary) && {
+            margin: '3px 16px',
+            [theme.breakpoints.down('lg')]: { display: 'none' },
+            paddingLeft: isTertiary ? '3rem' : '2rem'
+        })
+    };
+});

package/dist/components/NavItem/index.d.ts

@@ -1,6 +1,10 @@
-import { Theme } from '@mui/material/styles';
+import { ListItem } from '@mui/material';
 import React from 'react';
-export declare const NavItem: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style" | "className" | "children" | "alignItems" | "dense" | "disablePadding" | "disableGutters" | "classes" | "sx" | "divider" | "slotProps" | "slots" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
-    secondary?: boolean;
-}, {}, {}>;
-export type NavItemProps = React.ComponentProps<typeof NavItem>;
+export interface NavItemProps extends React.ComponentProps<typeof ListItem> {
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    selected?: boolean;
+    badge?: React.ReactNode;
+    hasIndicator?: boolean;
+    divider?: boolean;
+}
+export declare const NavItem: React.ForwardRefExoticComponent<Omit<NavItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;

package/dist/components/NavItem/index.js

@@ -1,30 +1,19 @@
-import { ListItem, listItemButtonClasses } from '@mui/material';
-import { styled } from '@mui/material/styles';
-export const NavItem = styled(ListItem, {
-    shouldForwardProp: prop => prop !== 'secondary'
-})(({ theme, secondary }) => ({
-    padding: 0,
-    height: 36,
-    minHeight: 0,
-    [theme.breakpoints.down('lg')]: {
-        display: 'block',
-        height: 'auto',
-        margin: '0 12px',
-        flex: '0 0 40px'
-    },
-    ...(secondary && {
-        height: 'auto',
-        margin: '3px 0',
-        [theme.breakpoints.down('lg')]: { display: 'none' },
-        [`& .${listItemButtonClasses.root}`]: {
-            margin: '0 16px 0 2.8rem',
-            padding: '8px 16px',
-            height: 'auto',
-            fontSize: theme.typography.pxToRem(14),
-            [`&.${listItemButtonClasses.selected}, &.active`]: {
-                color: theme.vars.palette.secondary.contrastText,
-                backgroundColor: theme.vars.palette.secondary.main
-            }
-        }
-    })
-}));
+import { Divider } from '@mui/material';
+import cx from 'classnames';
+import React, { forwardRef } from 'react';
+import { NavBadge } from './NavBadge';
+import { NavIndicator } from './NavIndicator';
+import { NavItemActions } from './NavItemActions';
+import { NavItemRoot } from './NavItemRoot';
+export const NavItem = forwardRef((props, ref) => {
+    const { variant = 'primary', selected, children, className, badge, hasIndicator, secondaryAction, divider, ...rest } = props;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(NavItemRoot, { ref: ref, variant: variant, className: cx(className, selected && 'Mui-selected'), ...rest },
+            children,
+            (hasIndicator || badge || secondaryAction) && (React.createElement(NavItemActions, null,
+                hasIndicator && React.createElement(NavIndicator, null),
+                badge && React.createElement(NavBadge, { badgeContent: badge }),
+                secondaryAction))),
+        divider && React.createElement(Divider, { className: "u-mt-half u-mh-1" })));
+});
+NavItem.displayName = 'NavItem';

package/dist/components/NavLink/NavDropdown.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NavLinkBaseProps } from './NavLinkBase';
+export interface NavDropdownProps extends Omit<NavLinkBaseProps, 'onToggle'> {
+    open?: boolean;
+    onToggle?: React.MouseEventHandler<HTMLDivElement>;
+}
+export declare const NavDropdown: React.ForwardRefExoticComponent<NavDropdownProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/NavLink/NavDropdown.js

@@ -0,0 +1,19 @@
+import { Icon, Dropdown } from '@linagora/twake-icons';
+import { useTheme } from '@mui/material/styles';
+import React, { forwardRef } from 'react';
+import { NavLinkBase } from './NavLinkBase';
+export const NavDropdown = forwardRef(({ open, onToggle, onClick, children, ...rest }, ref) => {
+    const theme = useTheme();
+    const handleClick = (e) => {
+        if (onToggle) {
+            onToggle(e);
+        }
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    return (React.createElement(NavLinkBase, { ref: ref, onClick: handleClick, "aria-expanded": open, ...rest },
+        children,
+        React.createElement(Icon, { className: "u-ml-half", icon: Dropdown, rotate: open ? 0 : -90, size: 14, color: theme.vars.palette.text.primary })));
+});
+NavDropdown.displayName = 'NavDropdown';

package/dist/components/NavLink/NavLink.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NavLinkBaseProps } from './NavLinkBase';
+export type NavLinkProps = NavLinkBaseProps;
+export declare const NavLink: React.ForwardRefExoticComponent<NavLinkBaseProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/NavLink/NavLink.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+import { NavLinkBase } from './NavLinkBase';
+export const NavLink = forwardRef((props, ref) => {
+    return React.createElement(NavLinkBase, { ref: ref, ...props });
+});
+NavLink.displayName = 'NavLink';

package/dist/components/NavLink/NavLinkBase.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface NavLinkBaseProps extends React.ComponentPropsWithoutRef<'div'> {
+    selected?: boolean;
+}
+export declare const NavLinkBase: React.ForwardRefExoticComponent<NavLinkBaseProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/NavLink/NavLinkBase.js

@@ -0,0 +1,15 @@
+import cx from 'classnames';
+import React, { forwardRef } from 'react';
+import { NavLinkRoot } from './NavLinkRoot';
+export const NavLinkBase = forwardRef(({ selected, onClick, onKeyDown, className, children, ...rest }, ref) => {
+    return (React.createElement(NavLinkRoot, { ref: ref, role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
+            if (onKeyDown) {
+                onKeyDown(e);
+            }
+            if (!e.defaultPrevented && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                e.currentTarget.click();
+            }
+        }, className: cx(className, { active: selected }), ...rest }, children));
+});
+NavLinkBase.displayName = 'NavLinkBase';

package/dist/components/NavLink/NavLinkRoot.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@mui/material/styles';
+export declare const NavLinkRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/NavLink/NavLinkRoot.js

@@ -0,0 +1,41 @@
+import { styled } from '@mui/material/styles';
+export const NavLinkRoot = styled('div')(({ theme }) => ({
+    padding: 8,
+    width: '100%',
+    height: '100%',
+    minHeight: 0,
+    gap: 0,
+    borderRadius: 8,
+    lineHeight: 1.375,
+    color: theme.vars.palette.text.primary,
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    '&:hover, &:focus, &:active': {
+        backgroundColor: 'transparent'
+    },
+    '&.selected, &.active': {
+        color: theme.vars.palette.primary.main,
+        backgroundColor: 'transparent',
+        '&:hover': { backgroundColor: 'transparent' },
+        '& svg, & span': {
+            color: theme.vars.palette.primary.main
+        }
+    },
+    [theme.breakpoints.down('lg')]: {
+        display: 'block',
+        height: 'auto',
+        margin: 0,
+        padding: 0,
+        textAlign: 'center',
+        fontSize: theme.typography.pxToRem(11),
+        lineHeight: '12px',
+        '&.selected, &.active': {
+            color: theme.vars.palette.text.primary,
+            '&:hover': { backgroundColor: 'transparent' },
+            '& svg, & span': {
+                color: theme.vars.palette.text.primary
+            }
+        }
+    }
+}));

package/dist/components/NavText/NavPrimaryText.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@mui/material/styles';
+export declare const NavPrimaryText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/NavText/NavPrimaryText.js

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material/styles';
+export const NavPrimaryText = styled('span')(({ theme }) => ({
+    fontSize: theme.typography.pxToRem(14),
+    fontWeight: 500,
+    letterSpacing: '.15px',
+    [theme.breakpoints.down('lg')]: {
+        display: 'block',
+        textAlign: 'center',
+        whiteSpace: 'nowrap',
+        fontSize: theme.typography.pxToRem(12)
+    }
+}));

package/dist/components/NavText/NavSecondaryText.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@mui/material/styles';
+export declare const NavSecondaryText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/NavText/NavSecondaryText.js

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+export const NavSecondaryText = styled('span')(({ theme }) => ({
+    display: 'block',
+    fontSize: theme.typography.pxToRem(12),
+    color: theme.vars.palette.text.secondary,
+    lineHeight: 1.5,
+    fontWeight: 400
+}));

package/dist/components/NavText/NavTertiaryText.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@mui/material/styles';
+export declare const NavTertiaryText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/NavText/NavTertiaryText.js

@@ -0,0 +1,16 @@
+import { styled } from '@mui/material/styles';
+export const NavTertiaryText = styled('span')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: theme.typography.pxToRem(11),
+    color: theme.vars.palette.text.secondary,
+    lineHeight: 1.5,
+    fontWeight: 400,
+    '& svg': {
+        width: 14,
+        height: 14,
+        marginRight: 4,
+        color: 'inherit',
+        fill: 'currentColor'
+    }
+}));

package/dist/components/NavText/NavTextRoot.d.ts

@@ -0,0 +1 @@
+export declare const NavTextRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/NavText/NavTextRoot.js

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material/styles';
+export const NavTextRoot = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 0,
+    marginRight: 1
+}));

package/dist/components/NavText/index.d.ts

@@ -1,7 +1,11 @@
 import { SxProps } from '@mui/material';
 import { Theme } from '@mui/material/styles';
 import React from 'react';
-export interface NavTextProps extends React.ComponentPropsWithoutRef<'span'> {
+export interface NavTextProps extends React.ComponentPropsWithoutRef<'div'> {
     sx?: SxProps<Theme>;
+    secondaryText?: React.ReactNode;
+    tertiaryText?: React.ReactNode;
+    tertiaryIcon?: React.ReactNode;
 }
-export declare const NavText: React.FC<NavTextProps>;
+declare const NavText: React.ForwardRefExoticComponent<NavTextProps & React.RefAttributes<HTMLDivElement>>;
+export default NavText;

package/dist/components/NavText/index.js

@@ -1,14 +1,15 @@
-import { styled } from '@mui/material/styles';
-// Explicit annotation: declaration emit for styled('span') otherwise
-// widens the element props to the whole JSX.IntrinsicElements map.
-export const NavText = styled('span')(({ theme }) => ({
-    fontSize: theme.typography.pxToRem(14),
-    fontWeight: 500,
-    letterSpacing: '.15px',
-    [theme.breakpoints.down('lg')]: {
-        display: 'block',
-        textAlign: 'center',
-        whiteSpace: 'nowrap',
-        fontSize: theme.typography.pxToRem(12)
-    }
-}));
+import React from 'react';
+import { NavPrimaryText } from './NavPrimaryText';
+import { NavSecondaryText } from './NavSecondaryText';
+import { NavTertiaryText } from './NavTertiaryText';
+import { NavTextRoot } from './NavTextRoot';
+const NavText = React.forwardRef(({ secondaryText, tertiaryText, tertiaryIcon, children, sx, ...rest }, ref) => {
+    return (React.createElement(NavTextRoot, { ref: ref, sx: sx, ...rest },
+        React.createElement(NavPrimaryText, null, children),
+        secondaryText && React.createElement(NavSecondaryText, null, secondaryText),
+        (tertiaryText || tertiaryIcon) && (React.createElement(NavTertiaryText, null,
+            tertiaryIcon,
+            tertiaryText))));
+});
+NavText.displayName = 'NavText';
+export default NavText;

package/dist/components/Sidebar/Sidebar.stories.js

@@ -6,11 +6,13 @@ import { NavDesktopDropdown } from '../NavDesktopDropdown';
 import { NavDesktopLimiter } from '../NavDesktopLimiter';
 import { NavIcon } from '../NavIcon';
 import { NavItem } from '../NavItem';
-import { NavLink } from '../NavLink';
-import { NavText } from '../NavText';
+import NavText from '../NavText';
 import { Sidebar } from './index';
+import { NavDropdown } from '../NavLink/NavDropdown';
+import { NavLink } from '../NavLink/NavLink';
 const SidebarDemo = (props) => {
     const [active, setActive] = useState(['Section 1', 'Subsection 1']);
+    const [openSection1, setOpenSection1] = useState(true);
     const makeProps = (route) => ({
         selected: active.slice(0, route.length).join('/') === route.join('/'),
         onClick: () => setActive(route)
@@ -19,14 +21,17 @@ const SidebarDemo = (props) => {
         React.createElement(Sidebar, { ...props },
             React.createElement(Nav, null,
                 React.createElement(NavItem, null,
-                    React.createElement(NavLink, { ...makeProps(['Section 1']) },
+                    React.createElement(NavDropdown, { ...makeProps(['Section 1']), open: openSection1, onToggle: (e) => {
+                            e.stopPropagation();
+                            setOpenSection1(prev => !prev);
+                        } },
                         React.createElement(NavIcon, { icon: Warn }),
                         React.createElement(NavText, null, "Section 1"))),
-                React.createElement(NavDesktopLimiter, null, Array.from(Array(10).keys()).map(i => (React.createElement(NavItem, { secondary: true, key: i },
+                openSection1 && (React.createElement(NavDesktopLimiter, null, Array.from(Array(10).keys()).map(i => (React.createElement(NavItem, { variant: "secondary", key: i },
                     React.createElement(NavLink, { ...makeProps(['Section 1', `Subsection ${i}`]) },
                         React.createElement(NavText, null,
                             "Subsection ",
-                            i)))))),
+                            i))))))),
                 React.createElement(NavItem, null,
                     React.createElement(NavLink, { ...makeProps(['Section 2']) },
                         React.createElement(NavIcon, { icon: Check }),
@@ -35,7 +40,7 @@ const SidebarDemo = (props) => {
                     React.createElement(NavLink, { ...makeProps(['Section 3']) },
                         React.createElement(NavIcon, { icon: Download }),
                         React.createElement(NavText, null, "Section 3"))),
-                React.createElement(NavDesktopDropdown, { label: "Section 4" }, Array.from(Array(6).keys()).map(i => (React.createElement(NavItem, { secondary: true, key: i },
+                React.createElement(NavDesktopDropdown, { label: "Section 4" }, Array.from(Array(6).keys()).map(i => (React.createElement(NavItem, { variant: "secondary", key: i },
                     React.createElement(NavLink, { ...makeProps(['Section 4', `Subsection ${i}`]) },
                         React.createElement(NavText, null,
                             "Subsection ",

package/dist/index.d.ts

@@ -29,9 +29,11 @@ export { Sidebar, SIDEBAR_MOBILE_HEIGHT } from './components/Sidebar';
 export { Layout, Main, Content } from './components/Layout';
 export { Nav } from './components/Nav';
 export { NavItem } from './components/NavItem';
-export { NavLink } from './components/NavLink';
+export { NavLink } from './components/NavLink/NavLink';
+export { NavLinkBase } from './components/NavLink/NavLinkBase';
+export { NavDropdown } from './components/NavLink/NavDropdown';
 export { NavIcon } from './components/NavIcon';
-export { NavText } from './components/NavText';
+export { default as NavText } from './components/NavText';
 export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
 export { nameToColor, supportedColors, getInitials } from './components/Avatar/helpers';
@@ -70,7 +72,9 @@ export type { SidebarProps } from './components/Sidebar';
 export type { LayoutProps, MainProps, ContentProps } from './components/Layout';
 export type { NavProps } from './components/Nav';
 export type { NavItemProps } from './components/NavItem';
-export type { NavLinkProps } from './components/NavLink';
+export type { NavLinkProps } from './components/NavLink/NavLink';
+export type { NavLinkBaseProps } from './components/NavLink/NavLinkBase';
+export type { NavDropdownProps } from './components/NavLink/NavDropdown';
 export type { NavIconProps } from './components/NavIcon';
 export type { NavTextProps } from './components/NavText';
 export type { NavDesktopLimiterProps } from './components/NavDesktopLimiter';

package/dist/index.js

@@ -32,9 +32,11 @@ export { Sidebar, SIDEBAR_MOBILE_HEIGHT } from './components/Sidebar';
 export { Layout, Main, Content } from './components/Layout';
 export { Nav } from './components/Nav';
 export { NavItem } from './components/NavItem';
-export { NavLink } from './components/NavLink';
+export { NavLink } from './components/NavLink/NavLink';
+export { NavLinkBase } from './components/NavLink/NavLinkBase';
+export { NavDropdown } from './components/NavLink/NavDropdown';
 export { NavIcon } from './components/NavIcon';
-export { NavText } from './components/NavText';
+export { default as NavText } from './components/NavText';
 export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
 export { nameToColor, supportedColors, getInitials } from './components/Avatar/helpers';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "10.0.0",
+  "version": "10.1.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",

package/dist/components/NavLink/index.d.ts

@@ -1,3 +0,0 @@
-import { ListItemButton, ListItemButtonProps } from '@mui/material';
-export type NavLinkProps = ListItemButtonProps;
-export declare const NavLink: typeof ListItemButton;

package/dist/components/NavLink/index.js

@@ -1,38 +0,0 @@
-import { ListItemButton, listItemButtonClasses, listItemIconClasses } from '@mui/material';
-import { styled } from '@mui/material/styles';
-// Cast keeps ListItemButton's `component` generic (react-router NavLink etc.)
-export const NavLink = styled(ListItemButton)(({ theme }) => ({
-    margin: '0 16px',
-    padding: '0 8px',
-    height: '100%',
-    minHeight: 0,
-    gap: 0,
-    borderRadius: 8,
-    lineHeight: 1.375,
-    color: theme.vars.palette.text.primary,
-    [`&.${listItemButtonClasses.selected}, &.active`]: {
-        color: theme.vars.palette.primary.main,
-        backgroundColor: theme.vars.palette.action.selected,
-        '&:hover': { backgroundColor: theme.vars.palette.action.selected },
-        [`& .${listItemIconClasses.root}`]: {
-            color: theme.vars.palette.primary.main
-        }
-    },
-    [theme.breakpoints.down('lg')]: {
-        display: 'block',
-        height: 'auto',
-        margin: 0,
-        padding: 0,
-        textAlign: 'center',
-        fontSize: theme.typography.pxToRem(11),
-        lineHeight: '12px',
-        color: theme.vars.palette.text.secondary,
-        [`&.${listItemButtonClasses.selected}, &.active`]: {
-            color: theme.vars.palette.text.primary,
-            backgroundColor: 'transparent',
-            [`& .${listItemIconClasses.root}`]: {
-                color: theme.vars.palette.text.primary
-            }
-        }
-    }
-}));