@servicetitan/notifications 25.9.0 → 26.1.0

package/dist/components/__tests__/container.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=container.test.d.ts.map

package/dist/components/__tests__/container.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.test.d.ts","sourceRoot":"","sources":["../../../src/components/__tests__/container.test.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/components/__tests__/container.test.js

@@ -0,0 +1,59 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, waitFor, within } from '@testing-library/react';
+import { Container } from '../container';
+describe('[notifications] Container', () => {
+    beforeEach(() => {
+        var _a;
+        (_a = document.getElementById('servicetitan-notifications')) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    const subject = (children) => {
+        return render(_jsx(Container, { children: children }));
+    };
+    test('renders #servicetitan-notifications.initialized > .ToastGroup', () => __awaiter(void 0, void 0, void 0, function* () {
+        subject();
+        yield waitFor(() => expect(document.querySelectorAll('#servicetitan-notifications.initialized > .ToastGroup')).toHaveLength(1));
+    }));
+    test('renders children within .ToastGroup', () => __awaiter(void 0, void 0, void 0, function* () {
+        subject(_jsx("button", { children: "Foo" }));
+        yield waitFor(() => {
+            expect(within(document.querySelector('#servicetitan-notifications.initialized > .ToastGroup')).getByRole('button', { name: 'Foo' })).toBeInTheDocument();
+        });
+    }));
+    describe('when #servicetitan-notifications already exists', () => {
+        let container;
+        beforeEach(() => {
+            container = document.createElement('div');
+            container.setAttribute('id', 'servicetitan-notifications');
+            document.body.appendChild(container);
+        });
+        test('creates .ToastGroup within existing container', () => __awaiter(void 0, void 0, void 0, function* () {
+            subject();
+            yield waitFor(() => {
+                expect(container.querySelectorAll('.ToastGroup')).toHaveLength(1);
+            });
+        }));
+        describe('when .ToastGroup already exists', () => {
+            let toastGroup;
+            beforeEach(() => {
+                toastGroup = document.createElement('div');
+                toastGroup.classList.add('ToastGroup');
+                container.appendChild(toastGroup);
+            });
+            test('renders children inside existing ToastGroup', () => {
+                subject(_jsx("button", { children: "Baz" }));
+                expect(within(toastGroup).getByRole('button', { name: 'Baz' })).toBeInTheDocument();
+            });
+        });
+    });
+});
+//# sourceMappingURL=container.test.js.map

package/dist/components/__tests__/container.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.test.js","sourceRoot":"","sources":["../../../src/components/__tests__/container.test.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAGjE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACvC,UAAU,CAAC,GAAG,EAAE;;QACZ,MAAA,QAAQ,CAAC,cAAc,CAAC,4BAA4B,CAAC,0CAAE,MAAM,EAAE,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,CAAC,QAAoB,EAAE,EAAE;QACrC,OAAO,MAAM,CAAC,KAAC,SAAS,cAAE,QAAQ,GAAa,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,IAAI,CAAC,+DAA+D,EAAE,GAAS,EAAE;QAC7E,OAAO,EAAE,CAAC;QAEV,MAAM,OAAO,CAAC,GAAG,EAAE,CACf,MAAM,CACF,QAAQ,CAAC,gBAAgB,CAAC,uDAAuD,CAAC,CACrF,CAAC,YAAY,CAAC,CAAC,CAAC,CACpB,CAAC;IACN,CAAC,CAAA,CAAC,CAAC;IAEH,IAAI,CAAC,qCAAqC,EAAE,GAAS,EAAE;QACnD,OAAO,CAAC,mCAAoB,CAAC,CAAC;QAE9B,MAAM,OAAO,CAAC,GAAG,EAAE;YACf,MAAM,CACF,MAAM,CACF,QAAQ,CAAC,aAAa,CAAC,uDAAuD,CAAE,CACnF,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CACzC,CAAC,iBAAiB,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;IACP,CAAC,CAAA,CAAC,CAAC;IAEH,QAAQ,CAAC,iDAAiD,EAAE,GAAG,EAAE;QAC7D,IAAI,SAAsB,CAAC;QAE3B,UAAU,CAAC,GAAG,EAAE;YACZ,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1C,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,4BAA4B,CAAC,CAAC;YAC3D,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,+CAA+C,EAAE,GAAS,EAAE;YAC7D,OAAO,EAAE,CAAC;YAEV,MAAM,OAAO,CAAC,GAAG,EAAE;gBACf,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YACtE,CAAC,CAAC,CAAC;QACP,CAAC,CAAA,CAAC,CAAC;QAEH,QAAQ,CAAC,iCAAiC,EAAE,GAAG,EAAE;YAC7C,IAAI,UAAuB,CAAC;YAE5B,UAAU,CAAC,GAAG,EAAE;gBACZ,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAC3C,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;gBACvC,SAAS,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,6CAA6C,EAAE,GAAG,EAAE;gBACrD,OAAO,CAAC,mCAAoB,CAAC,CAAC;gBAE9B,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;YACxF,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}

package/dist/components/container.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
-export declare const Container: FC;
+import { FC, PropsWithChildren } from 'react';
+export declare const Container: FC<PropsWithChildren>;
 //# sourceMappingURL=container.d.ts.map

package/dist/components/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/components/container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhD,eAAO,MAAM,SAAS,EAAE,EA0CvB,CAAC"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/components/container.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAK7E,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,iBAAiB,CAwB3C,CAAC"}

