@shopify/app-bridge-react 2.0.18 → 2.0.21

package/components/TitleBar/TitleBar.js

@@ -0,0 +1,78 @@
+"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 transformers_1 = require("../../utilities/transformers");
+var context_1 = require("../../context");
+var TitleBar = /** @class */ (function (_super) {
+    __extends(TitleBar, _super);
+    function TitleBar() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TitleBar.prototype.componentDidMount = function () {
+        var app = this.context;
+        this.titleBar = actions_1.TitleBar.create(app, this.transformProps());
+    };
+    TitleBar.prototype.componentDidUpdate = function () {
+        this.titleBar.unsubscribe();
+        this.titleBar.set(this.transformProps());
+    };
+    TitleBar.prototype.componentWillUnmount = function () {
+        this.titleBar.unsubscribe();
+    };
+    TitleBar.prototype.render = function () {
+        return null;
+    };
+    TitleBar.prototype.transformProps = function () {
+        var app = this.context;
+        var _a = this.props, title = _a.title, primaryAction = _a.primaryAction, secondaryActions = _a.secondaryActions, actionGroups = _a.actionGroups;
+        return {
+            title: title,
+            buttons: transformers_1.transformActions(app, {
+                primaryAction: primaryAction,
+                secondaryActions: secondaryActions,
+                actionGroups: actionGroups,
+            }),
+            breadcrumbs: this.transformBreadcrumbs(),
+        };
+    };
+    TitleBar.prototype.transformBreadcrumbs = function () {
+        var app = this.context;
+        var breadcrumbs = this.props.breadcrumbs;
+        if (breadcrumbs == null || breadcrumbs.length === 0) {
+            return undefined;
+        }
+        var breadcrumb = breadcrumbs[breadcrumbs.length - 1];
+        var url = breadcrumb.url, onAction = breadcrumb.onAction, target = breadcrumb.target, content = breadcrumb.content;
+        var button = actions_1.Button.create(app, {
+            label: content || '',
+        });
+        var redirect = transformers_1.generateRedirect(app, url, target);
+        if (redirect != null) {
+            button.subscribe(actions_1.Button.Action.CLICK, redirect);
+        }
+        if (onAction != null) {
+            button.subscribe(actions_1.Button.Action.CLICK, onAction);
+        }
+        return button;
+    };
+    TitleBar.contextType = context_1.AppBridgeContext;
+    return TitleBar;
+}(react_1.default.PureComponent));
+exports.default = TitleBar;

package/components/TitleBar/index.d.ts

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

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

package/components/Toast/Toast.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export interface Props {
+    /** The content that should appear in the toast message */
+    content: string;
+    /**
+     * The length of time in milliseconds the toast message should persist
+     * @default 5000
+     */
+    duration?: number;
+    /** Display an error toast. */
+    error?: boolean;
+    /** Callback when the dismiss icon is clicked */
+    onDismiss(): void;
+}
+export declare const DEFAULT_TOAST_DURATION = 5000;
+/**
+ * Toast component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge Toast action.
+ *
+ * @public
+ */
+declare class Toast extends React.PureComponent<Props, never> {
+    static contextType: React.Context<import("../../context").IAppBridgeContext>;
+    private toast;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): null;
+}
+export default Toast;

package/components/Toast/Toast.js

@@ -0,0 +1,57 @@
+"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 });
+exports.DEFAULT_TOAST_DURATION = void 0;
+var react_1 = __importDefault(require("react"));
+var actions_1 = require("@shopify/app-bridge/actions");
+var context_1 = require("../../context");
+exports.DEFAULT_TOAST_DURATION = 5000;
+/**
+ * Toast component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge Toast action.
+ *
+ * @public
+ */
+var Toast = /** @class */ (function (_super) {
+    __extends(Toast, _super);
+    function Toast() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Toast.prototype.componentDidMount = function () {
+        var app = this.context;
+        var _a = this.props, error = _a.error, content = _a.content, _b = _a.duration, duration = _b === void 0 ? exports.DEFAULT_TOAST_DURATION : _b, onDismiss = _a.onDismiss;
+        this.toast = actions_1.Toast.create(app, {
+            message: content,
+            duration: duration,
+            isError: error,
+        });
+        this.toast.subscribe(actions_1.Toast.Action.CLEAR, onDismiss);
+        this.toast.dispatch(actions_1.Toast.Action.SHOW);
+    };
+    Toast.prototype.componentWillUnmount = function () {
+        this.toast.unsubscribe();
+    };
+    Toast.prototype.render = function () {
+        return null;
+    };
+    Toast.contextType = context_1.AppBridgeContext;
+    return Toast;
+}(react_1.default.PureComponent));
+exports.default = Toast;

