@matrix-widget-toolkit/react 2.0.3 → 2.0.5

package/README.md

@@ -17,6 +17,47 @@ yarn add @matrix-widget-toolkit/react
 While this package contains a `<WidgetApiProvider>` you probably don't want to use this package most of the time.
 Prefer using [`@matrix-widget-toolkit/mui`](../mui/) which internally uses this package to share functionality.
 
+### Customizing Widget Registration
+
+You can customise the Widget registration with a name and type. This will be used to show the widget name in the
+`Extensions` page of Element Web:
+
+```typescript
+<WidgetApiProvider
+  widgetApiPromise={widgetApiPromise}
+  widgetRegistration={{
+    name: 'Example Widget',
+    type: 'com.example.clock',
+    data: { title: 'Learn more…' },
+  }}
+>
+```
+
+### Checking for specific Widget Parameters
+
+Widgets must be registered within the room state with a set of parameters that the hosting client will provide,
+such as the `matrix_user_id`, `matrix_room_id` and others that are essential for the Widget to operate under
+the correct context.
+
+As new parameters have been introduced and exposed in the Widget API and hosting clients, by default they will
+not be checked during registration and might not be available for the widget to use.
+
+To check for specific parameters and require a re-registration of the widget if they are absent, you can create
+the provider component with a list of required `WidgetParameter`'s:
+
+```typescript
+<WidgetApiProvider
+  widgetApiPromise={widgetApiPromise}
+  widgetRegistration={{
+    name: 'Example Widget',
+    type: 'com.example.clock',
+    data: { title: 'Learn more…' },
+    // Device ID must be available upon registration
+    requiredParameters: [WidgetParameter.DeviceId],
+  }}
+>
+```
+
 ### Acessing the Widget API
 
 Once the Widget API is provided to React components, use the `useWidgetApi` hook to access it:

package/build/cjs/components/CapabilitiesGuard/CapabilitiesGuard.d.cts

@@ -0,0 +1,31 @@
+import { Capability, WidgetEventCapability } from 'matrix-widget-api';
+import { ComponentType, DispatchWithoutAction, PropsWithChildren, ReactElement } from 'react';
+/**
+ * Props for the {@link CapabilitiesGuard} component.
+ */
+export type CapabilitiesGuardProps = PropsWithChildren<{
+    /**
+     * Required capabilities to display the `children`.
+     */
+    capabilities: Array<WidgetEventCapability | Capability>;
+    /**
+     * Component to display if the required capabilities are missing. The
+     * `onRetry` callback can be used to re-request them from the user.
+     */
+    missingCapabilitiesComponent: ComponentType<{
+        onRetry: DispatchWithoutAction;
+    }>;
+    /**
+     * Component to display while the capabilities are evaluated or requested from
+     * the user.
+     */
+    loadingComponent: ComponentType;
+}>;
+/**
+ * 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 CapabilitiesGuardProps}
+ */
+export declare function CapabilitiesGuard({ capabilities, children, missingCapabilitiesComponent: MissingCapabilitiesComponent, loadingComponent: LoadingComponent, }: CapabilitiesGuardProps): ReactElement;

package/build/cjs/components/CapabilitiesGuard/CapabilitiesGuard.test.d.cts

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

package/build/cjs/components/CapabilitiesGuard/index.d.cts

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

package/build/cjs/components/ThemeSelectionProvider/ThemeSelectionProvider.d.cts

@@ -0,0 +1,43 @@
+import { PropsWithChildren, ReactElement } from 'react';
+/**
+ * Themes with different color schemes, either `light` or `dark`.
+ */
+export type Theme = 'light' | 'dark' | string;
+/**
+ * Return value of the {@link useThemeSelection} hook.
+ */
+export type ThemeSelectionContextType = {
+    /**
+     * The current color scheme.
+     */
+    theme: Theme;
+    /**
+     * Whether the widget is displayed in a modal.
+     *
+     * @remarks Modals have different background colors which the theme needs to
+     * take into account.
+     */
+    isModal: boolean;
+    /**
+     * Select the current color scheme.
+     *
+     * @param theme - The new color scheme.
+     */
+    setTheme: (theme: Theme) => void;
+};
+export declare const ThemeSelectionContext: import("react").Context<ThemeSelectionContextType | undefined>;
+/**
+ * Hook for accessing the current theme selection.
+ * @returns The current theme selection.
+ */
+export declare const useThemeSelection: () => ThemeSelectionContextType;
+/**
+ * Props for the {@link ThemeSelectionProvider} component.
+ */
+export type ThemeSelectionProviderProps = PropsWithChildren;
+/**
+ * Provides the current theme selection to child components.
+ * Use the {@link useThemeSelection} hook to access it.
+ * @param param0 - {@link ThemeSelectionProviderProps}
+ */
+export declare function ThemeSelectionProvider({ children, }: ThemeSelectionProviderProps): ReactElement;