package/dist/components/container.js

@@ -1,38 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { render, createPortal } from 'react-dom';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Toast } from '@servicetitan/design-system';
+import { Fragment, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { createElement } from '../create-element';
 export const Container = ({ children }) => {
-    var _a, _b;
-    const container = (_a = document.getElementById('servicetitan-notifications')) !== null && _a !== void 0 ? _a : document.body.appendChild(createElement('div', { id: 'servicetitan-notifications' }));
-    const [target, setTarget] = useState((_b = container.getElementsByClassName('ToastGroup')[0]) !== null && _b !== void 0 ? _b : null);
+    const [container] = useState(() => {
+        var _a;
+        return ((_a = document.getElementById('servicetitan-notifications')) !== null && _a !== void 0 ? _a : document.body.appendChild(createElement('div', { id: 'servicetitan-notifications' })));
+    });
+    const [toastGroup, setToastGroup] = useState(() => findToastGroup(container));
+    const [foundGroup] = useState(() => !!toastGroup);
     useEffect(() => {
-        if (!container.classList.contains('initializing') &&
-            !container.classList.contains('initialized')) {
-            render(_jsx(Toast.Group, { portal: container }), container, () => {
-                container.classList.remove('initializing');
-                container.classList.add('initialized');
-            });
-            container.classList.add('initializing');
+        if (!toastGroup) {
+            setToastGroup(findToastGroup(container));
+            // This stops old code running in MFE from rendering duplicate Toast.Group
+            container.classList.add('initialized');
         }
-        let observer;
-        if (!target) {
-            observer = new MutationObserver(() => {
-                var _a;
-                if (container.classList.contains('initialized')) {
-                    setTarget((_a = container.getElementsByClassName('ToastGroup')[0]) !== null && _a !== void 0 ? _a : null);
-                    observer.disconnect();
-                }
-            });
-            observer.observe(container, {
-                attributeFilter: ['class'],
-            });
-        }
-        return () => {
-            observer === null || observer === void 0 ? void 0 : observer.disconnect();
-        };
-    }, [container, target]);
-    return target ? createPortal(children, target) : null;
+    }, [container, toastGroup]);
+    return (_jsxs(Fragment, { children: [foundGroup ? null : _jsx(Toast.Group, { portal: container }), toastGroup ? createPortal(children, toastGroup) : null] }));
 };
+function findToastGroup(parent) {
+    var _a;
+    return (_a = parent.getElementsByClassName('ToastGroup')[0]) !== null && _a !== void 0 ? _a : null;
+}
 //# sourceMappingURL=container.js.map

