@linagora/twake-mui 9.6.0 → 9.7.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# @linagora/twake-mui [9.7.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.6.0...@linagora/twake-mui@9.7.0) (2026-09-24)
+
+
+### Features
+
+* **twake-mui:** Added ContactPopover component ([5332ae2](https://github.com/linagora/twake-ui/commit/5332ae2051c0863ce8269a32954c5dbb3a5a5694))
+* **twake-mui:** Migrate SearchBar from cozy-ui ([0b03e38](https://github.com/linagora/twake-ui/commit/0b03e38cee859c52d913acb3aca155eeca0c9665))
+
 # @linagora/twake-mui [9.6.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.5.1...@linagora/twake-mui@9.6.0) (2026-09-24)
 
 

package/dist/components/Avatar/helpers.d.ts

@@ -6,3 +6,12 @@ export declare const colorMapping: Record<string, string>;
  * @returns Color key from supportedColors
  */
 export declare const nameToColor: (name?: string) => string | undefined;
+/**
+ * Extract initials from a name (first letter of first name + first letter of last name)
+ * If only one name is provided, returns first 2 letters
+ * Falls back to first 2 letters of email local-part if no name provided
+ * @param name - Display name
+ * @param email - Email address (fallback source for initials)
+ * @returns Uppercase initials string
+ */
+export declare const getInitials: (name: string, email: string) => string;

package/dist/components/Avatar/helpers.js

@@ -41,3 +41,24 @@ export const nameToColor = (name = '') => {
     const key = makeKey(colors, name);
     return colors[key];
 };
+/**
+ * Extract initials from a name (first letter of first name + first letter of last name)
+ * If only one name is provided, returns first 2 letters
+ * Falls back to first 2 letters of email local-part if no name provided
+ * @param name - Display name
+ * @param email - Email address (fallback source for initials)
+ * @returns Uppercase initials string
+ */
+export const getInitials = (name, email) => {
+    if (!name || name === email) {
+        const emailPart = email.split('@')[0];
+        return emailPart.slice(0, 2).toUpperCase();
+    }
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1) {
+        return parts[0].slice(0, 2).toUpperCase();
+    }
+    const firstName = parts[0];
+    const lastName = parts[parts.length - 1];
+    return (firstName[0] + lastName[0]).toUpperCase();
+};

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

@@ -0,0 +1,9 @@
+export interface AttendeeInfoProps {
+    /** Attendee display name */
+    name: string;
+    /** Attendee email address */
+    email: string;
+    /** Callback when email is copied to clipboard */
+    onEmailCopy?: (email: string) => void;
+}
+export declare const AttendeeInfo: ({ name, email, onEmailCopy }: AttendeeInfoProps) => JSX.Element;

package/dist/components/ContactPopover/AttendeeInfo.js

@@ -0,0 +1,35 @@
+import { Icon } from '@linagora/twake-icons';
+import { Copy } from '@linagora/twake-icons';
+import { Box, IconButton, Typography, useTheme, alpha } from '@mui/material';
+import React, { useState } from 'react';
+import { useI18n } from 'twake-i18n';
+import { Avatar } from '../Avatar';
+import { nameToColor, getInitials } from '../Avatar/helpers';
+export const AttendeeInfo = ({ name, email, onEmailCopy }) => {
+    const theme = useTheme();
+    const { t } = useI18n();
+    const [showCopied, setShowCopied] = useState(false);
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(email);
+            onEmailCopy?.(email);
+            setShowCopied(true);
+            setTimeout(() => setShowCopied(false), 2000);
+        }
+        catch {
+            // Clipboard write failed — silently ignore
+        }
+    };
+    const avatarColor = nameToColor(name || email);
+    const initials = getInitials(name, email);
+    return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 } },
+        React.createElement(Avatar, { color: avatarColor, size: 48, sx: { width: 48, height: 48, fontSize: '1.25rem' } }, initials),
+        React.createElement(Box, { sx: { minWidth: 0 } },
+            name && name !== email ? (React.createElement(Typography, { variant: "body1", sx: { fontWeight: 500 }, noWrap: true }, name)) : null,
+            React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+                React.createElement(Typography, { variant: "body2", color: "text.secondary", noWrap: true }, email),
+                React.createElement(IconButton, { size: "small", onClick: () => void handleCopy(), sx: { p: 0.5, color: alpha(theme.palette.grey[900], 0.9) }, title: showCopied
+                        ? t('ContactPopover.copiedTooltip')
+                        : t('ContactPopover.copyTooltip') },
+                    React.createElement(Icon, { icon: Copy, size: 16, color: theme.palette.text.icon }))))));
+};

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

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

