@shopify/app-bridge-react 3.1.1 → 3.1.3

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.3](https://github.com/Shopify/app-bridge/compare/v3.1.2...v3.1.3) (2022-07-19)
+
+
+### Bug Fixes
+
+* fix ResourcePicker open state ([78dd608](https://github.com/Shopify/app-bridge/commit/78dd6080643fb9d34ca1f11ab874b88aea45ee78))
+* fix unstable Picker react open state ([3ed048a](https://github.com/Shopify/app-bridge/commit/3ed048ab29a7dbded57f776bd37538b8590af640))
+
+
+
+
+
+## [3.1.2](https://github.com/Shopify/app-bridge/compare/v3.1.1...v3.1.2) (2022-07-13)
+
+
+### Bug Fixes
+
+* hide ContextualSaveBar when component is unmount in app-bridge-react ([1cb7a43](https://github.com/Shopify/app-bridge/commit/1cb7a43499bf5908f24dd12db44505b78e3e61cf))
+* hide Picker when component is unmount in app-bridge-react ([6ffc931](https://github.com/Shopify/app-bridge/commit/6ffc93193723cdfbd6ec7ea3e2461ade466a7997))
+
+
+
+
+
 ## [3.1.1](https://github.com/Shopify/app-bridge/compare/v3.1.0...v3.1.1) (2022-06-15)
 
 **Note:** Version bump only for package @shopify/app-bridge-react

package/README.md

@@ -1,5 +1,11 @@
 # `@shopify/app-bridge-react`
 
+**[Join our team and work on libraries like this one.](https://www.shopify.ca/careers)**
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md)
+[![npm version](https://badge.fury.io/js/%40shopify%2Fapp-bridge-react.svg)](https://badge.fury.io/js/%40shopify%2Fapp-bridge-react.svg)
+[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/app-bridge-react.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/app-bridge-react.svg)
+
 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:
@@ -163,7 +169,3 @@ See [useToast docs](https://shopify.dev/apps/tools/app-bridge/react-components/t
 ## 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.
-
-[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md)

package/components/ContextualSaveBar/ContextualSaveBar.js

@@ -18,6 +18,8 @@ var Action = actions_1.ContextualSaveBar.Action, create = actions_1.ContextualSa
 function ContextualSaveBar(_a) {
     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 visibleRef = react_1.useRef(visible);
+    visibleRef.current = visible;
     var onSaveAction = saveAction.onAction, saveActionProps = __rest(saveAction, ["onAction"]);
     var onDiscardAction = discardAction.onAction, discardActionProps = __rest(discardAction, ["onAction"]);
     var contextualSaveBar = react_1.useMemo(function () {
@@ -28,6 +30,13 @@ function ContextualSaveBar(_a) {
             leaveConfirmationDisable: leaveConfirmationDisable,
         });
     }, [app]);
+    react_1.useEffect(function () {
+        return function () {
+            if (visibleRef.current) {
+                contextualSaveBar.dispatch(Action.HIDE);
+            }
+        };
+    }, []);
     react_1.useEffect(function () {
         contextualSaveBar.set({
             saveAction: saveActionProps,

package/components/ResourcePicker/ResourcePicker.d.ts

@@ -1,56 +1,24 @@
 import { ActionVerb, ResourceType } from '@shopify/app-bridge/actions/ResourcePicker';
 import type { BaseResource, Options, ResourceSelection, ProductOptions } from '@shopify/app-bridge/actions/ResourcePicker';
 export interface SelectPayload {
-    /** The selected resources
-     * @see {@link https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/resourcepicker|resource picker documentation} for more information
-     */
     selection: ResourceSelection[];
 }
-interface BaseProps {
-    /** Whether the picker is open or not */
+interface BaseProps extends Options {
     open: boolean;
-    /** GraphQL initial search query for filtering resources available in the picker
-     * @see {@link https://help.shopify.com/en/api/getting-started/search-syntax|search syntax} for more information
-     */
-    initialQuery?: string;
-    /** Resources that should already be selected when the picker is opened */
-    initialSelectionIds?: BaseResource[];
-    /** Show products that are not published on the Online Store */
-    showHidden?: boolean;
     /**
      * @deprecated as of 1.28.0
      */
-    /** Whether to allow selection of multiple items */
     allowMultiple?: boolean;
-    /** Whether to allow selection of multiple items, or the maximum number of selected items */
-    selectMultiple?: boolean | number;
-    /** Override default action verb `Add`. The actionVerb appears in the title `<actionVerb>` `<resourceType>` and as the primary action of the resource picker. */
-    actionVerb?: ActionVerb;
-    /** Callback when a selection has been made */
     onSelection?(selectPayload: SelectPayload): void;
-    /** Callback when the picker is closed without selection */
     onCancel?(): void;
 }
-export interface ProductPickerProps extends BaseProps {
-    /** The type of resource you want to pick */
+export interface ProductPickerProps extends BaseProps, ProductOptions {
     resourceType: 'Product';
-    /** Whether to show product variants or not. Only applies to the product resource type picker */
-    showVariants?: boolean;
-    /** Whether to show draft products or not. Only applies to the product resource type picker */
-    showDraft?: boolean;
-    /** Whether to show archived products or not. Only applies to the product resource type picker */
-    showArchived?: boolean;
-    /** Whether to show draft badge for draft products or not. Only works when `showDraft` prop is set, and only applies to the product resource type picker */
-    showDraftBadge?: boolean;
-    /** Whether to show archived badge for archived products or not. Only works when `showArchived` prop is set, and only applies to the product resource type picker */
-    showArchivedBadge?: boolean;
 }
 export interface ProductVariantProps extends BaseProps {
-    /** The type of resource you want to pick */
     resourceType: 'ProductVariant';
 }
 export interface CollectionPickerProps extends BaseProps {
-    /** The type of resource you want to pick */
     resourceType: 'Collection';
 }
 export declare type Props = ProductPickerProps | ProductVariantProps | CollectionPickerProps;
@@ -62,7 +30,7 @@ export declare type Props = ProductPickerProps | ProductVariantProps | Collectio
  *
  * @public
  */
-declare function ResourcePicker(props: Props): null;
+declare function ResourcePicker({ open, resourceType, onSelection, onCancel, allowMultiple, selectMultiple, ...props }: Props): null;
 export default ResourcePicker;
 export type { BaseResource, Options, ProductOptions };
 export { ActionVerb, ResourceType };

package/components/ResourcePicker/ResourcePicker.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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 });
 exports.ResourceType = exports.ActionVerb = void 0;
 var react_1 = require("react");
@@ -25,90 +36,85 @@ var useAppBridge_1 = require("../../useAppBridge");
  *
  * @public
  */
-function ResourcePicker(props) {
+function ResourcePicker(_a) {
+    var open = _a.open, resourceType = _a.resourceType, onSelection = _a.onSelection, onCancel = _a.onCancel, allowMultiple = _a.allowMultiple, selectMultiple = _a.selectMultiple, props = __rest(_a, ["open", "resourceType", "onSelection", "onCancel", "allowMultiple", "selectMultiple"]);
+    var options = react_1.useMemo(function () { return (__assign(__assign({}, props), { selectMultiple: selectMultiple !== null && selectMultiple !== void 0 ? selectMultiple : allowMultiple })); }, [allowMultiple, props, selectMultiple]);
     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 isUnmountedRef = react_1.useRef(false);
+    react_1.useEffect(function () { return function () {
+        isUnmountedRef.current = true;
+    }; }, []);
+    var openRef = react_1.useRef(false);
+    var optionsRef = react_1.useRef(options);
     var picker = react_1.useMemo(function () {
         return ResourcePicker_1.create(app, {
             resourceType: ResourcePicker_1.ResourceType[resourceType],
-            options: getActionOptions(props),
+            options: optionsRef.current,
         });
-        // We purposely want to reuse the same picker instance
-        // and use a useEffect to call `picker.set` when needed
-    }, [app]);
+    }, [app, resourceType]);
     react_1.useEffect(function () {
-        var _a;
-        var wasOpen = (_a = prevProps.current) === null || _a === void 0 ? void 0 : _a.open;
-        if (wasOpen !== open) {
-            if (open) {
-                picker.dispatch(ResourcePicker_1.Action.OPEN);
-            }
-            else {
-                picker.dispatch(ResourcePicker_1.Action.CLOSE);
+        openRef.current = false;
+        return function () {
+            if (openRef.current && isUnmountedRef.current) {
+                picker.dispatch(ResourcePicker_1.Action.CANCEL);
             }
+        };
+    }, [picker]);
+    var focusReturnPointRef = react_1.useRef(null);
+    var storeFocusReturnPoint = react_1.useCallback(function () {
+        if (document.activeElement instanceof HTMLElement) {
+            focusReturnPointRef.current = document.activeElement;
         }
-        if (!wasOpen && open) {
-            focusReturnPoint.current = document.activeElement;
-        }
-        else if (wasOpen &&
-            !open &&
-            focusReturnPoint.current != null &&
-            document.contains(focusReturnPoint.current)) {
-            focusReturnPoint.current.focus();
-            focusReturnPoint.current = null;
+    }, []);
+    var applyFocusReturnPoint = react_1.useCallback(function () {
+        var focusReturnPoint = focusReturnPointRef.current;
+        focusReturnPointRef.current = null;
+        if (focusReturnPoint && document.contains(focusReturnPoint)) {
+            focusReturnPoint.focus();
         }
-    }, [open]);
+    }, []);
     react_1.useEffect(function () {
-        var unsubscribeList = [];
-        if (onSelection != null) {
-            unsubscribeList.push(picker.subscribe(ResourcePicker_1.Action.SELECT, onSelection));
+        if (open === openRef.current)
+            return;
+        openRef.current = open;
+        if (open) {
+            picker.dispatch(ResourcePicker_1.Action.OPEN);
+            storeFocusReturnPoint();
         }
-        if (onCancel != null) {
-            unsubscribeList.push(picker.subscribe(ResourcePicker_1.Action.CANCEL, onCancel));
+        else {
+            picker.dispatch(ResourcePicker_1.Action.CLOSE);
+            applyFocusReturnPoint();
         }
-        return function () {
-            var unsubscribe = unsubscribeList.pop();
-            while (unsubscribe) {
-                unsubscribe();
-                unsubscribe = unsubscribeList.pop();
+    }, [picker, open, storeFocusReturnPoint, applyFocusReturnPoint]);
+    react_1.useEffect(function () {
+        if (!onSelection)
+            return;
+        return picker.subscribe(ResourcePicker_1.Action.SELECT, function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
             }
-        };
-    }, [onSelection, onCancel]);
+            openRef.current = false;
+            applyFocusReturnPoint();
+            return onSelection.apply(void 0, args);
+        });
+    }, [picker, onSelection, applyFocusReturnPoint]);
     react_1.useEffect(function () {
-        var shouldUpdate = JSON.stringify(__assign(__assign({}, prevProps.current), { open: undefined })) !==
-            JSON.stringify(__assign(__assign({}, props), { open: undefined }));
-        if (!shouldUpdate) {
+        if (!onCancel)
             return;
-        }
-        picker.set(getActionOptions(props));
-        prevProps.current = props;
-    }, [props]);
+        return picker.subscribe(ResourcePicker_1.Action.CANCEL, function () {
+            openRef.current = false;
+            applyFocusReturnPoint();
+            return onCancel();
+        });
+    }, [picker, onCancel, applyFocusReturnPoint]);
+    react_1.useEffect(function () {
+        var shouldUpdate = JSON.stringify(options) !== JSON.stringify(optionsRef.current);
+        if (!shouldUpdate)
+            return;
+        optionsRef.current = options;
+        picker.set(options);
+    }, [picker, options]);
     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,
-    };
-    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/unstable_Picker/unstable_Picker.d.ts

@@ -1,23 +1,13 @@
-import { SearchPayload, SelectPayload, EmptySearchLabel } from '@shopify/app-bridge/actions/Picker';
-import type { BaseResource } from '@shopify/app-bridge/actions/Picker';
+import { SearchPayload, SelectPayload } from '@shopify/app-bridge/actions/Picker';
+import type { Options } from '@shopify/app-bridge/actions/Picker';
 /**
  * @unstable This API may be updated without warning in the future
  */
-export interface Props {
+export interface Props extends Options {
     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;
+export default function Picker({ open, onCancel, onSelect, onSearch, onLoadMore, ...options }: Props): null;

package/components/unstable_Picker/unstable_Picker.js

@@ -1,78 +1,85 @@
 "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];
+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;
-    };
-    return __assign.apply(this, arguments);
+    return t;
 };
 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) {
+function Picker(_a) {
+    var open = _a.open, onCancel = _a.onCancel, onSelect = _a.onSelect, onSearch = _a.onSearch, onLoadMore = _a.onLoadMore, options = __rest(_a, ["open", "onCancel", "onSelect", "onSearch", "onLoadMore"]);
     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]);
+    var isUnmountedRef = react_1.useRef(false);
+    react_1.useEffect(function () { return function () {
+        isUnmountedRef.current = true;
+    }; }, []);
+    var openRef = react_1.useRef(false);
+    var optionsRef = react_1.useRef(options);
+    var picker = react_1.useMemo(function () { return Picker_1.create(app, optionsRef.current); }, [app]);
     react_1.useEffect(function () {
-        var _a;
-        if (!props.open && ((_a = prevProps.current) === null || _a === void 0 ? void 0 : _a.open) === props.open) {
+        openRef.current = false;
+        return function () {
+            if (openRef.current && isUnmountedRef.current) {
+                picker.dispatch(Picker_1.Action.CANCEL);
+            }
+        };
+    }, [picker]);
+    react_1.useEffect(function () {
+        if (open === openRef.current)
             return;
-        }
-        if (props.open) {
+        openRef.current = open;
+        if (open) {
             picker.dispatch(Picker_1.Action.OPEN);
         }
         else {
             picker.dispatch(Picker_1.Action.CANCEL);
         }
-    }, [props.open]);
+    }, [picker, 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]);
+        if (!onSelect)
+            return;
+        return picker.subscribe(Picker_1.Action.SELECT, function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            openRef.current = false;
+            return onSelect.apply(void 0, args);
+        });
+    }, [picker, onSelect]);
     react_1.useEffect(function () {
-        var shouldUpdate = JSON.stringify(__assign(__assign({}, prevProps.current), { open: undefined })) !==
-            JSON.stringify(__assign(__assign({}, props), { open: undefined }));
-        if (!shouldUpdate) {
+        if (!onCancel)
             return;
-        }
-        picker.set(getActionOptions(props));
-        prevProps.current = props;
-    }, [props]);
+        return picker.subscribe(Picker_1.Action.CANCEL, function () {
+            openRef.current = false;
+            return onCancel();
+        });
+    }, [picker, onCancel]);
+    react_1.useEffect(function () {
+        if (!onSearch)
+            return;
+        return picker.subscribe(Picker_1.Action.SEARCH, onSearch);
+    }, [picker, onSearch]);
+    react_1.useEffect(function () {
+        if (!onLoadMore)
+            return;
+        return picker.subscribe(Picker_1.Action.LOAD_MORE, onLoadMore);
+    }, [picker, onLoadMore]);
+    react_1.useEffect(function () {
+        var shouldUpdate = JSON.stringify(options) !== JSON.stringify(optionsRef.current);
+        if (!shouldUpdate)
+            return;
+        optionsRef.current = options;
+        picker.set(options);
+    }, [picker, options]);
     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/package.json

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