@shopify/app-bridge-react 2.0.22 → 2.0.25

package/components/ResourcePicker/ResourcePicker.js

@@ -1,19 +1,4 @@
 "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 (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 __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -25,13 +10,13 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var actions_1 = require("@shopify/app-bridge/actions");
-var context_1 = require("../../context");
+exports.ResourceType = exports.ActionVerb = void 0;
+var react_1 = require("react");
+var ResourcePicker_1 = require("@shopify/app-bridge/actions/ResourcePicker");
+Object.defineProperty(exports, "ActionVerb", { enumerable: true, get: function () { return ResourcePicker_1.ActionVerb; } });
+Object.defineProperty(exports, "ResourceType", { enumerable: true, get: function () { return ResourcePicker_1.ResourceType; } });
+var useAppBridge_1 = require("../../useAppBridge");
 /**
  * ResourcePicker component
  *
@@ -40,92 +25,90 @@ var context_1 = require("../../context");
  *
  * @public
  */
-var ResourcePicker = /** @class */ (function (_super) {
-    __extends(ResourcePicker, _super);
-    function ResourcePicker() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.focusReturnPoint = null;
-        return _this;
-    }
-    ResourcePicker.prototype.componentDidMount = function () {
-        var _a = this.props, open = _a.open, resourceType = _a.resourceType, onSelection = _a.onSelection, onCancel = _a.onCancel;
-        var app = this.context;
-        this.picker = actions_1.ResourcePicker.create(app, {
-            resourceType: actions_1.ResourcePicker.ResourceType[resourceType],
-            options: this.getActionOptions(),
+function ResourcePicker(props) {
+    var app = useAppBridge_1.useAppBridge();
+    var focusReturnPoint = react_1.useRef(null);
+    var resourceType = props.resourceType, onSelection = props.onSelection, onCancel = props.onCancel, open = props.open;
+    // Initialize with open: false so the open action will dispatch on initial load
+    var prevProps = react_1.useRef({ open: false });
+    var picker = react_1.useMemo(function () {
+        return ResourcePicker_1.create(app, {
+            resourceType: ResourcePicker_1.ResourceType[resourceType],
+            options: getActionOptions(props),
         });
-        if (onSelection != null) {
-            this.picker.subscribe(actions_1.ResourcePicker.Action.SELECT, onSelection);
-        }
-        if (onCancel != null) {
-            this.picker.subscribe(actions_1.ResourcePicker.Action.CANCEL, onCancel);
-        }
-        if (open) {
-            this.focusReturnPoint = document.activeElement;
-            this.picker.dispatch(actions_1.ResourcePicker.Action.OPEN);
-        }
-    };
-    ResourcePicker.prototype.componentDidUpdate = function (prevProps) {
-        var wasOpen = prevProps.open;
-        var _a = this.props, open = _a.open, onCancel = _a.onCancel, onSelection = _a.onSelection;
-        this.picker.unsubscribe();
-        this.picker.set(this.getActionOptions());
-        if (onSelection != null) {
-            this.picker.subscribe(actions_1.ResourcePicker.Action.SELECT, onSelection);
-        }
-        if (onCancel != null) {
-            this.picker.subscribe(actions_1.ResourcePicker.Action.CANCEL, onCancel);
-        }
+        // We purposely want to reuse the same picker instance
+        // and use a useEffect to call `picker.set` when needed
+    }, [app]);
+    react_1.useEffect(function () {
+        var _a;
+        var wasOpen = (_a = prevProps.current) === null || _a === void 0 ? void 0 : _a.open;
         if (wasOpen !== open) {
             if (open) {
-                this.picker.dispatch(actions_1.ResourcePicker.Action.OPEN);
+                picker.dispatch(ResourcePicker_1.Action.OPEN);
             }
             else {
-                this.picker.dispatch(actions_1.ResourcePicker.Action.CLOSE);
+                picker.dispatch(ResourcePicker_1.Action.CLOSE);
             }
         }
         if (!wasOpen && open) {
-            this.focusReturnPoint = document.activeElement;
+            focusReturnPoint.current = document.activeElement;
         }
         else if (wasOpen &&
             !open &&
-            this.focusReturnPoint != null &&
-            document.contains(this.focusReturnPoint)) {
-            this.focusReturnPoint.focus();
-            this.focusReturnPoint = null;
+            focusReturnPoint.current != null &&
+            document.contains(focusReturnPoint.current)) {
+            focusReturnPoint.current.focus();
+            focusReturnPoint.current = null;
         }
-    };
-    ResourcePicker.prototype.componentWillUnmount = function () {
-        this.picker.unsubscribe();
-    };
-    ResourcePicker.prototype.render = function () {
-        return null;
-    };
-    ResourcePicker.prototype.getActionOptions = function () {
-        var _a = this.props, initialQuery = _a.initialQuery, initialSelectionIds = _a.initialSelectionIds, showHidden = _a.showHidden, allowMultiple = _a.allowMultiple, selectMultiple = _a.selectMultiple, actionVerb = _a.actionVerb;
-        var sharedOptions = {
-            initialQuery: initialQuery,
-            initialSelectionIds: initialSelectionIds,
-            showHidden: showHidden,
-            selectMultiple: selectMultiple !== null && selectMultiple !== void 0 ? selectMultiple : allowMultiple,
-            actionVerb: actionVerb,
+    }, [open]);
+    react_1.useEffect(function () {
+        var unsubscribeList = [];
+        if (onSelection != null) {
+            unsubscribeList.push(picker.subscribe(ResourcePicker_1.Action.SELECT, onSelection));
+        }
+        if (onCancel != null) {
+            unsubscribeList.push(picker.subscribe(ResourcePicker_1.Action.CANCEL, onCancel));
+        }
+        return function () {
+            var unsubscribe = unsubscribeList.pop();
+            while (unsubscribe) {
+                unsubscribe();
+                unsubscribe = unsubscribeList.pop();
+            }
         };
-        var result = sharedOptions;
-        if (this.props.resourceType === 'Product') {
-            var _b = this.props, showVariants = _b.showVariants, showDraft = _b.showDraft, showArchived = _b.showArchived, showDraftBadge = _b.showDraftBadge, showArchivedBadge = _b.showArchivedBadge;
-            var productSpecificOptions = {
-                showVariants: showVariants,
-                showDraft: showDraft,
-                showArchived: showArchived,
-                showDraftBadge: showDraftBadge,
-                showArchivedBadge: showArchivedBadge,
-            };
-            result = __assign(__assign({}, sharedOptions), productSpecificOptions);
+    }, [onSelection, onCancel]);
+    react_1.useEffect(function () {
+        var shouldUpdate = JSON.stringify(__assign(__assign({}, prevProps.current), { open: undefined })) !==
+            JSON.stringify(__assign(__assign({}, props), { open: undefined }));
+        if (!shouldUpdate) {
+            return;
         }
-        return result;
+        picker.set(getActionOptions(props));
+        prevProps.current = props;
+    }, [props]);
+    return null;
+}
+function getActionOptions(props) {
+    var initialQuery = props.initialQuery, initialSelectionIds = props.initialSelectionIds, showHidden = props.showHidden, allowMultiple = props.allowMultiple, selectMultiple = props.selectMultiple, actionVerb = props.actionVerb;
+    var sharedOptions = {
+        initialQuery: initialQuery,
+        initialSelectionIds: initialSelectionIds,
+        showHidden: showHidden,
+        selectMultiple: selectMultiple !== null && selectMultiple !== void 0 ? selectMultiple : allowMultiple,
+        actionVerb: actionVerb,
     };
-    ResourcePicker.contextType = context_1.AppBridgeContext;
-    ResourcePicker.ActionVerb = actions_1.ResourcePicker.ActionVerb;
-    return ResourcePicker;
-}(react_1.default.PureComponent));
+    var result = sharedOptions;
+    if (props.resourceType === 'Product') {
+        var showVariants = props.showVariants, showDraft = props.showDraft, showArchived = props.showArchived, showDraftBadge = props.showDraftBadge, showArchivedBadge = props.showArchivedBadge;
+        var productSpecificOptions = {
+            showVariants: showVariants,
+            showDraft: showDraft,
+            showArchived: showArchived,
+            showDraftBadge: showDraftBadge,
+            showArchivedBadge: showArchivedBadge,
+        };
+        result = __assign(__assign({}, sharedOptions), productSpecificOptions);
+    }
+    return result;
+}
 exports.default = ResourcePicker;

package/components/RoutePropagator/RoutePropagator.js

@@ -36,13 +36,13 @@ var RoutePropagator = /** @class */ (function (_super) {
     }
     RoutePropagator.prototype.componentDidMount = function () {
         var location = this.props.location;
-        (0, route_propagator_1.updateHistory)(this.context, location);
+        route_propagator_1.updateHistory(this.context, location);
     };
     RoutePropagator.prototype.componentDidUpdate = function (_a) {
         var prevLocation = _a.location;
         var location = this.props.location;
         if (location !== prevLocation) {
-            (0, route_propagator_1.updateHistory)(this.context, location);
+            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 | null;
+export declare function getTopWindow(): Window;
 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 = (0, useAppBridge_1.useAppBridge)();
-    (0, react_1.useEffect)(function () {
-        (0, route_propagator_1.updateHistory)(app, location);
+    var app = useAppBridge_1.useAppBridge();
+    react_1.useEffect(function () {
+        route_propagator_1.updateHistory(app, location);
     }, [app, location]);
 }
 exports.default = useRoutePropagation;

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 = (0, globals_1.getSelfWindow)();
-                    topWindow = (0, globals_1.getTopWindow)();
+                    selfWindow = globals_1.getSelfWindow();
+                    topWindow = 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 = "".concat(pathname).concat(search).concat(hash);
+                    locationStr = "" + pathname + search + 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 = (0, globals_1.getOrigin)();
+    var origin = 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("".concat(pathname).concat(search).concat(hash), origin);
+    return new URL("" + pathname + search + hash, origin);
 }

package/components/TitleBar/TitleBar.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ActionProps, ActionGroupProps, Target } from '../../types';
 export interface Breadcrumb {
     /** Content the action displays */
@@ -16,8 +15,8 @@ export interface Breadcrumb {
 export interface Props {
     /** TitleBar title */
     title: string;
-    /** Collection of breadcrumbs */
-    breadcrumbs?: Breadcrumb[];
+    /** The current breadcrumb; only displays the last item in array */
+    breadcrumbs?: Breadcrumb | Breadcrumb[];
     /** Primary TitleBar action */
     primaryAction?: ActionProps;
     /** Collection of secondary TitleBar actions */
@@ -25,14 +24,4 @@ export interface Props {
     /** Collection of TitleBar groups of secondary actions */
     actionGroups?: ActionGroupProps[];
 }
-declare class TitleBar extends React.PureComponent<Props, never> {
-    static contextType: React.Context<import("../../context").IAppBridgeContext>;
-    private titleBar;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    render(): null;
-    private transformProps;
-    private transformBreadcrumbs;
-}
-export default TitleBar;
+export default function TitleBar(props: Props): null;

package/components/TitleBar/TitleBar.js

@@ -1,80 +1,55 @@
 "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 (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 __());
-    };
-})();
-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 react_1 = require("react");
+var Button_1 = require("@shopify/app-bridge/actions/Button");
+var TitleBar_1 = require("@shopify/app-bridge/actions/TitleBar");
 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: (0, 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 = (0, transformers_1.generateRedirect)(app, url, target);
-        if (redirect != null) {
-            button.subscribe(actions_1.Button.Action.CLICK, redirect);
+var useAppBridge_1 = require("../../useAppBridge");
+function TitleBar(props) {
+    var app = useAppBridge_1.useAppBridge();
+    var titleBar = react_1.useMemo(function () {
+        return TitleBar_1.create(app, transformProps(app, props));
+    }, [app]);
+    var currentProps = react_1.useRef(props);
+    react_1.useEffect(function () {
+        var propsChanged = JSON.stringify(currentProps.current) !== JSON.stringify(props);
+        if (propsChanged) {
+            currentProps.current = props;
         }
-        if (onAction != null) {
-            button.subscribe(actions_1.Button.Action.CLICK, onAction);
-        }
-        return button;
-    };
-    TitleBar.contextType = context_1.AppBridgeContext;
-    return TitleBar;
-}(react_1.default.PureComponent));
+        titleBar.set(transformProps(app, props), propsChanged);
+    }, [titleBar, props]);
+    react_1.useEffect(function () {
+        return function () {
+            titleBar.unsubscribe();
+        };
+    }, [titleBar]);
+    return null;
+}
 exports.default = TitleBar;
+function transformProps(app, _a) {
+    var actionGroups = _a.actionGroups, breadcrumbs = _a.breadcrumbs, primaryAction = _a.primaryAction, secondaryActions = _a.secondaryActions, title = _a.title;
+    var breadcrumb = Array.isArray(breadcrumbs) ? breadcrumbs[breadcrumbs.length - 1] : breadcrumbs;
+    return {
+        title: title,
+        buttons: transformers_1.transformActions(app, {
+            primaryAction: primaryAction,
+            secondaryActions: secondaryActions,
+            actionGroups: actionGroups,
+        }),
+        breadcrumbs: breadcrumb ? transformBreadcrumb(app, breadcrumb) : undefined,
+    };
+}
+function transformBreadcrumb(app, breadcrumb) {
+    var url = breadcrumb.url, onAction = breadcrumb.onAction, target = breadcrumb.target, content = breadcrumb.content;
+    var button = Button_1.create(app, {
+        label: content || '',
+    });
+    var redirect = transformers_1.generateRedirect(app, url, target);
+    if (redirect) {
+        button.subscribe(Button_1.Action.CLICK, redirect);
+    }
+    if (onAction) {
+        button.subscribe(Button_1.Action.CLICK, onAction);
+    }
+    return button;
+}

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

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = 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);
+    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];
@@ -17,21 +13,23 @@ 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;
+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 __importDefault(ContextualSaveBar_1).default; } });
-var Provider_1 = require("./Provider");
-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 __importDefault(Loading_1).default; } });
-var Toast_1 = require("./Toast");
-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 __importDefault(TitleBar_1).default; } });
 var Modal_1 = require("./Modal");
 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 __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,4 +1,4 @@