package/dist/components/ContactPopover/ContactPopover.stories.js

@@ -0,0 +1,73 @@
+import { Chip, Box, Typography } from '@mui/material';
+import React, { useEffect, useRef } from 'react';
+import { ContactPopover } from './index';
+const meta = {
+    title: 'Components/ContactPopover',
+    component: ContactPopover,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: ['autodocs', 'argos'],
+    argTypes: {
+        name: {
+            control: 'text',
+            description: 'Attendee display name'
+        },
+        email: {
+            control: 'text',
+            description: 'Attendee email address'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the popover'
+        },
+        onEmailCopy: {
+            action: 'email copied'
+        },
+        onClose: {
+            action: 'popover closed'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const containerRef = useRef(null);
+        useEffect(() => {
+            const timer = setTimeout(() => {
+                containerRef.current
+                    ?.querySelectorAll('[role="button"]')[0]
+                    .click();
+            }, 100);
+            return () => clearTimeout(timer);
+        }, []);
+        return (React.createElement(Box, { ref: containerRef, sx: { display: 'flex', flexDirection: 'column', gap: 3 } },
+            React.createElement(Box, null,
+                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Default \u2014 all actions"),
+                React.createElement(ContactPopover, { name: "John Doe", email: "john.doe@example.com" },
+                    React.createElement(Chip, { label: "John Doe", clickable: true }),
+                    React.createElement(ContactPopover.Actions, null,
+                        React.createElement(ContactPopover.EmailAction, { url: "https://mail.example.com/john.doe" }),
+                        React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/john.doe" }),
+                        React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/john.doe" }),
+                        React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/john.doe" })))),
+            React.createElement(Box, null,
+                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Email only"),
+                React.createElement(ContactPopover, { name: "", email: "jane.smith@example.com" },
+                    React.createElement(Chip, { label: "jane.smith@example.com", clickable: true }),
+                    React.createElement(ContactPopover.Actions, null,
+                        React.createElement(ContactPopover.EmailAction, { url: "mailto:jane.smith@example.com" })))),
+            React.createElement(Box, null,
+                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Without actions"),
+                React.createElement(ContactPopover, { name: "Alice Brown", email: "alice.brown@example.com" },
+                    React.createElement(Chip, { label: "Alice Brown", clickable: true }))),
+            React.createElement(Box, null,
+                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Long name / email"),
+                React.createElement(ContactPopover, { name: "Christopher Alexander Montgomery", email: "christopher.montgomery@verylongdomain.example.com" },
+                    React.createElement(Chip, { label: "Christopher Alexander Montgomery", clickable: true }),
+                    React.createElement(ContactPopover.Actions, null,
+                        React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/christopher" }),
+                        React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/christopher" }),
+                        React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/christopher" }))))));
+    }
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ContactPopoverActionsProps {
+    /** Action items rendered inside the actions bar */
+    children: React.ReactNode;
+}
+export declare const ContactPopoverActions: ({ children }: ContactPopoverActionsProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverActions.js

@@ -0,0 +1,3 @@
+import { Box } from '@mui/material';
+import React from 'react';
+export const ContactPopoverActions = ({ children }) => (React.createElement(Box, { sx: { display: 'flex', gap: 1 } }, children));

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

@@ -0,0 +1,5 @@
+export interface ContactPopoverCalendarActionProps {
+    /** URL for calendar action (e.g., view attendee's calendar) */
+    url: string;
+}
+export declare const ContactPopoverCalendarAction: ({ url }: ContactPopoverCalendarActionProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverCalendarAction.js

@@ -0,0 +1,9 @@
+import { Icon } from '@linagora/twake-icons';
+import { CalendarToday } from '@linagora/twake-icons';
+import { IconButton, useTheme } from '@mui/material';
+import React from 'react';
+export const ContactPopoverCalendarAction = ({ url }) => {
+    const theme = useTheme();
+    return (React.createElement(IconButton, { href: url, size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
+        React.createElement(Icon, { icon: CalendarToday, size: 20, color: theme.palette.text.icon })));
+};

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

@@ -0,0 +1,5 @@
+export interface ContactPopoverChatActionProps {
+    /** URL for chat action (e.g., Twake Chat link) */
+    url: string;
+}
+export declare const ContactPopoverChatAction: ({ url }: ContactPopoverChatActionProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverChatAction.js

@@ -0,0 +1,9 @@
+import { Icon } from '@linagora/twake-icons';
+import { Discuss } from '@linagora/twake-icons';
+import { IconButton, useTheme } from '@mui/material';
+import React from 'react';
+export const ContactPopoverChatAction = ({ url }) => {
+    const theme = useTheme();
+    return (React.createElement(IconButton, { href: url, size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
+        React.createElement(Icon, { icon: Discuss, size: 20, color: theme.palette.text.icon })));
+};

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

@@ -0,0 +1,5 @@
+export interface ContactPopoverEmailActionProps {
+    /** URL for email action */
+    url: string;
+}
+export declare const ContactPopoverEmailAction: ({ url }: ContactPopoverEmailActionProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverEmailAction.js

@@ -0,0 +1,12 @@
+import { Button, useTheme } from '@mui/material';
+import React from 'react';
+import { useI18n } from 'twake-i18n';
+export const ContactPopoverEmailAction = ({ url }) => {
+    const theme = useTheme();
+    const { t } = useI18n();
+    return (React.createElement(Button, { href: url, variant: "outlined", size: "small", fullWidth: true, sx: {
+            justifyContent: 'center',
+            color: theme.palette.text.primary,
+            borderColor: theme.palette.divider
+        } }, t('ContactPopover.emailButton')));
+};

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

@@ -0,0 +1,5 @@
+export interface ContactPopoverVideoActionProps {
+    /** URL for video call action (e.g., Twake Meet link) */
+    url: string;
+}
+export declare const ContactPopoverVideoAction: ({ url }: ContactPopoverVideoActionProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverVideoAction.js

@@ -0,0 +1,9 @@
+import { Icon } from '@linagora/twake-icons';
+import { Camera } from '@linagora/twake-icons';
+import { IconButton, useTheme } from '@mui/material';
+import React from 'react';
+export const ContactPopoverVideoAction = ({ url }) => {
+    const theme = useTheme();
+    return (React.createElement(IconButton, { href: url, size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
+        React.createElement(Icon, { icon: Camera, size: 20, color: theme.palette.text.icon })));
+};

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ContactPopoverActions } from './ContactPopoverActions';
+import { ContactPopoverCalendarAction } from './ContactPopoverCalendarAction';
+import { ContactPopoverChatAction } from './ContactPopoverChatAction';
+import { ContactPopoverEmailAction } from './ContactPopoverEmailAction';
+import { ContactPopoverVideoAction } from './ContactPopoverVideoAction';
+export interface ContactPopoverProps {
+    /** Attendee display name */
+    name: string;
+    /** Attendee email address */
+    email: string;
+    /** Children element that triggers the popover, plus optional ContactPopover.Actions */
+    children: React.ReactNode;
+    /** Callback when email is copied to clipboard */
+    onEmailCopy?: (email: string) => void;
+    /** Callback when the popover closes */
+    onClose?: () => void;
+    /** Disable the popover (render children only) */
+    disabled?: boolean;
+}
+interface ContactPopoverComponent extends React.FC<ContactPopoverProps> {
+    Actions: typeof ContactPopoverActions;
+    ChatAction: typeof ContactPopoverChatAction;
+    VideoAction: typeof ContactPopoverVideoAction;
+    CalendarAction: typeof ContactPopoverCalendarAction;
+    EmailAction: typeof ContactPopoverEmailAction;
+}
+export declare const ContactPopover: ContactPopoverComponent;
+export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction };
+export default ContactPopover;

package/dist/components/ContactPopover/index.js

@@ -0,0 +1,134 @@
+import { Icon } from '@linagora/twake-icons';
+import { Cross } from '@linagora/twake-icons';
+import { Box, IconButton, Popover, styled } from '@mui/material';
+import React, { useEffect, useRef, useState } from 'react';
+import { useExtendI18n } from 'twake-i18n';
+import { AttendeeInfo } from './AttendeeInfo';
+import { ContactPopoverActions } from './ContactPopoverActions';
+import { ContactPopoverCalendarAction } from './ContactPopoverCalendarAction';
+import { ContactPopoverChatAction } from './ContactPopoverChatAction';
+import { ContactPopoverEmailAction } from './ContactPopoverEmailAction';
+import { ContactPopoverVideoAction } from './ContactPopoverVideoAction';
+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 };
+const StyledPopoverContent = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(3),
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    position: 'relative',
+    minWidth: 320
+}));
+const CloseButton = styled(IconButton)(() => ({
+    position: 'absolute',
+    top: 8,
+    right: 8
+}));
+export const ContactPopover = ({ name, email, children, onEmailCopy, onClose, disabled = false }) => {
+    useExtendI18n(locales);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const openTimeoutRef = useRef(null);
+    const closeTimeoutRef = useRef(null);
+    const clearOpenTimeout = () => {
+        if (openTimeoutRef.current) {
+            clearTimeout(openTimeoutRef.current);
+            openTimeoutRef.current = null;
+        }
+    };
+    const clearCloseTimeout = () => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    };
+    const handleTriggerMouseEnter = (event) => {
+        clearCloseTimeout();
+        clearOpenTimeout();
+        const target = event.currentTarget;
+        if (anchorEl) {
+            setAnchorEl(target);
+            return;
+        }
+        openTimeoutRef.current = setTimeout(() => {
+            setAnchorEl(target);
+        }, 500);
+    };
+    const handleTriggerMouseLeave = () => {
+        clearOpenTimeout();
+        if (anchorEl)
+            return;
+        clearCloseTimeout();
+        closeTimeoutRef.current = setTimeout(() => {
+            setAnchorEl(null);
+        }, 200);
+    };
+    const handlePopoverMouseEnter = () => {
+        clearCloseTimeout();
+        clearOpenTimeout();
+    };
+    const handleMouseLeave = () => {
+        clearOpenTimeout();
+        clearCloseTimeout();
+        closeTimeoutRef.current = setTimeout(() => {
+            setAnchorEl(null);
+        }, 200);
+    };
+    const handleClick = (event) => {
+        clearOpenTimeout();
+        clearCloseTimeout();
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+    };
+    const handleClose = () => {
+        clearOpenTimeout();
+        clearCloseTimeout();
+        setAnchorEl(null);
+        onClose?.();
+    };
+    useEffect(() => {
+        return () => {
+            clearOpenTimeout();
+            clearCloseTimeout();
+        };
+    }, []);
+    const childrenArray = React.Children.toArray(children);
+    const actionsChild = childrenArray.find((child) => React.isValidElement(child) && child.type === ContactPopoverActions);
+    const triggerChildren = childrenArray.filter(child => child !== actionsChild);
+    if (disabled) {
+        return React.createElement(React.Fragment, null, triggerChildren);
+    }
+    return (React.createElement("div", null,
+        React.createElement("div", { onClick: handleClick, onMouseEnter: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, onKeyDown: event => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    handleClick(event);
+                }
+            }, role: "button", tabIndex: 0, style: {
+                display: 'inline-block',
+                width: 'fit-content',
+                cursor: 'pointer'
+            } }, triggerChildren),
+        React.createElement(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }, slotProps: {
+                paper: {
+                    elevation: 4,
+                    sx: {
+                        borderRadius: 2
+                    },
+                    onMouseEnter: handlePopoverMouseEnter,
+                    onMouseLeave: handleMouseLeave
+                }
+            } },
+            React.createElement(StyledPopoverContent, null,
+                React.createElement(CloseButton, { size: "small", onClick: handleClose },
+                    React.createElement(Icon, { icon: Cross, size: 16 })),
+                React.createElement(AttendeeInfo, { name: name, email: email, onEmailCopy: onEmailCopy }),
+                actionsChild))));
+};
+ContactPopover.Actions = ContactPopoverActions;
+ContactPopover.ChatAction = ContactPopoverChatAction;
+ContactPopover.VideoAction = ContactPopoverVideoAction;
+ContactPopover.CalendarAction = ContactPopoverCalendarAction;
+ContactPopover.EmailAction = ContactPopoverEmailAction;
+export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction };
+export default ContactPopover;

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

@@ -0,0 +1,7 @@
+{
+    "ContactPopover": {
+        "emailButton": "Send an email",
+        "copyTooltip": "Copy email",
+        "copiedTooltip": "Copied!"
+    }
+}

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

@@ -0,0 +1,7 @@
+{
+    "ContactPopover": {
+        "emailButton": "Envoyer un email",
+        "copyTooltip": "Copier l'email",
+        "copiedTooltip": "Copié !"
+    }
+}

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

@@ -0,0 +1,7 @@
+{
+    "ContactPopover": {
+        "emailButton": "Отправить email",
+        "copyTooltip": "Копировать email",
+        "copiedTooltip": "Скопировано!"
+    }
+}

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

@@ -0,0 +1,7 @@
+{
+    "ContactPopover": {
+        "emailButton": "Gửi email",
+        "copyTooltip": "Sao chép email",
+        "copiedTooltip": "Đã sao chép!"
+    }
+}

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

@@ -0,0 +1 @@
+export declare const DisableHighlight: import("@emotion/styled").StyledComponent<any, {}, {}>;

package/dist/components/SearchBar/DisableHighlight.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material';
+import { Highlight } from './Highlight';
+export const DisableHighlight = styled(Highlight)(({ theme }) => ({
+    backgroundColor: theme.palette.action.disabled
+}));

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

@@ -0,0 +1 @@
+export declare const FocusHighlight: import("@emotion/styled").StyledComponent<any, {}, {}>;

package/dist/components/SearchBar/FocusHighlight.js

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+import { Highlight } from './Highlight';
+export const FocusHighlight = styled(Highlight)(({ theme }) => ({
+    pointerEvents: 'none',
+    backgroundColor: theme.palette.action.hover
+}));

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

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

package/dist/components/SearchBar/Highlight.js

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material';
+export const Highlight = styled('span')(({ theme }) => ({
+    overflow: 'hidden',
+    position: 'absolute',
+    top: -1,
+    right: -1,
+    bottom: -1,
+    left: -1,
+    borderRadius: 'inherit',
+    opacity: 0,
+    transition: theme.transitions.create('opacity', {
+        duration: theme.transitions.duration.short
+    })
+}));

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

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

package/dist/components/SearchBar/SearchBar.stories.js

@@ -0,0 +1,60 @@
+import { Cloud } from '@linagora/twake-icons';
+import { Stack, Typography } from '@mui/material';
+import React from 'react';
+import { SearchBar } from './index';
+const sizes = ['small', 'medium', 'large', 'auto'];
+const meta = {
+    title: 'SearchBar',
+    component: SearchBar,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: sizes
+        },
+        type: {
+            control: 'select',
+            options: ['search', 'button']
+        },
+        elevation: { control: 'number' },
+        disabled: { control: 'boolean' },
+        disabledClear: { control: 'boolean' },
+        disabledFocus: { control: 'boolean' },
+        disabledHover: { control: 'boolean' },
+        placeholder: { control: 'text' },
+        defaultValue: { control: 'text' },
+        value: { control: 'text' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        size: 'small',
+        elevation: 1
+    }
+};
+const Row = ({ title, children }) => (React.createElement("section", { style: { paddingBottom: '24px' } },
+    React.createElement("h3", { style: { marginBottom: '12px', marginTop: 0 } }, title),
+    React.createElement(Stack, { spacing: 2 }, children)));
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { width: '100%', maxWidth: 800 } },
+        React.createElement(Row, { title: "Sizes" }, sizes.map(size => (React.createElement(SearchBar, { key: size, size: size, placeholder: `Size: ${size}` })))),
+        React.createElement(Row, { title: "Normal" },
+            React.createElement(SearchBar, { size: "small" }),
+            React.createElement(SearchBar, { size: "medium", defaultValue: "Filled search" })),
+        React.createElement(Row, { title: "With elevation" },
+            React.createElement(SearchBar, { size: "small", elevation: 10 })),
+        React.createElement(Row, { title: "Disabled" },
+            React.createElement(SearchBar, { disabled: true, size: "small" }),
+            React.createElement(SearchBar, { disabled: true, size: "small", defaultValue: "Disabled filled search" })),
+        React.createElement(Row, { title: "Button type" },
+            React.createElement(SearchBar, { type: "button", size: "small", label: React.createElement(Typography, { color: "primary" }, "This is a custom label") }),
+            React.createElement(SearchBar, { type: "button", size: "medium", icon: Cloud, label: "Button with string label" })),
+        React.createElement(Row, { title: "Options" },
+            React.createElement(SearchBar, { size: "small", defaultValue: "Without clear button", disabledClear: true }),
+            React.createElement(SearchBar, { size: "small", disabledHover: true, placeholder: "Disabled hover" }),
+            React.createElement(SearchBar, { size: "small", disabledFocus: true, placeholder: "Disabled focus" }),
+            React.createElement(SearchBar, { size: "small", icon: Cloud, placeholder: "Custom icon" }))))
+};

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

@@ -0,0 +1,3 @@
+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>, {}, {}>;

package/dist/components/SearchBar/SearchBarButtonBase.js

@@ -0,0 +1,7 @@
+import { ButtonBase, styled } from '@mui/material';
+export const SearchBarButtonBase = styled(ButtonBase)({
+    flex: 1,
+    justifyContent: 'flex-start',
+    height: '100%',
+    borderRadius: 99
+});

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

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

package/dist/components/SearchBar/SearchBarIconWrapper.js

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+export const SearchBarIconWrapper = styled('div')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    padding: '0 1rem',
+    display: 'flex'
+}));

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

