@linagora/twake-mui 13.0.0 → 13.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @linagora/twake-mui [13.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@13.1.0...@linagora/twake-mui@13.2.0) (2026-10-13)
+
+
+### Features
+
+* **twake-mui:** Migrate MidEllipsis from cozy-ui ([54c58b7](https://github.com/linagora/twake-ui/commit/54c58b75389c5a608080e2e4df7164f76f441b21))
+
+# @linagora/twake-mui [13.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@13.0.0...@linagora/twake-mui@13.1.0) (2026-10-13)
+
+
+### Features
+
+* **twake-mui:** Migrate BarTitle from cozy-ui ([63e9e21](https://github.com/linagora/twake-ui/commit/63e9e21fee5ceaffe6355c6eca9fc7f2aee5500b))
+
 # @linagora/twake-mui [13.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@12.1.0...@linagora/twake-mui@13.0.0) (2026-10-12)
 
 

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

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

package/dist/components/BarTitle/BarTitle.stories.js

@@ -0,0 +1,35 @@
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import BarTitle from './index';
+const longTitle = 'Ada Lovelace, born Augusta Ada Byron, was an English mathematician and writer chiefly known for her work on the Analytical Engine';
+const BarArea = ({ children }) => (React.createElement(Box, { sx: { border: '1px solid red' } }, children));
+const meta = {
+    title: 'BarTitle',
+    component: BarTitle,
+    tags: ['autodocs'],
+    argTypes: {
+        children: { control: 'text' },
+        noWrap: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'My transactions',
+        noWrap: false
+    },
+    render: args => (React.createElement(BarArea, null,
+        React.createElement(BarTitle, { ...args })))
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement("section", null,
+            React.createElement("h3", null, "Basic usage"),
+            React.createElement(BarArea, null,
+                React.createElement(BarTitle, null, "My transactions"))),
+        React.createElement("section", null,
+            React.createElement("h3", null, "Long title with ellipsis"),
+            React.createElement(BarArea, null,
+                React.createElement(BarTitle, { noWrap: true }, longTitle)))))
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface BarTitleProps {
+    children?: React.ReactNode;
+    /** Truncates the title with an ellipsis instead of wrapping */
+    noWrap?: boolean;
+}
+declare const BarTitle: React.FC<BarTitleProps>;
+export default BarTitle;

package/dist/components/BarTitle/index.js

@@ -0,0 +1,5 @@
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+const BarTitle = ({ noWrap = false, children }) => (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', height: 48 } },
+    React.createElement(Typography, { variant: "h4", component: "h1", color: "textPrimary", noWrap: noWrap }, children)));
+export default BarTitle;

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

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

package/dist/components/MidEllipsis/MidEllipsis.stories.js

@@ -0,0 +1,65 @@
+import { Box, Link, Stack, Typography } from '@mui/material';
+import React from 'react';
+import MidEllipsis from './index';
+const longText = 'Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage’s proposed mechanical general-purpose computer, the Analytical Engine.';
+const filename = 'my-very-long-file-name-from-last-summer-holidays.pdf';
+const path = '/Documents/Administrative/Taxes/2025/Income statements';
+const email = 'augusta.ada.king-noel.lovelace@analytical-engine.example.com';
+const widths = [80, 150, 250, 400];
+const Section = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    children));
+const meta = {
+    title: 'MidEllipsis',
+    component: MidEllipsis,
+    tags: ['autodocs'],
+    argTypes: {
+        text: { control: 'text' },
+        children: { control: 'text' },
+        className: { control: 'text' },
+        title: { control: 'text' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        text: filename
+    },
+    render: args => (React.createElement(Box, { sx: { width: 250 } },
+        React.createElement(MidEllipsis, { ...args })))
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Section, { title: "Text prop" },
+            React.createElement(MidEllipsis, { text: longText })),
+        React.createElement(Section, { title: "Children" },
+            React.createElement(MidEllipsis, null, longText)),
+        React.createElement(Section, { title: "Text prop takes precedence over children" },
+            React.createElement(MidEllipsis, { text: "Shown from the text prop" }, "Hidden children")),
+        React.createElement(Section, { title: "Text fitting its container" },
+            React.createElement(MidEllipsis, { text: "Ada Lovelace" })),
+        React.createElement(Section, { title: "Container widths" },
+            React.createElement(Stack, { spacing: 1 }, widths.map(width => (React.createElement(Box, { key: width, sx: { width } },
+                React.createElement(MidEllipsis, { text: filename })))))),
+        React.createElement(Section, { title: "Preserved whitespace" },
+            React.createElement(Box, { sx: { width: 250 } },
+                React.createElement(MidEllipsis, { text: "Spaces    kept    as    typed    in the name.txt" }))),
+        React.createElement(Section, { title: "Inside Typography" },
+            React.createElement(Stack, { spacing: 1, sx: { width: 250 } },
+                React.createElement(Typography, { variant: "h3", noWrap: true },
+                    React.createElement(MidEllipsis, { text: filename })),
+                React.createElement(Typography, { variant: "h4", color: "textPrimary", noWrap: true },
+                    React.createElement(MidEllipsis, { text: filename })),
+                React.createElement(Typography, { variant: "body2", color: "textSecondary" },
+                    React.createElement(MidEllipsis, { text: email })),
+                React.createElement(Typography, { variant: "caption", color: "textSecondary" },
+                    React.createElement(MidEllipsis, { text: path })))),
+        React.createElement(Section, { title: "Inside a link" },
+            React.createElement(Box, { sx: { width: 250 } },
+                React.createElement(Link, { href: "#" },
+                    React.createElement(MidEllipsis, { text: path })))),
+        React.createElement(Section, { title: "Custom className and native attributes" },
+            React.createElement(Box, { sx: { width: 250 } },
+                React.createElement(MidEllipsis, { className: "u-mh-1 u-error", title: filename, "data-testid": "mid-ellipsis", text: filename })))))
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface MidEllipsisProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    text?: string;
+    children?: string;
+}
+declare const MidEllipsis: React.ForwardRefExoticComponent<MidEllipsisProps & React.RefAttributes<HTMLDivElement>>;
+export default MidEllipsis;

