@linagora/twake-mui 9.15.0 → 9.17.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# @linagora/twake-mui [9.17.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.16.0...@linagora/twake-mui@9.17.0) (2026-10-05)
+
+
+### Features
+
+* **twake-mui:** Translate SearchBar clear label in en, fr, ru and vi ([130409a](https://github.com/linagora/twake-ui/commit/130409a03794c3c776c447c671068128c09d8999))
+
+# @linagora/twake-mui [9.16.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.15.0...@linagora/twake-mui@9.16.0) (2026-10-01)
+
+
+### Bug Fixes
+
+* **twake-mui:** Clean old Accordion override ([def3b03](https://github.com/linagora/twake-ui/commit/def3b03479b193a3246e716ae4adc89c4d85cbd2))
+* **twake-mui:** Use theme shadow for Accordion ([97cb9b7](https://github.com/linagora/twake-ui/commit/97cb9b7ce81a61963cf9b3e5aaac615b3da4ae63))
+
+
+### Features
+
+* **twake-mui:** Migrate Accordion from cozy-ui ([4033f8d](https://github.com/linagora/twake-ui/commit/4033f8dc03f550eed64263a77f9953e63f2572ec))
+
 # @linagora/twake-mui [9.15.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.14.1...@linagora/twake-mui@9.15.0) (2026-09-30)
 
 

package/dist/components/SearchBar/index.js

@@ -3,6 +3,7 @@ import { IconButton } from '@mui/material';
 import debounce from '@mui/utils/debounce';
 import cx from 'classnames';
 import React, { forwardRef, useState, useMemo, useRef, useEffect } from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
 import { DisableHighlight } from './DisableHighlight';
 import { FocusHighlight } from './FocusHighlight';
 import { SearchBarButtonBase } from './SearchBarButtonBase';
@@ -10,7 +11,14 @@ import { SearchBarIconWrapper } from './SearchBarIconWrapper';
 import { SearchBarInputBase } from './SearchBarInputBase';
 import { SearchBarRoot } from './SearchBarRoot';
 import { SearchBarTypography } from './SearchBarTypography';
+import en from './locales/en.json';
+import fr from './locales/fr.json';
+import ru from './locales/ru.json';
+import vi from './locales/vi.json';
+const locales = { en, fr, 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) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
     const [currentValue, setCurrentValue] = useState(defaultValue);
     const [isFocused, setIsFocused] = useState(false);
     const spreadValue = typeof value !== 'undefined' ? value : currentValue;
@@ -78,7 +86,7 @@ export const SearchBar = forwardRef(({ placeholder, icon = Magnifier, size = 'sm
             icon && (React.createElement(SearchBarIconWrapper, { className: "SearchBar-icon" },
                 React.createElement(Icon, { icon: icon }))),
             React.createElement(SearchBarInputBase, { ...componentsProps?.inputBase, className: cx(componentsProps?.inputBase?.className), searchSize: size, hasIcon: !!icon, placeholder: disabled ? undefined : placeholder, value: disabled ? placeholder : spreadValue, disabled: disabled, "aria-label": placeholder || 'Search', onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }))),
-        spreadValue && !disabledClear && type === 'search' && !disabled && (React.createElement(IconButton, { size: "small", onClick: handleClear, "aria-label": "Clear search" },
+        spreadValue && !disabledClear && type === 'search' && !disabled && (React.createElement(IconButton, { size: "small", onClick: handleClear, "aria-label": t('SearchBar.clear') },
             React.createElement(Icon, { icon: Cross }))),
         !disabledHover && !disabled && (React.createElement(FocusHighlight, { className: "SearchBar-focusHighlight" })),
         disabled && (React.createElement(DisableHighlight, { className: "SearchBar-disableHighlight" }))));

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

@@ -0,0 +1,5 @@
+{
+    "SearchBar": {
+        "clear": "Clear search"
+    }
+}

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

@@ -0,0 +1,5 @@
+{
+    "SearchBar": {
+        "clear": "Effacer la recherche"
+    }
+}

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

@@ -0,0 +1,5 @@
+{
+    "SearchBar": {
+        "clear": "Очистить поиск"
+    }
+}

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

@@ -0,0 +1,5 @@
+{
+    "SearchBar": {
+        "clear": "Xóa tìm kiếm"
+    }
+}

package/dist/lib/overrides.js

@@ -1,4 +1,5 @@
 import { Bottom, CheckCircle, CheckSquare, Icon, Info, RadioChecked, RadioUnchecked, Spinner, Warning, WarningCircle } from '@linagora/twake-icons';
+import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
 import { alertClasses } from '@mui/material/Alert';
 import { buttonClasses } from '@mui/material/Button';
 import { checkboxClasses } from '@mui/material/Checkbox';
@@ -924,53 +925,53 @@ export const overrides = {
     },
     MuiAccordion: {
         styleOverrides: {
-            root: {
-                '&::before': {
-                    display: 'none'
-                }
-            }
+            root: ({ theme }) => ({
+                boxShadow: theme.vars.shadows[1],
+                border: `1px solid ${theme.vars.palette.border.main}`,
+                overflow: 'hidden',
+                marginBottom: 16,
+                '&::before': { display: 'none' }
+            }),
+            rounded: ({ theme }) => ({ borderRadius: theme.shape.borderRadius })
         }
     },
     MuiAccordionSummary: {
         defaultProps: { expandIcon: React.createElement(AccordionExpandIcon, null) },
         styleOverrides: {
             root: ({ theme }) => ({
-                backgroundColor: theme.palette.grey[100],
+                backgroundColor: theme.vars.palette.background.default,
                 textTransform: 'uppercase',
                 fontWeight: 'bold',
-                fontSize: '0.875rem',
-                minHeight: '3.5rem',
+                fontSize: theme.typography.pxToRem(14),
+                minHeight: 56,
                 padding: 0,
-                color: theme.palette.text.primary,
-                '&.Mui-expanded': {
-                    minHeight: '3.5rem'
-                }
+                [`&.${accordionSummaryClasses.expanded}`]: { minHeight: 56 }
             }),
-            expandIconWrapper: {
-                order: 0,
-                '&&': {
-                    marginLeft: '0.3125rem'
-                },
+            expandIconWrapper: ({ theme }) => ({
+                color: theme.vars.palette.text.secondary,
+                padding: 12,
+                marginLeft: 5,
+                marginRight: -12,
                 transform: 'rotate(-90deg)',
-                '&.Mui-expanded': {
-                    marginLeft: '0.3125rem',
-                    transform: 'rotate(0deg)'
-                }
-            },
+                [`&.${accordionSummaryClasses.expanded}`]: { transform: 'rotate(0deg)' }
+            }),
             content: {
-                margin: '0.75rem 0',
-                paddingLeft: '0.5rem',
-                paddingRight: '0.25rem',
+                paddingLeft: 8,
+                paddingRight: 4,
                 order: 1,
-                '& > :last-child': {
-                    paddingRight: 0
-                },
-                '&.Mui-expanded': {
-                    margin: '0.75rem 0'
-                }
+                '& > :last-child': { paddingRight: 0 },
+                [`&.${accordionSummaryClasses.expanded}`]: { margin: '12px 0' }
             }
         }
     },
+    MuiAccordionDetails: {
+        styleOverrides: {
+            root: ({ theme }) => ({
+                padding: 0,
+                borderTop: `1px solid ${theme.vars.palette.border.main}`
+            })
+        }
+    },
     MuiFab: {
         defaultProps: { size: 'medium' },
         styleOverrides: {

package/dist/stories/Accordion.stories.d.ts

@@ -3,5 +3,5 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof Accordion>;
 export default meta;
 type Story = StoryObj<typeof Accordion>;
-export declare const Docs: Story;
+export declare const Default: Story;
 export declare const Screenshot: Story;

package/dist/stories/Accordion.stories.js

@@ -4,26 +4,42 @@ const meta = {
     title: 'Accordion',
     component: Accordion,
     parameters: { layout: 'centered' },
-    tags: ['autodocs']
+    tags: ['autodocs'],
+    argTypes: {
+        defaultExpanded: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        disableGutters: { control: 'boolean' },
+        square: { control: 'boolean' }
+    }
 };
 export default meta;
-const AccordionGroup = () => (React.createElement(Stack, { spacing: 2, sx: { width: 400 } },
-    React.createElement(Accordion, null,
-        React.createElement(AccordionSummary, null, "Click to expand/collapse the first item"),
-        React.createElement(AccordionDetails, null,
-            React.createElement(Typography, null, "Lorem ipsum dolor sit amet consectetur"))),
-    React.createElement(Accordion, null,
-        React.createElement(AccordionSummary, null, "Click to expand/collapse the second item"),
-        React.createElement(AccordionDetails, null,
-            React.createElement(Typography, null, "Lorem ipsum dolor sit amet consectetur"))),
-    React.createElement(Accordion, null,
-        React.createElement(AccordionSummary, null, "Click to expand/collapse the third item"),
-        React.createElement(AccordionDetails, null,
-            React.createElement(Typography, null, "Lorem ipsum dolor sit amet consectetur")))));
-export const Docs = {
-    render: () => React.createElement(AccordionGroup, null)
+const Item = ({ label, ...props }) => (React.createElement(Accordion, { ...props },
+    React.createElement(AccordionSummary, null,
+        "Click to expand/collapse the ",
+        label,
+        " item"),
+    React.createElement(AccordionDetails, null,
+        React.createElement(Typography, { sx: { m: 2 } }, "Lorem ipsum dolor sit amet consectetur"))));
+export const Default = {
+    render: args => (React.createElement("div", { style: { width: 400, maxWidth: '100%' } },
+        React.createElement(Item, { ...args, label: "first" }),
+        React.createElement(Item, { ...args, label: "second" }),
+        React.createElement(Item, { ...args, label: "third" })))
 };
+const Section = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", { style: { marginBottom: '12px' } }, title),
+    children));
+// Visual Regression - Combined view for Argos testing
 export const Screenshot = {
     tags: ['argos'],
-    render: () => React.createElement(AccordionGroup, null)
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { width: 400, maxWidth: '100%' } },
+        React.createElement(Section, { title: "Default" },
+            React.createElement(Item, { label: "first" }),
+            React.createElement(Item, { label: "second" }),
+            React.createElement(Item, { label: "third" })),
+        React.createElement(Section, { title: "Expanded" },
+            React.createElement(Item, { label: "first", defaultExpanded: true }),
+            React.createElement(Item, { label: "second" })),
+        React.createElement(Section, { title: "Disabled" },
+            React.createElement(Item, { label: "first", disabled: true }))))
 };

package/package.json

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