@@ -0,0 +1,5 @@
+import { SearchBarProps } from './types';
+export declare const SearchBarInputBase: import("@emotion/styled").StyledComponent<import("@mui/material").InputBaseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    searchSize: NonNullable<SearchBarProps["size"]>;
+    hasIcon: boolean;
+}, {}, {}>;

package/dist/components/SearchBar/SearchBarInputBase.js

@@ -0,0 +1,11 @@
+import { InputBase, styled } from '@mui/material';
+const fontSizeToPixel = { small: 14, medium: 16, large: 16, auto: 16 };
+export const SearchBarInputBase = styled(InputBase, {
+    shouldForwardProp: prop => prop !== 'searchSize' && prop !== 'hasIcon'
+})(({ searchSize, hasIcon }) => {
+    return {
+        flex: 1,
+        fontSize: fontSizeToPixel[searchSize],
+        paddingLeft: !hasIcon ? '1rem' : undefined
+    };
+});

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

@@ -0,0 +1,7 @@
+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> & {
+    searchSize: NonNullable<SearchBarProps["size"]>;
+    isFocused: boolean;
+}, {}, {}>;

package/dist/components/SearchBar/SearchBarRoot.js

@@ -0,0 +1,39 @@
+import { Paper, styled } from '@mui/material';
+const sizeToPixel = { small: 40, medium: 48, large: 56, auto: 'auto' };
+const radiusBySize = { small: 20, medium: 24, large: 28, auto: 24 };
+export const SearchBarRoot = styled(Paper, {
+    shouldForwardProp: prop => prop !== 'searchSize' && prop !== 'isFocused'
+})(({ theme, searchSize, isFocused }) => {
+    return {
+        display: 'flex',
+        boxSizing: 'border-box',
+        position: 'relative',
+        alignItems: 'center',
+        height: sizeToPixel[searchSize],
+        flex: 'auto',
+        borderRadius: radiusBySize[searchSize],
+        borderStyle: 'solid',
+        borderWidth: 1,
+        paddingRight: '0.5rem',
+        borderColor: isFocused ? theme.palette.primary.main : 'transparent',
+        backgroundColor: isFocused
+            ? theme.palette.background.paper
+            : theme.palette.background.default,
+        transition: theme.transitions.create(['border-color', 'background-color']),
+        '&:hover': {
+            '&:not(.Mui-disabled):not(.SearchBar-focused)': {
+                '& .SearchBar-focusHighlight': {
+                    opacity: 1
+                }
+            }
+        },
+        '&.Mui-disabled': {
+            '& .SearchBar-icon': {
+                color: theme.palette.text.disabled
+            },
+            '& .SearchBar-disableHighlight': {
+                opacity: 1
+            }
+        }
+    };
+});

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

