@linagora/twake-mui 14.4.0 → 15.1.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# @linagora/twake-mui [15.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@15.0.0...@linagora/twake-mui@15.1.0) (2026-10-19)
+
+
+### Features
+
+* **twake-mui:** Implement sidebar drawer ([43a443b](https://github.com/linagora/twake-ui/commit/43a443bcff5719c828382230971beb83be4fb10a))
+* **twake-mui:** Separate click and toggle event in NavDropdown ([4ae7157](https://github.com/linagora/twake-ui/commit/4ae715714a04ba4eb606c598b7ec4e715c511dca))
+
+# @linagora/twake-mui [15.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@14.4.0...@linagora/twake-mui@15.0.0) (2026-10-19)
+
+
+### Code Refactoring
+
+* **twake-mui:** Export Avatar as default only ([a7a138e](https://github.com/linagora/twake-ui/commit/a7a138e0cf2e731fb5eba00bc7dfdbe2c8993f0b))
+* **twake-mui:** Export Button as default only ([c5ac445](https://github.com/linagora/twake-ui/commit/c5ac445f3f438e1d3f366c906067b18fd19e2ded))
+* **twake-mui:** Export ContactPopover as default only ([e74ddbe](https://github.com/linagora/twake-ui/commit/e74ddbec7a0fe526d508075364cc52d586cc26db))
+* **twake-mui:** Export SearchBar as default only ([34d0050](https://github.com/linagora/twake-ui/commit/34d00502da7c41edfcf841a49494b139cf977d9f))
+* **twake-mui:** Export Switch as default only ([b22aebc](https://github.com/linagora/twake-ui/commit/b22aebc9809137eb8a7effb30f8dd5ed98ff97cc))
+* **twake-mui:** Export Tabs as default only ([47d31fe](https://github.com/linagora/twake-ui/commit/47d31fea3c68ba104ff92f455b7ca0db47d43cab))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** ContactPopoverDefault is no longer exported. Import
+ContactPopover instead.
+* **twake-mui:** SearchBarDefault is no longer exported. Import SearchBar
+instead.
+* **twake-mui:** SwitchDefault is no longer exported. Import Switch
+instead.
+* **twake-mui:** TabsDefault is no longer exported. Import Tabs
+instead.
+* **twake-mui:** ButtonDefault is no longer exported. Import Button
+instead.
+* **twake-mui:** AvatarDefault is no longer exported. Import Avatar
+instead.
+
 # @linagora/twake-mui [14.4.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@14.3.0...@linagora/twake-mui@14.4.0) (2026-10-15)
 
 

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Avatar } from './index';
+import Avatar from './index';
 declare const meta: Meta<typeof Avatar>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/Avatar/Avatar.stories.js

@@ -2,7 +2,7 @@ import { Icon, Link } from '@linagora/twake-icons';
 import { AvatarGroup, Stack } from '@mui/material';
 import React from 'react';
 import { supportedColors } from './helpers';
-import { Avatar } from './index';
+import Avatar from './index';
 const sizes = ['xs', 's', 'm', 'l', 'xl'];
 const image = 'https://i.pravatar.cc/150?img=11';
 const meta = {

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

@@ -10,5 +10,5 @@ export interface AvatarProps extends Omit<MuiAvatarProps, 'color'> {
     disabled?: boolean;
     display?: 'initial' | 'inline';
 }
-export declare const Avatar: React.FC<AvatarProps>;
+declare const Avatar: React.FC<AvatarProps>;
 export default Avatar;

package/dist/components/Avatar/index.js

@@ -16,7 +16,7 @@ const StyledAvatar = styled(MuiAvatar, {
     ...(background && { background, color: '#fff' }),
     ...(textColor && { color: textColor })
 }));
-export const Avatar = ({ className, color, size = 'm', textColor, border, innerBorder, disabled, display = 'initial', children, ...props }) => {
+const Avatar = ({ className, color, size = 'm', textColor, border, innerBorder, disabled, display = 'initial', children, ...props }) => {
     const isCustomSize = typeof size === 'number';
     const nameColor = typeof children === 'string' ? nameToColor(children) : '';
     const madeColor = color === 'none' ? '' : color || nameColor;

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

@@ -13,7 +13,7 @@ export interface ButtonTypeMap<AdditionalProps = object, RootComponent extends R
     defaultComponent: RootComponent;
 }
 export type ButtonProps<RootComponent extends React.ElementType = 'button', AdditionalProps = object> = OverrideProps<ButtonTypeMap<AdditionalProps, RootComponent>, RootComponent>;
-export declare const Button: OverridableComponent<ButtonTypeMap> & {
+declare const Button: OverridableComponent<ButtonTypeMap> & {
     displayName?: string;
 };
 export default Button;

package/dist/components/Button/index.js

@@ -3,6 +3,6 @@ import React from 'react';
 // legacy variant names, mapped to their MUI counterpart
 const legacyVariants = { primary: 'contained', secondary: 'outlined' };
 const isLegacy = (variant) => typeof variant === 'string' && variant in legacyVariants;
-export const Button = React.forwardRef(({ variant, ...props }, ref) => (React.createElement(MuiButton, { ref: ref, variant: isLegacy(variant) ? legacyVariants[variant] : variant, ...props })));
+const Button = React.forwardRef(({ variant, ...props }, ref) => (React.createElement(MuiButton, { ref: ref, variant: isLegacy(variant) ? legacyVariants[variant] : variant, ...props })));
 Button.displayName = 'Button';
 export default Button;

package/dist/components/ColorList/index.js

@@ -3,7 +3,7 @@ import { ButtonBase, ImageList, ImageListItem, imageListItemClasses } from '@mui
 import { styled } from '@mui/material/styles';
 import React from 'react';
 import { useBreakpoints } from '../../hooks/useBreakpoints';
-import { Avatar } from '../Avatar';
+import Avatar from '../Avatar';
 import { COLORS } from './helpers';
 const sizes = {
     small: { avatar: 21, icon: 10, cols: 7, gap: 5 },

package/dist/components/ContactPopover/AttendeeInfo.js

@@ -3,7 +3,7 @@ import { Copy } from '@linagora/twake-icons';
 import { Box, IconButton, Typography, useTheme } from '@mui/material';
 import React, { useState } from 'react';
 import { useI18n } from 'twake-i18n';
-import { Avatar } from '../Avatar';
+import Avatar from '../Avatar';
 import { nameToColor, getInitials } from '../Avatar/helpers';
 export const AttendeeInfo = ({ name, email, onEmailCopy }) => {
     const theme = useTheme();

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ContactPopover } from './index';
+import ContactPopover from './index';
 declare const meta: Meta<typeof ContactPopover>;
 export default meta;
 type Story = StoryObj<typeof ContactPopover>;

package/dist/components/ContactPopover/ContactPopover.stories.js

@@ -1,7 +1,7 @@
 import { Chip, Box, Typography } from '@mui/material';
 import React from 'react';
 import { screen } from 'storybook/test';
-import { ContactPopover } from './index';
+import ContactPopover from './index';
 const meta = {
     title: 'ContactPopover',
     component: ContactPopover,

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

@@ -25,6 +25,6 @@ interface ContactPopoverComponent extends React.FC<ContactPopoverProps> {
     CalendarAction: typeof ContactPopoverCalendarAction;
     EmailAction: typeof ContactPopoverEmailAction;
 }
-export declare const ContactPopover: ContactPopoverComponent;
+declare const ContactPopover: ContactPopoverComponent;
 export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction };
 export default ContactPopover;

package/dist/components/ContactPopover/index.js

@@ -30,7 +30,7 @@ const CloseButton = styled(IconButton)(() => ({
     top: 8,
     right: 8
 }));
-export const ContactPopover = ({ name, email, children, onEmailCopy, onClose, disabled = false }) => {
+const ContactPopover = ({ name, email, children, onEmailCopy, onClose, disabled = false }) => {
     useExtendI18n(locales);
     const [anchorEl, setAnchorEl] = useState(null);
     const openTimeoutRef = useRef(null);

package/dist/components/ListItem/ListItem.stories.js

@@ -2,7 +2,7 @@ import { Comment, Dots, Icon, Pen, People, Right, Trash } from '@linagora/twake-
 import { Box, Checkbox, IconButton, List, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, Radio, Stack } from '@mui/material';
 import React from 'react';
 import ListItem from './index';
-import { Avatar } from '../Avatar';
+import Avatar from '../Avatar';
 import ListItemButton from '../ListItemButton';
 import ListItemText from '../ListItemText';
 import ListSubheader from '../ListSubheader';

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

@@ -1,6 +1,7 @@
-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<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>;
+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<import("@mui/material").Theme> & {
+    disableMobileView: boolean;
+}, {}, {}>;
+export type NavProps = Omit<React.ComponentProps<typeof NavRoot>, 'disableMobileView'>;
 export declare const Nav: (props: NavProps) => React.ReactElement;
 export {};

package/dist/components/Nav/index.js

@@ -1,14 +1,22 @@
 import { List } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React from 'react';
-const NavRoot = styled(List)(({ theme }) => ({
+import React, { useContext } from 'react';
+import { SidebarContext } from '../Sidebar/SidebarContext';
+const NavRoot = styled(List, {
+    shouldForwardProp: prop => prop !== 'disableMobileView'
+})(({ theme, disableMobileView }) => ({
     margin: '24px 0',
     padding: 0,
-    [theme.breakpoints.down('lg')]: {
-        display: 'flex',
-        justifyContent: 'space-around',
-        margin: '6px 0 4px'
-    }
+    ...(!disableMobileView && {
+        [theme.breakpoints.down('lg')]: {
+            display: 'flex',
+            justifyContent: 'space-around',
+            margin: '6px 0 4px'
+        }
+    })
 }));
-export const Nav = (props) => (React.createElement("nav", null,
-    React.createElement(NavRoot, { ...props })));
+export const Nav = (props) => {
+    const disableMobileView = useContext(SidebarContext);
+    return (React.createElement("nav", null,
+        React.createElement(NavRoot, { ...props, disableMobileView: disableMobileView })));
+};

package/dist/components/NavDesktopDropdown/index.js

@@ -1,13 +1,15 @@
-import React, { Children, isValidElement, useState } from 'react';
+import React, { Children, isValidElement, useState, useContext } from 'react';
 import { useBreakpoints } from '../../hooks/useBreakpoints';
 import DropdownText from '../DropdownText';
 import ListItem from '../ListItem';
+import { SidebarContext } from '../Sidebar/SidebarContext';
 export const NavDesktopDropdown = ({ label, children, defaultOpen = true, limit = 5 }) => {
+    const disableMobileView = useContext(SidebarContext);
     const { isDesktop } = useBreakpoints();
     const [open, setOpen] = useState(defaultOpen);
     const isActivated = Children.toArray(children).filter(isValidElement).length > limit;
     const onToggle = () => setOpen(current => !current);
-    if (!isDesktop)
+    if (!isDesktop && !disableMobileView)
         return null;
     return (React.createElement(React.Fragment, null,
         React.createElement(ListItem, { size: "small", sx: { cursor: isActivated ? 'pointer' : undefined } },

package/dist/components/NavDesktopLimiter/index.js

@@ -1,10 +1,11 @@
 import { Bottom, Top } from '@linagora/twake-icons';
-import React, { Children, isValidElement, useState } from 'react';
+import React, { Children, isValidElement, useState, useContext } from 'react';
 import { useExtendI18n, useI18n } from 'twake-i18n';
 import { NavIcon } from '../NavIcon';
 import { NavItem } from '../NavItem';
 import { NavLink } from '../NavLink/NavLink';
 import NavText from '../NavText';
+import { SidebarContext } from '../Sidebar/SidebarContext';
 import de from './locales/de.json';
 import en from './locales/en.json';
 import es from './locales/es.json';
@@ -16,12 +17,13 @@ import { useBreakpoints } from '../../hooks/useBreakpoints';
 const locales = { de, en, es, fr, it, ru, vi };
 export const NavDesktopLimiter = ({ children, max = 5 }) => {
     useExtendI18n(locales);
+    const disableMobileView = useContext(SidebarContext);
     const { t } = useI18n();
     const [viewingAll, setViewingAll] = useState(false);
-    const { isMobile } = useBreakpoints();
+    const { isDesktop } = useBreakpoints();
     const items = Children.toArray(children).filter(isValidElement);
     const amountHidden = Math.max(0, items.length - max);
-    if (isMobile)
+    if (!isDesktop && !disableMobileView)
         return null;
     return (React.createElement(React.Fragment, null,
         viewingAll ? items : items.slice(0, max),

package/dist/components/NavIcon/index.js

@@ -1,19 +1,27 @@
 import { Icon } from '@linagora/twake-icons';
 import { ListItemIcon } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React from 'react';
-const NavIconRoot = styled(ListItemIcon)(({ theme }) => ({
+import React, { useContext } from 'react';
+import { SidebarContext } from '../Sidebar/SidebarContext';
+const NavIconRoot = styled(ListItemIcon, {
+    shouldForwardProp: prop => prop !== 'disableMobileView'
+})(({ theme, disableMobileView }) => ({
     minWidth: 0,
     width: 'auto',
     height: 'auto',
     marginRight: 12,
     color: theme.vars.palette.text.primary,
-    [theme.breakpoints.down('lg')]: {
-        display: 'block',
-        marginRight: 0,
-        color: theme.vars.palette.text.secondary,
-        '& svg': { margin: '4px auto 5px', width: 16, height: 16 }
-    }
+    ...(!disableMobileView && {
+        [theme.breakpoints.down('lg')]: {
+            display: 'block',
+            marginRight: 0,
+            color: theme.vars.palette.text.secondary,
+            '& svg': { margin: '4px auto 5px', width: 16, height: 16 }
+        }
+    })
 }));
-export const NavIcon = ({ icon, ...props }) => (React.createElement(NavIconRoot, { ...props },
-    React.createElement(Icon, { icon: icon, "aria-hidden": "true", focusable: "false" })));
+export const NavIcon = ({ icon, ...props }) => {
+    const disableMobileView = useContext(SidebarContext);
+    return (React.createElement(NavIconRoot, { disableMobileView: disableMobileView, ...props },
+        React.createElement(Icon, { icon: icon, "aria-hidden": "true", focusable: "false" })));
+};

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

@@ -1,3 +1,4 @@
 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";
+    disableMobileView?: boolean;
 }, {}, {}>;

package/dist/components/NavItem/NavItemRoot.js

@@ -1,8 +1,8 @@
 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' }) => {
+    shouldForwardProp: prop => prop !== 'secondary' && prop !== 'variant' && prop !== 'disableMobileView'
+})(({ theme, variant = 'primary', disableMobileView = false }) => {
     const isSecondary = variant === 'secondary';
     const isTertiary = variant === 'tertiary';
     return {
@@ -27,22 +27,26 @@ export const NavItemRoot = styled(ListItem, {
                 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'
+        ...(!disableMobileView && {
+            [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' },
+            ...(!disableMobileView && {
+                [theme.breakpoints.down('lg')]: { display: 'none' }
+            }),
             paddingLeft: isTertiary ? '3rem' : '2rem'
         })
     };

package/dist/components/NavItem/index.js

@@ -1,14 +1,16 @@
 import { Divider } from '@mui/material';
 import cx from 'classnames';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { NavBadge } from './NavBadge';
 import { NavIndicator } from './NavIndicator';
 import { NavItemActions } from './NavItemActions';
 import { NavItemRoot } from './NavItemRoot';
+import { SidebarContext } from '../Sidebar/SidebarContext';
 export const NavItem = forwardRef((props, ref) => {
     const { variant = 'primary', selected, children, className, badge, hasIndicator, secondaryAction, divider, ...rest } = props;
+    const disableMobileView = useContext(SidebarContext);
     return (React.createElement(React.Fragment, null,
-        React.createElement(NavItemRoot, { ref: ref, variant: variant, className: cx(className, selected && 'Mui-selected'), ...rest },
+        React.createElement(NavItemRoot, { ref: ref, variant: variant, disableMobileView: disableMobileView, className: cx(className, selected && 'Mui-selected'), ...rest },
             children,
             (hasIndicator || badge || secondaryAction) && (React.createElement(NavItemActions, null,
                 hasIndicator && React.createElement(NavIndicator, null),

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavLinkBaseProps } from './NavLinkBase';
 export interface NavDropdownProps extends Omit<NavLinkBaseProps, 'onToggle'> {
     open?: boolean;
-    onToggle?: React.MouseEventHandler<HTMLDivElement>;
+    onToggle?: () => void;
+    toggleLabel?: string;
 }
 export declare const NavDropdown: React.ForwardRefExoticComponent<NavDropdownProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/NavLink/NavDropdown.js

@@ -1,19 +1,33 @@
 import { Icon, Dropdown } from '@linagora/twake-icons';
+import { IconButton } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import React, { forwardRef } from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
 import { NavLinkBase } from './NavLinkBase';
-export const NavDropdown = forwardRef(({ open, onToggle, onClick, children, ...rest }, ref) => {
+import de from './locales/de.json';
+import en from './locales/en.json';
+import es from './locales/es.json';
+import fr from './locales/fr.json';
+import it from './locales/it.json';
+import ru from './locales/ru.json';
+import vi from './locales/vi.json';
+const locales = { de, en, es, fr, it, ru, vi };
+export const NavDropdown = forwardRef(({ open, onToggle, toggleLabel, onClick, children, ...rest }, ref) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
     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 })));
+        React.createElement(IconButton, { className: "u-ml-half", size: "xsmall", "aria-label": toggleLabel ??
+                t(open ? 'NavDropdown.collapse' : 'NavDropdown.expand'), "aria-expanded": open, onClick: e => {
+                e.stopPropagation();
+                onToggle?.();
+            } },
+            React.createElement(Icon, { icon: Dropdown, rotate: open ? 0 : -90, size: 14, color: theme.vars.palette.text.primary }))));
 });
 NavDropdown.displayName = 'NavDropdown';

package/dist/components/NavLink/NavLinkBase.js

@@ -1,12 +1,16 @@
 import cx from 'classnames';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { NavLinkRoot } from './NavLinkRoot';
+import { SidebarContext } from '../Sidebar/SidebarContext';
 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) => {
+    const disableMobileView = useContext(SidebarContext);
+    return (React.createElement(NavLinkRoot, { ref: ref, disableMobileView: disableMobileView, role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
             if (onKeyDown) {
                 onKeyDown(e);
             }
-            if (!e.defaultPrevented && (e.key === 'Enter' || e.key === ' ')) {
+            if (e.target === e.currentTarget &&
+                !e.defaultPrevented &&
+                (e.key === 'Enter' || e.key === ' ')) {
                 e.preventDefault();
                 e.currentTarget.click();
             }

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

@@ -1,2 +1,3 @@
-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>, {}>;
+export declare const NavLinkRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    disableMobileView?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/NavLink/NavLinkRoot.js

@@ -1,5 +1,7 @@
 import { styled } from '@mui/material/styles';
-export const NavLinkRoot = styled('div')(({ theme }) => ({
+export const NavLinkRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'disableMobileView'
+})(({ theme, disableMobileView }) => ({
     padding: 8,
     width: '100%',
     height: '100%',
@@ -22,20 +24,22 @@ export const NavLinkRoot = styled('div')(({ theme }) => ({
             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
+    ...(!disableMobileView && {
+        [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/NavLink/locales/de.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Einklappen",
+        "expand": "Ausklappen"
+    }
+}

package/dist/components/NavLink/locales/en.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Collapse",
+        "expand": "Expand"
+    }
+}

package/dist/components/NavLink/locales/es.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Contraer",
+        "expand": "Expandir"
+    }
+}

package/dist/components/NavLink/locales/fr.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Réduire",
+        "expand": "Développer"
+    }
+}

package/dist/components/NavLink/locales/it.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Comprimi",
+        "expand": "Espandi"
+    }
+}

package/dist/components/NavLink/locales/ru.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Свернуть",
+        "expand": "Развернуть"
+    }
+}

package/dist/components/NavLink/locales/vi.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Thu gọn",
+        "expand": "Mở rộng"
+    }
+}

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

@@ -1,2 +1,3 @@
-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>, {}>;
+export declare const NavPrimaryText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    disableMobileView?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/NavText/NavPrimaryText.js

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

package/dist/components/NavText/index.js

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { NavPrimaryText } from './NavPrimaryText';
 import { NavSecondaryText } from './NavSecondaryText';
 import { NavTertiaryText } from './NavTertiaryText';
 import { NavTextRoot } from './NavTextRoot';
+import { SidebarContext } from '../Sidebar/SidebarContext';
 const NavText = React.forwardRef(({ secondaryText, tertiaryText, tertiaryIcon, children, sx, ...rest }, ref) => {
+    const disableMobileView = useContext(SidebarContext);
     return (React.createElement(NavTextRoot, { ref: ref, sx: sx, ...rest },
-        React.createElement(NavPrimaryText, null, children),
+        React.createElement(NavPrimaryText, { disableMobileView: disableMobileView }, children),
         secondaryText && React.createElement(NavSecondaryText, null, secondaryText),
         (tertiaryText || tertiaryIcon) && (React.createElement(NavTertiaryText, null,
             tertiaryIcon,

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SearchBar } from './index';
+import SearchBar from './index';
 declare const meta: Meta<typeof SearchBar>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/SearchBar/SearchBar.stories.js

@@ -1,7 +1,7 @@
 import { Cloud } from '@linagora/twake-icons';
 import { Stack, Typography } from '@mui/material';
 import React from 'react';
-import { SearchBar } from './index';
+import SearchBar from './index';
 const sizes = ['small', 'medium', 'large', 'auto'];
 const meta = {
     title: 'SearchBar',

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SearchBarProps } from './types';
-export declare const SearchBar: React.ForwardRefExoticComponent<Omit<SearchBarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SearchBar: React.ForwardRefExoticComponent<Omit<SearchBarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SearchBar;

package/dist/components/SearchBar/index.js

@@ -19,7 +19,7 @@ import it from './locales/it.json';
 import ru from './locales/ru.json';
 import vi from './locales/vi.json';
 const locales = { de, en, es, fr, it, ru, vi };
-export const SearchBar = forwardRef(({ placeholder, icon = Magnifier, size = 'small', type = 'search', label, componentsProps, disabledClear = false, disabledFocus = false, disabledHover = false, className, defaultValue = '', value, elevation = 1, disabled = false, onChange = () => { }, onClear = () => { }, onFocus = () => { }, onBlur = () => { }, ...props }, ref) => {
+const SearchBar = forwardRef(({ placeholder, icon = Magnifier, size = 'small', type = 'search', label, componentsProps, disabledClear = false, disabledFocus = false, disabledHover = false, className, defaultValue = '', value, elevation = 1, disabled = false, onChange = () => { }, onClear = () => { }, onFocus = () => { }, onBlur = () => { }, ...props }, ref) => {
     useExtendI18n(locales);
     const { t } = useI18n();
     const [currentValue, setCurrentValue] = useState(defaultValue);

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Screenshot: Story;
+export declare const DrawerMobile: Story;

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

@@ -21,8 +21,7 @@ const SidebarDemo = (props) => {
         React.createElement(Sidebar, { ...props },
             React.createElement(Nav, null,
                 React.createElement(NavItem, null,
-                    React.createElement(NavDropdown, { ...makeProps(['Section 1']), open: openSection1, onToggle: (e) => {
-                            e.stopPropagation();
+                    React.createElement(NavDropdown, { ...makeProps(['Section 1']), open: openSection1, onToggle: () => {
                             setOpenSection1(prev => !prev);
                         } },
                         React.createElement(NavIcon, { icon: Warn }),
@@ -52,6 +51,14 @@ const meta = {
     title: 'Sidebar',
     component: Sidebar,
     tags: ['autodocs'],
+    argTypes: {
+        anchor: { control: 'radio', options: ['bottom', 'left'] },
+        open: { control: 'boolean' }
+    },
+    args: {
+        anchor: 'bottom',
+        open: false
+    },
     render: args => React.createElement(SidebarDemo, { ...args })
 };
 export default meta;
@@ -60,3 +67,16 @@ export const Default = {};
 export const Screenshot = {
     tags: ['argos']
 };
+export const DrawerMobile = {
+    tags: ['argos', '!autodocs'],
+    globals: { viewport: 'mobile' },
+    args: { anchor: 'left', open: true },
+    parameters: {
+        argos: {
+            modes: {
+                'desktop-light': { disabled: true },
+                'desktop-dark': { disabled: true }
+            }
+        }
+    }
+};

package/dist/components/Sidebar/SidebarContext.d.ts

@@ -0,0 +1 @@
+export declare const SidebarContext: import("react").Context<boolean>;

package/dist/components/Sidebar/SidebarContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const SidebarContext = createContext(false);

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

@@ -1,8 +1,11 @@
-import { SxProps } from '@mui/material';
-import { Theme } from '@mui/material/styles';
+import { DrawerProps, SxProps, Theme } from '@mui/material';
 import React from 'react';
 export declare const SIDEBAR_MOBILE_HEIGHT = "--sidebarHeight";
 export interface SidebarProps extends React.ComponentPropsWithoutRef<'aside'> {
     sx?: SxProps<Theme>;
+    /** Mobile presentation: a bottom bar or a temporary left drawer. */
+    anchor?: 'bottom' | 'left';
+    open?: boolean;
+    onClose?: DrawerProps['onClose'];
 }
-export declare const Sidebar: React.FC<SidebarProps>;
+export declare const Sidebar: ({ children, anchor, open, onClose, sx, ...rest }: SidebarProps) => React.ReactElement;

package/dist/components/Sidebar/index.js

@@ -1,9 +1,12 @@
-import { GlobalStyles } from '@mui/material';
+import { Drawer, GlobalStyles } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React from 'react';
+import { SidebarContext } from './SidebarContext';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
 export const SIDEBAR_MOBILE_HEIGHT = '--sidebarHeight';
-const makeSidebarHeightCSSVar = (React.createElement(GlobalStyles, { styles: { ':root': { [SIDEBAR_MOBILE_HEIGHT]: '52px' } } }));
-const SidebarRoot = styled('aside')(({ theme }) => ({
+const SidebarRoot = styled('aside', {
+    shouldForwardProp: prop => prop !== 'anchor'
+})(({ theme, anchor }) => ({
     width: 236,
     flex: '0 0 auto',
     display: 'flex',
@@ -11,18 +14,30 @@ const SidebarRoot = styled('aside')(({ theme }) => ({
     overflowX: 'hidden',
     overflowY: 'auto',
     backgroundColor: theme.vars.palette.background.default,
-    [theme.breakpoints.down('lg')]: {
-        position: 'fixed',
-        bottom: 0,
-        left: 0,
-        width: '100%',
-        height: `var(${SIDEBAR_MOBILE_HEIGHT})`,
-        boxSizing: 'content-box',
-        display: 'block',
-        borderTop: `1px solid ${theme.vars.palette.divider}`,
-        zIndex: theme.zIndex.appBar
+    ...(anchor === 'bottom' && {
+        [theme.breakpoints.down('lg')]: {
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            width: '100%',
+            height: `var(${SIDEBAR_MOBILE_HEIGHT}, 52px)`,
+            boxSizing: 'content-box',
+            display: 'block',
+            borderTop: `1px solid ${theme.vars.palette.divider}`,
+            zIndex: theme.zIndex.appBar
+        }
+    })
+}));
+const SidebarDrawer = styled(Drawer)(({ theme }) => ({
+    '& .MuiDrawer-paper': {
+        width: 300,
+        maxWidth: 'calc(100vw - 56px)',
+        backgroundColor: theme.vars.palette.background.default
     }
 }));
-export const Sidebar = props => (React.createElement(React.Fragment, null,
-    makeSidebarHeightCSSVar,
-    React.createElement(SidebarRoot, { ...props })));
+export const Sidebar = ({ children, anchor = 'bottom', open = false, onClose, sx, ...rest }) => {
+    const { isDesktop } = useBreakpoints();
+    return (React.createElement(SidebarContext.Provider, { value: anchor === 'left' },
+        anchor === 'bottom' && (React.createElement(GlobalStyles, { styles: { ':root': { [SIDEBAR_MOBILE_HEIGHT]: '52px' } } })),
+        anchor === 'left' && !isDesktop ? (React.createElement(SidebarDrawer, { ...rest, variant: "temporary", anchor: "left", open: open, onClose: onClose, sx: sx }, children)) : (React.createElement(SidebarRoot, { anchor: anchor, sx: sx, ...rest }, children))));
+};

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Switch } from './index';
+import Switch from './index';
 declare const meta: Meta<typeof Switch>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/Switch/Switch.stories.js

@@ -1,7 +1,7 @@
 import { Check } from '@linagora/twake-icons';
 import { Divider, FormControlLabel, FormGroup, Stack, Typography } from '@mui/material';
 import React from 'react';
-import { Switch } from './index';
+import Switch from './index';
 const colors = ['primary', 'secondary', 'success', 'default'];
 const meta = {
     title: 'Switch',

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

@@ -5,5 +5,5 @@ export interface SwitchProps extends Omit<MuiSwitchProps, 'icon' | 'checkedIcon'
     /** A twake icon drawn inside the thumb */
     icon?: IconProps['icon'];
 }
-export declare const Switch: React.FC<SwitchProps>;
+declare const Switch: React.FC<SwitchProps>;
 export default Switch;

package/dist/components/Switch/index.js

@@ -1,7 +1,7 @@
 import { Icon } from '@linagora/twake-icons';
 import { Switch as MuiSwitch } from '@mui/material';
 import React from 'react';
-export const Switch = ({ icon, ...props }) => {
+const Switch = ({ icon, ...props }) => {
     const thumb = (React.createElement("span", { className: "switchThumb" }, !!icon && React.createElement(Icon, { icon: icon, size: 14 })));
     return React.createElement(MuiSwitch, { icon: thumb, checkedIcon: thumb, ...props });
 };

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Tabs } from './index';
+import Tabs from './index';
 declare const meta: Meta<typeof Tabs>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/Tabs/Tabs.stories.js

@@ -1,6 +1,6 @@
 import { Stack, Tab } from '@mui/material';
 import React from 'react';
-import { Tabs } from './index';
+import Tabs from './index';
 const variants = ['standard', 'fullWidth', 'scrollable'];
 const meta = {
     title: 'Tabs',

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

@@ -6,5 +6,5 @@ export interface TabsProps extends MuiTabsProps {
     /** Pill container with the selected tab raised on a white pill */
     segmented?: boolean;
 }
-export declare const Tabs: React.FC<TabsProps>;
+declare const Tabs: React.FC<TabsProps>;
 export default Tabs;

package/dist/components/Tabs/index.js

@@ -1,5 +1,5 @@
 import { Tabs as MuiTabs } from '@mui/material';
 import cx from 'classnames';
 import React from 'react';
-export const Tabs = ({ className, narrowed, segmented, ...props }) => React.createElement(MuiTabs, { className: cx(className, { narrowed, segmented }), ...props });
+const Tabs = ({ className, narrowed, segmented, ...props }) => React.createElement(MuiTabs, { className: cx(className, { narrowed, segmented }), ...props });
 export default Tabs;

package/dist/index.d.ts

@@ -31,9 +31,9 @@ export { copyToClipboard } from './components/ActionsMenu/Actions/copyToClipboar
 export { editAttribute } from './components/ActionsMenu/Actions/editAttribute';
 export { others } from './components/ActionsMenu/Actions/others';
 export { exportToText } from './components/ActionsMenu/Actions/exportToText';
-export { Avatar, default as AvatarDefault } from './components/Avatar';
+export { default as Avatar } from './components/Avatar';
 export { default as BarTitle } from './components/BarTitle';
-export { Button, default as ButtonDefault } from './components/Button';
+export { default as Button } from './components/Button';
 export { default as BottomSheet } from './components/BottomSheet';
 export { default as BottomSheetItem } from './components/BottomSheet/BottomSheetItem';
 export { default as BottomSheetHeader } from './components/BottomSheet/BottomSheetHeader';
@@ -41,7 +41,7 @@ export { default as BottomSheetTitle } from './components/BottomSheet/BottomShee
 export { default as Chip } from './components/Chip';
 export { default as ColorList } from './components/ColorList';
 export { Dialog, default as DialogDefault } from './components/Dialog';
-export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
+export { default as ContactPopover } from './components/ContactPopover';
 export { default as DropdownButton } from './components/DropdownButton';
 export { default as DropdownText } from './components/DropdownText';
 export { Empty, EmptySubTitle } from './components/Empty';
@@ -62,9 +62,9 @@ export type { AlertContextValue, ShowAlert, ShowAlertOptions } from './providers
 export { default as AlertProvider } from './providers/AlertProvider';
 export { useAlert } from './providers/AlertProvider/useAlert';
 export { default as ProgressionBanner } from './components/ProgressionBanner';
-export { Tabs, default as TabsDefault } from './components/Tabs';
-export { Switch, default as SwitchDefault } from './components/Switch';
-export { SearchBar, default as SearchBarDefault } from './components/SearchBar';
+export { default as Tabs } from './components/Tabs';
+export { default as Switch } from './components/Switch';
+export { default as SearchBar } from './components/SearchBar';
 export { Sidebar, SIDEBAR_MOBILE_HEIGHT } from './components/Sidebar';
 export { Layout, Main, Content } from './components/Layout';
 export { Nav } from './components/Nav';

package/dist/index.js

@@ -34,9 +34,9 @@ export { copyToClipboard } from './components/ActionsMenu/Actions/copyToClipboar
 export { editAttribute } from './components/ActionsMenu/Actions/editAttribute';
 export { others } from './components/ActionsMenu/Actions/others';
 export { exportToText } from './components/ActionsMenu/Actions/exportToText';
-export { Avatar, default as AvatarDefault } from './components/Avatar';
+export { default as Avatar } from './components/Avatar';
 export { default as BarTitle } from './components/BarTitle';
-export { Button, default as ButtonDefault } from './components/Button';
+export { default as Button } from './components/Button';
 export { default as BottomSheet } from './components/BottomSheet';
 export { default as BottomSheetItem } from './components/BottomSheet/BottomSheetItem';
 export { default as BottomSheetHeader } from './components/BottomSheet/BottomSheetHeader';
@@ -44,7 +44,7 @@ export { default as BottomSheetTitle } from './components/BottomSheet/BottomShee
 export { default as Chip } from './components/Chip';
 export { default as ColorList } from './components/ColorList';
 export { Dialog, default as DialogDefault } from './components/Dialog';
-export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
+export { default as ContactPopover } from './components/ContactPopover';
 export { default as DropdownButton } from './components/DropdownButton';
 export { default as DropdownText } from './components/DropdownText';
 export { Empty, EmptySubTitle } from './components/Empty';
@@ -63,9 +63,9 @@ export { default as PointerAlert } from './components/PointerAlert';
 export { default as AlertProvider } from './providers/AlertProvider';
 export { useAlert } from './providers/AlertProvider/useAlert';
 export { default as ProgressionBanner } from './components/ProgressionBanner';
-export { Tabs, default as TabsDefault } from './components/Tabs';
-export { Switch, default as SwitchDefault } from './components/Switch';
-export { SearchBar, default as SearchBarDefault } from './components/SearchBar';
+export { default as Tabs } from './components/Tabs';
+export { default as Switch } from './components/Switch';
+export { default as SearchBar } from './components/SearchBar';
 export { Sidebar, SIDEBAR_MOBILE_HEIGHT } from './components/Sidebar';
 export { Layout, Main, Content } from './components/Layout';
 export { Nav } from './components/Nav';

package/dist/stories/Button.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Button } from '../components/Button';
+import Button from '../components/Button';
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/stories/Button.stories.js

@@ -1,7 +1,7 @@
 import { Icon, Plus, Stop } from '@linagora/twake-icons';
 import { Box, Stack } from '@mui/material';
 import React from 'react';
-import { Button } from '../components/Button';
+import Button from '../components/Button';
 const variants = ['contained', 'outlined', 'ghost', 'text'];
 const sizes = ['small', 'medium', 'large'];
 const colors = [

package/package.json

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