@servicetitan/notifications 26.0.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.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/components/container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMxD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,iBAAiB,CAS3C,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,12 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+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 }) => {
     const [container] = useState(() => {
         var _a;
         return ((_a = document.getElementById('servicetitan-notifications')) !== null && _a !== void 0 ? _a : document.body.appendChild(createElement('div', { id: 'servicetitan-notifications' })));
     });
-    return container ? _jsx(Toast.Group, Object.assign({ portal: container }, { children: children })) : null;
+    const [toastGroup, setToastGroup] = useState(() => findToastGroup(container));
+    const [foundGroup] = useState(() => !!toastGroup);
+    useEffect(() => {
+        if (!toastGroup) {
+            setToastGroup(findToastGroup(container));
+            // This stops old code running in MFE from rendering duplicate Toast.Group
+            container.classList.add('initialized');
+        }
+    }, [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,EAAyB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,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;IAEH,OAAO,SAAS,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,KAAK,kBAAC,MAAM,EAAE,SAAS,gBAAG,QAAQ,IAAe,CAAC,CAAC,CAAC,IAAI,CAAC;AACvF,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, PropsWithChildren } from 'react';
 import { interfaces } from '@servicetitan/react-ioc';
 import { NotificationsApi } from '../api/notifications.api';
-export interface NotificationsProps extends PropsWithChildren {
+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,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;IACzD,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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/notifications",
-    "version": "26.0.0",
+    "version": "26.1.0",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/notifications-center",
     "repository": {
@@ -25,12 +25,14 @@
         "@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",
+        "mobx-react": "~7.5.1",
         "react": "~18.2.0",
         "react-dom": "~18.2.0",
         "react-router-dom": "~5.3.0"
@@ -42,7 +44,7 @@
         "@servicetitan/web-components": ">21.0.0",
         "axios": "~0.27.2",
         "mobx": "~6.6.0",
-        "mobx-react": "~7.5.0",
+        "mobx-react": ">=7.5.1",
         "react": ">=17.0.2",
         "react-dom": ">=17.0.2",
         "react-router-dom": ">=5.3.0 <7.0.0"
@@ -53,5 +55,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "2027b0cb3bb4a06b8e381e3e9af8469a30b20f11"
+    "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,6 +1,6 @@
-import { useState, FC, PropsWithChildren } from 'react';
-
 import { Toast } from '@servicetitan/design-system';
+import { FC, Fragment, PropsWithChildren, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 import { createElement } from '../create-element';
 
@@ -11,6 +11,25 @@ export const Container: FC<PropsWithChildren> = ({ children }) => {
             document.body.appendChild(createElement('div', { id: 'servicetitan-notifications' }))
         );
     });
+    const [toastGroup, setToastGroup] = useState(() => findToastGroup(container));
+    const [foundGroup] = useState(() => !!toastGroup);
+
+    useEffect(() => {
+        if (!toastGroup) {
+            setToastGroup(findToastGroup(container));
+            // This stops old code running in MFE from rendering duplicate Toast.Group
+            container.classList.add('initialized');
+        }
+    }, [container, toastGroup]);
 
-    return container ? <Toast.Group portal={container}>{children}</Toast.Group> : 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

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