@shopify/app-bridge-react 0.0.0-snapshot-20221220002610

package/components/Modal/ModalContent/ModalContent.js

@@ -0,0 +1,61 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var actions_1 = require("@shopify/app-bridge/actions");
+var context_1 = require("../../../context");
+/**
+ * Modal Content component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge Modal Content action.
+ *
+ * @public
+ */
+var ModalContent = /** @class */ (function (_super) {
+    __extends(ModalContent, _super);
+    function ModalContent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ModalContent.prototype.componentDidMount = function () {
+        var app = this.context;
+        this.modalContent = actions_1.ModalContent.create(app);
+        this.syncLoadingStatus();
+    };
+    ModalContent.prototype.componentDidUpdate = function () {
+        this.syncLoadingStatus();
+    };
+    ModalContent.prototype.syncLoadingStatus = function () {
+        if (!this.modalContent)
+            return;
+        if (this.props.loading) {
+            this.modalContent.loading();
+        }
+        else {
+            this.modalContent.loaded();
+        }
+    };
+    ModalContent.prototype.render = function () {
+        return null;
+    };
+    ModalContent.contextType = context_1.AppBridgeContext;
+    return ModalContent;
+}(react_1.default.Component));
+exports.default = ModalContent;

package/components/Modal/ModalContent/index.d.ts

@@ -0,0 +1,2 @@
+import ModalContent from './ModalContent';
+export default ModalContent;

package/components/Modal/ModalContent/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ModalContent_1 = __importDefault(require("./ModalContent"));
+exports.default = ModalContent_1.default;

package/components/Modal/index.d.ts

@@ -0,0 +1,4 @@
+import Modal from './Modal';
+export { default as ModalContent } from './ModalContent';
+export { Props } from './Modal';
+export default Modal;

package/components/Modal/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContent = void 0;
+var Modal_1 = __importDefault(require("./Modal"));
+var ModalContent_1 = require("./ModalContent");
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return __importDefault(ModalContent_1).default; } });
+exports.default = Modal_1.default;

package/components/NavigationMenu/NavigationMenu.d.ts

@@ -0,0 +1,17 @@
+export interface NavigationLink {
+    label: string;
+    destination: string;
+}
+export interface Props {
+    /**
+     * List of links in navigation menu
+     */
+    navigationLinks: NavigationLink[];
+    /**
+     * Custom matcher to set active link.
+     * This function will be called with each link and the current location.
+     * If it returns true the current link will be set to the active link.
+     */
+    matcher?: (link: NavigationLink, location: Location) => boolean;
+}
+export default function NavigationMenu({ navigationLinks, matcher }: Props): null;

package/components/NavigationMenu/NavigationMenu.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var AppLink_1 = require("@shopify/app-bridge/actions/Link/AppLink");
+var NavigationMenu_1 = require("@shopify/app-bridge/actions/Menu/NavigationMenu");
+var useAppBridge_1 = require("../../useAppBridge");
+function defaultMatcher(link, location) {
+    return link.destination.replace(/\/$/, '') === location.pathname.replace(/\/$/, '');
+}
+function NavigationMenu(_a) {
+    var navigationLinks = _a.navigationLinks, _b = _a.matcher, matcher = _b === void 0 ? defaultMatcher : _b;
+    var app = useAppBridge_1.useAppBridge();
+    var _c = react_1.useState(), items = _c[0], setItems = _c[1];
+    react_1.useEffect(function () {
+        var items = navigationLinks.map(function (link) { return AppLink_1.create(app, link); });
+        setItems(items);
+    }, [app, JSON.stringify(navigationLinks)]);
+    var activeLink = react_1.useMemo(function () {
+        var activeLinkIndex = (items || []).findIndex(function (link) {
+            return matcher(link, location);
+        });
+        if (activeLinkIndex >= 0) {
+            return items === null || items === void 0 ? void 0 : items[activeLinkIndex];
+        }
+    }, [app, location.pathname, matcher, items, location.pathname]);
+    react_1.useEffect(function () {
+        // Skip creating the navigation menu on initial render
+        if (!items) {
+            return;
+        }
+        /**
+         * There isn't any advantage to keeping around a consistent instance of
+         * the navigation menu as when we create a new one it results in
+         * the same UPDATE action to be dispatched
+         */
+        NavigationMenu_1.create(app, { items: items, active: activeLink });
+    }, [items, activeLink]);
+    return null;
+}
+exports.default = NavigationMenu;

