@linagora/twake-mui 9.11.2 → 9.12.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# @linagora/twake-mui [9.12.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.11.2...@linagora/twake-mui@9.12.0) (2026-09-29)
+
+
+### Features
+
+* **twake-mui:** Migrate ListItemSkeleton from cozy-ui ([b1ec8f8](https://github.com/linagora/twake-ui/commit/b1ec8f86a86f5caf1003dc139c57697e5e314bce))
+* **twake-mui:** Migrate ListSkeleton from cozy-ui ([782492a](https://github.com/linagora/twake-ui/commit/782492a0a5b5f30f9454641e645081cb6689d415))
+
 ## @linagora/twake-mui [9.11.2](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.11.1...@linagora/twake-mui@9.11.2) (2026-09-29)
 
 

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

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

package/dist/components/ListItemSkeleton/ListItemSkeleton.stories.js

@@ -0,0 +1,43 @@
+import { Box, List, Stack } from '@mui/material';
+import React from 'react';
+import ListItemSkeleton from './index';
+const meta = {
+    title: 'ListItemSkeleton',
+    component: ListItemSkeleton,
+    tags: ['autodocs'],
+    argTypes: {
+        hasSecondary: { control: 'boolean' },
+        divider: { control: 'boolean' },
+        gutters: {
+            control: 'select',
+            options: ['default', 'double', 'disabled']
+        }
+    },
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { maxWidth: 480 } },
+            React.createElement(List, null,
+                React.createElement(Story, null))))
+    ]
+};
+export default meta;
+export const Default = {
+    args: {
+        hasSecondary: false,
+        divider: false,
+        gutters: 'default'
+    }
+};
+const Example = ({ title, ...props }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    React.createElement(ListItemSkeleton, { ...props })));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Example, { title: "Default" }),
+        React.createElement(Example, { title: "With secondary", hasSecondary: true }),
+        React.createElement(Example, { title: "With divider", divider: true }),
+        React.createElement(Example, { title: "Disabled gutters", gutters: "disabled" }),
+        React.createElement(Example, { title: "Double gutters", gutters: "double" }),
+        React.createElement(Example, { title: "With secondary, divider and double gutters", hasSecondary: true, divider: true, gutters: "double" })))
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ListItemGutters } from '../ListItem';
+export interface ListItemSkeletonProps {
+    hasSecondary?: boolean;
+    divider?: boolean;
+    gutters?: ListItemGutters;
+}
+declare const ListItemSkeleton: ({ hasSecondary, divider, gutters }: ListItemSkeletonProps) => React.ReactElement;
+export default ListItemSkeleton;

package/dist/components/ListItemSkeleton/index.js

@@ -0,0 +1,12 @@
+import { Divider, ListItemIcon, Skeleton } from '@mui/material';
+import React from 'react';
+import { radius } from '../../lib/radius';
+import ListItem from '../ListItem';
+import ListItemText from '../ListItemText';
+const ListItemSkeleton = ({ hasSecondary, divider, gutters }) => (React.createElement(React.Fragment, null,
+    React.createElement(ListItem, { gutters: gutters },
+        React.createElement(ListItemIcon, null,
+            React.createElement(Skeleton, { variant: "rectangular", width: 32, height: 32, sx: { borderRadius: radius.md } })),
+        React.createElement(ListItemText, { primary: React.createElement(Skeleton, { width: "75%", height: 13 }), secondary: hasSecondary ? React.createElement(Skeleton, { width: "37%", height: 13 }) : undefined })),
+    divider && React.createElement(Divider, null)));
+export default ListItemSkeleton;

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

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

package/dist/components/ListSkeleton/ListSkeleton.stories.js

@@ -0,0 +1,40 @@
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import ListSkeleton from './index';
+const meta = {
+    title: 'ListSkeleton',
+    component: ListSkeleton,
+    tags: ['autodocs'],
+    argTypes: {
+        count: { control: { type: 'number', min: 1 } },
+        hasSecondary: { control: 'boolean' },
+        withSubheader: { control: 'boolean' },
+        divider: { control: 'boolean' }
+    },
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { maxWidth: 480 } },
+            React.createElement(Story, null)))
+    ]
+};
+export default meta;
+export const Default = {
+    args: {
+        count: 5,
+        hasSecondary: false,
+        withSubheader: false,
+        divider: false
+    }
+};
+const Example = ({ title, ...props }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    React.createElement(ListSkeleton, { count: 3, ...props })));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Example, { title: "Default" }),
+        React.createElement(Example, { title: "With secondary", hasSecondary: true }),
+        React.createElement(Example, { title: "With subheader", withSubheader: true }),
+        React.createElement(Example, { title: "With divider", divider: true }),
+        React.createElement(Example, { title: "With secondary, subheader and divider", hasSecondary: true, withSubheader: true, divider: true })))
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ListSkeletonProps {
+    count?: number;
+    hasSecondary?: boolean;
+    withSubheader?: boolean;
+    divider?: boolean;
+}
+declare const ListSkeleton: ({ count, hasSecondary, withSubheader, divider }: ListSkeletonProps) => React.ReactElement;
+export default ListSkeleton;

package/dist/components/ListSkeleton/index.js

@@ -0,0 +1,6 @@
+import { List } from '@mui/material';
+import React from 'react';
+import ListItemSkeleton from '../ListItemSkeleton';
+import ListSubheader from '../ListSubheader';
+const ListSkeleton = ({ count = 1, hasSecondary, withSubheader, divider }) => (React.createElement(List, { subheader: withSubheader ? React.createElement(ListSubheader, null, "\u00A0") : undefined }, Array.from({ length: count }, (_, idx) => (React.createElement(ListItemSkeleton, { key: idx, hasSecondary: hasSecondary, divider: divider })))));
+export default ListSkeleton;

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export { default as DropdownText } from './components/DropdownText';
 export { default as ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';
+export { default as ListItemSkeleton } from './components/ListItemSkeleton';
+export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
@@ -52,6 +54,8 @@ export type { DropdownTextProps, DropdownTextVariant } from './components/Dropdo
 export type { ListItemProps, ListItemGutters, ListItemSize } from './components/ListItem';
 export type { ListItemButtonProps } from './components/ListItemButton';
 export type { ListItemTextProps } from './components/ListItemText';
+export type { ListItemSkeletonProps } from './components/ListItemSkeleton';
+export type { ListSkeletonProps } from './components/ListSkeleton';
 export type { ListSubheaderProps } from './components/ListSubheader';
 export type { TabsProps } from './components/Tabs';
 export type { SwitchProps } from './components/Switch';

package/dist/index.js

@@ -19,6 +19,8 @@ export { default as DropdownText } from './components/DropdownText';
 export { default as ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';
+export { default as ListItemSkeleton } from './components/ListItemSkeleton';
+export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';

package/dist/stories/Menu.stories.js

@@ -68,5 +68,5 @@ export const Screenshot = {
     tags: ['argos'],
     parameters: { layout: 'padded' },
     render: () => (React.createElement(Box, { sx: { minHeight: 440 } },
-        React.createElement(ExampleMenu, { defaultOpen: true, autoFocus: false, disablePortal: true, disableScrollLock: true, transitionDuration: 0 })))
+        React.createElement(ExampleMenu, { defaultOpen: true, autoFocus: false, disablePortal: true, disableScrollLock: true })))
 };

package/package.json

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