@forge/react 11.17.0 → 11.18.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @forge/react
 
+## 11.18.0-next.1
+
+### Minor Changes
+
+- 8dc5a0c: Add routing components and hooks for use in full-page apps.
+
+  Added the following:
+
+  - `Router`
+  - `Route`
+  - `useNavigate`
+  - `useLocation`
+  - `useParams`
+
+## 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/out/router/components/ParamsContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ParamsContext: import("react").Context<Record<string, string> | null>;
+//# sourceMappingURL=ParamsContext.d.ts.map

package/out/router/components/ParamsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParamsContext.d.ts","sourceRoot":"","sources":["../../../src/router/components/ParamsContext.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,aAAa,wDAAqD,CAAC"}

package/out/router/components/ParamsContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParamsContext = void 0;
+const react_1 = require("react");
+exports.ParamsContext = (0, react_1.createContext)(null);

package/out/router/components/Route.d.ts

@@ -0,0 +1,20 @@
+import { ForgeChildren } from '../../types';
+export interface RouteProps {
+    /**
+     * The URL path pattern to match against the current location. Supports static segments, dynamic parameters (e.g. :id), and a catch-all wildcard (*).
+     * @type string
+     */
+    path: string;
+    /**
+     * The content to render when the path matches the current location.
+     * @type ForgeElement
+     */
+    children: ForgeChildren;
+}
+/**
+ * Route conditionally renders its children when the current URL path matches its path prop. It must be used within a Router component.
+ *
+ * @see [Route](https://developer.atlassian.com/platform/forge/ui-kit/components/router/#route) in UI Kit documentation for more information
+ */
+export declare const Route: ({ path, children }: RouteProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Route.d.ts.map

package/out/router/components/Route.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Route.d.ts","sourceRoot":"","sources":["../../../src/router/components/Route.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK,uBAAwB,UAAU,mDAoBnD,CAAC"}

package/out/router/components/Route.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Route = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RouterContext_1 = require("./RouterContext");
+const ParamsContext_1 = require("./ParamsContext");
+const matchPath_1 = require("../utils/matchPath");
+/**
+ * Route conditionally renders its children when the current URL path matches its path prop. It must be used within a Router component.
+ *
+ * @see [Route](https://developer.atlassian.com/platform/forge/ui-kit/components/router/#route) in UI Kit documentation for more information
+ */
+const Route = ({ path, children }) => {
+    const context = (0, react_1.useContext)(RouterContext_1.RouterContext);
+    if (!context) {
+        throw new Error('Route must be used within a Router component');
+    }
+    const { location, hasMatchedRouteRef } = context;
+    if (hasMatchedRouteRef.current) {
+        return null;
+    }
+    const match = (0, matchPath_1.matchPath)(path, location.pathname);
+    if (!match) {
+        return null;
+    }
+    hasMatchedRouteRef.current = true;
+    return (0, jsx_runtime_1.jsx)(ParamsContext_1.ParamsContext.Provider, { value: match.params, children: children });
+};
+exports.Route = Route;

package/out/router/components/Router.d.ts

@@ -0,0 +1,19 @@
+import { ForgeChildren, ForgeNode } from '../../types';
+export interface RouterProps {
+    /**
+     * @type Route
+     * The child elements to render within the router. Typically contains one or more Route components.
+     */
+    children: ForgeChildren;
+    /**
+     * A fallback value to render when no Route child has a path matching the current path.
+     */
+    fallback?: ForgeNode | null;
+}
+/**
+ * Router provides client-side routing by allowing content to be rendered based on the current URL path.
+ *
+ * @see [Router](https://developer.atlassian.com/platform/forge/ui-kit/components/router/) in UI Kit documentation for more information
+ */
+export declare const Router: ({ children, fallback }: RouterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Router.d.ts.map

package/out/router/components/Router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.d.ts","sourceRoot":"","sources":["../../../src/router/components/Router.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAevD,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,QAAQ,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC7B;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,2BAAmC,WAAW,4CAiEhE,CAAC"}

package/out/router/components/Router.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Router = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const bridge_1 = require("@forge/bridge");
+const RouterContext_1 = require("./RouterContext");
+const components_1 = require("../../components");
+const Fallback = ({ hasMatchedRouteRef, fallback }) => {
+    if (hasMatchedRouteRef.current) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fallback });
+};
+/**
+ * Router provides client-side routing by allowing content to be rendered based on the current URL path.
+ *
+ * @see [Router](https://developer.atlassian.com/platform/forge/ui-kit/components/router/) in UI Kit documentation for more information
+ */
+const Router = ({ children, fallback = null }) => {
+    const [history, setHistory] = (0, react_1.useState)(null);
+    const [location, setLocation] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const hasMatchedRouteRef = (0, react_1.useRef)(false);
+    hasMatchedRouteRef.current = false;
+    (0, react_1.useEffect)(() => {
+        let unlisten;
+        bridge_1.view
+            .createHistory()
+            .then((history) => {
+            setHistory(history);
+            setLocation(history.location);
+            unlisten = history.listen((location) => {
+                // @ts-ignore - The history object returned by the bridge does not conform to the v5 types.
+                // Instead it uses v4 types, so we need to ignore this type error.
+                setLocation(location);
+            });
+        })
+            .catch(setError);
+        return () => {
+            unlisten?.();
+        };
+    }, []);
+    const routerContext = (0, react_1.useMemo)(() => {
+        if (!history || !location) {
+            return null;
+        }
+        return { history, location, hasMatchedRouteRef };
+    }, [history, location]);
+    if (error) {
+        return ((0, jsx_runtime_1.jsx)(components_1.SectionMessage, { appearance: "error", children: (0, jsx_runtime_1.jsx)(components_1.Text, { children: error.message }) }));
+    }
+    if (!routerContext) {
+        return ((0, jsx_runtime_1.jsx)(components_1.SectionMessage, { appearance: "error", children: (0, jsx_runtime_1.jsxs)(components_1.Text, { children: ["History is not defined. Check the list of", ' ', (0, jsx_runtime_1.jsx)(components_1.Link, { href: "https://developer.atlassian.com/platform/forge/ui-kit/components/router/#supported-modules", children: "supported modules" }), ' ', "for Router"] }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(RouterContext_1.RouterContext.Provider, { value: routerContext, children: [children, (0, jsx_runtime_1.jsx)(Fallback, { hasMatchedRouteRef: hasMatchedRouteRef, fallback: fallback })] }));
+};
+exports.Router = Router;

package/out/router/components/RouterContext.d.ts

@@ -0,0 +1,9 @@
+import { MutableRefObject } from 'react';
+import type { History, Location } from 'history';
+export interface RouterContextValue {
+    history: History;
+    location: Location;
+    hasMatchedRouteRef: MutableRefObject<boolean>;
+}
+export declare const RouterContext: import("react").Context<RouterContextValue | null>;
+//# sourceMappingURL=RouterContext.d.ts.map

package/out/router/components/RouterContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouterContext.d.ts","sourceRoot":"","sources":["../../../src/router/components/RouterContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,gBAAgB,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,kBAAkB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,aAAa,oDAAiD,CAAC"}

package/out/router/components/RouterContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouterContext = void 0;
+const react_1 = require("react");
+exports.RouterContext = (0, react_1.createContext)(null);

package/out/router/components/__test__/Router.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Router.test.d.ts.map

package/out/router/components/__test__/Router.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.test.d.ts","sourceRoot":"","sources":["../../../../src/router/components/__test__/Router.test.tsx"],"names":[],"mappings":""}

package/out/router/components/__test__/Router.test.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const testUtils_1 = require("../../../__test__/testUtils");
+const reconcilerTestRenderer_1 = tslib_1.__importDefault(require("../../../__test__/reconcilerTestRenderer"));
+const Router_1 = require("../Router");
+const Route_1 = require("../Route");
+const __1 = require("../../..");
+const test_utils_1 = require("../../utils/test-utils");
+const mockCreateHistory = jest.fn(async () => (0, test_utils_1.createMockHistory)());
+jest.mock('@forge/bridge', () => ({
+    view: {
+        createHistory: () => mockCreateHistory()
+    }
+}));
+describe('Router', () => {
+    let bridgeCalls;
+    beforeAll(() => {
+        bridgeCalls = (0, testUtils_1.setupBridge)();
+    });
+    beforeEach(() => {
+        bridgeCalls.length = 0;
+        mockCreateHistory.mockClear();
+        mockCreateHistory.mockImplementation(async () => (0, test_utils_1.createMockHistory)());
+    });
+    afterEach(() => jest.clearAllMocks());
+    it('renders children after history is initialized', async () => {
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Router_1.Router, { children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home Page" }) }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'Home Page');
+    });
+    it('renders children when Route path matches', async () => {
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Router_1.Router, { children: (0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home Page" }) }) }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'Home Page');
+    });
+    it('does not render Route children when path does not match', async () => {
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Router_1.Router, { children: (0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/settings", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Settings Page" }) }) }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc?.children).toHaveLength(0);
+    });
+    it('throws when Route is used outside of Router', async () => {
+        await expect(reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home" }) }))).rejects.toThrow('Route must be used within a Router component');
+    });
+    it('renders only the first matching Route when multiple routes match', async () => {
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsxs)(Router_1.Router, { children: [(0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "First" }) }), (0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Second" }) })] }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'First');
+        expect(forgeDoc?.children).toHaveLength(1);
+    });
+    it('renders fallback when no Route matches', async () => {
+        mockCreateHistory.mockImplementation(async () => (0, test_utils_1.createMockHistory)('/unknown'));
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsxs)(Router_1.Router, { fallback: (0, jsx_runtime_1.jsx)(__1.Text, { children: "No match" }), children: [(0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home" }) }), (0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/settings", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Settings" }) })] }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'No match');
+    });
+    it('renders the catchall Route when no other route matches', async () => {
+        mockCreateHistory.mockImplementation(async () => (0, test_utils_1.createMockHistory)('/unknown'));
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsxs)(Router_1.Router, { children: [(0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home" }) }), (0, jsx_runtime_1.jsx)(Route_1.Route, { path: "*", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Not Found" }) })] }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'Not Found');
+        expect(forgeDoc?.children).toHaveLength(1);
+    });
+    it('renders a specific Route over catchall when it matches', async () => {
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsxs)(Router_1.Router, { children: [(0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home" }) }), (0, jsx_runtime_1.jsx)(Route_1.Route, { path: "*", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Not Found" }) })] }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'Home');
+        expect(forgeDoc?.children).toHaveLength(1);
+    });
+});

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