package/components/NavigationMenu/index.d.ts

@@ -0,0 +1,3 @@
+import NavigationMenu from './NavigationMenu';
+export { Props } from './NavigationMenu';
+export default NavigationMenu;

package/components/NavigationMenu/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var NavigationMenu_1 = __importDefault(require("./NavigationMenu"));
+exports.default = NavigationMenu_1.default;

package/components/Provider/Provider.d.ts

@@ -0,0 +1,81 @@
+import React, { PropsWithChildren } from 'react';
+import type { AppConfigV2, DispatchActionHook } from '@shopify/app-bridge/client';
+import type { History } from '../ClientRouter';
+import type { LocationOrHref } from '../RoutePropagator';
+/**
+ * Provider props
+ *
+ * @public
+ */
+export interface Props {
+    /** Application configuration */
+    config: AppConfigV2;
+    /** The child elements to render. */
+    children?: React.ReactNode;
+    /**
+     * Option to set up client routing and route propagation automatically.
+     * Passing in a router will allow you to bypass setting these
+     * utilities up yourself.
+     *
+     * If you are using React Router, ensure that the Provider is a child
+     * of the router component. For example:
+     *
+     * import {useMemo} from 'react';
+     * import {useLocation, useNavigate, BrowserRouter} from 'react-router-dom';
+     * import {Provider} from '@shopify/app-bridge-react';
+     * import Routes from './Routes';
+     *
+     * export function App() {
+     *   const navigate = useNavigate();
+     *   const location = useLocation();
+     *   const history = useMemo(
+     *     () => ({replace: (path: string) => navigate(path, {replace: true})}),
+     *     [navigate],
+     *   );
+     *   const router = useMemo(
+     *     () => ({
+     *       location,
+     *       history,
+     *     }),
+     *     [location, navigate],
+     *   );
+     *   return (
+     *     <Provider
+     *       apiKey={{
+     *         apiKey: 'API key from Shopify Partner Dashboard',
+     *         host: host,
+     *       }}
+     *       router={router}
+     *     >
+     *       <Routes />
+     *     </Provider>
+     *   );
+     * }
+     *
+     * export default function AppWrapper() {
+     *   return (
+     *     <BrowserRouter>
+     *       <App />
+     *     </BrowserRouter>
+     *   );
+     * }
+     */
+    router?: {
+        location: LocationOrHref;
+        history: History;
+    };
+}
+/**
+ * Create an App Bridge client application from a config and pass it as the
+ * value to the context provider.
+ *
+ * @public
+ */
+declare function Provider({ config, router, children }: PropsWithChildren<Props>): JSX.Element;
+/**
+ * Augment actions with clientInterface metadata, identifying use of this library
+ *
+ * @internal
+ */
+export declare const setClientInterfaceHook: DispatchActionHook;
+export default Provider;