package/build/cjs/components/ThemeSelectionProvider/ThemeSelectionProvider.test.d.cts

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

package/build/cjs/components/ThemeSelectionProvider/index.d.cts

@@ -0,0 +1,2 @@
+export { ThemeSelectionProvider, useThemeSelection, } from './ThemeSelectionProvider';
+export type { Theme, ThemeSelectionContextType, ThemeSelectionProviderProps, } from './ThemeSelectionProvider';

package/build/cjs/components/WidgetApiProvider/WidgetApiProvider.d.cts

@@ -0,0 +1,55 @@
+import { WidgetApi, WidgetRegistration } from '@matrix-widget-toolkit/api';
+import { ComponentType, DispatchWithoutAction, PropsWithChildren, ReactElement } from 'react';
+import { FallbackProps } from 'react-error-boundary';
+/**
+ * Props for the {@link (WidgetApiProvider:function)} component.
+ */
+export type WidgetApiProviderProps = PropsWithChildren<{
+    /**
+     * Configuration to set during Widget registration.
+     */
+    widgetRegistration?: WidgetRegistration;
+    /**
+     * Result from a call to `WidgetApiImpl.create`.
+     */
+    widgetApiPromise: Promise<WidgetApi>;
+    /**
+     * Component to display while the widget API communication is established or
+     * while capabilities are evaluated or requested from the user.
+     */
+    loadingViewComponent: ComponentType;
+    /**
+     * Component to display if the widget is opened in an unsupported mobile
+     * client.
+     */
+    mobileClientErrorComponent: ComponentType;
+    /**
+     * Component to display if the widget is opened outside a Matrix client.
+     */
+    outsideClientErrorComponent: ComponentType;
+    /**
+     * Component to display when a child component fails to render.
+     */
+    childErrorComponent: ComponentType<FallbackProps>;
+    /**
+     * Component to display if the required capabilities are missing. The
+     * `onRetry` callback can be used to re-request them from the user.
+     */
+    missingCapabilitiesComponent: ComponentType<{
+        onRetry: DispatchWithoutAction;
+    }>;
+    /**
+     * Component to display when the widget is not properly configured in the
+     * room. Takes the expected `widgetRegistration` as a parameter.
+     */
+    missingParametersErrorComponent: ComponentType<{
+        widgetRegistration?: WidgetRegistration;
+    }>;
+}>;
+/**
+ * Provides the `WidgetApi` in the React context once it's fully
+ * initialized without errors.
+ * Use {@link useWidgetApi} to access it.
+ * @param param0 - {@link WidgetApiProviderProps}
+ */
+export declare function WidgetApiProvider({ children, widgetApiPromise, widgetRegistration, loadingViewComponent: LoadingViewComponent, mobileClientErrorComponent: MobileClientErrorComponent, outsideClientErrorComponent: OutsideClientErrorComponent, childErrorComponent: ChildErrorComponent, missingCapabilitiesComponent: MissingCapabilitiesComponent, missingParametersErrorComponent: MissingParametersErrorComponent, }: WidgetApiProviderProps): ReactElement;

package/build/cjs/components/WidgetApiProvider/WidgetApiProvider.test.d.cts

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

package/build/cjs/components/WidgetApiProvider/context.d.cts

@@ -0,0 +1,17 @@
+import { WidgetApi } from '@matrix-widget-toolkit/api';
+export declare const WidgetApiContext: import("react").Context<WidgetApi | undefined>;
+/**
+ * Hook for accessing the widget API.
+ *
+ * @remarks Can only be called inside a `WidgetApiProvider`
+ *          (or WidgetApiMockProvider in tests).
+ *
+ * @returns A fully initialized widget API.
+ */
+export declare const useWidgetApi: () => WidgetApi;
+/**
+ * Provides a custom instance of the `WidgetApi` to the context.
+ *
+ * @remarks Should only be used in tests.
+ */
+export declare const WidgetApiMockProvider: import("react").Provider<WidgetApi | undefined>;

