@matrix-widget-toolkit/mui 2.0.6 → 2.1.0

package/build/esm/components/MuiCapabilitiesGuard/MuiCapabilitiesGuard.d.ts

@@ -0,0 +1,19 @@
+import { Capability, WidgetEventCapability } from 'matrix-widget-api';
+import { PropsWithChildren, ReactElement } from 'react';
+/**
+ * Props for the {@link MuiCapabilitiesGuard} component.
+ */
+export type MuiCapabilitiesGuardProps = PropsWithChildren<{
+    /**
+     * Required capabilities to display the `children`.
+     */
+    capabilities: Array<WidgetEventCapability | Capability>;
+}>;
+/**
+ * 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}
+ */
+export declare function MuiCapabilitiesGuard({ capabilities, children, }: MuiCapabilitiesGuardProps): ReactElement;

package/build/esm/components/MuiCapabilitiesGuard/MuiCapabilitiesGuard.test.d.ts

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

package/build/esm/components/MuiCapabilitiesGuard/index.d.ts

@@ -0,0 +1,2 @@
+export { MuiCapabilitiesGuard } from './MuiCapabilitiesGuard';
+export type { MuiCapabilitiesGuardProps } from './MuiCapabilitiesGuard';

package/build/esm/components/MuiThemeProvider/EmotionCacheProvider.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function EmotionCacheProvider({ children }: PropsWithChildren<unknown>): import("react/jsx-runtime").JSX.Element;

package/build/esm/components/MuiThemeProvider/MuiThemeProvider.d.ts

@@ -0,0 +1,14 @@
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/600.css';
+import { ThemeOptions } from '@mui/material';
+import { PropsWithChildren, ReactElement } from 'react';
+/**
+ * Props for the {@link MuiThemeProvider} component.
+ */
+export type MuiThemeProviderProps = PropsWithChildren;
+/**
+ * Provide a semantic UI based theme to the child components.
+ * @param param0 - {@link MuiThemeProviderProps}
+ */
+export declare function MuiThemeProvider({ children, }: MuiThemeProviderProps): ReactElement;
+export declare function chooseTheme(theme: string): ThemeOptions;

package/build/esm/components/MuiThemeProvider/MuiThemeProvider.test.d.ts

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

package/build/esm/components/MuiThemeProvider/environment.d.ts

@@ -0,0 +1,23 @@
+declare global {
+    interface Window {
+        __ENVIRONMENT__: string | undefined;
+    }
+}
+/**
+ * Reads environment variables starting with `REACT_APP_` from a global variable
+ * at runtime and falls back to `process.env` build time variables.
+ *
+ * @param name - The name of the environment variable, should start with
+ *               `REACT_APP_`.
+ */
+export declare function getEnvironment(name: string): string | undefined;
+/**
+ * Reads environment variables starting with `REACT_APP_` from a global variable
+ * at runtime and falls back to `process.env` build time variables.
+ *
+ * @param name - The name of the environment variable, should start with
+ *               `REACT_APP_`.
+ * @param defaultValue - The default value to return if the environment variable
+ *                       is not provided.
+ */
+export declare function getEnvironment(name: string, defaultValue: string): string;

package/build/esm/components/MuiThemeProvider/environment.test.d.ts

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

package/build/esm/components/MuiThemeProvider/index.d.ts

@@ -0,0 +1,4 @@
+export { getEnvironment } from './environment';
+export { MuiThemeProvider } from './MuiThemeProvider';
+export type { MuiThemeProviderProps } from './MuiThemeProvider';
+export { getNonce } from './nonce';

package/build/esm/components/MuiThemeProvider/nonce.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Retrieve the nonce passed by our Docker base image.
+ * @returns A nonce that can be used to perform operations that are disabled in
+ *          our CSP by default.
+ */
+export declare function getNonce(): string | undefined;

package/build/esm/components/MuiThemeProvider/theme.d.ts

@@ -0,0 +1,5 @@
+import { ThemeOptions } from '@mui/material';
+export declare const baseTheme: ThemeOptions;
+export declare const lightTheme: ThemeOptions;
+export declare const lightHighContrastTheme: ThemeOptions;
+export declare const darkTheme: ThemeOptions;

package/build/esm/components/MuiThemeProvider/theme.test.d.ts

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

package/build/esm/components/MuiWidgetApiProvider/ChildError.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+export declare function ChildError({ error }: {
+    error: Error;
+}): ReactElement;

package/build/esm/components/MuiWidgetApiProvider/ChildError.test.d.ts

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