package/components/Toast/index.d.ts

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

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

package/components/index.d.ts

@@ -0,0 +1,9 @@
+export { default as ContextualSaveBar, Props as ContextualSaveBarProps } from './ContextualSaveBar';
+export { default as Provider, Props as ProviderProps } from './Provider';
+export { default as Loading } from './Loading';
+export { default as Toast, Props as ToastProps } from './Toast';
+export { default as TitleBar } from './TitleBar';
+export { default as Modal, Props as ModalProps, ModalContent } from './Modal';
+export { default as ResourcePicker, Props as ResourcePickerProps } from './ResourcePicker';
+export * from './RoutePropagator';
+export * from './ClientRouter';

package/components/index.js

@@ -0,0 +1,29 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ContextualSaveBar_1 = require("./ContextualSaveBar");
+Object.defineProperty(exports, "ContextualSaveBar", { enumerable: true, get: function () { return ContextualSaveBar_1.default; } });
+var Provider_1 = require("./Provider");
+Object.defineProperty(exports, "Provider", { enumerable: true, get: function () { return Provider_1.default; } });
+var Loading_1 = require("./Loading");
+Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return Loading_1.default; } });
+var Toast_1 = require("./Toast");
+Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.default; } });
+var TitleBar_1 = require("./TitleBar");
+Object.defineProperty(exports, "TitleBar", { enumerable: true, get: function () { return TitleBar_1.default; } });
+var Modal_1 = require("./Modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.default; } });
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return Modal_1.ModalContent; } });
+var ResourcePicker_1 = require("./ResourcePicker");
+Object.defineProperty(exports, "ResourcePicker", { enumerable: true, get: function () { return ResourcePicker_1.default; } });
+__exportStar(require("./RoutePropagator"), exports);
+__exportStar(require("./ClientRouter"), exports);

package/context.d.ts

@@ -0,0 +1,13 @@
+import { ClientApplication } from '@shopify/app-bridge/client';
+/**
+ * App Bridge context consumer type.
+ *
+ * @public
+ */
+export declare type IAppBridgeContext = ClientApplication<any> | null;
+/**
+ * App Bridge context.
+ *
+ * @public
+ */
+export declare const AppBridgeContext: import("react").Context<IAppBridgeContext>;

package/context.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppBridgeContext = void 0;
+var react_1 = require("react");
+/**
+ * App Bridge context.
+ *
+ * @public
+ */
+exports.AppBridgeContext = react_1.createContext(null);

package/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useContextualSaveBar } from './useContextualSaveBar';
+export { useNavigationHistory } from './useNavigationHistory';
+export { useToast } from './useToast';

package/hooks/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var useContextualSaveBar_1 = require("./useContextualSaveBar");
+Object.defineProperty(exports, "useContextualSaveBar", { enumerable: true, get: function () { return useContextualSaveBar_1.useContextualSaveBar; } });
+var useNavigationHistory_1 = require("./useNavigationHistory");
+Object.defineProperty(exports, "useNavigationHistory", { enumerable: true, get: function () { return useNavigationHistory_1.useNavigationHistory; } });
+var useToast_1 = require("./useToast");
+Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return useToast_1.useToast; } });

package/hooks/useContextualSaveBar/index.d.ts

@@ -0,0 +1 @@
+export { useContextualSaveBar } from './useContextualSaveBar';

package/hooks/useContextualSaveBar/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var useContextualSaveBar_1 = require("./useContextualSaveBar");
+Object.defineProperty(exports, "useContextualSaveBar", { enumerable: true, get: function () { return useContextualSaveBar_1.useContextualSaveBar; } });

package/hooks/useContextualSaveBar/useContextualSaveBar.d.ts

@@ -0,0 +1,13 @@
+import type { ContextAction, DiscardAction } from '@shopify/app-bridge/actions/ContextualSaveBar';
+export interface Props {
+    discardAction: DiscardAction & {
+        onAction(): void;
+    };
+    saveAction: ContextAction & {
+        onAction(): void;
+    };
+    fullWidth?: boolean;
+    leaveConfirmationDisable?: boolean;
+    visible?: boolean;
+}
+export declare function useContextualSaveBar({ discardAction, saveAction, fullWidth, leaveConfirmationDisable, visible, }: Props): null;

package/hooks/useContextualSaveBar/useContextualSaveBar.js