@@ -0,0 +1,5 @@
+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> & {
+    hasIcon: boolean;
+}, {}, {}>;

package/dist/components/SearchBar/SearchBarTypography.js

@@ -0,0 +1,8 @@
+import { Typography, styled } from '@mui/material';
+export const SearchBarTypography = styled(Typography, {
+    shouldForwardProp: prop => prop !== 'hasIcon'
+})(({ hasIcon }) => ({
+    color: 'currentColor',
+    opacity: 0.42,
+    paddingLeft: !hasIcon ? '1rem' : undefined
+}));

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SearchBarProps } from './types';
+export declare const SearchBar: React.ForwardRefExoticComponent<Omit<SearchBarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SearchBar;

package/dist/components/SearchBar/index.js

@@ -0,0 +1,87 @@
+import { Cross, Icon, Magnifier } from '@linagora/twake-icons';
+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 { DisableHighlight } from './DisableHighlight';
+import { FocusHighlight } from './FocusHighlight';
+import { SearchBarButtonBase } from './SearchBarButtonBase';
+import { SearchBarIconWrapper } from './SearchBarIconWrapper';
+import { SearchBarInputBase } from './SearchBarInputBase';
+import { SearchBarRoot } from './SearchBarRoot';
+import { SearchBarTypography } from './SearchBarTypography';
+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) => {
+    const [currentValue, setCurrentValue] = useState(defaultValue);
+    const [isFocused, setIsFocused] = useState(false);
+    const spreadValue = typeof value !== 'undefined' ? value : currentValue;
+    const isSelfControlledComp = typeof value === 'undefined';
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const delayedOnChangeRef = useRef();
+    useEffect(() => {
+        delayedOnChangeRef.current = debounce((ev) => {
+            onChangeRef.current(ev);
+        }, 375);
+        return () => {
+            delayedOnChangeRef.current?.clear();
+        };
+    }, []);
+    const delayedOnChange = useMemo(() => {
+        const fn = (ev) => {
+            delayedOnChangeRef.current?.(ev);
+        };
+        fn.clear = () => {
+            delayedOnChangeRef.current?.clear();
+        };
+        return fn;
+    }, []);
+    const handleChange = (ev) => {
+        if (!isSelfControlledComp)
+            return onChange(ev);
+        const _value = ev.target.value;
+        delayedOnChange(ev);
+        setCurrentValue(_value);
+    };
+    const handleClear = (ev) => {
+        delayedOnChange.clear();
+        const mockEvent = {
+            ...ev,
+            target: { ...ev.target, value: '' }
+        };
+        onChange(mockEvent);
+        onClear(ev);
+        if (isSelfControlledComp)
+            setCurrentValue('');
+    };
+    const handleFocus = (ev) => {
+        onFocus(ev);
+        setIsFocused(true);
+    };
+    const handleBlur = (ev) => {
+        onBlur(ev);
+        setIsFocused(false);
+    };
+    const effectivelyFocused = isFocused && !disabledFocus;
+    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) => {
+            ev.preventDefault();
+            props.onSubmit?.(ev);
+        }, ...props },
+        type === 'button' ? (React.createElement(SearchBarButtonBase, { disabled: disabled, "aria-label": typeof label === 'string' ? label : 'Search' },
+            icon && (React.createElement(SearchBarIconWrapper, { className: "SearchBar-icon" },
+                React.createElement(Icon, { icon: icon }))),
+            typeof label === 'string' ? (React.createElement(SearchBarTypography, { hasIcon: !!icon }, label)) : (label))) : (React.createElement(React.Fragment, null,
+            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" },
+            React.createElement(Icon, { icon: Cross }))),
+        !disabledHover && !disabled && (React.createElement(FocusHighlight, { className: "SearchBar-focusHighlight" })),
+        disabled && (React.createElement(DisableHighlight, { className: "SearchBar-disableHighlight" }))));
+});
+SearchBar.displayName = 'SearchBar';
+export default SearchBar;

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