package/build/esm/components/MuiWidgetApiProvider/CopyableCode.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+export declare function CopyableCode({ code }: {
+    code: string;
+}): ReactElement;

package/build/esm/components/MuiWidgetApiProvider/CopyableCode.test.d.ts

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

package/build/esm/components/MuiWidgetApiProvider/MissingParametersError.d.ts

@@ -0,0 +1,6 @@
+import { WidgetRegistration } from '@matrix-widget-toolkit/api';
+import { ReactElement } from 'react';
+export declare const STATE_EVENT_WIDGETS = "im.vector.modular.widgets";
+export declare function MissingParametersError({ widgetRegistration, }: {
+    widgetRegistration?: WidgetRegistration;
+}): ReactElement;

package/build/esm/components/MuiWidgetApiProvider/MissingParametersError.test.d.ts

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

package/build/esm/components/MuiWidgetApiProvider/MobileClientError.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from 'react';
+export declare function MobileClientError(): ReactElement;

package/build/esm/components/MuiWidgetApiProvider/MobileClientError.test.d.ts

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

package/build/esm/components/MuiWidgetApiProvider/MuiWidgetApiProvider.d.ts

@@ -0,0 +1,22 @@
+import { WidgetApi, WidgetRegistration } from '@matrix-widget-toolkit/api';
+import { PropsWithChildren, ReactElement } from 'react';
+/**
+ * Props for the {@link (MuiWidgetApiProvider:function)} component.
+ */
+export type MuiWidgetApiProviderProps = PropsWithChildren<{
+    /**
+     * Configuration to set during Widget registration.
+     */
+    widgetRegistration?: WidgetRegistration;
+    /**
+     * Result from a call to `WidgetApiImpl.create`.
+     */
+    widgetApiPromise: Promise<WidgetApi>;
+}>;
+/**
+ * Provides the `WidgetApi` in the React context once it's fully
+ * initialized without errors.
+ * Use `useWidgetApi` to access it.
+ * @param param0 - {@link MuiWidgetApiProviderProps}
+ */
+export declare function MuiWidgetApiProvider({ widgetRegistration, widgetApiPromise, children, }: MuiWidgetApiProviderProps): ReactElement;

package/build/esm/components/MuiWidgetApiProvider/MuiWidgetApiProvider.test.d.ts

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

package/build/esm/components/MuiWidgetApiProvider/OutsideClientError.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from 'react';
+export declare function OutsideClientError(): ReactElement;

package/build/esm/components/MuiWidgetApiProvider/OutsideClientError.test.d.ts

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

package/build/esm/components/MuiWidgetApiProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { MuiWidgetApiProvider } from './MuiWidgetApiProvider';
+export type { MuiWidgetApiProviderProps } from './MuiWidgetApiProvider';

package/build/esm/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ElementAvatar';
+export * from './MuiCapabilitiesGuard';
+export * from './MuiThemeProvider';
+export * from './MuiWidgetApiProvider';

package/build/esm/i18n/i18n.d.ts

@@ -0,0 +1,12 @@
+import LanguageDetector from 'i18next-browser-languagedetector';
+/**
+ * Backend for usage with `i18n-next` that provides translations for internal
+ * messages.
+ */
+export declare const WidgetToolkitI18nBackend: import("i18next").BackendModule<object>;
+/**
+ * A language detector that reads the language from the widget url.
+ */
+export declare class WidgetApiLanguageDetector extends LanguageDetector {
+    constructor();
+}

package/build/esm/i18n/index.d.ts

@@ -0,0 +1 @@
+export { WidgetApiLanguageDetector, WidgetToolkitI18nBackend } from './i18n';

package/build/esm/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @packageDocumentation This package provides a MUI theme that fits to
+ *                       the default Element theme.
+ */
+export * from './components';
+export * from './i18n';

package/build/esm/index.js

@@ -9,7 +9,6 @@ import { deepmerge } from '@mui/utils';
 import i18n from 'i18next';
 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';
@@ -119,9 +118,11 @@ var fontFamily = [
     '"Segoe UI Emoji"',
     '"Noto Color Emoji"',
 ].join(',');
-var primaryColor = getEnvironment('REACT_APP_PRIMARY_COLOR', '#0dbd8b');
+var primaryColorlight = getEnvironment('REACT_APP_LIGHT_PRIMARY_COLOR', '#007a61');
+var primaryColorDark = getEnvironment('REACT_APP_DARK_PRIMARY_COLOR', '#129a78');
 var primaryColorHighContrast = '#075D53';
