@shopify/app-bridge-react 2.0.18 → 2.0.19

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,8 @@
+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,27 @@
+"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 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,2 @@
+export { useNavigationHistory } from './useNavigationHistory';
+export { useToast } from './useToast';

package/hooks/index.js

@@ -0,0 +1,6 @@
+"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; } });
+var useToast_1 = require("./useToast");
+Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return useToast_1.useToast; } });

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.19",
   "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.19"
   },
   "devDependencies": {
     "@types/react": "^17.0.38",
@@ -54,5 +55,5 @@
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0"
   },
-  "gitHead": "9d45b5643e94febbccc111e198db7fafe309c2a0"
+  "gitHead": "7b9604f253934c22ef88630eaa3eb891bdfc6f7a"
 }

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 });