@forge/react 11.17.0 → 11.18.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @forge/react
 
+## 11.18.0-next.0
+
+### Minor Changes
+
+- 01550cf: Fix flaky unit test
+
+### Patch Changes
+
+- 7504dd5: Fix naming on PersonalSettingsItem
+- Updated dependencies [b0b69a2]
+- Updated dependencies [561f8f4]
+  - @forge/bridge@5.18.0-next.0
+
 ## 11.17.0
 
 ### Minor Changes

package/out/components/global/index.d.ts

@@ -10,6 +10,6 @@ export declare const CreateButton: TCreateButton<ForgeElement<Record<string, any
 export declare const CreateMenuItem: TCreateMenuItem<ForgeElement<Record<string, any>>>;
 export declare const HelpLink: THelpLink<ForgeElement<Record<string, any>>>;
 export declare const PersonalSettings: TPersonalSettings<ForgeElement<Record<string, any>>>;
-export declare const PersonalSettingsItems: TPersonalSettingsItem<ForgeElement<Record<string, any>>>;
+export declare const PersonalSettingsItem: TPersonalSettingsItem<ForgeElement<Record<string, any>>>;
 export type { GlobalProps, MainProps, SidebarProps, LinkMenuItemProps, ExpandableMenuItemProps, FlyOutMenuItemProps, CreateButtonProps, CreateMenuItemProps, HelpLinkProps, PersonalSettingsProps, PersonalSettingsItemProps } from '@atlaskit/forge-react-types/global';
 //# sourceMappingURL=index.d.ts.map

package/out/components/global/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/global/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,QAAQ,EACR,KAAK,EACL,OAAO,EACP,aAAa,EACb,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,MAAM,4CAA+C,CAAC;AACnE,eAAO,MAAM,IAAI,0CAA2C,CAAC;AAC7D,eAAO,MAAM,OAAO,6CAAiD,CAAC;AACtE,eAAO,MAAM,YAAY,kDAA2D,CAAC;AACrF,eAAO,MAAM,kBAAkB,wDAAuE,CAAC;AACvG,eAAO,MAAM,cAAc,oDAA+D,CAAC;AAC3F,eAAO,MAAM,YAAY,kDAA2D,CAAC;AACrF,eAAO,MAAM,cAAc,oDAA+D,CAAC;AAC3F,eAAO,MAAM,QAAQ,8CAAmD,CAAC;AACzE,eAAO,MAAM,gBAAgB,sDAAmE,CAAC;AACjG,eAAO,MAAM,qBAAqB,0DAA4E,CAAC;AAG/G,YAAY,EACV,WAAW,EACX,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,qBAAqB,EACrB,yBAAyB,EAC1B,MAAM,oCAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/global/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,QAAQ,EACR,KAAK,EACL,OAAO,EACP,aAAa,EACb,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,MAAM,4CAA+C,CAAC;AACnE,eAAO,MAAM,IAAI,0CAA2C,CAAC;AAC7D,eAAO,MAAM,OAAO,6CAAiD,CAAC;AACtE,eAAO,MAAM,YAAY,kDAA2D,CAAC;AACrF,eAAO,MAAM,kBAAkB,wDAAuE,CAAC;AACvG,eAAO,MAAM,cAAc,oDAA+D,CAAC;AAC3F,eAAO,MAAM,YAAY,kDAA2D,CAAC;AACrF,eAAO,MAAM,cAAc,oDAA+D,CAAC;AAC3F,eAAO,MAAM,QAAQ,8CAAmD,CAAC;AACzE,eAAO,MAAM,gBAAgB,sDAAmE,CAAC;AACjG,eAAO,MAAM,oBAAoB,0DAA2E,CAAC;AAG7G,YAAY,EACV,WAAW,EACX,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,qBAAqB,EACrB,yBAAyB,EAC1B,MAAM,oCAAoC,CAAC"}

package/out/components/global/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PersonalSettingsItems = exports.PersonalSettings = exports.HelpLink = exports.CreateMenuItem = exports.CreateButton = exports.FlyOutMenuItem = exports.ExpandableMenuItem = exports.LinkMenuItem = exports.Sidebar = exports.Main = exports.Global = void 0;
+exports.PersonalSettingsItem = exports.PersonalSettings = exports.HelpLink = exports.CreateMenuItem = exports.CreateButton = exports.FlyOutMenuItem = exports.ExpandableMenuItem = exports.LinkMenuItem = exports.Sidebar = exports.Main = exports.Global = void 0;
 exports.Global = 'Global';
 exports.Main = 'Main';
 exports.Sidebar = 'Sidebar';
