@shopify/app-bridge-react 2.0.19 → 2.0.22

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.22](https://github.com/Shopify/app-bridge/compare/v2.0.21...v2.0.22) (2022-03-30)
+
+
+### Features
+
+* **app-bridge:** add TypeScript interface for App Bridge State ([7a4a0f2](https://github.com/Shopify/app-bridge/commit/7a4a0f24bb8f4eeb8093c25b6580167ce100e200))
+* **app-bridge:** improve app.getState TypeScript support when using dot notation ([7cf14f6](https://github.com/Shopify/app-bridge/commit/7cf14f6f6a703356114953a119c23adb93c8ca9a))
+
+
+
+
+
+## [2.0.21](https://github.com/Shopify/app-bridge/compare/v2.0.20...v2.0.21) (2022-03-23)
+
+**Note:** Version bump only for package @shopify/app-bridge-react
+
+
+
+
+
+## [2.0.20](https://github.com/Shopify/app-bridge/compare/v2.0.19...v2.0.20) (2022-03-23)
+
+**Note:** Version bump only for package @shopify/app-bridge-react
+
+
+
+
+
 ## [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.js

@@ -3,10 +3,12 @@ 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]; };
+            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 __());
@@ -34,7 +36,7 @@ var ClientRouter = /** @class */ (function (_super) {
     }
     ClientRouter.prototype.componentDidMount = function () {
         var history = this.props.history;
-        this.unsubscribe = router_1.handleRouteChange(this.context, history);
+        this.unsubscribe = (0, router_1.handleRouteChange)(this.context, history);
     };
     ClientRouter.prototype.componentWillUnmount = function () {
         if (this.unsubscribe) {

package/components/ClientRouter/hook.js

@@ -12,9 +12,9 @@ var router_1 = require("./router");
  * @public
  */
 function useClientRouting(history) {
-    var app = useAppBridge_1.useAppBridge();
-    react_1.useEffect(function () {
-        return router_1.handleRouteChange(app, history);
+    var app = (0, useAppBridge_1.useAppBridge)();
+    (0, react_1.useEffect)(function () {
+        return (0, router_1.handleRouteChange)(app, history);
     }, [app, history]);
 }
 exports.default = useClientRouting;

package/components/ClientRouter/index.js

@@ -1,6 +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.useClientRouting = exports.ClientRouter = void 0;
 var ClientRouter_1 = require("./ClientRouter");
-Object.defineProperty(exports, "ClientRouter", { enumerable: true, get: function () { return ClientRouter_1.default; } });
+Object.defineProperty(exports, "ClientRouter", { enumerable: true, get: function () { return __importDefault(ClientRouter_1).default; } });
 var hook_1 = require("./hook");
-Object.defineProperty(exports, "useClientRouting", { enumerable: true, get: function () { return hook_1.default; } });
+Object.defineProperty(exports, "useClientRouting", { enumerable: true, get: function () { return __importDefault(hook_1).default; } });

package/components/ClientRouter/router.d.ts

@@ -2,4 +2,4 @@ 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;
+export declare function handleRouteChange(app: ClientApplication, history: History): import("@shopify/app-bridge").Unsubscribe;

package/components/ContextualSaveBar/ContextualSaveBar.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 default function ContextualSaveBar({ discardAction, saveAction, fullWidth, leaveConfirmationDisable, visible, }: Props): null;

package/components/ContextualSaveBar/ContextualSaveBar.js

@@ -0,0 +1,64 @@
+"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 });
+var react_1 = require("react");
+var actions_1 = require("@shopify/app-bridge/actions");
+var useAppBridge_1 = require("../../useAppBridge");
+var Action = actions_1.ContextualSaveBar.Action, create = actions_1.ContextualSaveBar.create;
+function ContextualSaveBar(_a) {
+    var discardAction = _a.discardAction, saveAction = _a.saveAction, fullWidth = _a.fullWidth, leaveConfirmationDisable = _a.leaveConfirmationDisable, visible = _a.visible;
+    var app = (0, useAppBridge_1.useAppBridge)();
+    var onSaveAction = saveAction.onAction, saveActionProps = __rest(saveAction, ["onAction"]);
+    var onDiscardAction = discardAction.onAction, discardActionProps = __rest(discardAction, ["onAction"]);
+    var contextualSaveBar = (0, react_1.useMemo)(function () {
+        return create(app, {
+            saveAction: saveActionProps,
+            discardAction: discardActionProps,
+            fullWidth: fullWidth,
+            leaveConfirmationDisable: leaveConfirmationDisable,
+        });
+    }, [app]);
+    (0, react_1.useEffect)(function () {
+        contextualSaveBar.set({
+            saveAction: saveActionProps,
+            discardAction: discardActionProps,
+            fullWidth: fullWidth,
+            leaveConfirmationDisable: leaveConfirmationDisable,
+        }, visible);
+    }, [
+        app,
+        contextualSaveBar,
+        saveActionProps,
+        discardActionProps,
+        fullWidth,
+        leaveConfirmationDisable,
+        visible,
+    ]);
+    (0, react_1.useEffect)(function () {
+        contextualSaveBar.subscribe(Action.DISCARD, onDiscardAction);
+        contextualSaveBar.subscribe(Action.SAVE, onSaveAction);
+        return function () {
+            contextualSaveBar.unsubscribe();
+        };
+    }, [contextualSaveBar]);
+    (0, react_1.useEffect)(function () {
+        if (visible) {
+            contextualSaveBar.dispatch(Action.SHOW);
+        }
+        else {
+            contextualSaveBar.dispatch(Action.HIDE);
+        }
+    }, [contextualSaveBar, visible]);
+    return null;
+}
+exports.default = ContextualSaveBar;

package/components/ContextualSaveBar/index.d.ts

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

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

package/components/Loading/Loading.js

@@ -3,10 +3,12 @@ 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]; };
+            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 __());

package/components/Modal/Modal.js

@@ -3,10 +3,12 @@ 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]; };
+            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 __());
@@ -113,9 +115,8 @@ var Modal = /** @class */ (function (_super) {
                 srcPayload.path = src;
             }
         }
-        return __assign(__assign({ title: title,
-            message: message, size: safeSize }, srcPayload), { footer: {
-                buttons: transformers_1.transformActions(app, {
+        return __assign(__assign({ title: title, message: message, size: safeSize }, srcPayload), { footer: {
+                buttons: (0, transformers_1.transformActions)(app, {
                     primaryAction: primaryAction,
                     secondaryActions: secondaryActions,
                 }),

package/components/Modal/ModalContent/ModalContent.js

@@ -3,10 +3,12 @@ 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]; };
+            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 __());

package/components/Modal/index.js

@@ -3,7 +3,8 @@ 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 ModalContent_1.default; } });
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return __importDefault(ModalContent_1).default; } });
 exports.default = Modal_1.default;

