@shopify/app-bridge-react 2.0.17 → 2.0.18

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 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)
+
+**Note:** Version bump only for package @shopify/app-bridge-react
+
+
+
+
+
 ## [2.0.17](https://github.com/Shopify/app-bridge/compare/v2.0.16...v2.0.17) (2022-03-10)
 
 **Note:** Version bump only for package @shopify/app-bridge-react

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/app-bridge-react",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "types": "index.d.ts",
   "main": "index.js",
   "unpkg": "umd/index.js",
@@ -44,7 +44,7 @@
     }
   ],
   "dependencies": {
-    "@shopify/app-bridge": "^2.0.17"
+    "@shopify/app-bridge": "^2.0.18"
   },
   "devDependencies": {
     "@types/react": "^17.0.38",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0"
   },
-  "gitHead": "aa2189b503e52e69451f56a4b26612f6fb16f732"
+  "gitHead": "9d45b5643e94febbccc111e198db7fafe309c2a0"
 }

package/components/ClientRouter/ClientRouter.d.ts

@@ -1,21 +0,0 @@
-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

@@ -1,50 +0,0 @@
-"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

@@ -1,10 +0,0 @@
-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

@@ -1,20 +0,0 @@
-"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

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

package/components/ClientRouter/index.js

@@ -1,6 +0,0 @@
-"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

@@ -1,5 +0,0 @@
-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

@@ -1,11 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-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

@@ -1,53 +0,0 @@
-"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

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

package/components/Loading/index.js

@@ -1,7 +0,0 @@
-"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

@@ -1,43 +0,0 @@
-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

@@ -1,131 +0,0 @@
-"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

@@ -1,22 +0,0 @@
-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

@@ -1,59 +0,0 @@
-"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

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

package/components/Modal/ModalContent/index.js

@@ -1,7 +0,0 @@
-"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

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

package/components/Modal/index.js

@@ -1,9 +0,0 @@
-"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

@@ -1,36 +0,0 @@
-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;