package/dist/components/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../src/components/container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAM,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,MAAM,SAAS,GAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;;IAC1C,MAAM,SAAS,GACX,MAAA,QAAQ,CAAC,cAAc,CAAC,4BAA4B,CAAC,mCACrD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,4BAA4B,EAAE,CAAC,CAAC,CAAC;IAE1F,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAChC,MAAA,SAAS,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,mCAAI,IAAI,CAC5D,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IACI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC;YAC7C,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,EAC9C;YACE,MAAM,CAAC,KAAC,KAAK,CAAC,KAAK,IAAC,MAAM,EAAE,SAAS,GAAI,EAAE,SAAS,EAAE,GAAG,EAAE;gBACvD,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;gBAC3C,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;YAC3C,CAAC,CAAC,CAAC;YACH,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SAC3C;QAED,IAAI,QAA0B,CAAC;QAE/B,IAAI,CAAC,MAAM,EAAE;YACT,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;;gBACjC,IAAI,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;oBAC7C,SAAS,CAAC,MAAA,SAAS,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,mCAAI,IAAI,CAAC,CAAC;oBACrE,QAAQ,CAAC,UAAU,EAAE,CAAC;iBACzB;YACL,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE;gBACxB,eAAe,EAAE,CAAC,OAAO,CAAC;aAC7B,CAAC,CAAC;SACN;QAED,OAAO,GAAG,EAAE;YACR,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,EAAE,CAAC;QAC3B,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAExB,OAAO,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1D,CAAC,CAAC"}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../src/components/container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAM,QAAQ,EAAqB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,MAAM,SAAS,GAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7D,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;;QAC9B,OAAO,CACH,MAAA,QAAQ,CAAC,cAAc,CAAC,4BAA4B,CAAC,mCACrD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,4BAA4B,EAAE,CAAC,CAAC,CACxF,CAAC;IACN,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9E,MAAM,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,UAAU,EAAE;YACb,aAAa,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC;YACzC,0EAA0E;YAC1E,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;SAC1C;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,OAAO,CACH,MAAC,QAAQ,eACJ,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,KAAK,IAAC,MAAM,EAAE,SAAS,GAAI,EACtD,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,IAChD,CACd,CAAC;AACN,CAAC,CAAC;AAEF,SAAS,cAAc,CAAC,MAAmB;;IACvC,OAAO,MAAA,MAAM,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,mCAAI,IAAI,CAAC;AAClE,CAAC"}

package/dist/components/notifications.d.ts

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { interfaces } from '@servicetitan/react-ioc';
 import { NotificationsApi } from '../api/notifications.api';