package/build/cjs/components/WidgetApiProvider/index.d.cts

@@ -0,0 +1,3 @@
+export { WidgetApiMockProvider, useWidgetApi } from './context';
+export { WidgetApiProvider } from './WidgetApiProvider';
+export type { WidgetApiProviderProps } from './WidgetApiProvider';

package/build/cjs/components/index.d.cts

@@ -0,0 +1,3 @@
+export * from './CapabilitiesGuard';
+export * from './ThemeSelectionProvider';
+export * from './WidgetApiProvider';

package/build/cjs/{index.js → index.cjs}

@@ -88,10 +88,11 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
  */
 function WidgetApiProvider(_a) {
     var _this = this;
+    var _b;
     var children = _a.children, widgetApiPromise = _a.widgetApiPromise, widgetRegistration = _a.widgetRegistration, LoadingViewComponent = _a.loadingViewComponent, MobileClientErrorComponent = _a.mobileClientErrorComponent, OutsideClientErrorComponent = _a.outsideClientErrorComponent, ChildErrorComponent = _a.childErrorComponent, MissingCapabilitiesComponent = _a.missingCapabilitiesComponent, MissingParametersErrorComponent = _a.missingParametersErrorComponent;
     var isOpenedByClient = react.useMemo(function () { return api.extractWidgetParameters(); }, []).isOpenedByClient;
-    var _b = react.useState(), hasInitalCapabilitiesGranted = _b[0], setInitialCapabilitiesGranted = _b[1];
-    var _c = reactUse.useAsyncFn(function (widgetApi) { return __awaiter(_this, void 0, void 0, function () {
+    var _c = react.useState(), hasInitalCapabilitiesGranted = _c[0], setInitialCapabilitiesGranted = _c[1];
+    var _d = reactUse.useAsyncFn(function (widgetApi) { return __awaiter(_this, void 0, void 0, function () {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -108,8 +109,8 @@ function WidgetApiProvider(_a) {
                 case 3: return [2 /*return*/];
             }
         });
-    }); }, []), rerequestInitialCapabilities = _c[1];
-    var _d = reactUse.useAsync(function () { return __awaiter(_this, void 0, void 0, function () {
+    }); }, []), rerequestInitialCapabilities = _d[1];
+    var _e = reactUse.useAsync(function () { return __awaiter(_this, void 0, void 0, function () {
         var widgetApi;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -120,7 +121,7 @@ function WidgetApiProvider(_a) {
                     return [2 /*return*/, widgetApi];
             }
         });
-    }); }, [widgetApiPromise]), widgetApi = _d.value, error = _d.error, loading = _d.loading;
+    }); }, [widgetApiPromise]), widgetApi = _e.value, error = _e.error, loading = _e.loading;
     if (loading) {
         return jsxRuntime.jsx(LoadingViewComponent, {});
     }
@@ -135,7 +136,18 @@ function WidgetApiProvider(_a) {
     if (!hasInitalCapabilitiesGranted) {
         return (jsxRuntime.jsx(MissingCapabilitiesComponent, { onRetry: function () { return rerequestInitialCapabilities(widgetApi); } }));
     }
-    var hasParameters = api.hasRequiredWidgetParameters(widgetApi);
+    var hasParameters = api.hasWidgetParameters(widgetApi);
+    // Check for custom required parameters that are not part of the default setup
+    // and fail registration if they are missing.
+    var customRequiredParameters = (_b = widgetRegistration === null || widgetRegistration === void 0 ? void 0 : widgetRegistration.requiredParameters) !== null && _b !== void 0 ? _b : [];
+    if (customRequiredParameters.length > 0) {
+        hasParameters =
+            hasParameters &&
+                customRequiredParameters.every(function (param) {
+                    return (param in widgetApi.widgetParameters &&
+                        typeof widgetApi.widgetParameters[param] === 'string');
+                });
+    }
     return (jsxRuntime.jsx(WidgetApiContext.Provider, { value: widgetApi, children: hasParameters ? (jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { FallbackComponent: ChildErrorComponent, children: children })) : (jsxRuntime.jsx(MissingParametersErrorComponent, { widgetRegistration: widgetRegistration })) }));
 }
 

package/build/cjs/index.d.cts