@@ -0,0 +1,68 @@
+"use strict";
+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.useContextualSaveBar = void 0;
+var react_1 = require("react");
+var ContextualSaveBar_1 = require("@shopify/app-bridge/actions/ContextualSaveBar");
+var useAppBridge_1 = require("../../useAppBridge");
+function useContextualSaveBar(_a) {
+    var discardAction = _a.discardAction, saveAction = _a.saveAction, fullWidth = _a.fullWidth, leaveConfirmationDisable = _a.leaveConfirmationDisable, visible = _a.visible;
+    var app = useAppBridge_1.useAppBridge();
+    var onSaveAction = saveAction.onAction, saveActionProps = __rest(saveAction, ["onAction"]);
+    var onDiscardAction = discardAction.onAction, discardActionProps = __rest(discardAction, ["onAction"]);
+    /* We want to reuse the same ContextualSaveBar instance, even when props change
+     * (so we don't include all the props in the dependency array).
+     * Instead of recreating the component on every change, we use the set method,
+     * in the useEffect block below, to dispatch updates when props change.
+     */
+    var contextualSaveBar = react_1.useMemo(function () {
+        return ContextualSaveBar_1.create(app, {
+            saveAction: saveActionProps,
+            discardAction: discardActionProps,
+            fullWidth: fullWidth,
+            leaveConfirmationDisable: leaveConfirmationDisable,
+        });
+    }, [app]);
+    react_1.useEffect(function () {
+        contextualSaveBar.set({
+            saveAction: saveActionProps,
+            discardAction: discardActionProps,
+            fullWidth: fullWidth,
+            leaveConfirmationDisable: leaveConfirmationDisable,
+        }, Boolean(visible));
+    }, [
+        contextualSaveBar,
+        saveActionProps,
+        discardActionProps,
+        fullWidth,
+        leaveConfirmationDisable,
+        visible,
+    ]);
+    react_1.useEffect(function () {
+        contextualSaveBar.subscribe(ContextualSaveBar_1.Action.DISCARD, onDiscardAction);
+        contextualSaveBar.subscribe(ContextualSaveBar_1.Action.SAVE, onSaveAction);
+        return function () {
+            contextualSaveBar.unsubscribe();
+        };
+    }, [contextualSaveBar]);
+    react_1.useEffect(function () {
+        if (visible) {
+            contextualSaveBar.dispatch(ContextualSaveBar_1.Action.SHOW);
+        }
+        else {
+            contextualSaveBar.dispatch(ContextualSaveBar_1.Action.HIDE);
+        }
+    }, [contextualSaveBar, visible]);
+    return null;
+}
+exports.useContextualSaveBar = useContextualSaveBar;

package/hooks/useNavigationHistory/index.d.ts

@@ -0,0 +1 @@
+export { useNavigationHistory } from './useNavigationHistory';

package/hooks/useNavigationHistory/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var useNavigationHistory_1 = require("./useNavigationHistory");
+Object.defineProperty(exports, "useNavigationHistory", { enumerable: true, get: function () { return useNavigationHistory_1.useNavigationHistory; } });

package/hooks/useNavigationHistory/useNavigationHistory.d.ts

@@ -0,0 +1,16 @@
+/**
+ * useNavigationHistory hook
+ *
+ * @remarks
+ * React hook which wraps the Shopify App Bridge History action.
+ *
+ * @public
+ */
+export declare function useNavigationHistory(): {
+    push: (location: {
+        pathname: string;
+    }) => void;
+    replace: (location: {
+        pathname: string;
+    }) => void;
+};

package/hooks/useNavigationHistory/useNavigationHistory.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigationHistory = void 0;
+var react_1 = require("react");
+var actions_1 = require("@shopify/app-bridge/actions");
+var useAppBridge_1 = require("../../useAppBridge");
+/**
+ * useNavigationHistory hook
+ *
+ * @remarks
+ * React hook which wraps the Shopify App Bridge History action.
+ *
+ * @public
+ */
+function useNavigationHistory() {
+    var app = useAppBridge_1.useAppBridge();
+    return react_1.useMemo(function () {
+        var history = actions_1.History.create(app);
+        function push(location) {
+            history.dispatch(actions_1.History.Action.PUSH, location.pathname);
+        }
+        function replace(location) {
+            history.dispatch(actions_1.History.Action.REPLACE, location.pathname);
+        }
+        return { push: push, replace: replace };
+    }, []);
+}
+exports.useNavigationHistory = useNavigationHistory;

package/hooks/useToast/index.d.ts