@@ -0,0 +1,23 @@
+import { InputBaseProps, PaperProps } from '@mui/material';
+import React from 'react';
+export interface SearchBarProps extends Omit<PaperProps, 'onChange' | 'onBlur' | 'onFocus'> {
+    type?: 'button' | 'search';
+    size?: 'small' | 'medium' | 'large' | 'auto';
+    icon?: React.ElementType;
+    componentsProps?: {
+        inputBase?: InputBaseProps;
+    };
+    value?: string;
+    defaultValue?: string;
+    disabledClear?: boolean;
+    disabledFocus?: boolean;
+    disabledHover?: boolean;
+    elevation?: number;
+    placeholder?: string;
+    label?: React.ReactNode;
+    disabled?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}

package/dist/components/SearchBar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -10,8 +10,10 @@ export { Avatar, default as AvatarDefault } from './components/Avatar';
 export { Button, default as ButtonDefault } from './components/Button';
 export { default as Chip } from './components/Chip';
 export { Dialog, default as DialogDefault } from './components/Dialog';
+export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
+export { SearchBar, default as SearchBarDefault } from './components/SearchBar';
 export { Sidebar, SIDEBAR_MOBILE_HEIGHT } from './components/Sidebar';
 export { Layout, Main, Content } from './components/Layout';
 export { Nav } from './components/Nav';
