@linagora/twake-mui 9.17.0 → 10.0.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# @linagora/twake-mui [10.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.17.0...@linagora/twake-mui@10.0.0) (2026-10-05)
+
+
+### Bug Fixes
+
+* **twake-mui:** Infer the SearchBar submit event type ([542f632](https://github.com/linagora/twake-ui/commit/542f63255dd143d85be5f96678f6ccc66538918b))
+* **twake-mui:** Pass an initial value to useRef in SearchBar ([f32e365](https://github.com/linagora/twake-ui/commit/f32e36514e56373b6525b38b1c56c022b40b2797))
+* **twake-mui:** Stop using the global JSX namespace in ContactPopover ([102d577](https://github.com/linagora/twake-ui/commit/102d577a050c59724f18f535bf8e3227cafb7b74))
+
+
+### chore
+
+* **twake-mui:** Drop the twake-i18n React override by requiring twake-i18n 0.6.0 ([64c678e](https://github.com/linagora/twake-ui/commit/64c678e8e76015b919b6df9965ac512c142eed6f))
+
+
+### Features
+
+* **twake-mui:** Support React 19 ([bdc7265](https://github.com/linagora/twake-ui/commit/bdc7265565d7d4991d2c335d4c58a258f56946ed))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** twake-mui now requires twake-i18n >=0.6.0 as a peer
+dependency, up from >=0.5.0. twake-mui only supports React 19 when
+twake-i18n accepts it too, and consumers pinned on twake-i18n 0.5.0 will
+get an ERESOLVE error until they upgrade.
+
+Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
+
 # @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)
 
 

package/dist/components/ContactPopover/AttendeeInfo.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface AttendeeInfoProps {
     /** Attendee display name */
     name: string;
@@ -6,4 +7,4 @@ export interface AttendeeInfoProps {
     /** Callback when email is copied to clipboard */
     onEmailCopy?: (email: string) => void;
 }
-export declare const AttendeeInfo: ({ name, email, onEmailCopy }: AttendeeInfoProps) => JSX.Element;
+export declare const AttendeeInfo: ({ name, email, onEmailCopy }: AttendeeInfoProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverActions.d.ts

@@ -3,4 +3,4 @@ export interface ContactPopoverActionsProps {
     /** Action items rendered inside the actions bar */
     children: React.ReactNode;
 }
-export declare const ContactPopoverActions: ({ children }: ContactPopoverActionsProps) => JSX.Element;
+export declare const ContactPopoverActions: ({ children }: ContactPopoverActionsProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverCalendarAction.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 export interface ContactPopoverCalendarActionProps {
     /** URL for calendar action (e.g., view attendee's calendar) */
     url: string;
     /** Disable the action button */
     disabled?: boolean;
 }
-export declare const ContactPopoverCalendarAction: ({ url, disabled }: ContactPopoverCalendarActionProps) => JSX.Element;
+export declare const ContactPopoverCalendarAction: ({ url, disabled }: ContactPopoverCalendarActionProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverChatAction.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 export interface ContactPopoverChatActionProps {
     /** URL for chat action (e.g., Twake Chat link) */
     url: string;
     /** Disable the action button */
     disabled?: boolean;
 }
-export declare const ContactPopoverChatAction: ({ url, disabled }: ContactPopoverChatActionProps) => JSX.Element;
+export declare const ContactPopoverChatAction: ({ url, disabled }: ContactPopoverChatActionProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverEmailAction.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 export interface ContactPopoverEmailActionProps {
     /** URL for email action */
     url: string;
     /** Disable the action button */
     disabled?: boolean;
 }
-export declare const ContactPopoverEmailAction: ({ url, disabled }: ContactPopoverEmailActionProps) => JSX.Element;
+export declare const ContactPopoverEmailAction: ({ url, disabled }: ContactPopoverEmailActionProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverVideoAction.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 export interface ContactPopoverVideoActionProps {
     /** URL for video call action (e.g., Twake Meet link) */
     url: string;
     /** Disable the action button */
     disabled?: boolean;
 }
-export declare const ContactPopoverVideoAction: ({ url, disabled }: ContactPopoverVideoActionProps) => JSX.Element;
+export declare const ContactPopoverVideoAction: ({ url, disabled }: ContactPopoverVideoActionProps) => React.ReactElement;

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

@@ -1,8 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import React from 'react';
-declare const NavRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & Omit<import("@mui/material").ListOwnProps, keyof import("@mui/material").ListOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-    ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
-}, "style" | "className" | "children" | "dense" | "disablePadding" | "classes" | "sx" | "subheader"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+declare const NavRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & Omit<import("@mui/material").ListOwnProps, keyof import("@mui/material").ListOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "style" | "className" | "children" | "dense" | "disablePadding" | "classes" | "sx" | "subheader"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
 export type NavProps = React.ComponentProps<typeof NavRoot>;
 export declare const Nav: (props: NavProps) => React.ReactElement;
 export {};

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

@@ -1,8 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import React from 'react';
-export declare const NavItem: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-}, "style" | "className" | "children" | "alignItems" | "dense" | "disablePadding" | "disableGutters" | "classes" | "sx" | "divider" | "slotProps" | "slots" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+export declare const NavItem: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style" | "className" | "children" | "alignItems" | "dense" | "disablePadding" | "disableGutters" | "classes" | "sx" | "divider" | "slotProps" | "slots" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
     secondary?: boolean;
 }, {}, {}>;
 export type NavItemProps = React.ComponentProps<typeof NavItem>;

package/dist/components/SearchBar/DisableHighlight.d.ts

@@ -1 +1,2 @@
-export declare const DisableHighlight: import("@emotion/styled").StyledComponent<any, {}, {}>;
+import { Theme } from '@mui/material/styles';
+export declare const DisableHighlight: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, {}, {}>;

package/dist/components/SearchBar/FocusHighlight.d.ts

@@ -1 +1,2 @@
-export declare const FocusHighlight: import("@emotion/styled").StyledComponent<any, {}, {}>;
+import { Theme } from '@mui/material/styles';
+export declare const FocusHighlight: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, {}, {}>;

package/dist/components/SearchBar/Highlight.d.ts

@@ -1,2 +1,2 @@
 import { Theme } from '@mui/material/styles';
-export declare const Highlight: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.JSX.IntrinsicElements, {}>;
+export declare const Highlight: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/SearchBar/SearchBarButtonBase.d.ts

@@ -1,3 +1 @@
-export declare const SearchBarButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").ButtonBaseOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "disabled" | "style" | "className" | "type" | "tabIndex" | "children" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SearchBarButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").ButtonBaseOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "style" | "className" | "type" | "tabIndex" | "children" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/components/SearchBar/SearchBarIconWrapper.d.ts

@@ -1,2 +1,2 @@
 import { Theme } from '@mui/material/styles';
-export declare const SearchBarIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.JSX.IntrinsicElements, {}>;
+export declare const SearchBarIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/SearchBar/SearchBarRoot.d.ts

@@ -1,7 +1,5 @@
 import { SearchBarProps } from './types';
-export declare const SearchBarRoot: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "square" | "className" | "elevation" | "children" | "classes" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const SearchBarRoot: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "square" | "className" | "elevation" | "children" | "classes" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     searchSize: NonNullable<SearchBarProps["size"]>;
     isFocused: boolean;
 }, {}, {}>;

package/dist/components/SearchBar/SearchBarTypography.d.ts

@@ -1,5 +1,3 @@
-export declare const SearchBarTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "style" | "color" | "className" | "children" | "classes" | "sx" | "variant" | "align" | "noWrap" | "gutterBottom" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const SearchBarTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style" | "color" | "className" | "children" | "classes" | "sx" | "variant" | "align" | "noWrap" | "gutterBottom" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     hasIcon: boolean;
 }, {}, {}>;

package/dist/components/SearchBar/index.js

@@ -27,7 +27,7 @@ export const SearchBar = forwardRef(({ placeholder, icon = Magnifier, size = 'sm
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
-    const delayedOnChangeRef = useRef();
+    const delayedOnChangeRef = useRef(undefined);
     useEffect(() => {
         delayedOnChangeRef.current = debounce((ev) => {
             onChangeRef.current(ev);
@@ -75,7 +75,7 @@ export const SearchBar = forwardRef(({ placeholder, icon = Magnifier, size = 'sm
     return (React.createElement(SearchBarRoot, { component: "form", elevation: elevation, searchSize: size, isFocused: effectivelyFocused, className: cx(className, {
             'SearchBar-focused': effectivelyFocused,
             'Mui-disabled': disabled
-        }), ref: ref, onSubmit: (ev) => {
+        }), ref: ref, onSubmit: ev => {
             ev.preventDefault();
             props.onSubmit?.(ev);
         }, ...props },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "9.17.0",
+  "version": "10.0.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -53,16 +53,16 @@
     "@linagora/twake-icons": ">=2.10.0",
     "@mui/lab": "^9.0.0-beta.6",
     "@mui/material": "^9.2.0",
-    "react": "^18",
-    "react-dom": "^18",
-    "twake-i18n": ">=0.5.0"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "twake-i18n": ">=0.6.0"
   },
   "dependencies": {
     "@linagora/twake-css": "^1.0.0",
     "@mui/utils": "^9.2.0",
     "classnames": "^2.5.1",
     "react-virtuoso": "4.13.0",
-    "rooks": "7.14.1"
+    "rooks": "8.4.0"
   },
   "devDependencies": {
     "@argos-ci/cli": "6.9.5",
@@ -80,8 +80,8 @@
     "@storybook/react-vite": "10.3.5",
     "@types/classnames": "^2.3.1",
     "@types/lodash": "4.17.24",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@vitest/browser-playwright": "4.1.11",
     "cozy-tsconfig": "^2.0.0",
     "eslint": "10.2.1",
@@ -89,10 +89,10 @@
     "eslint-plugin-storybook": "10.3.5",
     "lodash": "4.18.1",
     "playwright": "1.60.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "storybook": "10.3.5",
-    "twake-i18n": "^0.5.0",
+    "twake-i18n": "^0.6.0",
     "vite": "8.3.1",
     "vitest": "4.1.11"
   }