# io.Connect Browser 4.5

Source: https://docs.interop.io/browser/getting-started/changelog/4-5/index.html

## io.Connect Browser 4.5

*Release date: 10.07.2026*

Versions of all main and additional libraries of **io.Connect Browser** for the current release:

| Library | Version |
|---------|---------|
| [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) | 4.5 |
| [`@interopio/browser-platform`](https://www.npmjs.com/package/@interopio/browser-platform) | 4.5 |
| [`@interopio/browser-worker`](https://www.npmjs.com/package/@interopio/browser-worker) | 4.5 |
| [`@interopio/cli`](https://www.npmjs.com/package/@interopio/cli) | 4.4 |
| [`@interopio/fdc3`](https://www.npmjs.com/package/@interopio/fdc3) | 2.11 |
| [`@interopio/home-ui-react`](https://www.npmjs.com/package/@interopio/home-ui-react) | 4.5 |
| [`@interopio/iframes-api`](https://www.npmjs.com/package/@interopio/iframes-api) | 1.0 |
| [`@interopio/intent-resolver-ui`](https://www.npmjs.com/package/@interopio/intent-resolver-ui) | 4.5 |
| [`@interopio/modals-api`](https://www.npmjs.com/package/@interopio/modals-api) | 4.5 |
| [`@interopio/modals-ui`](https://www.npmjs.com/package/@interopio/modals-ui) | 4.5 |
| [`@interopio/ng`](https://www.npmjs.com/package/@interopio/ng) | 6.3 |
| [`@interopio/react-hooks`](https://www.npmjs.com/package/@interopio/react-hooks) | 4.5 |
| [`@interopio/search-api`](https://www.npmjs.com/package/@interopio/search-api) | 3.5 |
| [`@interopio/theme`](https://www.npmjs.com/package/@interopio/theme) | 4.5 |
| [`@interopio/widget`](https://www.npmjs.com/package/@interopio/widget) | 3.5 |
| [`@interopio/workspaces-api`](https://www.npmjs.com/package/@interopio/workspaces-api) | 4.5 |
| [`@interopio/workspaces-ui-react`](https://www.npmjs.com/package/@interopio/workspaces-ui-react) | 4.5 |
| [`@interopio/workspaces-ui-web-components`](https://www.npmjs.com/package/@interopio/workspaces-ui-web-components) | 4.5 |

## New Features

> ⚠️ *Note that each new feature is listed under all libraries it affects.*

> ### @interopio/browser
>
> #### Retrieving Layout Contents
>
> The Layouts API has been extended with a new [`getLayoutContents()`](https://docs.interop.io/browser/reference/javascript/layouts/api/index.md#API-getLayoutContents) method that allows you to [retrieve the contents](https://docs.interop.io/browser/capabilities/windows/layouts/layouts-api/index.md#layout_operations-retrieving_layout_contents) of Global Layouts and Workspace Layouts. The method receives a [`GetContentsOptions`](https://docs.interop.io/browser/reference/javascript/layouts/getcontentsoptions/index.md) object as a required argument.
>
> When used for retrieving the contents of a Global Layout, the returned [`LayoutContents`](https://docs.interop.io/browser/reference/javascript/layouts/layoutcontents/index.md) object will contain all components participating in the Global Layout: individual app instances (including all Workspaces App instances), all Workspace instances hosted in all Workspaces App instances, and all windows participating in all Workspaces.
>
> When used for retrieving the contents of a Workspace Layout, the returned `LayoutContents` object will contain only the windows participating in the Workspace.
>
> The following example demonstrates how to retrieve the contents of a Global Layout:
>
> ```javascript
> const options = { name: "My Layout", type: "Global" };
>
> const {
>    appComponents,
>    workspaceComponents,
>    workspaceWindows
> } = await io.layouts.getLayoutContents(options);
>
> // List all apps in the Layout.
> console.log("Apps:", appComponents);
>
> // List all Workspaces App instances in the Layout.
> console.log("Workspaces App instances:", workspaceComponents);
>
> // List all windows participating in all Workspaces.
> console.log("Workspace windows:", workspaceWindows);
> ```
>
> #### Leaving Channels
>
> The [`leave()`](https://docs.interop.io/browser/reference/javascript/channels/api/index.md#API-leave) method of the Channels API now accepts a string argument specifying the ID of the window to [remove from the currently joined Channel](https://docs.interop.io/browser/capabilities/data-sharing/channels/index.md#join__leave_channels) (in single Channel mode) or from all currently joined Channels (in multi Channel mode):
>
> ```javascript
> const windowId = win.id;
>
> await io.channels.leave(windowId);
> ```
>
> #### Filtering Channels by FDC3 Context Type
>
> The [`getMyChannels()`](https://docs.interop.io/browser/reference/javascript/channels/api/index.md#API-getMyChannels) method of the Channels API now accepts an optional [`FDC3Options`](https://docs.interop.io/browser/reference/javascript/channels/fdc3options/index.md) argument, allowing you to [filter the retrieved Channel contexts](https://docs.interop.io/browser/capabilities/data-sharing/channels/index.md#multiple_channels-retrieving_channel_contexts) by FDC3 context type:
>
> ```javascript
> // Retrieve only Channel contexts containing FDC3 data of type `"fdc3.instrument"`.
> const options = { contextType: "fdc3.instrument" };
>
> const channels = await io.channels.getMyChannels(options);
> ```
>
> #### Configuring IFrame Attributes
>
> Related to the release of the new io.Connect [IFrames API](https://docs.interop.io/browser/capabilities/windows/iframes/index.md), the [`DefinitionDetails`](https://docs.interop.io/browser/reference/javascript/app%20management/definitiondetails/index.md) object describing the `details` object in an app definition has been extended with an `iframeSandbox` property for configuring the `sandbox` attribute of the `<iframe>` element.
>
> You can also use the `iframePermissionsPolicy` property introduced in **io.Connect Browser** 3.4 to configure the `allow` attribute of the `<iframe>` element.
>
> > ⚠️ *Note that the `workspacesSandbox` property will be deprecated in **io.Connect Browser** 5.0 and it's strongly recommended to migrate to the `iframeSandbox` property instead.*

> ### @interopio/browser-platform
>
> #### Retrieving Layout Contents
>
> Added support for the [`getLayoutContents()`](https://docs.interop.io/browser/reference/javascript/layouts/api/index.md#API-getLayoutContents) method in the Layouts API that allows you to [retrieve the contents](https://docs.interop.io/browser/capabilities/windows/layouts/layouts-api/index.md#layout_operations-retrieving_layout_contents) of Global Layouts and Workspace Layouts.
>
> #### IFrames API
>
> - Added support for the new [`@interopio/iframes-api`](https://www.npmjs.com/package/@interopio/iframes-api) library, enabling Browser Clients to start apps in `<iframe>` elements.
> - Added support for the `iframeSandbox` property of the `details` object in the app definition for configuring the `sandbox` attribute of the `<iframe>` element.
>
> #### Leaving Channels
>
> Added support for passing a string argument to the [`leave()`](https://docs.interop.io/browser/reference/javascript/channels/api/index.md#API-leave) method of the Channels API that specifies the ID of the window to remove from a single or from multiple Channels.
>
> #### Filtering Channels by FDC3 Context Type
>
> Added support for the optional [`FDC3Options`](https://docs.interop.io/browser/reference/javascript/channels/fdc3options/index.md) argument in the [`getMyChannels()`](https://docs.interop.io/browser/reference/javascript/channels/api/index.md#API-getMyChannels) method, enabling filtering of Channel contexts by FDC3 context type.

> ### @interopio/home-ui-react
>
> #### Launchpad Redesign
>
> The Launchpad has been redesigned - the Global Layouts are now listed in a Layouts section similarly to apps and Workspaces instead of in a separate panel in the Launchpad:
>
> ![Launchpad Sections](https://docs.interop.io/browser/images/home/launchpad-sections.png)
>
> Favorites are now added and removed via the context menu for each section item instead of via a dedicated button in the item list.
>
> #### Library Features
>
> - Added `sectionIconSrc` to the default section components: `<ApplicationsSection />`, `<FavoritesSection />`, and `<WorkspacesSection />`.
> - Extended the `config` object of the `<Section />` component with an optional `HeaderButton` property that accepts a custom section header action component.
> - Added item-level `isSelected` and `statusPill` support for items rendered in the `<Section />` component.
> - Changed the return shape of the `getIcon()` function passed to the `<Section />` component from a string value to structured icon data (`{ variant: IconVariant }` for predefined icons or `{ src: string }` for custom icons).

> ### @interopio/iframes-api
>
> #### Opening Apps in IFrames
>
> The new [`@interopio/iframes-api`](https://www.npmjs.com/package/@interopio/iframes-api) library provides a convenient [IFrames API](https://docs.interop.io/browser/capabilities/windows/iframes/index.md) that allows you to start apps in `<iframe>` elements within the current app instance.
>
> To use the IFrames API, add it to the `libraries` array when initializing the [`@interopio/browser-platform`](https://www.npmjs.com/package/@interopio/browser-platform) or the [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) library.
>
> The following example demonstrates how to include the `@interopio/iframes-api` library when initializing the `@interopio/browser-platform` library in your Main app:
>
> ```javascript
> import IOBrowserPlatform from "@interopio/browser-platform";
> import IOIFrames from "@interopio/iframes-api";
>
> const config = {
>     licenseKey: "my-license-key",
>     browser: {
>         libraries: [IOIFrames]
>     }
> };
>
> const { io } = await IOBrowserPlatform(config);
> ```
>
> To open an app in an `<iframe>` element, use the [`openApp()`](https://docs.interop.io/browser/reference/javascript/iframes/api/index.md#API-openApp) method and provide the app name and a container element in which to render the `<iframe>`:
>
> ```javascript
> const container = document.getElementById("my-iframe-container");
>
> const config = {
>     appName: "my-app",
>     container,
>     context: { ticker: "MSFT" }
> }
>
> const { id, iframe } = await io.iframes.openApp(config);
> ```
>
> > ⚠️ *Note that all Browser Client apps opened via the `openApp()` method of the IFrames API must use `@interopio/browser` 4.5 or later in order to be able to properly connect to the io.Connect platform.*
>
> To handle close requests for the app opened in an `<iframe>` element, use the [`onCloseRequested()`](https://docs.interop.io/browser/reference/javascript/iframes/api/index.md#API-onCloseRequested) method and invoke the provided `confirmClose()` callback to confirm to the platform that the `<iframe>` can be closed. You can then remove the `<iframe>` container with your custom logic:
>
> ```javascript
> const handler = async (instance, confirmClose) => {
>     // Confirm to the platform that the `<iframe>` can be closed.
>     await confirmClose();
>
>     // Remove the `<iframe>` container with your custom logic.
> };
>
> io.iframes.onCloseRequested(handler);
> ```

> ### @interopio/workspaces-ui-react
>
> #### Workspace Splitter Size
>
> It's now possible to customize the size of the [Workspace splitters](https://docs.interop.io/browser/capabilities/windows/workspaces/workspaces-app/index.md#splitter_size) (the draggable dividers between the windows in a Workspace).
>
> To specify a splitter size in pixels, use the `splitterSize` property of the `settings` object within the `components` prop of the `<Workspaces />` component:
>
> ```javascript
> import Workspaces from "@interopio/workspaces-ui-react";
>
> const App = () => {
>     return (
>         <Workspaces
>             components={{
>                 settings: {
>                     splitterSize: 10
>                 }
>             }}
>         />
>     );
> };
>
> export default App;
> ```

## Improvements & Bug Fixes

> ⚠️ *Note that each improvement or bug fix is listed under all libraries it affects.*

> ### @interopio/browser
>
> - Fixed the `configure()` method of the Notifications API to resolve with the updated notification configuration instead of `undefined`.
> - Fixed an issue where the `restrictAll()` method of the Channels API resolved with an empty object instead of `undefined`.
> - Enforced stricter URL validation for app definitions and when opening windows dynamically. URLs with unsafe protocols (`data:`, `javascript:`, `vbscript:`) are now rejected.

> ### @interopio/browser-platform
>
> - Fixed the `configure()` method of the Notifications API to resolve with the updated notification configuration instead of `undefined`.
> - Fixed an issue where the `restrictAll()` method of the Channels API resolved with an empty object instead of `undefined`.
> - Enforced stricter URL validation for app definitions and when opening windows dynamically. URLs with unsafe protocols (`data:`, `javascript:`, `vbscript:`) are now rejected.
> - Improved the performance of fetching remote configuration from **io.Manager**.

> ### @interopio/fdc3
>
> - Updated the underlying `@finos/fdc3` dependency to version 2.2.3.
> - Updated the app Channel definition decoder to accept `id` without requiring `name`, aligning with the FDC3 2.2 specification.

> ### @interopio/home-ui-react
>
> - Improved the text and order of the Platform Preferences panel components.
> - Improved the Notification Settings panel styling for consistency between panels.

> ### @interopio/modals-ui
>
> - Fixed dialog visual rendering issues related to theme class management when switching themes.

> ### @interopio/theme
>
> - Fixed form placeholder color and removed the "Clear" button for form inputs.

> ### @interopio/workspaces-ui-react
>
> - Added support for the `iframeSandbox` property of the `details` object in the app definition for configuring the `sandbox` attribute of the `<iframe>` element.