-var errorColor = '#ff5b55';
+var errorColorLight = '#d51928';
+var errorColorDark = '#fd3e3c';
 var errorColorHighContrast = '#AA0904';
 function createSwitchStyleOverrides(_a) {
     var trackColor = _a.trackColor, thumbColor = _a.thumbColor;
@@ -198,11 +199,11 @@ var baseTheme = {
     },
     palette: {
         primary: {
-            main: primaryColor,
+            main: primaryColorlight,
             contrastText: '#ffffff',
         },
         error: {
-            main: errorColor,
+            main: errorColorLight,
             contrastText: '#ffffff',
         },
         tonalOffset: 0.025,
@@ -449,6 +450,12 @@ var lightTheme = {
             default: '#ffffff',
             paper: '#f2f5f8',
         },
+        primary: {
+            main: primaryColorlight,
+        },
+        error: {
+            main: errorColorLight,
+        },
         text: {
             primary: '#17191c',
             secondary: '#61708b',
@@ -607,6 +614,12 @@ var darkTheme = {
             default: '#15191e',
             paper: '#20252b',
         },
+        primary: {
+            main: primaryColorDark,
+        },
+        error: {
+            main: errorColorDark,
+        },
         text: {
             primary: '#ffffff',
             secondary: '#b9bec6',
@@ -713,20 +726,28 @@ function createAvatarUrl(url, _a) {
  * 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);
+// 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);
     }
-    var colorIndex = total % defaultColors.length;
-    return defaultColors[colorIndex];
+    // rely on the grapheme cluster splitter in the Intl.Segmenter to get the first character
+    return Array.from(new Intl.Segmenter().segment(name))
+        .map(function (_a) {
+        var segment = _a.segment;
+        return segment;
+    })
+        .slice(0, 1)[0]
+        .toUpperCase();
 }
 
 /*
- * Copyright 2022 Nordeck IT + Consulting GmbH
+ * Copyright 2024 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.
@@ -740,19 +761,28 @@ function getColor(id) {
  * 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();
+/**
+ * Determines a number for a given Matrix ID or room ID, helps disambiguating users
+ * who are trying to impersonate someone else.
+ *
+ * {@link https://github.com/element-hq/compound-web/blob/5950e6827aaaca5a0b2540093f0b168ca590e8ca/src/components/Avatar/useIdColorHash.ts#L23}
+ * @copyright Copyright 2023  New Vector Ltd
+ *
+ * @param id - a Matrix ID or room ID
+ * @returns a hash of the ID provided
+ */
+function useIdColorHash(id) {
+    var MIN = 1;
+    var MAX = 6;
+    // Sum up the values of all the char codes in the string
+    var charCodeSum = id.split('').reduce(function (sum, char) {
+        return sum + char.charCodeAt(0);
+    }, 0);
+    return (charCodeSum % MAX) + MIN;
 }
+var isColorHash = function (value) {
+    return [1, 2, 3, 4, 5, 6].includes(value);
+};
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -776,17 +806,60 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
+/**
+ * {@link https://github.com/element-hq/compound-design-tokens}
+ */
+var bgColors = {
+    dark: {
+        1: '#002600',
+        2: '#001b4e',
+        3: '#37004e',
+        4: '#22006a',
+        5: '#450018',
+        6: '#470000',
+    },
+    light: {
+        1: '#e0f8d9',
+        2: '#e3f5f8',
+        3: '#faeefb',
+        4: '#f1efff',
+        5: '#ffecf0',
+        6: '#ffefe4',
+    },
+};
+var colors = {
+    dark: {
+        1: '#56c02c',
+        2: '#21bacd',
+        3: '#d991de',
+        4: '#ad9cfe',
+        5: '#fe84a2',
+        6: '#f6913d',
+    },
+    light: {
+        1: '#005f00',
+        2: '#00548c',
+        3: '#822198',
+        4: '#5d26cd',
+        5: '#9f0850',
+        6: '#9b2200',
+    },
+};
 var StyledAvatar = styled(Avatar, {
     shouldForwardProp: function (p) { return p !== 'color'; },
 })(function (_a) {
-    var theme = _a.theme, color = _a.color;
+    var theme = _a.theme, colorHash = _a.colorHash;
     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,
+            background: isColorHash(colorHash)
+                ? bgColors[theme.palette.mode][colorHash]
+                : bgColors[theme.palette.mode][1],
+            color: isColorHash(colorHash)
+                ? colors[theme.palette.mode][colorHash]
+                : colors[theme.palette.mode][1],
         },
         width: 24,
         height: 24,
@@ -800,7 +873,7 @@ var ElementAvatar = forwardRef(function ElementAvatar(_a, ref) {
     var avatarUrl = _a.avatarUrl, userId = _a.userId, displayName = _a.displayName, props = __rest(_a, ["avatarUrl", "userId", "displayName"]);
     var src = avatarUrl ? createAvatarUrl(avatarUrl) : undefined;
     var name = displayName !== null && displayName !== void 0 ? displayName : userId;
-    return (jsx(StyledAvatar, __assign({ ref: ref, alt: "", "aria-hidden": true, src: src, color: getColor(userId) }, props, { children: getInitialLetter(name) })));
+    return (jsx(StyledAvatar, __assign({ ref: ref, alt: "", "aria-hidden": true, src: src, colorHash: useIdColorHash(userId) }, props, { children: getInitialLetter(name) })));
 });
 
 function LoadingView() {

package/build/esm/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/package.json

@@ -1,32 +1,42 @@
 {
   "name": "@matrix-widget-toolkit/mui",
-  "version": "2.0.6",
+  "version": "2.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",
   "source": "./src/index.ts",
-  "types": "./build/index.d.ts",
+  "types": "./build/esm/index.d.ts",
   "exports": {
-    "import": "./build/esm/index.js",
-    "require": "./build/cjs/index.js",
-    "types": "./build/index.d.ts"
+    ".": {
+      "module": "./build/esm/index.js",
+      "import": {
+        "types": "./build/esm/index.d.ts",
+        "default": "./build/esm/index.js"
+      },
+      "require": {
+        "types": "./build/cjs/index.d.cts",
+        "default": "./build/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
   },
   "type": "module",
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/lodash-es": "^4.17.10",
-    "@types/node": "^22.7.5",
-    "@types/react": "^18.2.74",
-    "@vitest/coverage-v8": "^2.1.3",
-    "axe-core": "^4.10.0",
-    "copyfiles": "^2.4.1",
-    "i18next-parser": "^9.0.2",
-    "react": "^18.2.0",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.3"
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.0.1",
+    "@testing-library/user-event": "14.5.2",
+    "@types/node": "22.9.0",
+    "@types/react": "18.3.12",
+    "@vitest/coverage-v8": "2.1.5",
+    "axe-core": "4.10.2",
+    "copyfiles": "2.4.1",
+    "i18next-parser": "9.0.2",
+    "typescript": "5.6.3",
+    "vite": "5.4.11",
+    "vitest": "2.1.5"
+  },
+  "peerDependencies": {
+    "react": "18.3.1"
   },
   "scripts": {
     "build": "tsc && rollup --config ../../rollup.config.mjs",
@@ -42,23 +52,21 @@
     "generate-api-report": "tsc && api-extractor run --verbose --local"
   },
   "dependencies": {
-    "@emotion/cache": "^11.13.1",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@fontsource/inter": "^5.1.0",
+    "@emotion/cache": "11.13.1",
+    "@emotion/react": "11.13.3",
+    "@emotion/styled": "11.13.0",
+    "@fontsource/inter": "5.1.0",
     "@matrix-widget-toolkit/api": "^3.4.2",
     "@matrix-widget-toolkit/react": "^2.0.3",
-    "@mui/icons-material": "^6.1.4",
-    "@mui/material": "^6.1.4",
-    "@mui/utils": "^6.0.2",
-    "i18next": "^23.16.0",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-resources-to-backend": "^1.2.1",
-    "lodash-es": "^4.17.21",
-    "matrix-widget-api": "^1.9.0",
-    "react": "^18.2.0",
-    "react-i18next": "^15.0.3",
-    "react-use": "^17.5.1"
+    "@mui/icons-material": "6.1.7",
+    "@mui/material": "6.1.7",
+    "@mui/utils": "6.1.7",
+    "i18next": "23.16.5",
+    "i18next-browser-languagedetector": "8.0.0",
+    "i18next-resources-to-backend": "1.2.1",
+    "matrix-widget-api": "1.10.0",
+    "react-i18next": "15.1.1",
+    "react-use": "17.5.1"
   },
   "repository": {
     "type": "git",
@@ -74,5 +82,5 @@
     "matrix-widget-api"
   ],
   "module": "./build/esm/index.js",
-  "main": "./build/cjs/index.js"
+  "main": "./build/cjs/index.cjs"
 }