package/components/Provider/Provider.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setClientInterfaceHook = void 0;
+var react_1 = __importStar(require("react"));
+var app_bridge_1 = __importStar(require("@shopify/app-bridge"));
+var context_1 = require("../../context");
+var ClientRouter_1 = require("../ClientRouter");
+var RoutePropagator_1 = require("../RoutePropagator");
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+var packageJson = require('../../package.json');
+/**
+ * Create an App Bridge client application from a config and pass it as the
+ * value to the context provider.
+ *
+ * @public
+ */
+function Provider(_a) {
+    var config = _a.config, router = _a.router, children = _a.children;
+    /**
+     * We are intentionally ignoring the `config` prop here as it yields a
+     * bug on apps build with Next.js which loses the `host` query param
+     * upon redirect.
+     *
+     * This was the behavior of the original `Provider` component prior to
+     * the refactor in version 2.0.25.
+     */
+    var app = react_1.useMemo(function () { return app_bridge_1.default(config); }, []);
+    react_1.useEffect(function () {
+        if (app === null || app === void 0 ? void 0 : app.hooks) {
+            app.hooks.set(app_bridge_1.LifecycleHook.DispatchAction, exports.setClientInterfaceHook);
+        }
+    }, [app]);
+    var routerMarkup = (router === null || router === void 0 ? void 0 : router.history) && (router === null || router === void 0 ? void 0 : router.location) ? (react_1.default.createElement(Router, { history: router.history, location: router.location })) : null;
+    return (react_1.default.createElement(context_1.AppBridgeContext.Provider, { value: app },
+        routerMarkup,
+        children));
+}
+/**
+ * Augment actions with clientInterface metadata, identifying use of this library
+ *
+ * @internal
+ */
+var setClientInterfaceHook = function (next) {
+    return function (action) {
+        action.clientInterface = {
+            name: '@shopify/app-bridge-react',
+            version: packageJson.version,
+        };
+        return next(action);
+    };
+};
+exports.setClientInterfaceHook = setClientInterfaceHook;
+function Router(_a) {
+    var history = _a.history, location = _a.location;
+    ClientRouter_1.useClientRouting(history);
+    RoutePropagator_1.useRoutePropagation(location);
+    return null;
+}
+exports.default = Provider;

package/components/Provider/index.d.ts

@@ -0,0 +1,3 @@
+import Provider from './Provider';
+export { Props } from './Provider';
+export default Provider;

package/components/Provider/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Provider_1 = __importDefault(require("./Provider"));
+exports.default = Provider_1.default;

package/components/ResourcePicker/ResourcePicker.d.ts

@@ -0,0 +1,36 @@
+import { ActionVerb, ResourceType } from '@shopify/app-bridge/actions/ResourcePicker';
+import type { BaseResource, Options, ResourceSelection, ProductOptions } from '@shopify/app-bridge/actions/ResourcePicker';
+export interface SelectPayload {
+    selection: ResourceSelection[];
+}
+interface BaseProps extends Options {
+    open: boolean;
+    /**
+     * @deprecated as of 1.28.0
+     */
+    allowMultiple?: boolean;
+    onSelection?(selectPayload: SelectPayload): void;
+    onCancel?(): void;
+}
+export interface ProductPickerProps extends BaseProps, ProductOptions {
+    resourceType: 'Product';
+}
+export interface ProductVariantProps extends BaseProps {
+    resourceType: 'ProductVariant';
+}
+export interface CollectionPickerProps extends BaseProps {
+    resourceType: 'Collection';
+}
+export declare type Props = ProductPickerProps | ProductVariantProps | CollectionPickerProps;
+/**
+ * ResourcePicker component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge ResourcePicker action.
+ *
+ * @public
+ */
+declare function ResourcePicker({ open, resourceType, onSelection, onCancel, allowMultiple, selectMultiple, ...props }: Props): null;
+export default ResourcePicker;
+export type { BaseResource, Options, ProductOptions };
+export { ActionVerb, ResourceType };

package/components/ResourcePicker/ResourcePicker.js