@@ -0,0 +1,5 @@
+/**
+ * @packageDocumentation This is package that provides a Widget API
+ *                       intergration for React apps.
+ */
+export * from './components';

package/build/cjs/setupTests.d.cts

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

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

@@ -0,0 +1,31 @@
+import { Capability, WidgetEventCapability } from 'matrix-widget-api';
+import { ComponentType, DispatchWithoutAction, PropsWithChildren, ReactElement } from 'react';
+/**
+ * Props for the {@link CapabilitiesGuard} component.
+ */
+export type CapabilitiesGuardProps = PropsWithChildren<{
+    /**
+     * Required capabilities to display the `children`.
+     */
+    capabilities: Array<WidgetEventCapability | Capability>;
+    /**
+     * Component to display if the required capabilities are missing. The
+     * `onRetry` callback can be used to re-request them from the user.
+     */
+    missingCapabilitiesComponent: ComponentType<{
+        onRetry: DispatchWithoutAction;
+    }>;
+    /**
+     * Component to display while the capabilities are evaluated or requested from
+     * the user.
+     */
+    loadingComponent: ComponentType;
+}>;
+/**
+ * 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 CapabilitiesGuardProps}
+ */
+export declare function CapabilitiesGuard({ capabilities, children, missingCapabilitiesComponent: MissingCapabilitiesComponent, loadingComponent: LoadingComponent, }: CapabilitiesGuardProps): ReactElement;

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { PropsWithChildren, ReactElement } from 'react';
+/**
+ * Themes with different color schemes, either `light` or `dark`.
+ */
+export type Theme = 'light' | 'dark' | string;
+/**
+ * Return value of the {@link useThemeSelection} hook.
+ */
+export type ThemeSelectionContextType = {
+    /**
+     * The current color scheme.
+     */
+    theme: Theme;
+    /**
+     * Whether the widget is displayed in a modal.
+     *
+     * @remarks Modals have different background colors which the theme needs to
+     * take into account.
+     */
+    isModal: boolean;
+    /**
+     * Select the current color scheme.
+     *
+     * @param theme - The new color scheme.
+     */
+    setTheme: (theme: Theme) => void;
+};
+export declare const ThemeSelectionContext: import("react").Context<ThemeSelectionContextType | undefined>;
+/**
+ * Hook for accessing the current theme selection.
+ * @returns The current theme selection.
+ */
+export declare const useThemeSelection: () => ThemeSelectionContextType;
+/**
+ * Props for the {@link ThemeSelectionProvider} component.
+ */
+export type ThemeSelectionProviderProps = PropsWithChildren;
+/**
+ * Provides the current theme selection to child components.
+ * Use the {@link useThemeSelection} hook to access it.
+ * @param param0 - {@link ThemeSelectionProviderProps}
+ */
+export declare function ThemeSelectionProvider({ children, }: ThemeSelectionProviderProps): ReactElement;

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

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

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

@@ -0,0 +1,2 @@
+export { ThemeSelectionProvider, useThemeSelection, } from './ThemeSelectionProvider';
+export type { Theme, ThemeSelectionContextType, ThemeSelectionProviderProps, } from './ThemeSelectionProvider';

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

