@linagora/twake-mui 16.2.0 → 16.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @linagora/twake-mui [16.3.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@16.2.0...@linagora/twake-mui@16.3.0) (2026-10-22)
+
+
+### Features
+
+* **twake-mui:** Migrate NavigationList from cozy-ui ([2bb292a](https://github.com/linagora/twake-ui/commit/2bb292a1534e53d332194b4e609210479cea9aaa))
+
 # @linagora/twake-mui [16.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@16.1.0...@linagora/twake-mui@16.2.0) (2026-10-21)
 
 

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

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

package/dist/components/NavigationList/NavigationList.stories.js

@@ -0,0 +1,83 @@
+import { Bank, Gear, Icon, People, Right, Trash } from '@linagora/twake-icons';
+import { Divider, ListItemIcon, ListItemSecondaryAction, Stack, Tab, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import NavigationListHeader from './NavigationListHeader';
+import NavigationListSection from './NavigationListSection';
+import NavigationList from './index';
+import ListItem from '../ListItem';
+import ListItemText from '../ListItemText';
+import Tabs from '../Tabs';
+const rightArrow = (React.createElement(ListItemSecondaryAction, null,
+    React.createElement(Icon, { icon: Right, size: 16, className: "u-mr-1" })));
+const sections = (React.createElement(React.Fragment, null,
+    React.createElement(NavigationListHeader, null, "General"),
+    React.createElement(NavigationListSection, null,
+        React.createElement(ListItem, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: Gear, size: 24 })),
+            React.createElement(ListItemText, { primary: "General settings" }),
+            rightArrow),
+        React.createElement(Divider, { variant: "inset" }),
+        React.createElement(ListItem, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: Gear, size: 32 })),
+            React.createElement(ListItemText, { primary: "A large icon does not change size of icon area" }),
+            rightArrow),
+        React.createElement(Divider, { variant: "inset" }),
+        React.createElement(ListItem, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: People, size: 16 })),
+            React.createElement(ListItemText, { primary: "User preferences", secondary: "Notifications and theme" }),
+            rightArrow),
+        React.createElement(Divider, { variant: "inset" }),
+        React.createElement(ListItem, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: Trash, size: 16, className: "u-error" })),
+            React.createElement(ListItemText, { primary: "Delete account", secondary: "Permanently delete all your data", slotProps: {
+                    primary: { color: 'error' },
+                    secondary: { color: 'error' }
+                } }))),
+    React.createElement(NavigationListHeader, null, "Accounts"),
+    React.createElement(NavigationListSection, null,
+        React.createElement(ListItem, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: Bank, size: 16 })),
+            React.createElement(ListItemText, { primary: "Bank accounts" }),
+            rightArrow))));
+const TabsExample = () => {
+    const [tab, setTab] = useState('nav');
+    const handleChange = (_, value) => setTab(value);
+    return (React.createElement("div", null,
+        React.createElement(Tabs, { value: tab, onChange: handleChange },
+            React.createElement(Tab, { value: "nav", label: "Nav" }),
+            React.createElement(Tab, { value: "details", label: "Details" })),
+        React.createElement(Divider, { className: "u-mb-1" }),
+        tab === 'nav' ? React.createElement(NavigationList, null, sections) : null,
+        tab === 'details' ? (React.createElement(Typography, { variant: "body1" }, "Ada Lovelace wrote the first algorithm meant to be carried out by a machine.")) : null));
+};
+const meta = {
+    title: 'NavigationList',
+    component: NavigationList,
+    subcomponents: { NavigationListHeader, NavigationListSection },
+    tags: ['autodocs'],
+    argTypes: {
+        children: { control: false },
+        className: { control: 'text' },
+        style: { control: 'object' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        children: sections
+    }
+};
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement("section", null,
+            React.createElement(NavigationList, null, sections)),
+        React.createElement("section", null,
+            React.createElement(TabsExample, null))))
+};

package/dist/components/NavigationList/NavigationListHeader.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+export interface NavigationListHeaderProps {
+    children?: ReactNode;
+}
+declare const NavigationListHeader: ({ children }: NavigationListHeaderProps) => React.ReactElement;
+export default NavigationListHeader;

package/dist/components/NavigationList/NavigationListHeader.js

