9.x → 10.x

This guide describes the breaking changes required when upgrading from the 9.x to the 10.x release of enosix Cloud UI (@enosix/cloud-ui).

What Changed

In 9.x, notistack was bundled inside the published @enosix/cloud-ui package. In 10.x, notistack is a peer dependency and is no longer bundled.

This fixes an issue in custom apps that render their own SnackbarProvider. Because the app and @enosix/cloud-ui each had their own copy of notistack, they used different React contexts. Calls to showToast from useToastMessages ran without error, but no toast was displayed. With a single shared notistack instance, toasts now render through the provider that wraps your app.

Cloud UI 10 also adds VC CLOSE-SESSION and CLOSE-SESSION-RESPONSE message-channel events. They allow the host to request closure of the active SAP session when it closes the VC app. Session closure continues to be handled automatically when the user finalizes the material configuration or closes the material within the app.

Who Is Affected

App type	Action required
Custom apps (`custom-ui`)	Add `notistack` to your app's dependencies.
Apps based on the `vc-ui` or `salesdoc-ui` templates	Add `notistack` to your app's dependencies.
Apps created with the latest CLI template	None. New projects already include `notistack`.
Built-in Variant Configuration and Sales Document UI apps	None. Notifications continue to work as before.

The Variant Configuration UI embed configuration and initial context payloads are not impacted by this release.

Required Changes

1. Add `notistack` as a dependency

Add notistack to your app's package.json dependencies:

  "dependencies": {
    "@enosix/cloud-ui": "^10.0.0",
+   "notistack": "^3.0.2",
    "react": "^19.2.8"
  }

Or install it with your package manager:

pnpm install notistack

Package managers that auto-install peer dependencies (pnpm and npm 7+ by default) may resolve notistack for you. Declare it explicitly anyway, so your app controls the single shared version. This is required if your code imports notistack directly, for example to render a SnackbarProvider.

2. Make sure a single `SnackbarProvider` wraps your app

Your app must render a SnackbarProvider imported from your own notistack install, above any component that calls useToastMessages:

import { SnackbarProvider } from 'notistack'

createRoot(document.getElementById('root')!).render(
    <SnackbarProvider>
        <App />
    </SnackbarProvider>,
)

If your app already wraps its root with SnackbarProvider, no code change is needed beyond installing the dependency.

3. Verify only one copy of `notistack` is installed

Ensure your lockfile resolves a single version of notistack shared by your app and @enosix/cloud-ui:

pnpm why notistack

If more than one version is listed, align the version range in your app's package.json with the one required by @enosix/cloud-ui (^3.0.2), then reinstall.

4. Add the VC session-close events to your host integration

Cloud UI 10 adds two Variant Configuration (VC) message-channel events. Together, they let the host request closure of the VC app's active SAP session before removing the iframe and receive confirmation that the session was closed:

Event	Direction	Data	Host integration action
`CLOSE-SESSION` (`VcSubjects.vc.CLOSE_SESSION`)	Host → VC iframe	`string`	Send this request when the host must close the VC iframe before the VC process has completed. The iframe uses its current API context to close its active SAP session.
`CLOSE-SESSION-RESPONSE` (`VcSubjects.vc.CLOSE_SESSION_RESPONSE`)	VC iframe → Host	`boolean`	Handle the result: `true` means the SAP session closed; `false` means it did not.

For example, import the VC subjects from the Cloud UI package and use them in your existing host message-channel send and receive logic:

import { VcSubjects } from '@enosix/cloud-ui/apps/vc-ui/utilities/messageChannelEvents'

// When the host is about to remove the VC iframe before the VC process completes,
// send a host-to-iframe message using your host's existing channel API:
const closeSessionRequest = {
    source: 'host',
    subject: VcSubjects.vc.CLOSE_SESSION,
    data: '', // No meaningful payload
}

// In the host's iframe-to-host message handler:
if (
    message.source === 'vc' &&
    message.subject === VcSubjects.vc.CLOSE_SESSION_RESPONSE
) {
    const sessionClosed = message.data as boolean
    // Handle success or failure before proceeding with iframe teardown.
}

Use CLOSE-SESSION to ensure the active SAP session is closed when the host app is closing the VC app. The VC app continues to handle session closure automatically when the user finalizes the material configuration or closes the material from within the app.

Verifying the Upgrade

Start your app and trigger a toast, for example showToast('success', 'Test message') from useToastMessages.
Confirm that the toast is displayed.
In the browser developer tools, confirm that a .notistack-SnackbarContainer element is present in the DOM.

Troubleshooting

Symptom	Likely cause	Fix
`showToast` runs without error but no toast appears	No `SnackbarProvider` wraps the app, or the app and `@enosix/cloud-ui` resolve different copies of `notistack`	Follow steps 1–3 above.
Build or install error: `Cannot find module 'notistack'`	`notistack` is not installed in your app	Run `pnpm install notistack`.
Peer dependency warning for `notistack`	`notistack` is not declared in your app's dependencies	Add it as described in step 1.

9.x → 10.x

What Changed​

Who Is Affected​

Required Changes​

1. Add notistack as a dependency​

2. Make sure a single SnackbarProvider wraps your app​

3. Verify only one copy of notistack is installed​

4. Add the VC session-close events to your host integration​

Verifying the Upgrade​

Troubleshooting​