@@ -11,4 +11,4 @@ exports.CreateButton = 'CreateButton';
 exports.CreateMenuItem = 'CreateMenuItem';
 exports.HelpLink = 'HelpLink';
 exports.PersonalSettings = 'PersonalSettings';
-exports.PersonalSettingsItems = 'PersonalSettingsItems';
+exports.PersonalSettingsItem = 'PersonalSettingsItem';

package/out/hooks/__test__/useTheme.test.js

@@ -26,14 +26,28 @@ const MOCK_CONTEXT_NO_THEME = {
     extension: {}
 };
 const themeListener = jest.fn();
+const flushUpdates = () => reconcilerTestRenderer_1.default.act(async () => {
+    await Promise.resolve();
+    await (0, utils_1.sleep)();
+});
+const emitThemeChanged = async (theme) => {
+    await reconcilerTestRenderer_1.default.act(async () => {
+        utils_1.simpleBridgeEvents.emit('FORGE_CORE_THEME_CHANGED', { theme });
+        await (0, utils_1.sleep)();
+    });
+};
 // react app fragment to load useTheme hook
-const renderTest = async () => {
+const renderTest = async (options) => {
+    const flushAfterMount = options?.flushAfterMount ?? true;
     const Test = () => {
         const theme = (0, useTheme_1.useTheme)();
         (0, react_1.useEffect)(() => themeListener(theme), [theme]);
         return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, {});
     };
     const { update } = await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Test, {}));