-import { ClientApplication } from '@shopify/app-bridge/client';
+import type { ClientApplication } from '@shopify/app-bridge/client';
 /**
  * App Bridge context consumer type.
  *

package/context.js

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

package/hooks/index.d.ts

@@ -1,3 +1,8 @@
 export { useContextualSaveBar } from './useContextualSaveBar';
+export { useFeaturesAvailable } from './useFeaturesAvailable';
+export { useFeatureRequest } from './useFeatureRequest';
+export type { FeaturesAvailable } from './useFeaturesAvailable';
 export { useNavigationHistory } from './useNavigationHistory';
 export { useToast } from './useToast';
+export { useAppBridgeState } from './useAppBridgeState';
+export { useNavigate } from './useNavigate';

package/hooks/index.js

@@ -1,9 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useToast = exports.useNavigationHistory = exports.useContextualSaveBar = void 0;
+exports.useNavigate = exports.useAppBridgeState = exports.useToast = exports.useNavigationHistory = exports.useFeatureRequest = exports.useFeaturesAvailable = exports.useContextualSaveBar = void 0;
 var useContextualSaveBar_1 = require("./useContextualSaveBar");
 Object.defineProperty(exports, "useContextualSaveBar", { enumerable: true, get: function () { return useContextualSaveBar_1.useContextualSaveBar; } });
+var useFeaturesAvailable_1 = require("./useFeaturesAvailable");
+Object.defineProperty(exports, "useFeaturesAvailable", { enumerable: true, get: function () { return useFeaturesAvailable_1.useFeaturesAvailable; } });
+var useFeatureRequest_1 = require("./useFeatureRequest");
+Object.defineProperty(exports, "useFeatureRequest", { enumerable: true, get: function () { return useFeatureRequest_1.useFeatureRequest; } });
 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; } });
+var useNavigate_1 = require("./useNavigate");
+Object.defineProperty(exports, "useNavigate", { enumerable: true, get: function () { return useNavigate_1.useNavigate; } });

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