@shopify/app-bridge-react 2.0.20 → 2.0.23

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.23](https://github.com/Shopify/app-bridge/compare/v2.0.22...v2.0.23) (2022-04-07)
+
+
+### Features
+
+* NavigationMenu component ([0205cb3](https://github.com/Shopify/app-bridge/commit/0205cb396d8b4ed679dd465348a6dc45227cedb9))
+* **app-bridge-react:** add useAppBridgeState hook ([1fc64f1](https://github.com/Shopify/app-bridge/commit/1fc64f142cbd0a72adccb75fec36d31cde1ed552))
+* **app-bridge-react:** add useLocale hook ([e17dbad](https://github.com/Shopify/app-bridge/commit/e17dbadedbded9d274744738821bef49e52eb43b))
+
+
+
+
+
+## [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

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 __());

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/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,8 +115,7 @@ var Modal = /** @class */ (function (_super) {
                 srcPayload.path = src;
             }
         }
-        return __assign(__assign({ title: title,
-            message: message, size: safeSize }, srcPayload), { footer: {
+        return __assign(__assign({ title: title, message: message, size: safeSize }, srcPayload), { footer: {
                 buttons: 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/NavigationMenu/NavigationMenu.d.ts

@@ -0,0 +1,17 @@
+export interface NavigationLink {
+    label: string;
+    destination: string;
+}
+export interface Props {
+    /**
+     * List of links in navigation menu
+     */
+    navigationLinks: NavigationLink[];
+    /**
+     * Custom matcher to set active link.
+     * This function will be called with each link and the current location.
+     * If it returns true the current link will be set to the active link.
+     */
+    matcher?: (link: NavigationLink, location: Location) => boolean;
+}
+export default function NavigationMenu({ navigationLinks, matcher }: Props): null;

package/components/NavigationMenu/NavigationMenu.js

@@ -0,0 +1,55 @@
+"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 __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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var AppBridgeAppLinks = __importStar(require("@shopify/app-bridge/actions/Link/AppLink"));
+var AppBridgeNavigationMenu = __importStar(require("@shopify/app-bridge/actions/Menu/NavigationMenu"));
+var useAppBridge_1 = require("../../useAppBridge");
+function NavigationMenu(_a) {
+    var navigationLinks = _a.navigationLinks, matcher = _a.matcher;
+    var app = useAppBridge_1.useAppBridge();
+    var _b = react_1.useState(), activeLink = _b[0], setActiveLink = _b[1];
+    var items = react_1.useMemo(function () {
+        return navigationLinks.map(function (link) {
+            var appLink = AppBridgeAppLinks.create(app, link);
+            if ((matcher === null || matcher === void 0 ? void 0 : matcher(link, location)) || link.destination === location.pathname) {
+                setActiveLink(appLink);
+            }
+            return appLink;
+        });
+    }, [app, location.pathname, matcher, navigationLinks]);
+    var navigationMenu = react_1.useMemo(function () {
+        return AppBridgeNavigationMenu.create(app, {
+            items: items,
+            active: activeLink,
+        });
+        /* We want to reuse the same NavigationMenu 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.
+         */
+    }, [app]);
+    react_1.useEffect(function () {
+        navigationMenu.set({ items: items, active: activeLink });
+    }, [activeLink, items]);
+    return null;
+}
+exports.default = NavigationMenu;

package/components/NavigationMenu/index.d.ts

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

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

package/components/Provider/Provider.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { DispatchActionHook } from '@shopify/app-bridge';
-import { AppConfigV2 } from '@shopify/app-bridge/client';
+import type { AppConfigV2, DispatchActionHook } from '@shopify/app-bridge/client';
 /**
  * Provider props
  *

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 __());
@@ -27,7 +29,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;
 };
@@ -82,7 +84,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 +93,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 __());

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/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 __());

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,9 +1,10 @@
 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 NavigationMenu, Props as NavigationMenuProps } from './NavigationMenu';
+export { default as Provider, Props as ProviderProps } from './Provider';
 export { default as ResourcePicker, Props as ResourcePickerProps } from './ResourcePicker';
+export { default as TitleBar } from './TitleBar';
+export { default as Toast, Props as ToastProps } from './Toast';
 export * from './RoutePropagator';
 export * from './ClientRouter';

package/components/index.js

@@ -7,23 +7,29 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     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.Toast = exports.TitleBar = exports.ResourcePicker = exports.Provider = exports.NavigationMenu = exports.ModalContent = exports.Modal = exports.Loading = exports.ContextualSaveBar = void 0;
 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; } });
+Object.defineProperty(exports, "ContextualSaveBar", { enumerable: true, get: function () { return __importDefault(ContextualSaveBar_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; } });
+Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return __importDefault(Loading_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 NavigationMenu_1 = require("./NavigationMenu");
+Object.defineProperty(exports, "NavigationMenu", { enumerable: true, get: function () { return __importDefault(NavigationMenu_1).default; } });
+var Provider_1 = require("./Provider");
+Object.defineProperty(exports, "Provider", { enumerable: true, get: function () { return __importDefault(Provider_1).default; } });
 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; } });
+var TitleBar_1 = require("./TitleBar");
+Object.defineProperty(exports, "TitleBar", { enumerable: true, get: function () { return __importDefault(TitleBar_1).default; } });
+var Toast_1 = require("./Toast");
+Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return __importDefault(Toast_1).default; } });
 __exportStar(require("./RoutePropagator"), exports);
 __exportStar(require("./ClientRouter"), exports);

package/context.d.ts

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

package/hooks/index.d.ts

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

package/hooks/index.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppBridgeState = 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");
 Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return useToast_1.useToast; } });
+var useAppBridgeState_1 = require("./useAppBridgeState");
+Object.defineProperty(exports, "useAppBridgeState", { enumerable: true, get: function () { return useAppBridgeState_1.useAppBridgeState; } });

package/hooks/useAppBridgeState/index.d.ts

@@ -0,0 +1 @@
+export * from './useAppBridgeState';

package/hooks/useAppBridgeState/index.js

@@ -0,0 +1,13 @@
+"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" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useAppBridgeState"), exports);

package/hooks/useAppBridgeState/useAppBridgeState.d.ts

@@ -0,0 +1,10 @@
+import type { AppBridgeState, Path, PathValue, StateWithoutFeatures } from '@shopify/app-bridge';
+declare type Query = keyof AppBridgeState | Path<StateWithoutFeatures<AppBridgeState>>;
+declare type State<K extends Query> = K extends keyof AppBridgeState ? AppBridgeState[K] : K extends Path<StateWithoutFeatures<AppBridgeState>> ? PathValue<StateWithoutFeatures<AppBridgeState>, K> : K extends never ? AppBridgeState : never;
+interface UseAppBridgeState {
+    (): AppBridgeState | undefined;
+    <K extends Query>(query: K): State<K> | undefined;
+    <PartialState>(query: keyof AppBridgeState): PartialState | undefined;
+}
+export declare const useAppBridgeState: UseAppBridgeState;
+export {};

package/hooks/useAppBridgeState/useAppBridgeState.js

@@ -0,0 +1,75 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppBridgeState = void 0;
+var react_1 = require("react");
+var useAppBridge_1 = require("../../useAppBridge");
+var useAppBridgeState = function (query) {
+    var app = useAppBridge_1.useAppBridge();
+    var _a = react_1.useState(), state = _a[0], setState = _a[1];
+    var refresh = react_1.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var state, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!query) return [3 /*break*/, 2];
+                    return [4 /*yield*/, app.getState(query)];
+                case 1:
+                    _a = _b.sent();
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, app.getState()];
+                case 3:
+                    _a = _b.sent();
+                    _b.label = 4;
+                case 4:
+                    state = _a;
+                    setState(state);
+                    return [2 /*return*/, state];
+            }
+        });
+    }); }, [app, query]);
+    react_1.useEffect(function () {
+        refresh();
+        // Automatically check to see if the state has changed every time an action has been dispatched
+        return app.subscribe(function () {
+            refresh();
+        });
+    }, [app, refresh]);
+    return state;
+};
+exports.useAppBridgeState = useAppBridgeState;

package/hooks/useContextualSaveBar/index.js

@@ -1,4 +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/useLocale/index.d.ts

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

package/hooks/useLocale/index.js

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

package/hooks/useLocale/useLocale.d.ts

@@ -0,0 +1 @@
+export declare function useLocale(): string | undefined;

package/hooks/useLocale/useLocale.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocale = void 0;
+var useAppBridgeState_1 = require("../useAppBridgeState");
+function useLocale() {
+    return useAppBridgeState_1.useAppBridgeState('staffMember.locale');
+}
+exports.useLocale = useLocale;

package/hooks/useNavigationHistory/index.js

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

package/hooks/useToast/index.js

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

package/index.d.ts

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

package/index.js

@@ -7,11 +7,13 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     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);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppBridge = exports.Context = void 0;
 __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; } });
+__exportStar(require("./hooks"), exports);