@@ -0,0 +1,55 @@
+import { WidgetApi, WidgetRegistration } from '@matrix-widget-toolkit/api';
+import { ComponentType, DispatchWithoutAction, PropsWithChildren, ReactElement } from 'react';
+import { FallbackProps } from 'react-error-boundary';
+/**
+ * Props for the {@link (WidgetApiProvider:function)} component.
+ */
+export type WidgetApiProviderProps = PropsWithChildren<{
+    /**
+     * Configuration to set during Widget registration.
+     */
+    widgetRegistration?: WidgetRegistration;
+    /**
+     * Result from a call to `WidgetApiImpl.create`.
+     */
+    widgetApiPromise: Promise<WidgetApi>;
+    /**
+     * Component to display while the widget API communication is established or
+     * while capabilities are evaluated or requested from the user.
+     */
+    loadingViewComponent: ComponentType;
+    /**
+     * Component to display if the widget is opened in an unsupported mobile
+     * client.
+     */
+    mobileClientErrorComponent: ComponentType;
+    /**
+     * Component to display if the widget is opened outside a Matrix client.
+     */
+    outsideClientErrorComponent: ComponentType;
+    /**
+     * Component to display when a child component fails to render.
+     */
+    childErrorComponent: ComponentType<FallbackProps>;
+    /**
+     * Component to display if the required capabilities are missing. The
+     * `onRetry` callback can be used to re-request them from the user.
+     */
+    missingCapabilitiesComponent: ComponentType<{
+        onRetry: DispatchWithoutAction;
+    }>;
+    /**
+     * Component to display when the widget is not properly configured in the
+     * room. Takes the expected `widgetRegistration` as a parameter.
+     */
+    missingParametersErrorComponent: ComponentType<{
+        widgetRegistration?: WidgetRegistration;
+    }>;
+}>;
+/**
+ * Provides the `WidgetApi` in the React context once it's fully
+ * initialized without errors.
+ * Use {@link useWidgetApi} to access it.
+ * @param param0 - {@link WidgetApiProviderProps}
+ */
+export declare function WidgetApiProvider({ children, widgetApiPromise, widgetRegistration, loadingViewComponent: LoadingViewComponent, mobileClientErrorComponent: MobileClientErrorComponent, outsideClientErrorComponent: OutsideClientErrorComponent, childErrorComponent: ChildErrorComponent, missingCapabilitiesComponent: MissingCapabilitiesComponent, missingParametersErrorComponent: MissingParametersErrorComponent, }: WidgetApiProviderProps): ReactElement;

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

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

package/build/esm/components/WidgetApiProvider/context.d.ts

@@ -0,0 +1,17 @@
+import { WidgetApi } from '@matrix-widget-toolkit/api';
+export declare const WidgetApiContext: import("react").Context<WidgetApi | undefined>;
+/**
+ * Hook for accessing the widget API.
+ *
+ * @remarks Can only be called inside a `WidgetApiProvider`
+ *          (or WidgetApiMockProvider in tests).
+ *
+ * @returns A fully initialized widget API.
+ */
+export declare const useWidgetApi: () => WidgetApi;
+/**
+ * Provides a custom instance of the `WidgetApi` to the context.
+ *
+ * @remarks Should only be used in tests.
+ */
+export declare const WidgetApiMockProvider: import("react").Provider<WidgetApi | undefined>;

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

@@ -0,0 +1,3 @@
+export { WidgetApiMockProvider, useWidgetApi } from './context';
+export { WidgetApiProvider } from './WidgetApiProvider';
+export type { WidgetApiProviderProps } from './WidgetApiProvider';

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

@@ -0,0 +1,3 @@
+export * from './CapabilitiesGuard';
+export * from './ThemeSelectionProvider';
+export * from './WidgetApiProvider';

package/build/esm/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @packageDocumentation This is package that provides a Widget API
+ *                       intergration for React apps.
+ */
+export * from './components';

package/build/esm/index.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useAsyncFn, useAsync, useAsyncRetry } from 'react-use';
 import { createContext, useContext, useMemo, useState, useCallback } from 'react';
-import { extractWidgetParameters, hasRequiredWidgetParameters, extractWidgetApiParameters, parseWidgetId } from '@matrix-widget-toolkit/api';
+import { extractWidgetParameters, hasWidgetParameters, extractWidgetApiParameters, parseWidgetId } from '@matrix-widget-toolkit/api';
 import { ErrorBoundary } from 'react-error-boundary';
 
 /*
@@ -86,10 +86,11 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
  */
 function WidgetApiProvider(_a) {
     var _this = this;
+    var _b;
     var children = _a.children, widgetApiPromise = _a.widgetApiPromise, widgetRegistration = _a.widgetRegistration, LoadingViewComponent = _a.loadingViewComponent, MobileClientErrorComponent = _a.mobileClientErrorComponent, OutsideClientErrorComponent = _a.outsideClientErrorComponent, ChildErrorComponent = _a.childErrorComponent, MissingCapabilitiesComponent = _a.missingCapabilitiesComponent, MissingParametersErrorComponent = _a.missingParametersErrorComponent;
     var isOpenedByClient = useMemo(function () { return extractWidgetParameters(); }, []).isOpenedByClient;
-    var _b = useState(), hasInitalCapabilitiesGranted = _b[0], setInitialCapabilitiesGranted = _b[1];
-    var _c = useAsyncFn(function (widgetApi) { return __awaiter(_this, void 0, void 0, function () {
+    var _c = useState(), hasInitalCapabilitiesGranted = _c[0], setInitialCapabilitiesGranted = _c[1];
+    var _d = useAsyncFn(function (widgetApi) { return __awaiter(_this, void 0, void 0, function () {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -106,8 +107,8 @@ function WidgetApiProvider(_a) {
                 case 3: return [2 /*return*/];
             }
         });
-    }); }, []), rerequestInitialCapabilities = _c[1];
-    var _d = useAsync(function () { return __awaiter(_this, void 0, void 0, function () {
+    }); }, []), rerequestInitialCapabilities = _d[1];
+    var _e = useAsync(function () { return __awaiter(_this, void 0, void 0, function () {
         var widgetApi;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -118,7 +119,7 @@ function WidgetApiProvider(_a) {
                     return [2 /*return*/, widgetApi];
             }
         });
-    }); }, [widgetApiPromise]), widgetApi = _d.value, error = _d.error, loading = _d.loading;
+    }); }, [widgetApiPromise]), widgetApi = _e.value, error = _e.error, loading = _e.loading;
     if (loading) {
         return jsx(LoadingViewComponent, {});
     }
