@shopify/app-bridge-react 2.0.18 → 2.0.19

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.0.18](https://github.com/Shopify/app-bridge/compare/v2.0.17...v2.0.18) (2022-03-15)
+## [2.0.19](https://github.com/Shopify/app-bridge/compare/v2.0.17...v2.0.19) (2022-03-15)
 
 **Note:** Version bump only for package @shopify/app-bridge-react
 

package/components/ClientRouter/ClientRouter.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Unsubscribe } from '@shopify/app-bridge';
+import { History } from './router';
+export interface Props {
+    history: History;
+}
+/**
+ * ClientRouter component
+ *
+ * @remarks
+ * React component which keeps the Shopify admin url in sync with the app url
+ *
+ * @public
+ */
+export default class ClientRouter extends React.Component<Props, never> {
+    static contextType: React.Context<import("../../context").IAppBridgeContext>;
+    unsubscribe?: Unsubscribe;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): null;
+}

package/components/ClientRouter/ClientRouter.js

@@ -0,0 +1,50 @@
+"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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        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 router_1 = require("./router");
+/**
+ * ClientRouter component
+ *
+ * @remarks
+ * React component which keeps the Shopify admin url in sync with the app url
+ *
+ * @public
+ */
+var ClientRouter = /** @class */ (function (_super) {
+    __extends(ClientRouter, _super);
+    function ClientRouter() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ClientRouter.prototype.componentDidMount = function () {
+        var history = this.props.history;
+        this.unsubscribe = router_1.handleRouteChange(this.context, history);
+    };
+    ClientRouter.prototype.componentWillUnmount = function () {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    };
+    ClientRouter.prototype.render = function () {
+        return null;
+    };
+    ClientRouter.contextType = context_1.AppBridgeContext;
+    return ClientRouter;
+}(react_1.default.Component));
+exports.default = ClientRouter;

package/components/ClientRouter/hook.d.ts

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

package/components/ClientRouter/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 router_1 = require("./router");
+/**
+ * useRoutePropagation
+ *
+ * @remarks
+ * A hook which keeps the Shopify admin url in sync with the app url
+ *
+ * @public
+ */
+function useClientRouting(history) {
+    var app = useAppBridge_1.useAppBridge();
+    react_1.useEffect(function () {
+        return router_1.handleRouteChange(app, history);
+    }, [app, history]);
+}
+exports.default = useClientRouting;

package/components/ClientRouter/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ClientRouter } from './ClientRouter';
+export { default as useClientRouting } from './hook';
+export { History } from './router';

package/components/ClientRouter/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ClientRouter_1 = require("./ClientRouter");
+Object.defineProperty(exports, "ClientRouter", { enumerable: true, get: function () { return ClientRouter_1.default; } });
+var hook_1 = require("./hook");
+Object.defineProperty(exports, "useClientRouting", { enumerable: true, get: function () { return hook_1.default; } });

package/components/ClientRouter/router.d.ts

@@ -0,0 +1,5 @@
+import { ClientApplication } from '@shopify/app-bridge';
+export interface History {
+    replace(path: string): void;
+}
+export declare function handleRouteChange(app: ClientApplication<any>, history: History): import("@shopify/app-bridge").Unsubscribe;

package/components/ClientRouter/router.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleRouteChange = void 0;
+var actions_1 = require("@shopify/app-bridge/actions");
+function handleRouteChange(app, history) {
+    return app.subscribe(actions_1.Redirect.Action.APP, function (_a) {
+        var path = _a.path;
+        history.replace(path);
+    });
+}
+exports.handleRouteChange = handleRouteChange;

package/components/Loading/Loading.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * Loading component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge Loading action.
+ *
+ * @public
+ */
+declare class Loading extends React.Component {
+    static contextType: React.Context<import("../../context").IAppBridgeContext>;
+    private loading;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): null;
+}
+export default Loading;

package/components/Loading/Loading.js

@@ -0,0 +1,53 @@
+"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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        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");
+/**
+ * Loading component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge Loading action.
+ *
+ * @public
+ */
+var Loading = /** @class */ (function (_super) {
+    __extends(Loading, _super);
+    function Loading() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Loading.prototype.componentDidMount = function () {
+        var app = this.context;
+        this.loading = actions_1.Loading.create(app);
+        if (this.loading != null) {
+            this.loading.dispatch(actions_1.Loading.Action.START);
+        }
+    };
+    Loading.prototype.componentWillUnmount = function () {
+        if (this.loading != null) {
+            this.loading.dispatch(actions_1.Loading.Action.STOP);
+        }
+    };
+    Loading.prototype.render = function () {
+        return null;
+    };
+    Loading.contextType = context_1.AppBridgeContext;
+    return Loading;
+}(react_1.default.Component));
+exports.default = Loading;