-export interface NotificationsProps {
+export interface NotificationsProps extends PropsWithChildren<{}> {
     apiService?: interfaces.Newable<NotificationsApi>;
 }
 export declare const Notifications: FC<NotificationsProps>;

package/dist/components/notifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../src/components/notifications.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAY,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE/D,OAAO,EACH,gBAAgB,EAGnB,MAAM,0BAA0B,CAAC;AAelC,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAWhD,CAAC"}
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../src/components/notifications.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAY,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE/D,OAAO,EACH,gBAAgB,EAGnB,MAAM,0BAA0B,CAAC;AAelC,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB,CAAC,EAAE,CAAC;IAC7D,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAWhD,CAAC"}

package/dist/components/shadow-dom.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
-export declare const ShadowDOM: FC;
+import { FC, PropsWithChildren } from 'react';
+export declare const ShadowDOM: FC<PropsWithChildren>;
 //# sourceMappingURL=shadow-dom.d.ts.map

package/dist/components/shadow-dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadow-dom.d.ts","sourceRoot":"","sources":["../../src/components/shadow-dom.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAE,MAAM,OAAO,CAAC;AAmBrC,eAAO,MAAM,SAAS,EAAE,EAiCvB,CAAC"}
+{"version":3,"file":"shadow-dom.d.ts","sourceRoot":"","sources":["../../src/components/shadow-dom.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAmBxD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,iBAAiB,CAiC3C,CAAC"}

package/dist/components/shadow-dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow-dom.js","sourceRoot":"","sources":["../../src/components/shadow-dom.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAM,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,SAAS,UAAU,CAAC,GAAW,EAAE,MAAkB;IAC/C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAE/C,OAAO,CAAC,IAAI,GAAG,GAAG,CAAC;IACnB,OAAO,CAAC,GAAG,GAAG,YAAY,CAAC;IAC3B,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC;IAClC,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC;IAEzB,OAAO,OAAO,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAC3D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,SAAS,GAAG,CAAC,OAA8B,EAAE,EAAE;QACjD,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE;YACpB,OAAO;SACV;QAED,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,MAAM,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QAEpD,MAAM,UAAU,GAAG,GAAG,EAAE;YACpB,YAAY,EAAE,CAAC;YAEf,IAAI,YAAY,KAAK,WAAW,EAAE;gBAC9B,SAAS,CAAC,IAAI,CAAC,CAAC;aACnB;QACL,CAAC,CAAC;QAEF,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE;YAC3B,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;YACzC,WAAW,EAAE,CAAC;SACjB;QAED,cAAc,CAAC,IAAI,CAAC,CAAC;QAErB,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,OAAO,4BAAK,GAAG,EAAE,SAAS,gBAAG,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,IAAO,CAAC;AACjG,CAAC,CAAC"}
+{"version":3,"file":"shadow-dom.js","sourceRoot":"","sources":["../../src/components/shadow-dom.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAyB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,SAAS,UAAU,CAAC,GAAW,EAAE,MAAkB;IAC/C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAE/C,OAAO,CAAC,IAAI,GAAG,GAAG,CAAC;IACnB,OAAO,CAAC,GAAG,GAAG,YAAY,CAAC;IAC3B,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC;IAClC,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC;IAEzB,OAAO,OAAO,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAC3D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,SAAS,GAAG,CAAC,OAA8B,EAAE,EAAE;QACjD,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE;YACpB,OAAO;SACV;QAED,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,MAAM,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QAEpD,MAAM,UAAU,GAAG,GAAG,EAAE;YACpB,YAAY,EAAE,CAAC;YAEf,IAAI,YAAY,KAAK,WAAW,EAAE;gBAC9B,SAAS,CAAC,IAAI,CAAC,CAAC;aACnB;QACL,CAAC,CAAC;QAEF,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE;YAC3B,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;YACzC,WAAW,EAAE,CAAC;SACjB;QAED,cAAc,CAAC,IAAI,CAAC,CAAC;QAErB,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,OAAO,4BAAK,GAAG,EAAE,SAAS,gBAAG,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,IAAO,CAAC;AACjG,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/notifications",
-    "version": "25.9.0",
+    "version": "26.1.0",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/notifications-center",
     "repository": {
@@ -21,18 +21,20 @@
         "react-shadow-dom-retarget-events": "~1.1.0"
     },
     "devDependencies": {
-        "@servicetitan/design-system": ">=13.2.1",
-        "@servicetitan/log-service": "~21.6.0",
-        "@servicetitan/react-ioc": "^21.6.0",
-        "@servicetitan/web-components": "^21.6.0",
-        "@types/react": "~17.0.38",
+        "@servicetitan/design-system": "~13.4.5",
+        "@servicetitan/log-service": "^23.2.1",
+        "@servicetitan/react-ioc": "^23.2.1",
+        "@servicetitan/web-components": "^23.2.1",
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/react": "^14.2.1",
+        "@types/react": "~18.2.55",
         "@types/react-router": "~5.1.17",
         "@types/react-shadow-dom-retarget-events": "~1.0.0",
         "axios": "~0.27.2",
         "mobx": "~6.6.0",
-        "mobx-react": "~7.5.0",
-        "react": "~17.0.2",
-        "react-dom": "~17.0.2",
+        "mobx-react": "~7.5.1",
+        "react": "~18.2.0",
+        "react-dom": "~18.2.0",
         "react-router-dom": "~5.3.0"
     },
     "peerDependencies": {
@@ -42,9 +44,9 @@
         "@servicetitan/web-components": ">21.0.0",
         "axios": "~0.27.2",
         "mobx": "~6.6.0",
-        "mobx-react": "~7.5.0",
-        "react": "~17.0.2",
-        "react-dom": "~17.0.2",
+        "mobx-react": ">=7.5.1",
+        "react": ">=17.0.2",
+        "react-dom": ">=17.0.2",
         "react-router-dom": ">=5.3.0 <7.0.0"
     },
     "publishConfig": {
@@ -53,5 +55,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "72d081af4ab3deb72dab7d4fc93a4c2e473b726f"
+    "gitHead": "a859628bb29f8f17153e2a4e23bb38f14f447b10"
 }

package/src/components/__tests__/container.test.tsx

@@ -0,0 +1,71 @@
+import '@testing-library/jest-dom';
+import { render, waitFor, within } from '@testing-library/react';
+import { ReactNode } from 'react';
+
+import { Container } from '../container';
+
+describe('[notifications] Container', () => {
+    beforeEach(() => {
+        document.getElementById('servicetitan-notifications')?.remove();
+    });
+
+    const subject = (children?: ReactNode) => {
+        return render(<Container>{children}</Container>);
+    };
+
+    test('renders #servicetitan-notifications.initialized > .ToastGroup', async () => {
+        subject();
+
+        await waitFor(() =>
+            expect(
+                document.querySelectorAll('#servicetitan-notifications.initialized > .ToastGroup')
+            ).toHaveLength(1)
+        );
+    });
+
+    test('renders children within .ToastGroup', async () => {
+        subject(<button>Foo</button>);
+
+        await waitFor(() => {
+            expect(
+                within(
+                    document.querySelector('#servicetitan-notifications.initialized > .ToastGroup')!
+                ).getByRole('button', { name: 'Foo' })
+            ).toBeInTheDocument();
+        });
+    });
+
+    describe('when #servicetitan-notifications already exists', () => {
+        let container: HTMLElement;
+
+        beforeEach(() => {
+            container = document.createElement('div');
+            container.setAttribute('id', 'servicetitan-notifications');
+            document.body.appendChild(container);
+        });
+
+        test('creates .ToastGroup within existing container', async () => {
+            subject();
+
+            await waitFor(() => {
+                expect(container.querySelectorAll('.ToastGroup')).toHaveLength(1);
+            });
+        });
+
+        describe('when .ToastGroup already exists', () => {
+            let toastGroup: HTMLElement;
+
+            beforeEach(() => {
+                toastGroup = document.createElement('div');
+                toastGroup.classList.add('ToastGroup');
+                container.appendChild(toastGroup);
+            });
+
+            test('renders children inside existing ToastGroup', () => {
+                subject(<button>Baz</button>);
+
+                expect(within(toastGroup).getByRole('button', { name: 'Baz' })).toBeInTheDocument();
+            });
+        });
+    });
+});

package/src/components/container.tsx

@@ -1,50 +1,35 @@
-import { useState, useEffect, FC } from 'react';
-import { render, createPortal } from 'react-dom';
-
 import { Toast } from '@servicetitan/design-system';
+import { FC, Fragment, PropsWithChildren, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 import { createElement } from '../create-element';
 
-export const Container: FC = ({ children }) => {
-    const container =
-        document.getElementById('servicetitan-notifications') ??
-        document.body.appendChild(createElement('div', { id: 'servicetitan-notifications' }));
-
-    const [target, setTarget] = useState<Element | null>(
-        container.getElementsByClassName('ToastGroup')[0] ?? null
-    );
+export const Container: FC<PropsWithChildren> = ({ children }) => {
+    const [container] = useState(() => {
+        return (
+            document.getElementById('servicetitan-notifications') ??
+            document.body.appendChild(createElement('div', { id: 'servicetitan-notifications' }))
+        );
+    });
+    const [toastGroup, setToastGroup] = useState(() => findToastGroup(container));
+    const [foundGroup] = useState(() => !!toastGroup);
 
     useEffect(() => {
-        if (
-            !container.classList.contains('initializing') &&
-            !container.classList.contains('initialized')
-        ) {
-            render(<Toast.Group portal={container} />, container, () => {
-                container.classList.remove('initializing');
-                container.classList.add('initialized');
-            });
-            container.classList.add('initializing');
-        }
-
-        let observer: MutationObserver;
-
-        if (!target) {
-            observer = new MutationObserver(() => {
-                if (container.classList.contains('initialized')) {
-                    setTarget(container.getElementsByClassName('ToastGroup')[0] ?? null);
-                    observer.disconnect();
-                }
-            });
-
-            observer.observe(container, {
-                attributeFilter: ['class'],
-            });
+        if (!toastGroup) {
+            setToastGroup(findToastGroup(container));
+            // This stops old code running in MFE from rendering duplicate Toast.Group
+            container.classList.add('initialized');
         }
+    }, [container, toastGroup]);
 
-        return () => {
-            observer?.disconnect();
-        };
-    }, [container, target]);
-
-    return target ? createPortal(children, target) : null;
+    return (
+        <Fragment>
+            {foundGroup ? null : <Toast.Group portal={container} />}
+            {toastGroup ? createPortal(children, toastGroup) : null}
+        </Fragment>
+    );
 };
+
+function findToastGroup(parent: HTMLElement) {
+    return parent.getElementsByClassName('ToastGroup')[0] ?? null;
+}

package/src/components/notifications.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
 import { Provider, interfaces } from '@servicetitan/react-ioc';
 
@@ -21,7 +21,7 @@ import {
 import { DefaultNotification } from './default-notification';
 import { NotificationsUnwrapped } from './notifications-unwrapped';
 
-export interface NotificationsProps {
+export interface NotificationsProps extends PropsWithChildren<{}> {
     apiService?: interfaces.Newable<NotificationsApi>;
 }
 

package/src/components/shadow-dom.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from 'react';
+import { useState, FC, PropsWithChildren } from 'react';
 import { createPortal } from 'react-dom';
 
 import retargetEvents from 'react-shadow-dom-retarget-events';
@@ -17,7 +17,7 @@ function createLink(url: string, onLoad: () => void) {
     return element;
 }
 
-export const ShadowDOM: FC = ({ children }) => {
+export const ShadowDOM: FC<PropsWithChildren> = ({ children }) => {
     const [target, setTarget] = useState<Element | null>(null);
     const [loaded, setLoaded] = useState(false);
     const styleSheets = useStyleSheets();