package/components/Provider/Provider.js

@@ -3,10 +3,12 @@ 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]; };
+            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 __());
@@ -14,7 +16,11 @@ var __extends = (this && this.__extends) || (function () {
 })();
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -27,7 +33,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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);
+    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;
 };
@@ -61,7 +67,7 @@ var Provider = /** @class */ (function (_super) {
     Object.defineProperty(Provider.prototype, "appInstance", {
         get: function () {
             if (!this.app) {
-                this.app = app_bridge_1.default(this.props.config);
+                this.app = (0, app_bridge_1.default)(this.props.config);
                 if (this.app && this.app.hooks) {
                     this.app.hooks.set(app_bridge_1.LifecycleHook.DispatchAction, exports.setClientInterfaceHook);
                 }
@@ -82,7 +88,7 @@ exports.default = Provider;
  *
  * @internal
  */
-exports.setClientInterfaceHook = function (next) {
+var setClientInterfaceHook = function (next) {
     return function (action) {
         action.clientInterface = {
             name: '@shopify/app-bridge-react',
@@ -91,3 +97,4 @@ exports.setClientInterfaceHook = function (next) {
         return next(action);
     };
 };
+exports.setClientInterfaceHook = setClientInterfaceHook;

package/components/ResourcePicker/ResourcePicker.js

@@ -3,10 +3,12 @@ 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]; };
+            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 __());

package/components/RoutePropagator/RoutePropagator.js

@@ -3,10 +3,12 @@ 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]; };
+            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 __());
@@ -34,13 +36,13 @@ var RoutePropagator = /** @class */ (function (_super) {
     }
     RoutePropagator.prototype.componentDidMount = function () {
         var location = this.props.location;
-        route_propagator_1.updateHistory(this.context, location);
+        (0, 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);
+            (0, route_propagator_1.updateHistory)(this.context, location);
         }
     };
     RoutePropagator.prototype.render = function () {

package/components/RoutePropagator/globals.d.ts

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

package/components/RoutePropagator/hook.js

@@ -12,9 +12,9 @@ var route_propagator_1 = require("./route-propagator");
  * @public
  */
 function useRoutePropagation(location) {
-    var app = useAppBridge_1.useAppBridge();
-    react_1.useEffect(function () {
-        route_propagator_1.updateHistory(app, location);
+    var app = (0, useAppBridge_1.useAppBridge)();
+    (0, react_1.useEffect)(function () {
+        (0, route_propagator_1.updateHistory)(app, location);
     }, [app, location]);
 }
 exports.default = useRoutePropagation;

package/components/RoutePropagator/index.js

@@ -1,6 +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 RoutePropagator_1.default; } });
+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 hook_1.default; } });
+Object.defineProperty(exports, "useRoutePropagation", { enumerable: true, get: function () { return __importDefault(hook_1).default; } });

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