@@ -0,0 +1,3 @@
+export { Router, type RouterProps } from './Router';
+export { Route, type RouteProps } from './Route';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/router/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/out/router/components/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Route = exports.Router = void 0;
+var Router_1 = require("./Router");
+Object.defineProperty(exports, "Router", { enumerable: true, get: function () { return Router_1.Router; } });
+var Route_1 = require("./Route");
+Object.defineProperty(exports, "Route", { enumerable: true, get: function () { return Route_1.Route; } });

package/out/router/hooks/__test__/useLocation.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useLocation.test.d.ts.map

package/out/router/hooks/__test__/useLocation.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocation.test.d.ts","sourceRoot":"","sources":["../../../../src/router/hooks/__test__/useLocation.test.tsx"],"names":[],"mappings":""}

package/out/router/hooks/__test__/useLocation.test.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const testUtils_1 = require("../../../__test__/testUtils");
+const reconcilerTestRenderer_1 = tslib_1.__importDefault(require("../../../__test__/reconcilerTestRenderer"));
+const Router_1 = require("../../components/Router");
+const useNavigate_1 = require("../useNavigate");
+const useLocation_1 = require("../useLocation");
+const components_1 = require("../../../components");
+const test_utils_1 = require("../../utils/test-utils");
+const mockCreateHistory = jest.fn(async () => (0, test_utils_1.createMockHistory)());
+jest.mock('@forge/bridge', () => ({
+    view: {
+        createHistory: () => mockCreateHistory()
+    }
+}));
+describe('useLocation', () => {
+    let bridgeCalls;
+    beforeAll(() => {
+        bridgeCalls = (0, testUtils_1.setupBridge)();
+    });
+    beforeEach(() => {
+        bridgeCalls.length = 0;
+        mockCreateHistory.mockClear();
+        mockCreateHistory.mockImplementation(async () => (0, test_utils_1.createMockHistory)());
+    });
+    afterEach(() => jest.clearAllMocks());
+    it('returns the current location', async () => {
+        const locationListener = jest.fn();
+        const LocationTest = () => {
+            const location = (0, useLocation_1.useLocation)();
+            (0, react_1.useEffect)(() => locationListener(location), [location]);
+            return (0, jsx_runtime_1.jsx)(components_1.Text, { children: "Location Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Router_1.Router, { children: (0, jsx_runtime_1.jsx)(LocationTest, {}) }));
+        expect(locationListener).toHaveBeenCalledWith(expect.objectContaining({
+            pathname: '/',
+            search: '',
+            hash: ''
+        }));
+    });
+    it('updates when navigation occurs', async () => {
+        const locationListener = jest.fn();
+        const LocationTest = () => {
+            const location = (0, useLocation_1.useLocation)();
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => locationListener(location), [location]);
+            (0, react_1.useEffect)(() => {
+                navigate('/about');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_1.Text, { children: "Location Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Router_1.Router, { children: (0, jsx_runtime_1.jsx)(LocationTest, {}) }));
+        expect(locationListener).toHaveBeenCalledWith(expect.objectContaining({ pathname: '/' }));
+        expect(locationListener).toHaveBeenCalledWith(expect.objectContaining({ pathname: '/about' }));
+    });
+});

package/out/router/hooks/__test__/useNavigate.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useNavigate.test.d.ts.map

package/out/router/hooks/__test__/useNavigate.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavigate.test.d.ts","sourceRoot":"","sources":["../../../../src/router/hooks/__test__/useNavigate.test.tsx"],"names":[],"mappings":""}