@linagora/twake-mui 9.17.0 → 10.1.0

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+# @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)
+
+
+### Bug Fixes
+
+* **twake-mui:** Infer the SearchBar submit event type ([542f632](https://github.com/linagora/twake-ui/commit/542f63255dd143d85be5f96678f6ccc66538918b))
+* **twake-mui:** Pass an initial value to useRef in SearchBar ([f32e365](https://github.com/linagora/twake-ui/commit/f32e36514e56373b6525b38b1c56c022b40b2797))
+* **twake-mui:** Stop using the global JSX namespace in ContactPopover ([102d577](https://github.com/linagora/twake-ui/commit/102d577a050c59724f18f535bf8e3227cafb7b74))
+
+
+### chore
+
+* **twake-mui:** Drop the twake-i18n React override by requiring twake-i18n 0.6.0 ([64c678e](https://github.com/linagora/twake-ui/commit/64c678e8e76015b919b6df9965ac512c142eed6f))
+
+
+### Features
+
+* **twake-mui:** Support React 19 ([bdc7265](https://github.com/linagora/twake-ui/commit/bdc7265565d7d4991d2c335d4c58a258f56946ed))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** twake-mui now requires twake-i18n >=0.6.0 as a peer
+dependency, up from >=0.5.0. twake-mui only supports React 19 when
+twake-i18n accepts it too, and consumers pinned on twake-i18n 0.5.0 will
+get an ERESOLVE error until they upgrade.
+
+Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
+
 # @linagora/twake-mui [9.17.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.16.0...@linagora/twake-mui@9.17.0) (2026-10-05)
 
 

package/dist/components/ContactPopover/AttendeeInfo.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface AttendeeInfoProps {
     /** Attendee display name */
     name: string;
@@ -6,4 +7,4 @@ export interface AttendeeInfoProps {
     /** Callback when email is copied to clipboard */
     onEmailCopy?: (email: string) => void;
 }
-export declare const AttendeeInfo: ({ name, email, onEmailCopy }: AttendeeInfoProps) => JSX.Element;
+export declare const AttendeeInfo: ({ name, email, onEmailCopy }: AttendeeInfoProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverActions.d.ts

@@ -3,4 +3,4 @@ export interface ContactPopoverActionsProps {
     /** Action items rendered inside the actions bar */
     children: React.ReactNode;
 }
-export declare const ContactPopoverActions: ({ children }: ContactPopoverActionsProps) => JSX.Element;
+export declare const ContactPopoverActions: ({ children }: ContactPopoverActionsProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverCalendarAction.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 export interface ContactPopoverCalendarActionProps {
     /** URL for calendar action (e.g., view attendee's calendar) */
     url: string;
     /** Disable the action button */
     disabled?: boolean;
 }
-export declare const ContactPopoverCalendarAction: ({ url, disabled }: ContactPopoverCalendarActionProps) => JSX.Element;
+export declare const ContactPopoverCalendarAction: ({ url, disabled }: ContactPopoverCalendarActionProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverChatAction.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 export interface ContactPopoverChatActionProps {
     /** URL for chat action (e.g., Twake Chat link) */
     url: string;
     /** Disable the action button */
     disabled?: boolean;
 }
-export declare const ContactPopoverChatAction: ({ url, disabled }: ContactPopoverChatActionProps) => JSX.Element;
+export declare const ContactPopoverChatAction: ({ url, disabled }: ContactPopoverChatActionProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverEmailAction.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 export interface ContactPopoverEmailActionProps {
     /** URL for email action */
     url: string;
     /** Disable the action button */
     disabled?: boolean;
 }
-export declare const ContactPopoverEmailAction: ({ url, disabled }: ContactPopoverEmailActionProps) => JSX.Element;
+export declare const ContactPopoverEmailAction: ({ url, disabled }: ContactPopoverEmailActionProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverVideoAction.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 export interface ContactPopoverVideoActionProps {
     /** URL for video call action (e.g., Twake Meet link) */
     url: string;
     /** Disable the action button */
     disabled?: boolean;
 }
-export declare const ContactPopoverVideoAction: ({ url, disabled }: ContactPopoverVideoActionProps) => JSX.Element;
+export declare const ContactPopoverVideoAction: ({ url, disabled }: ContactPopoverVideoActionProps) => React.ReactElement;

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/Nav/index.d.ts

@@ -1,8 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import React from 'react';
-declare const NavRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & Omit<import("@mui/material").ListOwnProps, keyof import("@mui/material").ListOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-    ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
-}, "style" | "className" | "children" | "dense" | "disablePadding" | "classes" | "sx" | "subheader"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+declare const NavRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & Omit<import("@mui/material").ListOwnProps, keyof import("@mui/material").ListOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "style" | "className" | "children" | "dense" | "disablePadding" | "classes" | "sx" | "subheader"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
 export type NavProps = React.ComponentProps<typeof NavRoot>;
 export declare const Nav: (props: NavProps) => React.ReactElement;
 export {};

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,8 +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<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-}, "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/SearchBar/DisableHighlight.d.ts

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

package/dist/components/SearchBar/FocusHighlight.d.ts

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

package/dist/components/SearchBar/Highlight.d.ts

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

package/dist/components/SearchBar/SearchBarButtonBase.d.ts

@@ -1,3 +1 @@
-export declare const SearchBarButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").ButtonBaseOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "disabled" | "style" | "className" | "type" | "tabIndex" | "children" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SearchBarButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").ButtonBaseOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "style" | "className" | "type" | "tabIndex" | "children" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/components/SearchBar/SearchBarIconWrapper.d.ts

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

package/dist/components/SearchBar/SearchBarRoot.d.ts

@@ -1,7 +1,5 @@
 import { SearchBarProps } from './types';
-export declare const SearchBarRoot: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "square" | "className" | "elevation" | "children" | "classes" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const SearchBarRoot: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "square" | "className" | "elevation" | "children" | "classes" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     searchSize: NonNullable<SearchBarProps["size"]>;
     isFocused: boolean;
 }, {}, {}>;

package/dist/components/SearchBar/SearchBarTypography.d.ts

@@ -1,5 +1,3 @@
-export declare const SearchBarTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "style" | "color" | "className" | "children" | "classes" | "sx" | "variant" | "align" | "noWrap" | "gutterBottom" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const SearchBarTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style" | "color" | "className" | "children" | "classes" | "sx" | "variant" | "align" | "noWrap" | "gutterBottom" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     hasIcon: boolean;
 }, {}, {}>;

package/dist/components/SearchBar/index.js

@@ -27,7 +27,7 @@ export const SearchBar = forwardRef(({ placeholder, icon = Magnifier, size = 'sm
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
-    const delayedOnChangeRef = useRef();
+    const delayedOnChangeRef = useRef(undefined);
     useEffect(() => {
         delayedOnChangeRef.current = debounce((ev) => {
             onChangeRef.current(ev);
@@ -75,7 +75,7 @@ export const SearchBar = forwardRef(({ placeholder, icon = Magnifier, size = 'sm
     return (React.createElement(SearchBarRoot, { component: "form", elevation: elevation, searchSize: size, isFocused: effectivelyFocused, className: cx(className, {
             'SearchBar-focused': effectivelyFocused,
             'Mui-disabled': disabled
-        }), ref: ref, onSubmit: (ev) => {
+        }), ref: ref, onSubmit: ev => {
             ev.preventDefault();
             props.onSubmit?.(ev);
         }, ...props },

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": "9.17.0",
+  "version": "10.1.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -53,16 +53,16 @@
     "@linagora/twake-icons": ">=2.10.0",
     "@mui/lab": "^9.0.0-beta.6",
     "@mui/material": "^9.2.0",
-    "react": "^18",
-    "react-dom": "^18",
-    "twake-i18n": ">=0.5.0"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "twake-i18n": ">=0.6.0"
   },
   "dependencies": {
     "@linagora/twake-css": "^1.0.0",
     "@mui/utils": "^9.2.0",
     "classnames": "^2.5.1",
     "react-virtuoso": "4.13.0",
-    "rooks": "7.14.1"
+    "rooks": "8.4.0"
   },
   "devDependencies": {
     "@argos-ci/cli": "6.9.5",
@@ -80,8 +80,8 @@
     "@storybook/react-vite": "10.3.5",
     "@types/classnames": "^2.3.1",
     "@types/lodash": "4.17.24",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@vitest/browser-playwright": "4.1.11",
     "cozy-tsconfig": "^2.0.0",
     "eslint": "10.2.1",
@@ -89,10 +89,10 @@
     "eslint-plugin-storybook": "10.3.5",
     "lodash": "4.18.1",
     "playwright": "1.60.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "storybook": "10.3.5",
-    "twake-i18n": "^0.5.0",
+    "twake-i18n": "^0.6.0",
     "vite": "8.3.1",
     "vitest": "4.1.11"
   }

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
-            }
-        }
-    }
-}));