@@ -0,0 +1 @@
+export { useToast } from './useToast';

package/hooks/useToast/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var useToast_1 = require("./useToast");
+Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return useToast_1.useToast; } });

package/hooks/useToast/useToast.d.ts

@@ -0,0 +1,15 @@
+import type { Payload } from '@shopify/app-bridge/actions/Toast';
+export declare const DEFAULT_TOAST_DURATION = 5000;
+/**
+ * useToast hook
+ *
+ * @remarks
+ * React hook which wraps the Shopify App Bridge Toast action.
+ *
+ * @public
+ */
+export declare function useToast(): {
+    show: ({ content: message, duration, isError, onDismiss, }: Omit<Payload, 'message'> & {
+        content: string;
+    }) => void;
+};

package/hooks/useToast/useToast.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToast = exports.DEFAULT_TOAST_DURATION = void 0;
+var react_1 = require("react");
+var Toast_1 = require("@shopify/app-bridge/actions/Toast");
+var useAppBridge_1 = require("../../useAppBridge");
+exports.DEFAULT_TOAST_DURATION = 5000;
+/**
+ * useToast hook
+ *
+ * @remarks
+ * React hook which wraps the Shopify App Bridge Toast action.
+ *
+ * @public
+ */
+function useToast() {
+    var app = useAppBridge_1.useAppBridge();
+    var toast;
+    var show = react_1.useCallback(function (_a) {
+        var message = _a.content, _b = _a.duration, duration = _b === void 0 ? exports.DEFAULT_TOAST_DURATION : _b, isError = _a.isError, onDismiss = _a.onDismiss;
+        toast = Toast_1.create(app, {
+            message: message,
+            isError: isError,
+            duration: duration,
+        });
+        toast.dispatch(Toast_1.Action.SHOW);
+        if (onDismiss) {
+            toast.subscribe(Toast_1.Action.CLEAR, onDismiss);
+        }
+    }, [app]);
+    react_1.useEffect(function () {
+        return function () {
+            toast.unsubscribe();
+        };
+    }, []);
+    return { show: show };
+}
+exports.useToast = useToast;

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export { AppBridgeContext as Context } from './context';
+export { useAppBridge } from './useAppBridge';

package/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+var context_1 = require("./context");
+Object.defineProperty(exports, "Context", { enumerable: true, get: function () { return context_1.AppBridgeContext; } });
+var useAppBridge_1 = require("./useAppBridge");
+Object.defineProperty(exports, "useAppBridge", { enumerable: true, get: function () { return useAppBridge_1.useAppBridge; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/app-bridge-react",
-  "version": "2.0.18",
+  "version": "2.0.21",
   "types": "index.d.ts",
   "main": "index.js",
   "unpkg": "umd/index.js",
@@ -8,6 +8,7 @@
   "files": [
     "/components/",
     "/umd/",
+    "/hooks/",
     "/utilities/",
     "/context.d.ts",
     "/context.js",
@@ -44,7 +45,7 @@
     }
   ],
   "dependencies": {
-    "@shopify/app-bridge": "^2.0.18"
+    "@shopify/app-bridge": "^2.0.21"
   },
   "devDependencies": {
     "@types/react": "^17.0.38",
@@ -54,5 +55,5 @@
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0"
   },
-  "gitHead": "9d45b5643e94febbccc111e198db7fafe309c2a0"
+  "gitHead": "343a8216ef007c80076142c5da308f012ab15d37"
 }

package/types.d.ts

@@ -0,0 +1,33 @@
+import { Redirect } from '@shopify/app-bridge/actions';
+export declare type Target = Exclude<keyof typeof Redirect.Action, 'ADMIN_SECTION'>;
+export interface ActionProps {
+    /** Content the action displays */
+    content?: string;
+    /** Should the action be styled as destructive */
+    destructive?: boolean;
+    /** Should the action be disabled */
+    disabled?: boolean;
+    /** Should the action be loading */
+    loading?: boolean;
+    /** Forces url to open in a new tab */
+    external?: boolean;
+    /** Use Polaris plain styling */
+    plain?: boolean;
+    /**
+     * Where to display the target link
+     * @default 'APP'
+     */
+    target?: Target;
+    /** A destination to link to */
+    url?: string;
+    /** Callback when an action takes place */
+    onAction?(): void;
+}
+export interface ActionGroupProps {
+    /** Action group title */
+    title: string;
+    /** Use Polaris plain styling */
+    plain?: boolean;
+    /** List of actions */
+    actions: ActionProps[];
+}

package/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });