@matrix-widget-toolkit/mui 1.0.7 → 1.1.0

package/build/cjs/index.js

@@ -1,19 +1,20 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('@matrix-widget-toolkit/react');
 var material = require('@mui/material');
-var utils = require('@mui/utils');
-var reactI18next = require('react-i18next');
-var reactUse = require('react-use');
-var ErrorIcon = require('@mui/icons-material/Error');
 require('@fontsource/inter/400.css');
 require('@fontsource/inter/600.css');
+var react$1 = require('@matrix-widget-toolkit/react');
 var locale = require('@mui/material/locale');
+var utils = require('@mui/utils');
 var i18n = require('i18next');
 var react$2 = require('react');
 var createCache = require('@emotion/cache');
-var react$1 = require('@emotion/react');
+var react = require('@emotion/react');
+var lodash = require('lodash');
+var reactI18next = require('react-i18next');
+var reactUse = require('react-use');
+var ErrorIcon = require('@mui/icons-material/Error');
 var CheckOutlinedIcon = require('@mui/icons-material/CheckOutlined');
 var ContentCopyOutlinedIcon = require('@mui/icons-material/ContentCopyOutlined');
 var api = require('@matrix-widget-toolkit/api');
@@ -22,72 +23,14 @@ var resourcesToBackend = require('i18next-resources-to-backend');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var ErrorIcon__default = /*#__PURE__*/_interopDefaultCompat(ErrorIcon);
 var i18n__default = /*#__PURE__*/_interopDefaultCompat(i18n);
 var createCache__default = /*#__PURE__*/_interopDefaultCompat(createCache);
+var ErrorIcon__default = /*#__PURE__*/_interopDefaultCompat(ErrorIcon);
 var CheckOutlinedIcon__default = /*#__PURE__*/_interopDefaultCompat(CheckOutlinedIcon);
 var ContentCopyOutlinedIcon__default = /*#__PURE__*/_interopDefaultCompat(ContentCopyOutlinedIcon);
 var LanguageDetector__default = /*#__PURE__*/_interopDefaultCompat(LanguageDetector);
 var resourcesToBackend__default = /*#__PURE__*/_interopDefaultCompat(resourcesToBackend);
 
-var __assign$a = (undefined && undefined.__assign) || function () {
-    __assign$a = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign$a.apply(this, arguments);
-};
-function LoadingView() {
-    var id = utils.unstable_useId();
-    var isLongLoad = reactUse.useTimeout(100)[0];
-    var t = reactI18next.useTranslation('widget-toolkit').t;
-    return isLongLoad() ? (jsxRuntime.jsxs(material.Box, __assign$a({ display: "flex", flexDirection: "column", alignItems: "center", p: 2 }, { children: [jsxRuntime.jsx(material.CircularProgress, { "aria-labelledby": id }), jsxRuntime.jsx(material.Typography, __assign$a({ py: 2, variant: "h6", id: id }, { children: t('loading.message', 'Loading…') }))] }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
-}
-
-var __assign$9 = (undefined && undefined.__assign) || function () {
-    __assign$9 = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign$9.apply(this, arguments);
-};
-function MissingCapabilitiesError(_a) {
-    var onRetry = _a.onRetry;
-    var t = reactI18next.useTranslation('widget-toolkit').t;
-    return (jsxRuntime.jsx(material.Box, __assign$9({ my: 2 }, { children: jsxRuntime.jsxs(material.Alert, __assign$9({ severity: "error", icon: jsxRuntime.jsx(ErrorIcon__default.default, {}) }, { children: [jsxRuntime.jsx(material.AlertTitle, { children: t('missing-capabilities.title', 'Missing capabilities') }), jsxRuntime.jsx(material.Typography, __assign$9({ variant: "body2" }, { children: t('missing-capabilities.instructions', 'The minimum capabilities required for this widget are missing. Make sure to grant all requested capabilities.') })), jsxRuntime.jsx(material.Box, __assign$9({ mt: 1 }, { children: jsxRuntime.jsx(material.Button, __assign$9({ variant: "contained", onClick: onRetry }, { children: t('missing-capabilities.request-capabilities', 'Request capabilities') })) }))] })) })));
-}
-
-var __assign$8 = (undefined && undefined.__assign) || function () {
-    __assign$8 = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign$8.apply(this, arguments);
-};
-/**
- * A guard that ask the user for capabilities and only shows the `children`
- * if all capabilities were accepted.
- * If capabilities are denined, a message and a button to retry is displayed
- * instead.
- * @param param0 - {@link MuiCapabilitiesGuardProps}
- */
-function MuiCapabilitiesGuard(_a) {
-    var capabilities = _a.capabilities, children = _a.children;
-    return (jsxRuntime.jsx(react.CapabilitiesGuard, __assign$8({ capabilities: capabilities, loadingComponent: LoadingView, missingCapabilitiesComponent: MissingCapabilitiesError }, { children: children })));
-}
-
 /*
  * Copyright 2022 Nordeck IT + Consulting GmbH
  *
@@ -149,8 +92,8 @@ function getNonce() {
     return window['NONCE'];
 }
 
-var __assign$7 = (undefined && undefined.__assign) || function () {
-    __assign$7 = Object.assign || function(t) {
+var __assign$b = (undefined && undefined.__assign) || function () {
+    __assign$b = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -158,7 +101,7 @@ var __assign$7 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$7.apply(this, arguments);
+    return __assign$b.apply(this, arguments);
 };
 function createEmotionCache() {
     return createCache__default.default({
@@ -169,7 +112,7 @@ function createEmotionCache() {
 var cache = createEmotionCache();
 function EmotionCacheProvider(_a) {
     var children = _a.children;
-    return jsxRuntime.jsx(react$1.CacheProvider, __assign$7({ value: cache }, { children: children }));
+    return jsxRuntime.jsx(react.CacheProvider, __assign$b({ value: cache }, { children: children }));
 }
 
 /*
@@ -473,6 +416,19 @@ var baseTheme = {
                 },
             },
         },
+        MuiTableCell: {
+            styleOverrides: {
+                root: function (_a) {
+                    var theme = _a.theme;
+                    return ({
+                        // the default theme lightens and darkens the divider color further
+                        // which makes it too light in the light theme and too dark in the
+                        // dark theme.
+                        borderBottomColor: theme.palette.divider,
+                    });
+                },
+            },
+        },
     },
 };
 var lightTheme = {
@@ -657,8 +613,8 @@ var darkTheme = {
     },
 };
 
-var __assign$6 = (undefined && undefined.__assign) || function () {
-    __assign$6 = Object.assign || function(t) {
+var __assign$a = (undefined && undefined.__assign) || function () {
+    __assign$a = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -666,7 +622,7 @@ var __assign$6 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$6.apply(this, arguments);
+    return __assign$a.apply(this, arguments);
 };
 /**
  * Provide a semantic UI based theme to the child components.
@@ -674,7 +630,7 @@ var __assign$6 = (undefined && undefined.__assign) || function () {
  */
 function MuiThemeProvider(_a) {
     var children = _a.children;
-    return (jsxRuntime.jsx(EmotionCacheProvider, { children: jsxRuntime.jsx(react.ThemeSelectionProvider, { children: jsxRuntime.jsx(ElementMuiThemeProvider, { children: children }) }) }));
+    return (jsxRuntime.jsx(EmotionCacheProvider, { children: jsxRuntime.jsx(react$1.ThemeSelectionProvider, { children: jsxRuntime.jsx(ElementMuiThemeProvider, { children: children }) }) }));
 }
 function chooseTheme(theme) {
     var isDark = theme === 'dark';
@@ -693,7 +649,7 @@ function chooseTheme(theme) {
 function ElementMuiThemeProvider(_a) {
     var _b;
     var children = _a.children;
-    var theme = react.useThemeSelection().theme;
+    var theme = react$1.useThemeSelection().theme;
     var _c = react$2.useState((_b = i18n__default.default.languages) === null || _b === void 0 ? void 0 : _b[0]), locale$1 = _c[0], setLocale = _c[1];
     react$2.useEffect(function () {
         var callback = function () { var _a; return setLocale((_a = i18n__default.default.languages) === null || _a === void 0 ? void 0 : _a[0]); };
@@ -705,7 +661,192 @@ function ElementMuiThemeProvider(_a) {
         var localeOptions = locale$1 && new Intl.Locale(locale$1).language === 'de' ? locale.deDE : locale.enUS;
         return material.createTheme(utils.deepmerge(baseTheme, themeOptions), localeOptions);
     }, [locale$1, theme]);
-    return (jsxRuntime.jsxs(material.ThemeProvider, __assign$6({ theme: muiTheme }, { children: [jsxRuntime.jsx(material.CssBaseline, {}), children] })));
+    return (jsxRuntime.jsxs(material.ThemeProvider, __assign$a({ theme: muiTheme }, { children: [jsxRuntime.jsx(material.CssBaseline, {}), children] })));
+}
+
+/*
+ * Copyright 2022 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function createAvatarUrl(url, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.size, size = _c === void 0 ? 60 : _c;
+    var mxcUrl = new URL(url);
+    if (mxcUrl.protocol.toLowerCase() !== 'mxc:') {
+        return url;
+    }
+    // TODO: Instead of retrieving the home server from an env variable, it would
+    // be good to get this passed by the widget host, e.g. as an URL parameter.
+    // In general our tight CSP makes it difficult to load images from this
+    // source.
+    // We could already access the home server URL by using the domain part of the
+    // current users id and resolving the home server URL from the well-known
+    // endpoint. However, this would also require a broad connect-src in the CSP.
+    var homeServer = getEnvironment('REACT_APP_HOME_SERVER_URL', 'https://matrix-client.matrix.org');
+    var imageUrl = new URL("/_matrix/media/r0/thumbnail/".concat(mxcUrl.hostname).concat(mxcUrl.pathname, "?width=").concat(size, "&height=").concat(size, "&method=crop"), homeServer);
+    return imageUrl.toString();
+}
+
+/*
+ * Copyright 2022 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function getColor(id) {
+    // Same colors and algorithm as Element is using, to get the same results:
+    // https://github.com/matrix-org/matrix-react-sdk/blob/667ec166d736dfb0ac49f67398a8b7a13db7d5ef/src/Avatar.ts#L91
+    var defaultColors = ['#0DBD8B', '#368bd6', '#ac3ba8'];
+    var total = 0;
+    for (var i = 0; i < id.length; ++i) {
+        total += id.charCodeAt(i);
+    }
+    var colorIndex = total % defaultColors.length;
+    return defaultColors[colorIndex];
+}
+
+/*
+ * Copyright 2022 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// Based on the way Element selects the initial letter
+// https://github.com/matrix-org/matrix-react-sdk/blob/667ec166d736dfb0ac49f67398a8b7a13db7d5ef/src/Avatar.ts#L121
+function getInitialLetter(name) {
+    if (name.length < 1) {
+        return undefined;
+    }
+    var initial = name[0];
+    if ((initial === '@' || initial === '#' || initial === '+') && name[1]) {
+        name = name.substring(1);
+    }
+    // rely on the grapheme cluster splitter in lodash so that we don't break apart compound emojis
+    return lodash.split(name, '', 1)[0].toUpperCase();
+}
+
+var __assign$9 = (undefined && undefined.__assign) || function () {
+    __assign$9 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$9.apply(this, arguments);
+};
+var StyledAvatar = material.styled(material.Avatar, {
+    shouldForwardProp: function (p) { return p !== 'color'; },
+})(function (_a) {
+    var theme = _a.theme, color = _a.color;
+    return ({
+        // increase the specificity of the css selector to override styles of
+        // chip or button components that provide their own css for avatars.
+        '&, &&.MuiChip-avatar': {
+            fontSize: 18,
+            background: color,
+            color: theme.palette.common.white,
+        },
+        width: 24,
+        height: 24,
+    });
+});
+/**
+ * A component to display user and room avatars in the style of Element.
+ * @param param0 - {@link ElementAvatarProps}
+ */
+function ElementAvatar(_a) {
+    var avatarUrl = _a.avatarUrl, userId = _a.userId, displayName = _a.displayName, sx = _a.sx;
+    var src = avatarUrl ? createAvatarUrl(avatarUrl) : undefined;
+    var name = displayName !== null && displayName !== void 0 ? displayName : userId;
+    return (jsxRuntime.jsx(StyledAvatar, __assign$9({ alt: "", "aria-hidden": true, src: src, color: getColor(userId), sx: sx }, { children: getInitialLetter(name) })));
+}
+
+var __assign$8 = (undefined && undefined.__assign) || function () {
+    __assign$8 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$8.apply(this, arguments);
+};
+function LoadingView() {
+    var id = utils.unstable_useId();
+    var isLongLoad = reactUse.useTimeout(100)[0];
+    var t = reactI18next.useTranslation('widget-toolkit').t;
+    return isLongLoad() ? (jsxRuntime.jsxs(material.Box, __assign$8({ display: "flex", flexDirection: "column", alignItems: "center", p: 2 }, { children: [jsxRuntime.jsx(material.CircularProgress, { "aria-labelledby": id }), jsxRuntime.jsx(material.Typography, __assign$8({ py: 2, variant: "h6", id: id }, { children: t('loading.message', 'Loading…') }))] }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
+}
+
+var __assign$7 = (undefined && undefined.__assign) || function () {
+    __assign$7 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$7.apply(this, arguments);
+};
+function MissingCapabilitiesError(_a) {
+    var onRetry = _a.onRetry;
+    var t = reactI18next.useTranslation('widget-toolkit').t;
+    return (jsxRuntime.jsx(material.Box, __assign$7({ my: 2 }, { children: jsxRuntime.jsxs(material.Alert, __assign$7({ severity: "error", icon: jsxRuntime.jsx(ErrorIcon__default.default, {}) }, { children: [jsxRuntime.jsx(material.AlertTitle, { children: t('missing-capabilities.title', 'Missing capabilities') }), jsxRuntime.jsx(material.Typography, __assign$7({ variant: "body2" }, { children: t('missing-capabilities.instructions', 'The minimum capabilities required for this widget are missing. Make sure to grant all requested capabilities.') })), jsxRuntime.jsx(material.Box, __assign$7({ mt: 1 }, { children: jsxRuntime.jsx(material.Button, __assign$7({ variant: "contained", onClick: onRetry }, { children: t('missing-capabilities.request-capabilities', 'Request capabilities') })) }))] })) })));
+}
+
+var __assign$6 = (undefined && undefined.__assign) || function () {
+    __assign$6 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$6.apply(this, arguments);
+};
+/**
+ * A guard that ask the user for capabilities and only shows the `children`
+ * if all capabilities were accepted.
+ * If capabilities are denied, a message and a button to retry is displayed
+ * instead.
+ * @param param0 - {@link MuiCapabilitiesGuardProps}
+ */
+function MuiCapabilitiesGuard(_a) {
+    var capabilities = _a.capabilities, children = _a.children;
+    return (jsxRuntime.jsx(react$1.CapabilitiesGuard, __assign$6({ capabilities: capabilities, loadingComponent: LoadingView, missingCapabilitiesComponent: MissingCapabilitiesError }, { children: children })));
 }
 
 var __assign$5 = (undefined && undefined.__assign) || function () {
@@ -803,7 +944,7 @@ function MissingParametersError(_a) {
     var _this = this;
     var widgetRegistration = _a.widgetRegistration;
     var t = reactI18next.useTranslation('widget-toolkit').t;
-    var widgetApi = react.useWidgetApi();
+    var widgetApi = react$1.useWidgetApi();
     var _b = react$2.useState(false), isErrorDialogOpen = _b[0], setErrorDialogOpen = _b[1];
     var _c = react$2.useState(false), isCompleted = _c[0], setCompleted = _c[1];
     var handleRepairWidget = react$2.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
@@ -884,7 +1025,7 @@ var __assign = (undefined && undefined.__assign) || function () {
  */
 function MuiWidgetApiProvider(_a) {
     var widgetRegistration = _a.widgetRegistration, widgetApiPromise = _a.widgetApiPromise, children = _a.children;
-    return (jsxRuntime.jsx(react.WidgetApiProvider, __assign({ widgetApiPromise: widgetApiPromise, widgetRegistration: widgetRegistration, loadingViewComponent: LoadingView, mobileClientErrorComponent: MobileClientError, childErrorComponent: ChildError, outsideClientErrorComponent: OutsideClientError, missingCapabilitiesComponent: MissingCapabilitiesError, missingParametersErrorComponent: MissingParametersError }, { children: children })));
+    return (jsxRuntime.jsx(react$1.WidgetApiProvider, __assign({ widgetApiPromise: widgetApiPromise, widgetRegistration: widgetRegistration, loadingViewComponent: LoadingView, mobileClientErrorComponent: MobileClientError, childErrorComponent: ChildError, outsideClientErrorComponent: OutsideClientError, missingCapabilitiesComponent: MissingCapabilitiesError, missingParametersErrorComponent: MissingParametersError }, { children: children })));
 }
 
 /*
@@ -949,6 +1090,7 @@ var WidgetApiLanguageDetector = /** @class */ (function (_super) {
     return WidgetApiLanguageDetector;
 }(LanguageDetector__default.default));
 
+exports.ElementAvatar = ElementAvatar;
 exports.MuiCapabilitiesGuard = MuiCapabilitiesGuard;
 exports.MuiThemeProvider = MuiThemeProvider;
 exports.MuiWidgetApiProvider = MuiWidgetApiProvider;

package/build/esm/index.js

@@ -1,81 +1,24 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { CapabilitiesGuard, ThemeSelectionProvider, useThemeSelection, useWidgetApi, WidgetApiProvider } from '@matrix-widget-toolkit/react';
-import { Box, CircularProgress, Typography, Alert, AlertTitle, Button, createTheme, ThemeProvider, CssBaseline, Paper, IconButton, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
-import { unstable_useId, deepmerge } from '@mui/utils';
-import { useTranslation } from 'react-i18next';
-import { useTimeout, useCopyToClipboard } from 'react-use';
-import ErrorIcon from '@mui/icons-material/Error';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createTheme, ThemeProvider, CssBaseline, styled, Avatar, Box, CircularProgress, Typography, Alert, AlertTitle, Button, Paper, IconButton, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
 import '@fontsource/inter/400.css';
 import '@fontsource/inter/600.css';
+import { ThemeSelectionProvider, useThemeSelection, CapabilitiesGuard, useWidgetApi, WidgetApiProvider } from '@matrix-widget-toolkit/react';
 import { deDE, enUS } from '@mui/material/locale';
+import { deepmerge, unstable_useId } from '@mui/utils';
 import i18n from 'i18next';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
+import { split } from 'lodash';
+import { useTranslation } from 'react-i18next';
+import { useTimeout, useCopyToClipboard } from 'react-use';
+import ErrorIcon from '@mui/icons-material/Error';
 import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';
 import ContentCopyOutlinedIcon from '@mui/icons-material/ContentCopyOutlined';
 import { repairWidgetRegistration, generateWidgetRegistrationUrl, extractWidgetParameters } from '@matrix-widget-toolkit/api';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import resourcesToBackend from 'i18next-resources-to-backend';
 
-var __assign$a = (undefined && undefined.__assign) || function () {
-    __assign$a = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign$a.apply(this, arguments);
-};
-function LoadingView() {
-    var id = unstable_useId();
-    var isLongLoad = useTimeout(100)[0];
-    var t = useTranslation('widget-toolkit').t;
-    return isLongLoad() ? (jsxs(Box, __assign$a({ display: "flex", flexDirection: "column", alignItems: "center", p: 2 }, { children: [jsx(CircularProgress, { "aria-labelledby": id }), jsx(Typography, __assign$a({ py: 2, variant: "h6", id: id }, { children: t('loading.message', 'Loading…') }))] }))) : (jsx(Fragment, {}));
-}
-
-var __assign$9 = (undefined && undefined.__assign) || function () {
-    __assign$9 = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign$9.apply(this, arguments);
-};
-function MissingCapabilitiesError(_a) {
-    var onRetry = _a.onRetry;
-    var t = useTranslation('widget-toolkit').t;
-    return (jsx(Box, __assign$9({ my: 2 }, { children: jsxs(Alert, __assign$9({ severity: "error", icon: jsx(ErrorIcon, {}) }, { children: [jsx(AlertTitle, { children: t('missing-capabilities.title', 'Missing capabilities') }), jsx(Typography, __assign$9({ variant: "body2" }, { children: t('missing-capabilities.instructions', 'The minimum capabilities required for this widget are missing. Make sure to grant all requested capabilities.') })), jsx(Box, __assign$9({ mt: 1 }, { children: jsx(Button, __assign$9({ variant: "contained", onClick: onRetry }, { children: t('missing-capabilities.request-capabilities', 'Request capabilities') })) }))] })) })));
-}
-
-var __assign$8 = (undefined && undefined.__assign) || function () {
-    __assign$8 = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign$8.apply(this, arguments);
-};
-/**
- * A guard that ask the user for capabilities and only shows the `children`
- * if all capabilities were accepted.
- * If capabilities are denined, a message and a button to retry is displayed
- * instead.
- * @param param0 - {@link MuiCapabilitiesGuardProps}
- */
-function MuiCapabilitiesGuard(_a) {
-    var capabilities = _a.capabilities, children = _a.children;
-    return (jsx(CapabilitiesGuard, __assign$8({ capabilities: capabilities, loadingComponent: LoadingView, missingCapabilitiesComponent: MissingCapabilitiesError }, { children: children })));
-}
-
 /*
  * Copyright 2022 Nordeck IT + Consulting GmbH
  *
@@ -137,8 +80,8 @@ function getNonce() {
     return window['NONCE'];
 }
 
-var __assign$7 = (undefined && undefined.__assign) || function () {
-    __assign$7 = Object.assign || function(t) {
+var __assign$b = (undefined && undefined.__assign) || function () {
+    __assign$b = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -146,7 +89,7 @@ var __assign$7 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$7.apply(this, arguments);
+    return __assign$b.apply(this, arguments);
 };
 function createEmotionCache() {
     return createCache({
@@ -157,7 +100,7 @@ function createEmotionCache() {
 var cache = createEmotionCache();
 function EmotionCacheProvider(_a) {
     var children = _a.children;
-    return jsx(CacheProvider, __assign$7({ value: cache }, { children: children }));
+    return jsx(CacheProvider, __assign$b({ value: cache }, { children: children }));
 }
 
 /*
@@ -461,6 +404,19 @@ var baseTheme = {
                 },
             },
         },
+        MuiTableCell: {
+            styleOverrides: {
+                root: function (_a) {
+                    var theme = _a.theme;
+                    return ({
+                        // the default theme lightens and darkens the divider color further
+                        // which makes it too light in the light theme and too dark in the
+                        // dark theme.
+                        borderBottomColor: theme.palette.divider,
+                    });
+                },
+            },
+        },
     },
 };
 var lightTheme = {
@@ -645,8 +601,8 @@ var darkTheme = {
     },
 };
 
-var __assign$6 = (undefined && undefined.__assign) || function () {
-    __assign$6 = Object.assign || function(t) {
+var __assign$a = (undefined && undefined.__assign) || function () {
+    __assign$a = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -654,7 +610,7 @@ var __assign$6 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$6.apply(this, arguments);
+    return __assign$a.apply(this, arguments);
 };
 /**
  * Provide a semantic UI based theme to the child components.
@@ -693,7 +649,192 @@ function ElementMuiThemeProvider(_a) {
         var localeOptions = locale && new Intl.Locale(locale).language === 'de' ? deDE : enUS;
         return createTheme(deepmerge(baseTheme, themeOptions), localeOptions);
     }, [locale, theme]);
-    return (jsxs(ThemeProvider, __assign$6({ theme: muiTheme }, { children: [jsx(CssBaseline, {}), children] })));
+    return (jsxs(ThemeProvider, __assign$a({ theme: muiTheme }, { children: [jsx(CssBaseline, {}), children] })));
+}
+
+/*
+ * Copyright 2022 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function createAvatarUrl(url, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.size, size = _c === void 0 ? 60 : _c;
+    var mxcUrl = new URL(url);
+    if (mxcUrl.protocol.toLowerCase() !== 'mxc:') {
+        return url;
+    }
+    // TODO: Instead of retrieving the home server from an env variable, it would
+    // be good to get this passed by the widget host, e.g. as an URL parameter.
+    // In general our tight CSP makes it difficult to load images from this
+    // source.
+    // We could already access the home server URL by using the domain part of the
+    // current users id and resolving the home server URL from the well-known
+    // endpoint. However, this would also require a broad connect-src in the CSP.
+    var homeServer = getEnvironment('REACT_APP_HOME_SERVER_URL', 'https://matrix-client.matrix.org');
+    var imageUrl = new URL("/_matrix/media/r0/thumbnail/".concat(mxcUrl.hostname).concat(mxcUrl.pathname, "?width=").concat(size, "&height=").concat(size, "&method=crop"), homeServer);
+    return imageUrl.toString();
+}
+
+/*
+ * Copyright 2022 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function getColor(id) {
+    // Same colors and algorithm as Element is using, to get the same results:
+    // https://github.com/matrix-org/matrix-react-sdk/blob/667ec166d736dfb0ac49f67398a8b7a13db7d5ef/src/Avatar.ts#L91
+    var defaultColors = ['#0DBD8B', '#368bd6', '#ac3ba8'];
+    var total = 0;
+    for (var i = 0; i < id.length; ++i) {
+        total += id.charCodeAt(i);
+    }
+    var colorIndex = total % defaultColors.length;
+    return defaultColors[colorIndex];
+}
+
+/*
+ * Copyright 2022 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// Based on the way Element selects the initial letter
+// https://github.com/matrix-org/matrix-react-sdk/blob/667ec166d736dfb0ac49f67398a8b7a13db7d5ef/src/Avatar.ts#L121
+function getInitialLetter(name) {
+    if (name.length < 1) {
+        return undefined;
+    }
+    var initial = name[0];
+    if ((initial === '@' || initial === '#' || initial === '+') && name[1]) {
+        name = name.substring(1);
+    }
+    // rely on the grapheme cluster splitter in lodash so that we don't break apart compound emojis
+    return split(name, '', 1)[0].toUpperCase();
+}
+
+var __assign$9 = (undefined && undefined.__assign) || function () {
+    __assign$9 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$9.apply(this, arguments);
+};
+var StyledAvatar = styled(Avatar, {
+    shouldForwardProp: function (p) { return p !== 'color'; },
+})(function (_a) {
+    var theme = _a.theme, color = _a.color;
+    return ({
+        // increase the specificity of the css selector to override styles of
+        // chip or button components that provide their own css for avatars.
+        '&, &&.MuiChip-avatar': {
+            fontSize: 18,
+            background: color,
+            color: theme.palette.common.white,
+        },
+        width: 24,
+        height: 24,
+    });
+});
+/**
+ * A component to display user and room avatars in the style of Element.
+ * @param param0 - {@link ElementAvatarProps}
+ */
+function ElementAvatar(_a) {
+    var avatarUrl = _a.avatarUrl, userId = _a.userId, displayName = _a.displayName, sx = _a.sx;
+    var src = avatarUrl ? createAvatarUrl(avatarUrl) : undefined;
+    var name = displayName !== null && displayName !== void 0 ? displayName : userId;
+    return (jsx(StyledAvatar, __assign$9({ alt: "", "aria-hidden": true, src: src, color: getColor(userId), sx: sx }, { children: getInitialLetter(name) })));
+}
+
+var __assign$8 = (undefined && undefined.__assign) || function () {
+    __assign$8 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$8.apply(this, arguments);
+};
+function LoadingView() {
+    var id = unstable_useId();
+    var isLongLoad = useTimeout(100)[0];
+    var t = useTranslation('widget-toolkit').t;
+    return isLongLoad() ? (jsxs(Box, __assign$8({ display: "flex", flexDirection: "column", alignItems: "center", p: 2 }, { children: [jsx(CircularProgress, { "aria-labelledby": id }), jsx(Typography, __assign$8({ py: 2, variant: "h6", id: id }, { children: t('loading.message', 'Loading…') }))] }))) : (jsx(Fragment, {}));
+}
+
+var __assign$7 = (undefined && undefined.__assign) || function () {
+    __assign$7 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$7.apply(this, arguments);
+};
+function MissingCapabilitiesError(_a) {
+    var onRetry = _a.onRetry;
+    var t = useTranslation('widget-toolkit').t;
+    return (jsx(Box, __assign$7({ my: 2 }, { children: jsxs(Alert, __assign$7({ severity: "error", icon: jsx(ErrorIcon, {}) }, { children: [jsx(AlertTitle, { children: t('missing-capabilities.title', 'Missing capabilities') }), jsx(Typography, __assign$7({ variant: "body2" }, { children: t('missing-capabilities.instructions', 'The minimum capabilities required for this widget are missing. Make sure to grant all requested capabilities.') })), jsx(Box, __assign$7({ mt: 1 }, { children: jsx(Button, __assign$7({ variant: "contained", onClick: onRetry }, { children: t('missing-capabilities.request-capabilities', 'Request capabilities') })) }))] })) })));
+}
+
+var __assign$6 = (undefined && undefined.__assign) || function () {
+    __assign$6 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$6.apply(this, arguments);
+};
+/**
+ * A guard that ask the user for capabilities and only shows the `children`
+ * if all capabilities were accepted.
+ * If capabilities are denied, a message and a button to retry is displayed
+ * instead.
+ * @param param0 - {@link MuiCapabilitiesGuardProps}
+ */
+function MuiCapabilitiesGuard(_a) {
+    var capabilities = _a.capabilities, children = _a.children;
+    return (jsx(CapabilitiesGuard, __assign$6({ capabilities: capabilities, loadingComponent: LoadingView, missingCapabilitiesComponent: MissingCapabilitiesError }, { children: children })));
 }
 
 var __assign$5 = (undefined && undefined.__assign) || function () {
@@ -937,4 +1078,4 @@ var WidgetApiLanguageDetector = /** @class */ (function (_super) {
     return WidgetApiLanguageDetector;
 }(LanguageDetector));
 
-export { MuiCapabilitiesGuard, MuiThemeProvider, MuiWidgetApiProvider, WidgetApiLanguageDetector, WidgetToolkitI18nBackend, getEnvironment, getNonce };
+export { ElementAvatar, MuiCapabilitiesGuard, MuiThemeProvider, MuiWidgetApiProvider, WidgetApiLanguageDetector, WidgetToolkitI18nBackend, getEnvironment, getNonce };

package/build/index.d.ts

@@ -3,15 +3,49 @@
  *                       the default Element theme.
  */
 
+/// <reference types="react" />
+
 import { BackendModule } from 'i18next';
 import { Capability } from 'matrix-widget-api';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { PropsWithChildren } from 'react';
 import { ReactElement } from 'react';
+import { SxProps } from '@mui/material';
+import { Theme } from '@mui/material';
 import { WidgetApi } from '@matrix-widget-toolkit/api';
 import { WidgetEventCapability } from 'matrix-widget-api';
 import { WidgetRegistration } from '@matrix-widget-toolkit/api';
 
+/**
+ * A component to display user and room avatars in the style of Element.
+ * @param param0 - {@link ElementAvatarProps}
+ */
+export declare function ElementAvatar({ avatarUrl, userId, displayName, sx, }: ElementAvatarProps): JSX.Element;
+
+/**
+ * Props for the {@link ElementAvatar} component.
+ */
+export declare type ElementAvatarProps = {
+    /**
+     * The id of the user.
+     * Even though the field is called userId, it can also be used to display
+     * avatars for rooms.
+     */
+    userId: string;
+    /**
+     * The display name of the user.
+     * If not provided, the userId is used instead.
+     */
+    displayName?: string;
+    /**
+     * The url of the avatar.
+     * If not provided, the initial letter based on the display name or userId is used instead.
+     */
+    avatarUrl?: string;
+    /** Additional styling for the avatar */
+    sx?: SxProps<Theme>;
+};
+
 /**
  * Reads environment variables starting with `REACT_APP_` from a global variable
  * at runtime and falls back to `process.env` build time variables.
@@ -42,7 +76,7 @@ export declare function getNonce(): string | undefined;
 /**
  * A guard that ask the user for capabilities and only shows the `children`
  * if all capabilities were accepted.
- * If capabilities are denined, a message and a button to retry is displayed
+ * If capabilities are denied, a message and a button to retry is displayed
  * instead.
  * @param param0 - {@link MuiCapabilitiesGuardProps}
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matrix-widget-toolkit/mui",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "A customized material-ui theme that matches the style of the Element Matrix client",
   "author": "Nordeck IT + Consulting GmbH",
   "license": "Apache-2.0",
@@ -14,10 +14,11 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^27.5.2",
     "@types/jest-axe": "^3.5.5",
-    "@types/node": "^16.18.11",
+    "@types/lodash": "^4.14.191",
+    "@types/node": "^16.18.14",
     "@types/react": "^17.0.45",
     "copyfiles": "^2.4.1",
-    "i18next-parser": "^7.2.0",
+    "i18next-parser": "^7.6.0",
     "jest-axe": "^7.0.0",
     "react": "^17.0.2",
     "react-scripts": "5.0.1",
@@ -49,6 +50,7 @@
     "i18next": "^22.0.4",
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-resources-to-backend": "^1.0.0",
+    "lodash": "^4.17.21",
     "matrix-widget-api": "^1.1.1",
     "react": "^17.0.2",
     "react-i18next": "^12.0.0",