@@ -0,0 +1,120 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceType = exports.ActionVerb = void 0;
+var react_1 = require("react");
+var ResourcePicker_1 = require("@shopify/app-bridge/actions/ResourcePicker");
+Object.defineProperty(exports, "ActionVerb", { enumerable: true, get: function () { return ResourcePicker_1.ActionVerb; } });
+Object.defineProperty(exports, "ResourceType", { enumerable: true, get: function () { return ResourcePicker_1.ResourceType; } });
+var useAppBridge_1 = require("../../useAppBridge");
+/**
+ * ResourcePicker component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge ResourcePicker action.
+ *
+ * @public
+ */
+function ResourcePicker(_a) {
+    var open = _a.open, resourceType = _a.resourceType, onSelection = _a.onSelection, onCancel = _a.onCancel, allowMultiple = _a.allowMultiple, selectMultiple = _a.selectMultiple, props = __rest(_a, ["open", "resourceType", "onSelection", "onCancel", "allowMultiple", "selectMultiple"]);
+    var options = react_1.useMemo(function () { return (__assign(__assign({}, props), { selectMultiple: selectMultiple !== null && selectMultiple !== void 0 ? selectMultiple : allowMultiple })); }, [allowMultiple, props, selectMultiple]);
+    var app = useAppBridge_1.useAppBridge();
+    var isUnmountedRef = react_1.useRef(false);
+    react_1.useEffect(function () { return function () {
+        isUnmountedRef.current = true;
+    }; }, []);
+    var openRef = react_1.useRef(false);
+    var optionsRef = react_1.useRef(options);
+    var picker = react_1.useMemo(function () {
+        return ResourcePicker_1.create(app, {
+            resourceType: ResourcePicker_1.ResourceType[resourceType],
+            options: optionsRef.current,
+        });
+    }, [app, resourceType]);
+    react_1.useEffect(function () {
+        openRef.current = false;
+        return function () {
+            if (openRef.current && isUnmountedRef.current) {
+                picker.dispatch(ResourcePicker_1.Action.CANCEL);
+            }
+        };
+    }, [picker]);
+    var focusReturnPointRef = react_1.useRef(null);
+    var storeFocusReturnPoint = react_1.useCallback(function () {
+        if (document.activeElement instanceof HTMLElement) {
+            focusReturnPointRef.current = document.activeElement;
+        }
+    }, []);
+    var applyFocusReturnPoint = react_1.useCallback(function () {
+        var focusReturnPoint = focusReturnPointRef.current;
+        focusReturnPointRef.current = null;
+        if (focusReturnPoint && document.contains(focusReturnPoint)) {
+            focusReturnPoint.focus();
+        }
+    }, []);
+    react_1.useEffect(function () {
+        if (open === openRef.current)
+            return;
+        openRef.current = open;
+        if (open) {
+            picker.dispatch(ResourcePicker_1.Action.OPEN);
+            storeFocusReturnPoint();
+        }
+        else {
+            picker.dispatch(ResourcePicker_1.Action.CLOSE);
+            applyFocusReturnPoint();
+        }
+    }, [picker, open, storeFocusReturnPoint, applyFocusReturnPoint]);
+    react_1.useEffect(function () {
+        if (!onSelection)
+            return;
+        return picker.subscribe(ResourcePicker_1.Action.SELECT, function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            openRef.current = false;
+            applyFocusReturnPoint();
+            return onSelection.apply(void 0, args);
+        });
+    }, [picker, onSelection, applyFocusReturnPoint]);
+    react_1.useEffect(function () {
+        if (!onCancel)
+            return;
+        return picker.subscribe(ResourcePicker_1.Action.CANCEL, function () {
+            openRef.current = false;
+            applyFocusReturnPoint();
+            return onCancel();
+        });
+    }, [picker, onCancel, applyFocusReturnPoint]);
+    react_1.useEffect(function () {
+        var shouldUpdate = JSON.stringify(options) !== JSON.stringify(optionsRef.current);
+        if (!shouldUpdate)
+            return;
+        optionsRef.current = options;
+        picker.set(options);
+    }, [picker, options]);
+    return null;
+}
+exports.default = ResourcePicker;

package/components/ResourcePicker/index.d.ts

@@ -0,0 +1,3 @@
+import ResourcePicker from './ResourcePicker';
+export { Props } from './ResourcePicker';
+export default ResourcePicker;

package/components/ResourcePicker/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ResourcePicker_1 = __importDefault(require("./ResourcePicker"));
+exports.default = ResourcePicker_1.default;

package/components/RoutePropagator/RoutePropagator.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { AppBridgeContext } from '../../context';
+import { LocationOrHref } from './route-propagator';
+export interface Props {
+    location: LocationOrHref;
+}
+/**
+ * RoutePropagator component
+ *
+ * @remarks
+ * React component which keeps the Shopify admin url in sync with the app url
+ *
+ * @public
+ */
+declare class RoutePropagator extends React.Component<Props, never> {
+    static contextType: React.Context<import("../../context").IAppBridgeContext>;
+    context: React.ContextType<typeof AppBridgeContext>;
+    componentDidMount(): void;
+    componentDidUpdate({ location: prevLocation }: Props): void;
+    render(): null;
+}
+export default RoutePropagator;