@@ -133,7 +134,18 @@ function WidgetApiProvider(_a) {
     if (!hasInitalCapabilitiesGranted) {
         return (jsx(MissingCapabilitiesComponent, { onRetry: function () { return rerequestInitialCapabilities(widgetApi); } }));
     }
-    var hasParameters = hasRequiredWidgetParameters(widgetApi);
+    var hasParameters = hasWidgetParameters(widgetApi);
+    // Check for custom required parameters that are not part of the default setup
+    // and fail registration if they are missing.
+    var customRequiredParameters = (_b = widgetRegistration === null || widgetRegistration === void 0 ? void 0 : widgetRegistration.requiredParameters) !== null && _b !== void 0 ? _b : [];
+    if (customRequiredParameters.length > 0) {
+        hasParameters =
+            hasParameters &&
+                customRequiredParameters.every(function (param) {
+                    return (param in widgetApi.widgetParameters &&
+                        typeof widgetApi.widgetParameters[param] === 'string');
+                });
+    }
     return (jsx(WidgetApiContext.Provider, { value: widgetApi, children: hasParameters ? (jsx(ErrorBoundary, { FallbackComponent: ChildErrorComponent, children: children })) : (jsx(MissingParametersErrorComponent, { widgetRegistration: widgetRegistration })) }));
 }
 

package/build/esm/setupTests.d.ts

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

package/package.json

@@ -1,27 +1,36 @@
 {
   "name": "@matrix-widget-toolkit/react",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "A simplified layer on top of @matrix-widget-toolkit/api to use it in a React based widget.",
   "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/node": "^22.7.5",
-    "@types/react": "^18.2.74",
-    "@vitest/coverage-v8": "^2.1.3",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.3"
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.2.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/node": "22.13.5",
+    "@types/react": "18.3.18",
+    "@vitest/coverage-v8": "3.0.7",
+    "typescript": "5.7.3",
+    "vite": "6.2.0",
+    "vitest": "3.0.7"
   },
   "scripts": {
     "build": "tsc && rollup --config ../../rollup.config.mjs",
@@ -33,14 +42,19 @@
     "postpack": "node ../../scripts/postpack.js",
     "translate": "echo \"Nothing to translate\"",
     "check-api-report": "api-extractor run --verbose",
-    "generate-api-report": "tsc && api-extractor run --verbose --local"
+    "generate-api-report": "tsc && api-extractor run --verbose --local",
+    "clean": "yarn run clean:build",
+    "clean:build": "rm -rf lib",
+    "clean:cache": "echo 'script not implemented package'"
   },
   "dependencies": {
-    "@matrix-widget-toolkit/api": "^3.4.2",
-    "matrix-widget-api": "^1.9.0",
-    "react": "^18.2.0",
-    "react-error-boundary": "^3.1.4",
-    "react-use": "^17.5.1"
+    "@matrix-widget-toolkit/api": "^4.1.0",
+    "matrix-widget-api": "1.13.1",
+    "react-error-boundary": "5.0.0",
+    "react-use": "17.6.0"
+  },
+  "peerDependencies": {
+    "react": "18.3.1"
   },
   "repository": {
     "type": "git",
@@ -56,5 +70,5 @@
     "matrix-widget-api"
   ],
   "module": "./build/esm/index.js",
-  "main": "./build/cjs/index.js"
+  "main": "./build/cjs/index.cjs"
 }