@linagora/twake-mui 13.1.0 → 13.2.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## @linagora/twake-mui [13.2.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@13.2.0...@linagora/twake-mui@13.2.1) (2026-10-13)
+
+
+### Bug Fixes
+
+* **twake-mui:** Draw badge counts as a pill ([2cc8518](https://github.com/linagora/twake-ui/commit/2cc8518f927ddd2b571c455a6a0ddddf475151c9))
+
+# @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)
 
 

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/components/NavItem/NavBadge.js

@@ -3,6 +3,8 @@ import { styled } from '@mui/material/styles';
 export const NavBadge = styled(Badge)(({ theme }) => ({
     [`& .${badgeClasses.badge}`]: {
         border: 'none',
+        height: 14,
+        minWidth: 14,
         position: 'static',
         transform: 'none',
         backgroundColor: theme.vars.palette.action.selected,

package/dist/components/NavItem/NavItem.stories.js

@@ -90,6 +90,14 @@ export const Screenshot = {
                     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, "Counts"),
+                [12, 99, '99+'].map(badge => (React.createElement(NavItem, { key: badge, disablePadding: true, badge: badge },
+                    React.createElement(NavLink, null,
+                        React.createElement(NavIcon, { icon: Folder }),
+                        React.createElement(NavText, null,
+                            "Item with ",
+                            badge)))))),
             React.createElement("section", null,
                 React.createElement("h3", null, "Secondary"),
                 React.createElement(NavItem, { disablePadding: true, variant: "secondary", selected: true },

package/dist/index.d.ts

@@ -53,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';
@@ -130,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

@@ -56,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/dist/lib/overrides.js

@@ -537,17 +537,20 @@ export const overrides = {
         },
         styleOverrides: {
             badge: ({ theme }) => ({
-                boxSizing: 'content-box',
-                height: 14,
-                minWidth: 14,
+                // Sizes include the border, so an app setting minWidth gets that width
+                boxSizing: 'border-box',
+                height: 18,
+                minWidth: 18,
                 padding: 0,
                 border: `2px solid ${theme.vars.palette.background.paper}`,
-                borderRadius: '100%',
-                fontSize: theme.typography.pxToRem(10)
+                borderRadius: radius.pill,
+                fontSize: theme.typography.pxToRem(10),
+                // Every two-digit count fits the circle, longer counts grow into a pill
+                fontVariantNumeric: 'tabular-nums'
             }),
             dot: {
-                height: 8,
-                minWidth: 8
+                height: 12,
+                minWidth: 12
             },
             anchorOriginTopRightRectangular: {
                 transform: 'scale(1) translate(37%, -37%)'

package/dist/stories/Badge.stories.js

@@ -62,6 +62,8 @@ export const Screenshot = {
                 React.createElement(Target, null)),
             React.createElement(Badge, { color: "error", badgeContent: 0, showZero: false },
                 React.createElement(Target, null)),
+            React.createElement(Badge, { color: "error", badgeContent: 99, max: 99 },
+                React.createElement(Target, null)),
             React.createElement(Badge, { color: "error", badgeContent: 120, max: 99 },
                 React.createElement(Target, null)),
             React.createElement(Badge, { color: "error", badgeContent: 4, invisible: true },

package/package.json

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