package/components/Loading/index.d.ts

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

package/components/Loading/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 Loading_1 = __importDefault(require("./Loading"));
+exports.default = Loading_1.default;

package/components/Modal/Modal.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Modal as AppBridgeModal } from '@shopify/app-bridge/actions';
+import { ActionProps } from '../../types';
+declare type Size = keyof typeof AppBridgeModal.Size;
+export interface Props {
+    /** Whether the modal is open or not */
+    open: boolean;
+    /** The url that will be loaded as the content of the modal */
+    src?: string;
+    /** The content for the title of the modal */
+    title?: string;
+    /** Controls the size of the modal */
+    size?: Size;
+    /** Message to display inside modal */
+    message?: string;
+    /** Primary action */
+    primaryAction?: ActionProps;
+    /** Collection of secondary actions */
+    secondaryActions?: ActionProps[];
+    /** Callback when the modal is closed */
+    onClose?(): void;
+    /** Enable loading behaviour, when `true` bear in mind you will need to use `Modal Content` to dismiss the loading after the iframe page is fully loaded */
+    loading?: boolean;
+}
+/**
+ * Modal component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge Modal action.
+ *
+ * @public
+ */
+declare class Modal extends React.PureComponent<Props, never> {
+    static contextType: React.Context<import("../../context").IAppBridgeContext>;
+    private focusReturnPoint;
+    private modal;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    componentWillUnmount(): void;
+    render(): null;
+    private transformProps;
+}
+export default Modal;

package/components/Modal/Modal.js

@@ -0,0 +1,131 @@
+"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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 __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 transformers_1 = require("../../utilities/transformers");
+var context_1 = require("../../context");
+/**
+ * Modal component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge Modal action.
+ *
+ * @public
+ */
+var Modal = /** @class */ (function (_super) {
+    __extends(Modal, _super);
+    function Modal() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.focusReturnPoint = null;
+        return _this;
+    }
+    Modal.prototype.componentDidMount = function () {
+        var _a = this.props, open = _a.open, onClose = _a.onClose;
+        var app = this.context;
+        this.modal = actions_1.Modal.create(app, this.transformProps());
+        if (onClose != null) {
+            this.modal.subscribe(actions_1.Modal.Action.CLOSE, onClose);
+        }
+        if (open) {
+            this.focusReturnPoint = document.activeElement;
+            this.modal.dispatch(actions_1.Modal.Action.OPEN);
+        }
+    };
+    Modal.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.props, open = _a.open, onClose = _a.onClose;
+        var wasOpen = prevProps.open;
+        var transformedProps = this.transformProps(wasOpen);
+        this.modal.unsubscribe();
+        if (isIframeModal(transformedProps)) {
+            this.modal.set(transformedProps, open);
+        }
+        else {
+            this.modal.set(transformedProps, open);
+        }
+        if (onClose != null) {
+            this.modal.subscribe(actions_1.Modal.Action.CLOSE, onClose);
+        }
+        if (wasOpen !== open) {
+            if (open) {
+                this.modal.dispatch(actions_1.Modal.Action.OPEN);
+            }
+            else {
+                this.modal.dispatch(actions_1.Modal.Action.CLOSE);
+            }
+        }
+        if (!wasOpen && open) {
+            this.focusReturnPoint = document.activeElement;
+        }
+        else if (wasOpen &&
+            !open &&
+            this.focusReturnPoint != null &&
+            document.contains(this.focusReturnPoint)) {
+            this.focusReturnPoint.focus();
+            this.focusReturnPoint = null;
+        }
+    };
+    Modal.prototype.componentWillUnmount = function () {
+        this.modal.unsubscribe();
+        if (this.props.open) {
+            this.modal.dispatch(actions_1.Modal.Action.CLOSE);
+        }
+    };
+    Modal.prototype.render = function () {
+        return null;
+    };
+    Modal.prototype.transformProps = function (wasOpen) {
+        var _a = this.props, title = _a.title, size = _a.size, message = _a.message, src = _a.src, primaryAction = _a.primaryAction, secondaryActions = _a.secondaryActions, loading = _a.loading;
+        var app = this.context;
+        var safeSize = size == null ? undefined : actions_1.Modal.Size[size];
+        var srcPayload = {};
+        if (src != null) {
+            if (src.match('^https?://')) {
+                srcPayload.url = src;
+            }
+            else {
+                srcPayload.path = src;
+            }
+        }
+        return __assign(__assign({ title: title,
+            message: message, size: safeSize }, srcPayload), { footer: {
+                buttons: transformers_1.transformActions(app, {
+                    primaryAction: primaryAction,
+                    secondaryActions: secondaryActions,
+                }),
+            }, loading: wasOpen ? undefined : loading });
+    };
+    Modal.contextType = context_1.AppBridgeContext;
+    return Modal;
+}(react_1.default.PureComponent));
+function isIframeModal(options) {
+    return (typeof options.url === 'string' ||
+        typeof options.path === 'string');
+}
+exports.default = Modal;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface Props {
+    /** Show/Dismiss loading spinner */
+    loading: boolean;
+}
+/**
+ * Modal Content component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge Modal Content action.
+ *
+ * @public
+ */
+declare class ModalContent extends React.Component<Props> {
+    static contextType: React.Context<import("../../../context").IAppBridgeContext>;
+    private modalContent;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    syncLoadingStatus(): void;
+    render(): null;
+}
+export default ModalContent;