@@ -21,7 +23,7 @@ export { NavIcon } from './components/NavIcon';
 export { NavText } from './components/NavText';
 export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
-export { nameToColor, supportedColors } from './components/Avatar/helpers';
+export { nameToColor, supportedColors, getInitials } from './components/Avatar/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
@@ -30,10 +32,18 @@ export type { TwakeTheme } from './lib/theme';
 export type { PaletteJson } from './lib/types';
 export type { AvatarProps } from './components/Avatar';
 export type { ButtonProps } from './components/Button';
+export type { ContactPopoverProps } from './components/ContactPopover';
+export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction } from './components/ContactPopover';
+export type { ContactPopoverActionsProps } from './components/ContactPopover/ContactPopoverActions';
+export type { ContactPopoverChatActionProps } from './components/ContactPopover/ContactPopoverChatAction';
+export type { ContactPopoverVideoActionProps } from './components/ContactPopover/ContactPopoverVideoAction';
+export type { ContactPopoverCalendarActionProps } from './components/ContactPopover/ContactPopoverCalendarAction';
+export type { ContactPopoverEmailActionProps } from './components/ContactPopover/ContactPopoverEmailAction';
 export type { ChipProps } from './components/Chip';
 export type { DialogProps, DialogSize } from './components/Dialog';
 export type { TabsProps } from './components/Tabs';
 export type { SwitchProps } from './components/Switch';
+export type { SearchBarProps } from './components/SearchBar/types';
 export type { SidebarProps } from './components/Sidebar';
 export type { LayoutProps, MainProps, ContentProps } from './components/Layout';
 export type { NavProps } from './components/Nav';

package/dist/index.js

@@ -13,8 +13,10 @@ export { Avatar, default as AvatarDefault } from './components/Avatar';
 export { Button, default as ButtonDefault } from './components/Button';
 export { default as Chip } from './components/Chip';
 export { Dialog, default as DialogDefault } from './components/Dialog';
+export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
+export { SearchBar, default as SearchBarDefault } from './components/SearchBar';
 export { Sidebar, SIDEBAR_MOBILE_HEIGHT } from './components/Sidebar';
 export { Layout, Main, Content } from './components/Layout';
 export { Nav } from './components/Nav';
@@ -24,8 +26,9 @@ export { NavIcon } from './components/NavIcon';
 export { NavText } from './components/NavText';
 export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
-export { nameToColor, supportedColors } from './components/Avatar/helpers';
+export { nameToColor, supportedColors, getInitials } from './components/Avatar/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
 export { useBreakpoints } from './hooks/useBreakpoints';
+export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction } from './components/ContactPopover';

package/package.json

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