+    if (flushAfterMount) {
+        await flushUpdates();
+    }
     return {
         update: async () => {
             await update((0, jsx_runtime_1.jsx)(Test, {}));
@@ -62,17 +76,19 @@ describe('useTheme', () => {
         await renderTest();
         expect(themeListener).toHaveBeenCalledWith(expect.objectContaining(MOCK_THEME));
         const newTheme = { colorMode: 'light', colorScheme: 'red' };
-        utils_1.simpleBridgeEvents.emit('FORGE_CORE_THEME_CHANGED', { theme: newTheme });
-        await (0, utils_1.sleep)();
+        await emitThemeChanged(newTheme);
         expect(themeListener).toHaveBeenCalledWith(expect.objectContaining(newTheme));
     });
     it('does not cause re-render when theme content is the same', async () => {
         mockGetContext.mockResolvedValue(MOCK_CONTEXT_WITH_THEME);
         await renderTest();
-        expect(themeListener).toHaveBeenCalledTimes(2); // undefined, then theme
+        expect(themeListener).toHaveBeenCalledTimes(2); // null, then theme
         // Emit same theme content but different object reference
-        utils_1.simpleBridgeEvents.emit('FORGE_CORE_THEME_CHANGED', {
-            theme: { ...MOCK_THEME } // New object, same content
+        await reconcilerTestRenderer_1.default.act(async () => {
+            utils_1.simpleBridgeEvents.emit('FORGE_CORE_THEME_CHANGED', {
+                theme: { ...MOCK_THEME } // New object, same content
+            });
+            await (0, utils_1.sleep)();
         });
         // Should not trigger re-render due to isEqual check
         expect(themeListener).toHaveBeenCalledTimes(2);
@@ -84,13 +100,21 @@ describe('useTheme', () => {
             resolveGetContext = resolve;
         });
         mockGetContext.mockReturnValue(getContextPromise);
-        const renderPromise = renderTest();
+        const renderPromise = renderTest({ flushAfterMount: false });
+        await renderPromise;
         // Fire event before getContext resolves
         const eventTheme = { colorMode: 'light', colorScheme: 'green' };
-        utils_1.simpleBridgeEvents.emit('FORGE_CORE_THEME_CHANGED', { theme: eventTheme });
+        await reconcilerTestRenderer_1.default.act(async () => {
+            utils_1.simpleBridgeEvents.emit('FORGE_CORE_THEME_CHANGED', { theme: eventTheme });
+            await (0, utils_1.sleep)();
+        });
         // Now resolve getContext
-        resolveGetContext?.(MOCK_CONTEXT_WITH_THEME);
-        await renderPromise;
+        await reconcilerTestRenderer_1.default.act(async () => {
+            resolveGetContext?.(MOCK_CONTEXT_WITH_THEME);
+            await getContextPromise;
+            await (0, utils_1.sleep)();
+        });
+        await flushUpdates();
         // Should have the event theme, not the getContext theme
         expect(themeListener).toHaveBeenCalledWith(expect.objectContaining(eventTheme));
     });

package/out/hooks/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAQ,MAAM,eAAe,CAAC;AAG/D,aAAK,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAElC,eAAO,MAAM,QAAQ,QAAO,KAAK,GAAG,IAgCnC,CAAC"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAQ,MAAM,eAAe,CAAC;AAG/D,aAAK,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAElC,eAAO,MAAM,QAAQ,QAAO,KAAK,GAAG,IAkEnC,CAAC"}

package/out/hooks/useTheme.js

@@ -7,31 +7,61 @@ const bridge_1 = require("@forge/bridge");
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const useTheme = () => {
     const [theme, setTheme] = (0, react_1.useState)(null);
+    const themeRef = (0, react_1.useRef)(null);
     const themeLoadedRef = (0, react_1.useRef)(false);
+    const loadingContextRef = (0, react_1.useRef)(false);
+    const applyTheme = (0, react_1.useCallback)((nextTheme) => {
+        if ((0, isEqual_1.default)(themeRef.current, nextTheme)) {
+            return;
+        }
+        themeRef.current = nextTheme;
+        setTheme((current) => ((0, isEqual_1.default)(current, nextTheme) ? current : nextTheme));
+    }, []);
     (0, react_1.useEffect)(() => {
+        let cancelled = false;
         void (async () => {
-            if (!themeLoadedRef.current) {
+            if (themeLoadedRef.current || loadingContextRef.current) {
+                return;
+            }
+            loadingContextRef.current = true;
+            try {
                 const context = await bridge_1.view.getContext();
-                if (context?.theme && !themeLoadedRef.current) {
-                    setTheme((currentTheme) => {
-                        return (0, isEqual_1.default)(currentTheme, context.theme) ? currentTheme : context.theme;
-                    });
-                    themeLoadedRef.current = true;
+                if (cancelled || !context?.theme || themeLoadedRef.current) {
+                    return;
                 }
+                applyTheme(context.theme);
+                themeLoadedRef.current = true;
+            }
+            finally {
+                loadingContextRef.current = false;
             }
         })();
-    }, []);
+        return () => {
+            cancelled = true;
+        };
+    }, [applyTheme]);
     (0, react_1.useEffect)(() => {
+        let unsubscribeFn = null;
+        let cancelled = false;
         const sub = bridge_1.events.on('FORGE_CORE_THEME_CHANGED', ({ theme: updatedTheme }) => {
             themeLoadedRef.current = true;
-            setTheme((currentTheme) => {
-                return (0, isEqual_1.default)(currentTheme, updatedTheme) ? currentTheme : updatedTheme;
-            });
+            applyTheme(updatedTheme);
+        });
+        void sub.then((subscription) => {
+            if (cancelled) {
+                subscription.unsubscribe();
+            }
+            else {
+                unsubscribeFn = () => subscription.unsubscribe();
+            }
         });
         return () => {
-            void sub.then((subscription) => subscription.unsubscribe());
+            cancelled = true;
+            if (unsubscribeFn) {
+                unsubscribeFn();
+            }
         };
-    }, []);
+    }, [applyTheme]);
     return theme;
 };
 exports.useTheme = useTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forge/react",
-  "version": "11.17.0",
+  "version": "11.18.0-next.0",
   "description": "Forge React reconciler",
   "author": "Atlassian",
   "license": "SEE LICENSE IN LICENSE.txt",
@@ -32,7 +32,7 @@
     "@atlaskit/adf-schema": "^48.0.0",
     "@atlaskit/adf-utils": "^19.19.0",
     "@atlaskit/forge-react-types": "^1.7.0",
-    "@forge/bridge": "^5.17.0",
+    "@forge/bridge": "^5.18.0-next.0",
     "@forge/egress": "^2.3.2",
     "@forge/i18n": "0.0.7",
     "@types/react": "^18.2.64",