@@ -0,0 +1,9 @@
+import { Typography } from '@mui/material';
+import React from 'react';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+import ListSubheader from '../ListSubheader';
+const NavigationListHeader = ({ children }) => {
+    const { isMobile } = useBreakpoints();
+    return isMobile ? (React.createElement(ListSubheader, null, children)) : (React.createElement(Typography, { variant: "subtitle1", color: "text.secondary", className: "u-mb-1" }, children));
+};
+export default NavigationListHeader;

package/dist/components/NavigationList/NavigationListSection.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+export interface NavigationListSectionProps {
+    children?: ReactNode;
+}
+declare const NavigationListSection: ({ children }: NavigationListSectionProps) => React.ReactElement;
+export default NavigationListSection;

package/dist/components/NavigationList/NavigationListSection.js

@@ -0,0 +1,8 @@
+import { Box } from '@mui/material';
+import React from 'react';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+const NavigationListSection = ({ children }) => {
+    const { isMobile } = useBreakpoints();
+    return isMobile ? (React.createElement(React.Fragment, null, children)) : (React.createElement(Box, { className: "u-ov-hidden u-mb-1-half u-bdrs-4", sx: { border: 1, borderColor: 'divider' } }, children));
+};
+export default NavigationListSection;

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

@@ -0,0 +1,12 @@
+import React, { CSSProperties, ReactNode } from 'react';
+export interface NavigationListProps {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Navigation choices grouped in sections: a plain list with subheaders on
+ * mobile, one bordered card per section on desktop.
+ */
+declare const NavigationList: ({ children, className, style }: NavigationListProps) => React.ReactElement;
+export default NavigationList;

package/dist/components/NavigationList/index.js

@@ -0,0 +1,13 @@
+import { List } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+/**
+ * Navigation choices grouped in sections: a plain list with subheaders on
+ * mobile, one bordered card per section on desktop.
+ */
+const NavigationList = ({ children, className, style }) => {
+    const { isMobile } = useBreakpoints();
+    return isMobile ? (React.createElement(List, { className: className, style: style }, children)) : (React.createElement("div", { className: cx('u-stack-s u-nolist', className), style: style }, children));
+};
+export default NavigationList;

package/dist/index.d.ts

@@ -70,6 +70,9 @@ export { default as ListSubheader } from './components/ListSubheader';
 export { default as LoadMore } from './components/LoadMore';
 export { default as Markdown } from './components/Markdown';
 export { default as MidEllipsis } from './components/MidEllipsis';
+export { default as NavigationList } from './components/NavigationList';
+export { default as NavigationListHeader } from './components/NavigationList/NavigationListHeader';
+export { default as NavigationListSection } from './components/NavigationList/NavigationListSection';
 export { default as PointerAlert } from './components/PointerAlert';
 export type { AlertProviderProps } from './providers/AlertProvider';
 export type { AlertContextValue, ShowAlert, ShowAlertOptions } from './providers/AlertProvider/useAlert';
@@ -170,6 +173,9 @@ export type { ListSubheaderProps } from './components/ListSubheader';
 export type { LoadMoreProps } from './components/LoadMore';
 export type { MarkdownProps } from './components/Markdown';
 export type { MidEllipsisProps } from './components/MidEllipsis';
+export type { NavigationListProps } from './components/NavigationList';
+export type { NavigationListHeaderProps } from './components/NavigationList/NavigationListHeader';
+export type { NavigationListSectionProps } from './components/NavigationList/NavigationListSection';
 export type { TabsProps } from './components/Tabs';
 export type { SwitchProps } from './components/Switch';
 export type { SearchBarProps } from './components/SearchBar/types';

package/dist/index.js

@@ -73,6 +73,9 @@ export { default as ListSubheader } from './components/ListSubheader';
 export { default as LoadMore } from './components/LoadMore';
 export { default as Markdown } from './components/Markdown';
 export { default as MidEllipsis } from './components/MidEllipsis';
+export { default as NavigationList } from './components/NavigationList';
+export { default as NavigationListHeader } from './components/NavigationList/NavigationListHeader';
+export { default as NavigationListSection } from './components/NavigationList/NavigationListSection';
 export { default as PointerAlert } from './components/PointerAlert';
 export { default as AlertProvider } from './providers/AlertProvider';
 export { useAlert } from './providers/AlertProvider/useAlert';

package/package.json

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