package/dist/components/MidEllipsis/index.js

@@ -0,0 +1,16 @@
+import cx from 'classnames';
+import React, { forwardRef } from 'react';
+// Wraps the RTL-overflowing last part so its characters still read left-to-right
+const LRM = '‎';
+const MidEllipsis = forwardRef(({ text, className, children, ...props }, ref) => {
+    const str = text || children || '';
+    const partLength = Math.round(str.length / 2);
+    return (React.createElement("div", { className: cx('u-midellipsis', className), ref: ref, ...props },
+        React.createElement("span", null, str.substring(0, partLength)),
+        React.createElement("span", null,
+            LRM,
+            str.substring(partLength),
+            LRM)));
+});
+MidEllipsis.displayName = 'MidEllipsis';
+export default MidEllipsis;

package/dist/index.d.ts

@@ -32,6 +32,7 @@ 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 BarTitle } from './components/BarTitle';
 export { Button, default as ButtonDefault } from './components/Button';
 export { default as BottomSheet } from './components/BottomSheet';
 export { default as BottomSheetItem } from './components/BottomSheet/BottomSheetItem';
@@ -52,6 +53,7 @@ export { default as ListItemSkeleton } from './components/ListItemSkeleton';
 export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
 export { default as Markdown } from './components/Markdown';
+export { default as MidEllipsis } from './components/MidEllipsis';
 export { default as PointerAlert } from './components/PointerAlert';
 export { default as ProgressionBanner } from './components/ProgressionBanner';
 export { Tabs, default as TabsDefault } from './components/Tabs';
@@ -96,6 +98,7 @@ export type { DownloadActionOptions, DownloadFileOptions } from './components/Ac
 export type { PrintActionOptions, PrintClient } from './components/ActionsMenu/Actions/print';
 export type { ExportToTextActionOptions } from './components/ActionsMenu/Actions/exportToText';
 export type { AvatarProps } from './components/Avatar';
+export type { BarTitleProps } from './components/BarTitle';
 export type { ButtonProps } from './components/Button';
 export type { BottomSheetProps, BottomSheetSettings, BottomSheetToolbarProps } from './components/BottomSheet/types';
 export type { BottomSheetItemProps } from './components/BottomSheet/BottomSheetItem';
@@ -128,6 +131,7 @@ export type { ListItemSkeletonProps } from './components/ListItemSkeleton';
 export type { ListSkeletonProps } from './components/ListSkeleton';
 export type { ListSubheaderProps } from './components/ListSubheader';
 export type { MarkdownProps } from './components/Markdown';
+export type { MidEllipsisProps } from './components/MidEllipsis';
 export type { TabsProps } from './components/Tabs';
 export type { SwitchProps } from './components/Switch';
 export type { SearchBarProps } from './components/SearchBar/types';

package/dist/index.js

@@ -35,6 +35,7 @@ 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 BarTitle } from './components/BarTitle';
 export { Button, default as ButtonDefault } from './components/Button';
 export { default as BottomSheet } from './components/BottomSheet';
 export { default as BottomSheetItem } from './components/BottomSheet/BottomSheetItem';
@@ -55,6 +56,7 @@ export { default as ListItemSkeleton } from './components/ListItemSkeleton';
 export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
 export { default as Markdown } from './components/Markdown';
+export { default as MidEllipsis } from './components/MidEllipsis';
 export { default as PointerAlert } from './components/PointerAlert';
 export { default as ProgressionBanner } from './components/ProgressionBanner';
 export { Tabs, default as TabsDefault } from './components/Tabs';

package/package.json

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