package/components/RoutePropagator/RoutePropagator.js

@@ -0,0 +1,54 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var context_1 = require("../../context");
+var route_propagator_1 = require("./route-propagator");
+/**
+ * RoutePropagator component
+ *
+ * @remarks
+ * React component which keeps the Shopify admin url in sync with the app url
+ *
+ * @public
+ */
+var RoutePropagator = /** @class */ (function (_super) {
+    __extends(RoutePropagator, _super);
+    function RoutePropagator() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RoutePropagator.prototype.componentDidMount = function () {
+        var location = this.props.location;
+        route_propagator_1.updateHistory(this.context, location);
+    };
+    RoutePropagator.prototype.componentDidUpdate = function (_a) {
+        var prevLocation = _a.location;
+        var location = this.props.location;
+        if (location !== prevLocation) {
+            route_propagator_1.updateHistory(this.context, location);
+        }
+    };
+    RoutePropagator.prototype.render = function () {
+        return null;
+    };
+    RoutePropagator.contextType = context_1.AppBridgeContext;
+    return RoutePropagator;
+}(react_1.default.Component));
+exports.default = RoutePropagator;

package/components/RoutePropagator/globals.d.ts

@@ -0,0 +1,3 @@
+export declare function getSelfWindow(): Window & typeof globalThis;
+export declare function getTopWindow(): Window;
+export declare function getOrigin(): string;

package/components/RoutePropagator/globals.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOrigin = exports.getTopWindow = exports.getSelfWindow = void 0;
+function getSelfWindow() {
+    return window.self;
+}
+exports.getSelfWindow = getSelfWindow;
+function getTopWindow() {
+    return window.top;
+}
+exports.getTopWindow = getTopWindow;
+function getOrigin() {
+    return location.origin;
+}
+exports.getOrigin = getOrigin;

package/components/RoutePropagator/hook.d.ts

@@ -0,0 +1,10 @@
+import { LocationOrHref } from './route-propagator';
+/**
+ * useRoutePropagation
+ *
+ * @remarks
+ * A hook which keeps the Shopify admin url in sync with the app url
+ *
+ * @public
+ */
+export default function useRoutePropagation(location: LocationOrHref): void;

package/components/RoutePropagator/hook.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useAppBridge_1 = require("../../useAppBridge");
+var route_propagator_1 = require("./route-propagator");
+/**
+ * useRoutePropagation
+ *
+ * @remarks
+ * A hook which keeps the Shopify admin url in sync with the app url
+ *
+ * @public
+ */
+function useRoutePropagation(location) {
+    var app = useAppBridge_1.useAppBridge();
+    react_1.useEffect(function () {
+        route_propagator_1.updateHistory(app, location);
+    }, [app, location]);
+}
+exports.default = useRoutePropagation;

package/components/RoutePropagator/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RoutePropagator } from './RoutePropagator';
+export { default as useRoutePropagation } from './hook';
+export { LocationOrHref } from './route-propagator';

package/components/RoutePropagator/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRoutePropagation = exports.RoutePropagator = void 0;
+var RoutePropagator_1 = require("./RoutePropagator");
+Object.defineProperty(exports, "RoutePropagator", { enumerable: true, get: function () { return __importDefault(RoutePropagator_1).default; } });
+var hook_1 = require("./hook");
+Object.defineProperty(exports, "useRoutePropagation", { enumerable: true, get: function () { return __importDefault(hook_1).default; } });

package/components/RoutePropagator/route-propagator.d.ts

@@ -0,0 +1,7 @@
+import type { ClientApplication } from '@shopify/app-bridge';
+export declare type LocationOrHref = string | {
+    search: string;
+    hash: string;
+    pathname: string;
+};
+export declare function updateHistory(app: ClientApplication, location: LocationOrHref): Promise<void>;