@@ -4,4 +4,4 @@ export declare type LocationOrHref = string | {
     hash: string;
     pathname: string;
 };
-export declare function updateHistory(app: ClientApplication<any>, location: LocationOrHref): Promise<void>;
+export declare function updateHistory(app: ClientApplication, location: LocationOrHref): Promise<void>;

package/components/RoutePropagator/route-propagator.js

@@ -59,8 +59,8 @@ function updateHistory(app, location) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    selfWindow = globals_1.getSelfWindow();
-                    topWindow = globals_1.getTopWindow();
+                    selfWindow = (0, globals_1.getSelfWindow)();
+                    topWindow = (0, globals_1.getTopWindow)();
                     renderedInTheTopWindow = selfWindow === topWindow;
                     return [4 /*yield*/, app.getState('context').then(function (context) {
                             return context === MessageTransport_1.Context.Main;
@@ -73,7 +73,7 @@ function updateHistory(app, location) {
                     normalizedLocation = getNormalizedURL(location);
                     embeddedFrameParamsToRemove.forEach(function (param) { return normalizedLocation.searchParams.delete(param); });
                     pathname = normalizedLocation.pathname, search = normalizedLocation.search, hash = normalizedLocation.hash;
-                    locationStr = "" + pathname + search + hash;
+                    locationStr = "".concat(pathname).concat(search).concat(hash);
                     actions_1.History.create(app).dispatch(actions_1.History.Action.REPLACE, locationStr);
                     return [2 /*return*/];
             }
@@ -82,10 +82,10 @@ function updateHistory(app, location) {
 }
 exports.updateHistory = updateHistory;
 function getNormalizedURL(location) {
-    var origin = globals_1.getOrigin();
+    var origin = (0, globals_1.getOrigin)();
     if (typeof location === 'string') {
         return new URL(location, origin);
     }
     var pathname = location.pathname, search = location.search, hash = location.hash;
-    return new URL("" + pathname + search + hash, origin);
+    return new URL("".concat(pathname).concat(search).concat(hash), origin);
 }

package/components/TitleBar/TitleBar.js

@@ -3,10 +3,12 @@ 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]; };
+            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 __());
@@ -44,7 +46,7 @@ var TitleBar = /** @class */ (function (_super) {
         var _a = this.props, title = _a.title, primaryAction = _a.primaryAction, secondaryActions = _a.secondaryActions, actionGroups = _a.actionGroups;
         return {
             title: title,
-            buttons: transformers_1.transformActions(app, {
+            buttons: (0, transformers_1.transformActions)(app, {
                 primaryAction: primaryAction,
                 secondaryActions: secondaryActions,
                 actionGroups: actionGroups,
@@ -63,7 +65,7 @@ var TitleBar = /** @class */ (function (_super) {
         var button = actions_1.Button.create(app, {
             label: content || '',
         });
-        var redirect = transformers_1.generateRedirect(app, url, target);
+        var redirect = (0, transformers_1.generateRedirect)(app, url, target);
         if (redirect != null) {
             button.subscribe(actions_1.Button.Action.CLICK, redirect);
         }

package/components/Toast/Toast.js

@@ -3,10 +3,12 @@ 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]; };
+            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 __());

package/components/index.d.ts

@@ -1,3 +1,4 @@
+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';

package/components/index.js

@@ -1,27 +1,37 @@
 "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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (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);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourcePicker = exports.ModalContent = exports.Modal = exports.TitleBar = exports.Toast = exports.Loading = exports.Provider = exports.ContextualSaveBar = void 0;
+var ContextualSaveBar_1 = require("./ContextualSaveBar");
+Object.defineProperty(exports, "ContextualSaveBar", { enumerable: true, get: function () { return __importDefault(ContextualSaveBar_1).default; } });
 var Provider_1 = require("./Provider");
-Object.defineProperty(exports, "Provider", { enumerable: true, get: function () { return Provider_1.default; } });
+Object.defineProperty(exports, "Provider", { enumerable: true, get: function () { return __importDefault(Provider_1).default; } });
 var Loading_1 = require("./Loading");
-Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return Loading_1.default; } });
+Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return __importDefault(Loading_1).default; } });
 var Toast_1 = require("./Toast");
-Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.default; } });
+Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return __importDefault(Toast_1).default; } });
 var TitleBar_1 = require("./TitleBar");
-Object.defineProperty(exports, "TitleBar", { enumerable: true, get: function () { return TitleBar_1.default; } });
+Object.defineProperty(exports, "TitleBar", { enumerable: true, get: function () { return __importDefault(TitleBar_1).default; } });
 var Modal_1 = require("./Modal");
-Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.default; } });
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(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; } });
+Object.defineProperty(exports, "ResourcePicker", { enumerable: true, get: function () { return __importDefault(ResourcePicker_1).default; } });
 __exportStar(require("./RoutePropagator"), exports);
 __exportStar(require("./ClientRouter"), exports);

package/context.d.ts

@@ -4,7 +4,7 @@ import { ClientApplication } from '@shopify/app-bridge/client';
  *
  * @public
  */
-export declare type IAppBridgeContext = ClientApplication<any> | null;
+export declare type IAppBridgeContext = ClientApplication | null;
 /**
  * App Bridge context.
  *

package/context.js

@@ -7,4 +7,4 @@ var react_1 = require("react");
  *
  * @public
  */
-exports.AppBridgeContext = react_1.createContext(null);
+exports.AppBridgeContext = (0, react_1.createContext)(null);

package/hooks/index.d.ts

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

package/hooks/index.js

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToast = exports.useNavigationHistory = exports.useContextualSaveBar = void 0;
+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");

package/hooks/useContextualSaveBar/index.d.ts

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

package/hooks/useContextualSaveBar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContextualSaveBar = void 0;
+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;