@shopify/app-bridge-react 2.1.0 → 3.1.0

package/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.1.0](https://github.com/Shopify/app-bridge/compare/v3.0.1...v3.1.0) (2022-06-13)
+
+
+### Bug Fixes
+
+* fixed issue with host not being provided upon redirect of apps ([0fc846a](https://github.com/Shopify/app-bridge/commit/0fc846a91faf959ebcff11e089862c2d52d888d7))
+* remove global unsubscribe from useContextualSaveBar ([3d315ed](https://github.com/Shopify/app-bridge/commit/3d315ed14cf2f210d2d6febd6fecd17326d71331))
+
+
+### Features
+
+* adding loadMore to picker ([c4488e2](https://github.com/Shopify/app-bridge/commit/c4488e2c7ba83b8eba1cacf7c918bd38fe01d537))
+* adds a picker example for playgrounds ([4a65e36](https://github.com/Shopify/app-bridge/commit/4a65e360014d04539e56d249661225b92746cd86))
+
+
+
+
+
+## [3.0.1](https://github.com/Shopify/app-bridge/compare/v3.0.0...v3.0.1) (2022-06-02)
+
+
+### Bug Fixes
+
+* add types for useRef ([9a421ac](https://github.com/Shopify/app-bridge/commit/9a421ac22ef03ce2d409d203e9498fc51b917ad9))
+* rename Picker to unstable_Picker ([f82eab7](https://github.com/Shopify/app-bridge/commit/f82eab7629f64ae312847e0e49dd6d21f11aef8b))
+* update missing picker ([7fefc00](https://github.com/Shopify/app-bridge/commit/7fefc00a0ec11fa21b8b83c9e5df8d2e8edb20e7))
+* update preProps and args for useEffect ([c44ef10](https://github.com/Shopify/app-bridge/commit/c44ef102d4964f837dbbe434e1ea8e51fc211bd1))
+* use default items for picker ([5cf5eae](https://github.com/Shopify/app-bridge/commit/5cf5eae18114a546586fe7534c27213fb7008d3d))
+
+
+### Features
+
+* add input props ([d2ebb13](https://github.com/Shopify/app-bridge/commit/d2ebb130dfddee65d9d3ad7c39d716a219d29a9d))
+* add Picker react component ([bea5429](https://github.com/Shopify/app-bridge/commit/bea542924e845f7b98ca76d1ff3b5b532121da27))
+
+
+
+
+
+# [3.0.0](https://github.com/Shopify/app-bridge/compare/v2.1.0...v3.0.0) (2022-05-24)
+
+
+### Features
+
+* update useContextualSaveBar API ([4a5477f](https://github.com/Shopify/app-bridge/commit/4a5477f06f879b377bcc18e197205fbd3bc1b5d6))
+* update useToast API to match UI Extensions pattern ([157363d](https://github.com/Shopify/app-bridge/commit/157363d1439acfc14cf5c44d452c1bbb3b9a2cf1))
+
+
+
+
+
 # [2.1.0](https://github.com/Shopify/app-bridge/compare/v2.0.30...v2.1.0) (2022-05-24)
 
 **Note:** Version bump only for package @shopify/app-bridge-react

package/README.md

@@ -1,7 +1,5 @@
 # `@shopify/app-bridge-react`
 
-**Shopify is doubling our engineering staff in 2021! [Join our team and work on libraries like this one.](https://smrtr.io/5GGrc)**
-
 Shopify App Bridge offers React component wrappers for some App Bridge actions. This is a great option if you are already using React and want to follow familiar patterns.
 
 Instead of using App Bridge actions directly:
@@ -74,6 +72,96 @@ function RedirectButton() {
 }
 ```
 
+## Migrating from 2.x.x to 3.0.0
+
+There are two breaking API changes in version 3.0.0.
+
+- `useContextualSaveBar`
+- `useToast`
+
+### useContextualSaveBar
+
+In version 2.x.x, `useContextualSaveBar` was called with all of its options. It then created the contextual save bar and dispatched show and hide functions as an internal side effect based on the `visible` prop and any changes in options. It did not return anything.
+
+#### Example code
+
+```tsx
+useContextualSaveBar({
+  discardAction,
+  saveAction,
+  fullWidth,
+  leaveConfirmationDisable,
+  visible,
+});
+```
+
+In version 3.0.0, `useContextualSaveBar` becomes more declarative. The hook is called without any props and it returns several objects and methods that can be used to update contextual save bar options, as well as to show and hide the component.
+
+#### Example code
+
+```tsx
+const {show, hide, saveAction, discardAction} = useContextualSaveBar();
+const fullWidth = true;
+const leaveConfirmationDisabled = false;
+
+<Button
+  primary
+  onClick={() => {
+    show(fullWidth, leaveConfirmationDisabled);
+    discardAction.setOptions({onAction: () => console.log('On discard')});
+    saveAction.setOptions({onAction: () => console.log('On save')});
+  }}
+>
+  Show ContextualSaveBar
+</Button>
+<Button onClick={hide}>Hide ContextualSaveBar</Button>
+```
+
+See [useContextualSaveBar docs](https://shopify.dev/apps/tools/app-bridge/react-components/contextual-save-bar) for more details.
+
+### useToast
+
+In version 2.x.x, `useToast` returns a `show` method that accepts one prop - an object with the following properties:
+
+- `content`
+- `duration`
+- `isError`
+- `onDismiss`
+
+All the props except `content` are optional.
+
+#### Example code
+
+```tsx
+const {show} = useToast
+
+show({
+  content: 'Success!,
+  duration: 2000,
+  isError: false,
+  onDismiss: () => console.log('Dismissed'),
+})
+```
+
+In version 3.0.0, the `content` moves to a top-level prop and the remaining properties are passed in as an optional options prop (all properties in the options object remain optional).
+`
+
+#### Example code
+
+```tsx
+const {show} = useToast;
+
+show('Success!', {
+  duration: 2000,
+  isError: false,
+  onDismiss: () => console.log('Dismissed'),
+});
+```
+
+See [useToast docs](https://shopify.dev/apps/tools/app-bridge/react-components/toast) for more details.
+
+## Legacy support
+
 If you are using App Bridge `v1.24.0` and below, or your project does not support React hooks, alternative methods on how to access `app` can be found in the [Provider docs](https://shopify.dev/tools/app-bridge/react-components/provider#accessing-the-app-bridge-client-directly).
 
 See [Shopify Developers](https://shopify.dev/tools/app-bridge/react-components) for full documentation.

package/components/ContextualSaveBar/ContextualSaveBar.d.ts

@@ -1,9 +1,9 @@
 import type { ContextAction, DiscardAction } from '@shopify/app-bridge/actions/ContextualSaveBar';
 export interface Props {
-    discardAction: DiscardAction & {
+    discardAction?: DiscardAction & {
         onAction(): void;
     };
-    saveAction: ContextAction & {
+    saveAction?: ContextAction & {
         onAction(): void;
     };
     fullWidth?: boolean;

package/components/ContextualSaveBar/ContextualSaveBar.js

@@ -16,7 +16,7 @@ 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 _b = _a.discardAction, discardAction = _b === void 0 ? { onAction: function () { return null; } } : _b, _c = _a.saveAction, saveAction = _c === void 0 ? { onAction: function () { return null; } } : _c, fullWidth = _a.fullWidth, leaveConfirmationDisable = _a.leaveConfirmationDisable, visible = _a.visible;
     var app = useAppBridge_1.useAppBridge();
     var onSaveAction = saveAction.onAction, saveActionProps = __rest(saveAction, ["onAction"]);
     var onDiscardAction = discardAction.onAction, discardActionProps = __rest(discardAction, ["onAction"]);
@@ -50,7 +50,7 @@ function ContextualSaveBar(_a) {
         return function () {
             contextualSaveBar.unsubscribe();
         };
-    }, [contextualSaveBar]);
+    }, [contextualSaveBar, onDiscardAction, onSaveAction]);
     react_1.useEffect(function () {
         if (visible) {
             contextualSaveBar.dispatch(Action.SHOW);

package/components/Provider/Provider.js

@@ -35,7 +35,15 @@ var packageJson = require('../../package.json');
  */
 function Provider(_a) {
     var config = _a.config, router = _a.router, children = _a.children;
-    var app = react_1.useMemo(function () { return app_bridge_1.default(config); }, [JSON.stringify(config)]);
+    /**
+     * We are intentionally ignoring the `config` prop here as it yields a
+     * bug on apps build with Next.js which loses the `host` query param
+     * upon redirect.
+     *
+     * This was the behavior of the original `Provider` component prior to
+     * the refactor in version 2.0.25.
+     */
+    var app = react_1.useMemo(function () { return app_bridge_1.default(config); }, []);
     react_1.useEffect(function () {
         if (app === null || app === void 0 ? void 0 : app.hooks) {
             app.hooks.set(app_bridge_1.LifecycleHook.DispatchAction, exports.setClientInterfaceHook);

package/components/index.d.ts

@@ -6,5 +6,6 @@ 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 { default as unstable_Picker } from './unstable_Picker';
 export * from './RoutePropagator';
 export * from './ClientRouter';

package/components/index.js

@@ -13,7 +13,7 @@ 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;
+exports.unstable_Picker = 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 Loading_1 = require("./Loading");
@@ -31,5 +31,7 @@ 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; } });
+var unstable_Picker_1 = require("./unstable_Picker");
+Object.defineProperty(exports, "unstable_Picker", { enumerable: true, get: function () { return __importDefault(unstable_Picker_1).default; } });
 __exportStar(require("./RoutePropagator"), exports);
 __exportStar(require("./ClientRouter"), exports);

package/components/unstable_Picker/index.d.ts

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

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

package/components/unstable_Picker/unstable_Picker.d.ts

@@ -0,0 +1,23 @@
+import { SearchPayload, SelectPayload, EmptySearchLabel } from '@shopify/app-bridge/actions/Picker';
+import type { BaseResource } from '@shopify/app-bridge/actions/Picker';
+/**
+ * @unstable This API may be updated without warning in the future
+ */
+export interface Props {
+    open: boolean;
+    items: BaseResource[];
+    selectedItems?: BaseResource[];
+    maxSelectable?: number;
+    title?: string;
+    loading?: boolean;
+    searchQueryPlaceholder?: string;
+    searchQuery?: string;
+    primaryActionLabel?: string;
+    secondaryActionLabel?: string;
+    emptySearchLabel?: EmptySearchLabel;
+    onCancel?(): void;
+    onSelect?(selectPayload: SelectPayload): void;
+    onSearch?(searchPayload: SearchPayload): void;
+    onLoadMore?(): void;
+}
+export default function Picker(props: Props): null;

package/components/unstable_Picker/unstable_Picker.js

@@ -0,0 +1,78 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var Picker_1 = require("@shopify/app-bridge/actions/Picker");
+var useAppBridge_1 = require("../../useAppBridge");
+function Picker(props) {
+    var app = useAppBridge_1.useAppBridge();
+    var prevProps = react_1.useRef({ open: false });
+    var picker = react_1.useMemo(function () { return Picker_1.create(app, getActionOptions(props)); }, [app]);
+    react_1.useEffect(function () {
+        var _a;
+        if (!props.open && ((_a = prevProps.current) === null || _a === void 0 ? void 0 : _a.open) === props.open) {
+            return;
+        }
+        if (props.open) {
+            picker.dispatch(Picker_1.Action.OPEN);
+        }
+        else {
+            picker.dispatch(Picker_1.Action.CANCEL);
+        }
+    }, [props.open]);
+    react_1.useEffect(function () {
+        var unsubscribeList = [];
+        if (props.onSelect) {
+            unsubscribeList.push(picker.subscribe(Picker_1.Action.SELECT, props.onSelect));
+        }
+        if (props.onCancel) {
+            unsubscribeList.push(picker.subscribe(Picker_1.Action.CANCEL, props.onCancel));
+        }
+        if (props.onSearch) {
+            unsubscribeList.push(picker.subscribe(Picker_1.Action.SEARCH, props.onSearch));
+        }
+        if (props.onLoadMore) {
+            unsubscribeList.push(picker.subscribe(Picker_1.Action.LOAD_MORE, props.onLoadMore));
+        }
+        return function () {
+            unsubscribeList.forEach(function (unsubscribe) { return unsubscribe(); });
+        };
+    }, [props.onSelect, props.onCancel, props.onSearch]);
+    react_1.useEffect(function () {
+        var shouldUpdate = JSON.stringify(__assign(__assign({}, prevProps.current), { open: undefined })) !==
+            JSON.stringify(__assign(__assign({}, props), { open: undefined }));
+        if (!shouldUpdate) {
+            return;
+        }
+        picker.set(getActionOptions(props));
+        prevProps.current = props;
+    }, [props]);
+    return null;
+}
+exports.default = Picker;
+function getActionOptions(_a) {
+    var items = _a.items, selectedItems = _a.selectedItems, maxSelectable = _a.maxSelectable, title = _a.title, loading = _a.loading, searchQueryPlaceholder = _a.searchQueryPlaceholder, searchQuery = _a.searchQuery, primaryActionLabel = _a.primaryActionLabel, secondaryActionLabel = _a.secondaryActionLabel, emptySearchLabel = _a.emptySearchLabel;
+    var result = {
+        items: items,
+        selectedItems: selectedItems,
+        maxSelectable: maxSelectable,
+        title: title,
+        loading: loading,
+        searchQueryPlaceholder: searchQueryPlaceholder,
+        searchQuery: searchQuery,
+        primaryActionLabel: primaryActionLabel,
+        secondaryActionLabel: secondaryActionLabel,
+        emptySearchLabel: emptySearchLabel,
+    };
+    return result;
+}

package/hooks/index.d.ts

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

package/hooks/index.js

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

@@ -1,13 +1,31 @@
 import type { ContextAction, DiscardAction } from '@shopify/app-bridge/actions/ContextualSaveBar';
-export interface Props {
-    discardAction: DiscardAction & {
-        onAction(): void;
+interface ShowOptions {
+    fullWidth?: boolean;
+    leaveConfirmationDisabled?: boolean;
+}
+interface SaveActionOptions extends ContextAction {
+    onAction?: () => void;
+}
+interface DiscardActionOptions extends DiscardAction {
+    onAction?: () => void;
+}
+interface ContextualSaveBarHook {
+    show: ({ fullWidth, leaveConfirmationDisabled }?: ShowOptions) => void;
+    hide: () => void;
+    saveAction: {
+        setOptions: (options: Partial<SaveActionOptions>) => void;
     };
-    saveAction: ContextAction & {
-        onAction(): void;
+    discardAction: {
+        setOptions: (options: Partial<DiscardActionOptions>) => void;
     };
-    fullWidth?: boolean;
-    leaveConfirmationDisable?: boolean;
-    visible?: boolean;
 }
-export declare function useContextualSaveBar({ discardAction, saveAction, fullWidth, leaveConfirmationDisable, visible, }: Props): null;
+/**
+ * useContextualSaveBar hook
+ *
+ * @remarks
+ * React hook which wraps the Shopify App Bridge ContextualSaveBar action.
+ *
+ * @public
+ */
+export declare function useContextualSaveBar(): ContextualSaveBarHook;
+export {};

package/hooks/useContextualSaveBar/useContextualSaveBar.js

@@ -15,54 +15,60 @@ exports.useContextualSaveBar = void 0;
 var react_1 = require("react");
 var ContextualSaveBar_1 = require("@shopify/app-bridge/actions/ContextualSaveBar");
 var useAppBridge_1 = require("../../useAppBridge");
-function useContextualSaveBar(_a) {
-    var discardAction = _a.discardAction, saveAction = _a.saveAction, fullWidth = _a.fullWidth, leaveConfirmationDisable = _a.leaveConfirmationDisable, visible = _a.visible;
+/**
+ * useContextualSaveBar hook
+ *
+ * @remarks
+ * React hook which wraps the Shopify App Bridge ContextualSaveBar action.
+ *
+ * @public
+ */
+function useContextualSaveBar() {
     var app = useAppBridge_1.useAppBridge();
-    var onSaveAction = saveAction.onAction, saveActionProps = __rest(saveAction, ["onAction"]);
-    var onDiscardAction = discardAction.onAction, discardActionProps = __rest(discardAction, ["onAction"]);
-    /* We want to reuse the same ContextualSaveBar instance, even when props change
-     * (so we don't include all the props in the dependency array).
-     * Instead of recreating the component on every change, we use the set method,
-     * in the useEffect block below, to dispatch updates when props change.
-     */
+    var _a = react_1.useState(), onSaveAction = _a[0], setOnSaveAction = _a[1];
+    var _b = react_1.useState(), onDiscardAction = _b[0], setOnDiscardAction = _b[1];
     var contextualSaveBar = react_1.useMemo(function () {
-        return ContextualSaveBar_1.create(app, {
-            saveAction: saveActionProps,
-            discardAction: discardActionProps,
-            fullWidth: fullWidth,
-            leaveConfirmationDisable: leaveConfirmationDisable,
-        });
+        return ContextualSaveBar_1.create(app);
     }, [app]);
-    react_1.useEffect(function () {
-        contextualSaveBar.set({
-            saveAction: saveActionProps,
-            discardAction: discardActionProps,
-            fullWidth: fullWidth,
-            leaveConfirmationDisable: leaveConfirmationDisable,
-        }, Boolean(visible));
-    }, [
-        contextualSaveBar,
-        saveActionProps,
-        discardActionProps,
-        fullWidth,
-        leaveConfirmationDisable,
-        visible,
-    ]);
-    react_1.useEffect(function () {
-        contextualSaveBar.subscribe(ContextualSaveBar_1.Action.DISCARD, onDiscardAction);
-        contextualSaveBar.subscribe(ContextualSaveBar_1.Action.SAVE, onSaveAction);
-        return function () {
-            contextualSaveBar.unsubscribe();
-        };
+    var show = react_1.useCallback(function (options) {
+        contextualSaveBar.dispatch(ContextualSaveBar_1.Action.SHOW);
+        if (options) {
+            contextualSaveBar.set(options);
+        }
+    }, [contextualSaveBar]);
+    var hide = react_1.useCallback(function () {
+        contextualSaveBar.dispatch(ContextualSaveBar_1.Action.HIDE);
     }, [contextualSaveBar]);
+    var saveAction = react_1.useMemo(function () { return ({
+        setOptions: function (_a) {
+            var onAction = _a.onAction, saveAction = __rest(_a, ["onAction"]);
+            setOnSaveAction(function () { return onAction; });
+            if (Object.keys(saveAction).length) {
+                contextualSaveBar.set({ saveAction: saveAction });
+            }
+        },
+    }); }, [contextualSaveBar]);
+    var discardAction = react_1.useMemo(function () { return ({
+        setOptions: function (_a) {
+            var onAction = _a.onAction, discardAction = __rest(_a, ["onAction"]);
+            setOnDiscardAction(function () { return onAction; });
+            if (Object.keys(discardAction).length) {
+                contextualSaveBar.set({ discardAction: discardAction });
+            }
+        },
+    }); }, [contextualSaveBar]);
     react_1.useEffect(function () {
-        if (visible) {
-            contextualSaveBar.dispatch(ContextualSaveBar_1.Action.SHOW);
-        }
-        else {
+        return contextualSaveBar.subscribe(ContextualSaveBar_1.Action.DISCARD, function () {
             contextualSaveBar.dispatch(ContextualSaveBar_1.Action.HIDE);
-        }
-    }, [contextualSaveBar, visible]);
-    return null;
+            onDiscardAction === null || onDiscardAction === void 0 ? void 0 : onDiscardAction();
+        });
+    }, [contextualSaveBar, onDiscardAction]);
+    react_1.useEffect(function () {
+        return contextualSaveBar.subscribe(ContextualSaveBar_1.Action.SAVE, function () {
+            contextualSaveBar.dispatch(ContextualSaveBar_1.Action.HIDE);
+            onSaveAction === null || onSaveAction === void 0 ? void 0 : onSaveAction();
+        });
+    }, [contextualSaveBar, onSaveAction]);
+    return { show: show, hide: hide, saveAction: saveAction, discardAction: discardAction };
 }
 exports.useContextualSaveBar = useContextualSaveBar;

package/hooks/useToast/useToast.d.ts

@@ -9,7 +9,5 @@ export declare const DEFAULT_TOAST_DURATION = 5000;
  * @public
  */
 export declare function useToast(): {
-    show: ({ content: message, duration, isError, onDismiss, }: Omit<Payload, 'message'> & {
-        content: string;
-    }) => void;
+    show: (content: string, options?: Partial<Omit<Payload, "message">> | undefined) => void;
 };

package/hooks/useToast/useToast.js

@@ -15,22 +15,25 @@ exports.DEFAULT_TOAST_DURATION = 5000;
  */
 function useToast() {
     var app = useAppBridge_1.useAppBridge();
-    var toast;
-    var show = react_1.useCallback(function (_a) {
-        var message = _a.content, _b = _a.duration, duration = _b === void 0 ? exports.DEFAULT_TOAST_DURATION : _b, isError = _a.isError, onDismiss = _a.onDismiss;
-        toast = Toast_1.create(app, {
-            message: message,
-            isError: isError,
-            duration: duration,
+    var toastList = react_1.useRef([]);
+    var show = react_1.useCallback(function (content, options) {
+        var toast = Toast_1.create(app, {
+            message: content,
+            isError: options === null || options === void 0 ? void 0 : options.isError,
+            duration: (options === null || options === void 0 ? void 0 : options.duration) || exports.DEFAULT_TOAST_DURATION,
         });
         toast.dispatch(Toast_1.Action.SHOW);
-        if (onDismiss) {
-            toast.subscribe(Toast_1.Action.CLEAR, onDismiss);
-        }
+        toastList.current.push(toast);
+        toast.subscribe(Toast_1.Action.CLEAR, function () {
+            var _a;
+            (_a = options === null || options === void 0 ? void 0 : options.onDismiss) === null || _a === void 0 ? void 0 : _a.call(options);
+            toastList.current.splice(toastList.current.indexOf(toast), 1);
+            toast.unsubscribe();
+        });
     }, [app]);
     react_1.useEffect(function () {
         return function () {
-            toast.unsubscribe();
+            toastList.current.forEach(function (toast) { return toast === null || toast === void 0 ? void 0 : toast.unsubscribe(); });
         };
     }, []);
     return { show: show };

package/index.d.ts

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

package/index.js

@@ -11,9 +11,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 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("./components"), exports);
 __exportStar(require("./hooks"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/app-bridge-react",
-  "version": "2.1.0",
+  "version": "3.1.0",
   "types": "index.d.ts",
   "main": "index.js",
   "unpkg": "umd/index.js",
@@ -45,7 +45,7 @@
     }
   ],
   "dependencies": {
-    "@shopify/app-bridge": "^2.1.0"
+    "@shopify/app-bridge": "^3.1.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.38",
@@ -55,5 +55,5 @@
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "3f9ec90cff99477051a99d1afb211d55e1deb552"
+  "gitHead": "96e96d4f031f7598c3561c808f4960faa0f9cfb2"
 }