package/components/Modal/ModalContent/ModalContent.js

@@ -0,0 +1,59 @@
+"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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        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,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Modal_1 = __importDefault(require("./Modal"));
+var ModalContent_1 = require("./ModalContent");
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return ModalContent_1.default; } });
+exports.default = Modal_1.default;

package/components/Provider/Provider.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { DispatchActionHook } from '@shopify/app-bridge';
+import { AppConfigV2 } from '@shopify/app-bridge/client';
+/**
+ * Provider props
+ *
+ * @public
+ */
+export interface Props {
+    /** Application configuration */
+    config: AppConfigV2;
+    /** The child elements to render. */
+    children?: React.ReactNode;
+}
+/**
+ * Create an App Bridge client application from a config and pass it as the
+ * value to the context provider.
+ *
+ * @remarks
+ * You'll probably want something a little more robust than storing the current
+ * app instance in a module-level global.
+ *
+ * @public
+ */
+declare class Provider extends React.Component<Props> {
+    private app;
+    private get appInstance();
+    render(): JSX.Element;
+}
+export default Provider;
+/**
+ * Augment actions with clientInterface metadata, identifying use of this library
+ *
+ * @internal
+ */
+export declare const setClientInterfaceHook: DispatchActionHook;

package/components/Provider/Provider.js

@@ -0,0 +1,93 @@
+"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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setClientInterfaceHook = void 0;
+var react_1 = __importDefault(require("react"));
+var app_bridge_1 = __importStar(require("@shopify/app-bridge"));
+var context_1 = require("../../context");
+// 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.
+ *
+ * @remarks
+ * You'll probably want something a little more robust than storing the current
+ * app instance in a module-level global.
+ *
+ * @public
+ */
+var Provider = /** @class */ (function (_super) {
+    __extends(Provider, _super);
+    function Provider() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.app = _this.appInstance;
+        return _this;
+    }
+    Object.defineProperty(Provider.prototype, "appInstance", {
+        get: function () {
+            if (!this.app) {
+                this.app = app_bridge_1.default(this.props.config);
+                if (this.app && this.app.hooks) {
+                    this.app.hooks.set(app_bridge_1.LifecycleHook.DispatchAction, exports.setClientInterfaceHook);
+                }
+            }
+            return this.app;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Provider.prototype.render = function () {
+        return (react_1.default.createElement(context_1.AppBridgeContext.Provider, { value: this.appInstance }, this.props.children));
+    };
+    return Provider;
+}(react_1.default.Component));
+exports.default = Provider;
+/**
+ * Augment actions with clientInterface metadata, identifying use of this library
+ *
+ * @internal
+ */
+exports.setClientInterfaceHook = function (next) {
+    return function (action) {
+        action.clientInterface = {
+            name: '@shopify/app-bridge-react',
+            version: packageJson.version,
+        };
+        return next(action);
+    };
+};

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;