@shopify/app-bridge-react 2.0.22 → 2.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/components/ClientRouter/ClientRouter.js +1 -1
  3. package/components/ClientRouter/hook.js +3 -3
  4. package/components/ContextualSaveBar/ContextualSaveBar.js +5 -5
  5. package/components/Modal/Modal.js +1 -1
  6. package/components/NavigationMenu/NavigationMenu.d.ts +17 -0
  7. package/components/NavigationMenu/NavigationMenu.js +55 -0
  8. package/components/NavigationMenu/index.d.ts +3 -0
  9. package/components/NavigationMenu/index.js +7 -0
  10. package/components/Provider/Provider.d.ts +58 -13
  11. package/components/Provider/Provider.js +24 -54
  12. package/components/ResourcePicker/ResourcePicker.d.ts +7 -16
  13. package/components/ResourcePicker/ResourcePicker.js +77 -94
  14. package/components/RoutePropagator/RoutePropagator.js +2 -2
  15. package/components/RoutePropagator/globals.d.ts +1 -1
  16. package/components/RoutePropagator/hook.js +3 -3
  17. package/components/RoutePropagator/route-propagator.js +5 -5
  18. package/components/TitleBar/TitleBar.d.ts +3 -14
  19. package/components/TitleBar/TitleBar.js +50 -75
  20. package/components/index.d.ts +4 -3
  21. package/components/index.js +10 -12
  22. package/context.d.ts +1 -1
  23. package/context.js +1 -1
  24. package/hooks/index.d.ts +5 -0
  25. package/hooks/index.js +9 -1
  26. package/hooks/useAppBridgeState/index.d.ts +1 -0
  27. package/hooks/useAppBridgeState/index.js +13 -0
  28. package/hooks/useAppBridgeState/useAppBridgeState.d.ts +10 -0
  29. package/hooks/useAppBridgeState/useAppBridgeState.js +89 -0
  30. package/hooks/useContextualSaveBar/useContextualSaveBar.js +6 -6
  31. package/hooks/useFeatureRequest/index.d.ts +1 -0
  32. package/hooks/useFeatureRequest/index.js +13 -0
  33. package/hooks/useFeatureRequest/useFeatureRequest.d.ts +13 -0
  34. package/hooks/useFeatureRequest/useFeatureRequest.js +49 -0
  35. package/hooks/useFeaturesAvailable/index.d.ts +2 -0
  36. package/hooks/useFeaturesAvailable/index.js +5 -0
  37. package/hooks/useFeaturesAvailable/useFeaturesAvailable.d.ts +12 -0
  38. package/hooks/useFeaturesAvailable/useFeaturesAvailable.js +101 -0
  39. package/hooks/useLocale/index.d.ts +1 -0
  40. package/hooks/useLocale/index.js +5 -0
  41. package/hooks/useLocale/useLocale.d.ts +1 -0
  42. package/hooks/useLocale/useLocale.js +8 -0
  43. package/hooks/useNavigate/index.d.ts +1 -0
  44. package/hooks/useNavigate/index.js +5 -0
  45. package/hooks/useNavigate/useNavigate.d.ts +24 -0
  46. package/hooks/useNavigate/useNavigate.js +109 -0
  47. package/hooks/useNavigationHistory/useNavigationHistory.js +2 -2
  48. package/hooks/useToast/useToast.js +4 -4
  49. package/index.d.ts +1 -0
  50. package/index.js +2 -5
  51. package/package.json +3 -3
  52. package/types.d.ts +2 -0
  53. package/types.js +3 -0
  54. package/umd/index.js +3 -3
  55. package/useAppBridge.js +1 -1
  56. package/utilities/transformers.d.ts +3 -2
  57. package/utilities/transformers.js +37 -20
@@ -0,0 +1,89 @@
1
+ "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ var __generator = (this && this.__generator) || function (thisArg, body) {
12
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
+ function verb(n) { return function (v) { return step([n, v]); }; }
15
+ function step(op) {
16
+ if (f) throw new TypeError("Generator is already executing.");
17
+ while (_) try {
18
+ 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;
19
+ if (y = 0, t) op = [op[0] & 2, t.value];
20
+ switch (op[0]) {
21
+ case 0: case 1: t = op; break;
22
+ case 4: _.label++; return { value: op[1], done: false };
23
+ case 5: _.label++; y = op[1]; op = [0]; continue;
24
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
+ default:
26
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
+ if (t[2]) _.ops.pop();
31
+ _.trys.pop(); continue;
32
+ }
33
+ op = body.call(thisArg, _);
34
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
+ }
37
+ };
38
+ Object.defineProperty(exports, "__esModule", { value: true });
39
+ exports.useAppBridgeState = void 0;
40
+ var react_1 = require("react");
41
+ var useAppBridge_1 = require("../../useAppBridge");
42
+ var useAppBridgeState = function (query) {
43
+ var app = useAppBridge_1.useAppBridge();
44
+ var _a = react_1.useState(), state = _a[0], setState = _a[1];
45
+ var isUnmounted = react_1.useRef(false);
46
+ var refresh = react_1.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
47
+ var newState, _a;
48
+ return __generator(this, function (_b) {
49
+ switch (_b.label) {
50
+ case 0:
51
+ if (!query) return [3 /*break*/, 2];
52
+ return [4 /*yield*/, app.getState(query)];
53
+ case 1:
54
+ _a = _b.sent();
55
+ return [3 /*break*/, 4];
56
+ case 2: return [4 /*yield*/, app.getState()];
57
+ case 3:
58
+ _a = _b.sent();
59
+ _b.label = 4;
60
+ case 4:
61
+ newState = _a;
62
+ if (isUnmounted.current) {
63
+ return [2 /*return*/];
64
+ }
65
+ setState(function (currentState) {
66
+ if (JSON.stringify(newState) === JSON.stringify(currentState)) {
67
+ return currentState;
68
+ }
69
+ return newState;
70
+ });
71
+ return [2 /*return*/];
72
+ }
73
+ });
74
+ }); }, [app, query]);
75
+ react_1.useEffect(function () {
76
+ refresh();
77
+ // Automatically check to see if the state has changed every time an action has been dispatched
78
+ return app.subscribe(function () {
79
+ refresh();
80
+ });
81
+ }, [app, refresh]);
82
+ react_1.useEffect(function () {
83
+ return function () {
84
+ isUnmounted.current = true;
85
+ };
86
+ }, [app]);
87
+ return state;
88
+ };
89
+ exports.useAppBridgeState = useAppBridgeState;
@@ -17,7 +17,7 @@ var ContextualSaveBar_1 = require("@shopify/app-bridge/actions/ContextualSaveBar
17
17
  var useAppBridge_1 = require("../../useAppBridge");
18
18
  function useContextualSaveBar(_a) {
19
19
  var discardAction = _a.discardAction, saveAction = _a.saveAction, fullWidth = _a.fullWidth, leaveConfirmationDisable = _a.leaveConfirmationDisable, visible = _a.visible;
20
- var app = (0, useAppBridge_1.useAppBridge)();
20
+ var app = useAppBridge_1.useAppBridge();
21
21
  var onSaveAction = saveAction.onAction, saveActionProps = __rest(saveAction, ["onAction"]);
22
22
  var onDiscardAction = discardAction.onAction, discardActionProps = __rest(discardAction, ["onAction"]);
23
23
  /* We want to reuse the same ContextualSaveBar instance, even when props change
@@ -25,15 +25,15 @@ function useContextualSaveBar(_a) {
25
25
  * Instead of recreating the component on every change, we use the set method,
26
26
  * in the useEffect block below, to dispatch updates when props change.
27
27
  */
28
- var contextualSaveBar = (0, react_1.useMemo)(function () {
29
- return (0, ContextualSaveBar_1.create)(app, {
28
+ var contextualSaveBar = react_1.useMemo(function () {
29
+ return ContextualSaveBar_1.create(app, {
30
30
  saveAction: saveActionProps,
31
31
  discardAction: discardActionProps,
32
32
  fullWidth: fullWidth,
33
33
  leaveConfirmationDisable: leaveConfirmationDisable,
34
34
  });
35
35
  }, [app]);
36
- (0, react_1.useEffect)(function () {
36
+ react_1.useEffect(function () {
37
37
  contextualSaveBar.set({
38
38
  saveAction: saveActionProps,
39
39
  discardAction: discardActionProps,
@@ -48,14 +48,14 @@ function useContextualSaveBar(_a) {
48
48
  leaveConfirmationDisable,
49
49
  visible,
50
50
  ]);
51
- (0, react_1.useEffect)(function () {
51
+ react_1.useEffect(function () {
52
52
  contextualSaveBar.subscribe(ContextualSaveBar_1.Action.DISCARD, onDiscardAction);
53
53
  contextualSaveBar.subscribe(ContextualSaveBar_1.Action.SAVE, onSaveAction);
54
54
  return function () {
55
55
  contextualSaveBar.unsubscribe();
56
56
  };
57
57
  }, [contextualSaveBar]);
58
- (0, react_1.useEffect)(function () {
58
+ react_1.useEffect(function () {
59
59
  if (visible) {
60
60
  contextualSaveBar.dispatch(ContextualSaveBar_1.Action.SHOW);
61
61
  }
@@ -0,0 +1 @@
1
+ export * from './useFeatureRequest';
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
10
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
11
+ };
12
+ Object.defineProperty(exports, "__esModule", { value: true });
13
+ __exportStar(require("./useFeatureRequest"), exports);
@@ -0,0 +1,13 @@
1
+ import type { FeaturePermission, FeaturesAction } from '@shopify/app-bridge';
2
+ import { Group } from '@shopify/app-bridge/actions';
3
+ /**
4
+ * useFeatureRequest hook
5
+ *
6
+ * @public
7
+ * @remarks
8
+ * React hook performs a feature request and then returns
9
+ * the requested feature when permissions has been updated
10
+ * @param {Group} group - The requested group enum
11
+ * @param {string} action - The requested action. This param is optional
12
+ */
13
+ export declare function useFeatureRequest(group: Group, action?: string): FeaturesAction | FeaturePermission | undefined;
@@ -0,0 +1,49 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useFeatureRequest = void 0;
4
+ var react_1 = require("react");
5
+ var Features_1 = require("@shopify/app-bridge/actions/Features");
6
+ var useAppBridge_1 = require("../../useAppBridge");
7
+ var useFeaturesAvailable_1 = require("../useFeaturesAvailable");
8
+ /**
9
+ * useFeatureRequest hook
10
+ *
11
+ * @public
12
+ * @remarks
13
+ * React hook performs a feature request and then returns
14
+ * the requested feature when permissions has been updated
15
+ * @param {Group} group - The requested group enum
16
+ * @param {string} action - The requested action. This param is optional
17
+ */
18
+ function useFeatureRequest(group, action) {
19
+ var app = useAppBridge_1.useAppBridge();
20
+ var featuresAvailable = useFeaturesAvailable_1.useFeaturesAvailable();
21
+ var _a = react_1.useState(), feature = _a[0], setFeature = _a[1];
22
+ var handleFeatureUpdate = react_1.useCallback(function (featuresAvailable) {
23
+ var updatedFeatures = featuresAvailable === null || featuresAvailable === void 0 ? void 0 : featuresAvailable[group];
24
+ if (action && (updatedFeatures === null || updatedFeatures === void 0 ? void 0 : updatedFeatures[action])) {
25
+ var actionPermission_1 = updatedFeatures === null || updatedFeatures === void 0 ? void 0 : updatedFeatures[action];
26
+ setFeature(function (currentState) {
27
+ if (JSON.stringify(actionPermission_1) !== JSON.stringify(currentState)) {
28
+ return actionPermission_1;
29
+ }
30
+ return currentState;
31
+ });
32
+ return;
33
+ }
34
+ setFeature(function (currentState) {
35
+ if (JSON.stringify(updatedFeatures) !== JSON.stringify(currentState)) {
36
+ return updatedFeatures;
37
+ }
38
+ return currentState;
39
+ });
40
+ }, [group, action]);
41
+ react_1.useEffect(function () {
42
+ Features_1.create(app).dispatch(Features_1.Action.REQUEST, { feature: group, action: action });
43
+ }, [app, group, action]);
44
+ react_1.useEffect(function () {
45
+ handleFeatureUpdate(featuresAvailable);
46
+ }, [featuresAvailable, handleFeatureUpdate]);
47
+ return feature;
48
+ }
49
+ exports.useFeatureRequest = useFeatureRequest;
@@ -0,0 +1,2 @@
1
+ export type { FeaturesAvailable } from './useFeaturesAvailable';
2
+ export { useFeaturesAvailable } from './useFeaturesAvailable';
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useFeaturesAvailable = void 0;
4
+ var useFeaturesAvailable_1 = require("./useFeaturesAvailable");
5
+ Object.defineProperty(exports, "useFeaturesAvailable", { enumerable: true, get: function () { return useFeaturesAvailable_1.useFeaturesAvailable; } });
@@ -0,0 +1,12 @@
1
+ import { Group } from '@shopify/app-bridge/actions/types';
2
+ import { AppBridgeState } from '@shopify/app-bridge/client';
3
+ export declare type FeaturesAvailable = AppBridgeState['features'];
4
+ /**
5
+ * useFeaturesAvailable hook
6
+ *
7
+ * @remarks
8
+ * React hook that wraps the Shopify App Bridge getFeaturesAvailable method.
9
+ *
10
+ * @public
11
+ */
12
+ export declare function useFeaturesAvailable(...query: Group[]): import("@shopify/app-bridge/client").FeaturesAvailable<Group> | undefined;
@@ -0,0 +1,101 @@
1
+ "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ var __generator = (this && this.__generator) || function (thisArg, body) {
12
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
+ function verb(n) { return function (v) { return step([n, v]); }; }
15
+ function step(op) {
16
+ if (f) throw new TypeError("Generator is already executing.");
17
+ while (_) try {
18
+ 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;
19
+ if (y = 0, t) op = [op[0] & 2, t.value];
20
+ switch (op[0]) {
21
+ case 0: case 1: t = op; break;
22
+ case 4: _.label++; return { value: op[1], done: false };
23
+ case 5: _.label++; y = op[1]; op = [0]; continue;
24
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
+ default:
26
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
+ if (t[2]) _.ops.pop();
31
+ _.trys.pop(); continue;
32
+ }
33
+ op = body.call(thisArg, _);
34
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
+ }
37
+ };
38
+ Object.defineProperty(exports, "__esModule", { value: true });
39
+ exports.useFeaturesAvailable = void 0;
40
+ var react_1 = require("react");
41
+ var types_1 = require("@shopify/app-bridge/actions/Features/types");
42
+ var useAppBridge_1 = require("../../useAppBridge");
43
+ /**
44
+ * useFeaturesAvailable hook
45
+ *
46
+ * @remarks
47
+ * React hook that wraps the Shopify App Bridge getFeaturesAvailable method.
48
+ *
49
+ * @public
50
+ */
51
+ function useFeaturesAvailable() {
52
+ var _this = this;
53
+ var query = [];
54
+ for (var _i = 0; _i < arguments.length; _i++) {
55
+ query[_i] = arguments[_i];
56
+ }
57
+ var app = useAppBridge_1.useAppBridge();
58
+ var _a = react_1.useState(), state = _a[0], setState = _a[1];
59
+ var queryRef = react_1.useRef([]);
60
+ var refresh = react_1.useCallback(function () {
61
+ var isUnmounted = false;
62
+ (function () { return __awaiter(_this, void 0, void 0, function () {
63
+ var features;
64
+ return __generator(this, function (_a) {
65
+ switch (_a.label) {
66
+ case 0: return [4 /*yield*/, app.featuresAvailable.apply(app, queryRef.current)];
67
+ case 1:
68
+ features = _a.sent();
69
+ if (!isUnmounted) {
70
+ setState(function (currentFeatures) {
71
+ if (JSON.stringify(currentFeatures) === JSON.stringify(features)) {
72
+ return currentFeatures;
73
+ }
74
+ return features;
75
+ });
76
+ }
77
+ return [2 /*return*/];
78
+ }
79
+ });
80
+ }); })();
81
+ return function () {
82
+ isUnmounted = true;
83
+ };
84
+ }, [app]);
85
+ react_1.useEffect(function () {
86
+ queryRef.current = query;
87
+ return refresh();
88
+ }, [JSON.stringify(query)]);
89
+ react_1.useEffect(function () {
90
+ var onRefreshCleanup;
91
+ var unsubscribe = app.subscribe(types_1.Action.UPDATE, function () {
92
+ onRefreshCleanup = refresh();
93
+ });
94
+ return function () {
95
+ unsubscribe();
96
+ onRefreshCleanup === null || onRefreshCleanup === void 0 ? void 0 : onRefreshCleanup();
97
+ };
98
+ }, [app, refresh]);
99
+ return state;
100
+ }
101
+ exports.useFeaturesAvailable = useFeaturesAvailable;
@@ -0,0 +1 @@
1
+ export { useLocale } from './useLocale';
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useLocale = void 0;
4
+ var useLocale_1 = require("./useLocale");
5
+ Object.defineProperty(exports, "useLocale", { enumerable: true, get: function () { return useLocale_1.useLocale; } });
@@ -0,0 +1 @@
1
+ export declare function useLocale(): string | undefined;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useLocale = void 0;
4
+ var useAppBridgeState_1 = require("../useAppBridgeState");
5
+ function useLocale() {
6
+ return useAppBridgeState_1.useAppBridgeState('staffMember.locale');
7
+ }
8
+ exports.useLocale = useLocale;
@@ -0,0 +1 @@
1
+ export { useNavigate } from './useNavigate';
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useNavigate = void 0;
4
+ var useNavigate_1 = require("./useNavigate");
5
+ Object.defineProperty(exports, "useNavigate", { enumerable: true, get: function () { return useNavigate_1.useNavigate; } });
@@ -0,0 +1,24 @@
1
+ import * as Redirect from '@shopify/app-bridge/actions/Navigation/Redirect';
2
+ export interface Location {
3
+ pathname: string;
4
+ search?: string | URLSearchParams;
5
+ hash?: string;
6
+ }
7
+ export interface AppOptions {
8
+ replace?: boolean;
9
+ target?: 'self';
10
+ }
11
+ export interface HostOptions {
12
+ target: 'host' | 'new';
13
+ }
14
+ export declare type Options = AppOptions | HostOptions;
15
+ export declare type To = Location | URL | string;
16
+ export interface SectionStringName extends Omit<Redirect.Section, 'name'> {
17
+ name: keyof typeof Redirect.ResourceType;
18
+ }
19
+ export interface Navigate {
20
+ (to: To, options?: AppOptions): void;
21
+ (to: To | SectionStringName, options?: HostOptions): void;
22
+ }
23
+ export declare function useNavigate(): Navigate;
24
+ export declare function isAdminSection(to: any): to is SectionStringName;
@@ -0,0 +1,109 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
16
+ }) : (function(o, m, k, k2) {
17
+ if (k2 === undefined) k2 = k;
18
+ o[k2] = m[k];
19
+ }));
20
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
21
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
22
+ }) : function(o, v) {
23
+ o["default"] = v;
24
+ });
25
+ var __importStar = (this && this.__importStar) || function (mod) {
26
+ if (mod && mod.__esModule) return mod;
27
+ var result = {};
28
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
29
+ __setModuleDefault(result, mod);
30
+ return result;
31
+ };
32
+ Object.defineProperty(exports, "__esModule", { value: true });
33
+ exports.isAdminSection = exports.useNavigate = void 0;
34
+ var react_1 = require("react");
35
+ var Redirect = __importStar(require("@shopify/app-bridge/actions/Navigation/Redirect"));
36
+ var useAppBridge_1 = require("../../useAppBridge");
37
+ var useNavigationHistory_1 = require("../useNavigationHistory");
38
+ function useNavigate() {
39
+ var app = useAppBridge_1.useAppBridge();
40
+ var history = useNavigationHistory_1.useNavigationHistory();
41
+ var redirect = react_1.useMemo(function () {
42
+ return Redirect.create(app);
43
+ }, [app]);
44
+ var handleRedirect = react_1.useCallback(function (to, options) {
45
+ var url = normalizeUrl(to);
46
+ var isAppUrl = url.startsWith(app.localOrigin);
47
+ var isHostUrl = url.startsWith(app.hostOrigin);
48
+ var isRelative = url.startsWith('/');
49
+ if (isAppUrl || isHostUrl || isRelative) {
50
+ var path = getRelativePath(url);
51
+ if (isHostUrl || (options === null || options === void 0 ? void 0 : options.target) === 'new' || (options === null || options === void 0 ? void 0 : options.target) === 'host') {
52
+ redirect.dispatch(Redirect.Action.ADMIN_PATH, {
53
+ path: path.replace(/^\/admin/, ''),
54
+ newContext: (options === null || options === void 0 ? void 0 : options.target) === 'new',
55
+ });
56
+ return;
57
+ }
58
+ if (((options === null || options === void 0 ? void 0 : options.target) === 'self' || !(options === null || options === void 0 ? void 0 : options.target)) && (options === null || options === void 0 ? void 0 : options.replace)) {
59
+ history.replace({ pathname: path });
60
+ return;
61
+ }
62
+ redirect.dispatch(Redirect.Action.APP, path);
63
+ return;
64
+ }
65
+ redirect.dispatch(Redirect.Action.REMOTE, {
66
+ url: url,
67
+ newContext: (options === null || options === void 0 ? void 0 : options.target) === 'new',
68
+ });
69
+ }, [redirect, history]);
70
+ return react_1.useCallback(function (to, options) {
71
+ if (isAdminSection(to)) {
72
+ var convertedSection = __assign(__assign({}, to), { name: Redirect.ResourceType[to.name] });
73
+ redirect.dispatch(Redirect.Action.ADMIN_SECTION, {
74
+ section: convertedSection,
75
+ newContext: (options === null || options === void 0 ? void 0 : options.target) === 'new',
76
+ });
77
+ return;
78
+ }
79
+ handleRedirect(to, options);
80
+ }, [handleRedirect, redirect]);
81
+ }
82
+ exports.useNavigate = useNavigate;
83
+ function isAdminSection(to) {
84
+ return typeof to === 'object' && typeof (to === null || to === void 0 ? void 0 : to.name) === 'string';
85
+ }
86
+ exports.isAdminSection = isAdminSection;
87
+ function getPathWithSearchAndHash(_a) {
88
+ var pathname = _a.pathname, search = _a.search, hash = _a.hash;
89
+ return "" + pathname + (search || '') + (hash || '');
90
+ }
91
+ function normalizeUrl(to) {
92
+ if (to instanceof URL) {
93
+ return to.toString();
94
+ }
95
+ if (typeof to === 'string') {
96
+ return to;
97
+ }
98
+ return getRelativePath(to);
99
+ }
100
+ function getRelativePath(to) {
101
+ if (typeof to === 'string') {
102
+ if (to.startsWith('/')) {
103
+ return to;
104
+ }
105
+ return getPathWithSearchAndHash(new URL(to));
106
+ }
107
+ var search = to.search instanceof URLSearchParams ? to.search.toString() : to.search;
108
+ return getPathWithSearchAndHash(__assign(__assign({}, to), { search: search }));
109
+ }
@@ -13,8 +13,8 @@ var useAppBridge_1 = require("../../useAppBridge");
13
13
  * @public
14
14
  */
15
15
  function useNavigationHistory() {
16
- var app = (0, useAppBridge_1.useAppBridge)();
17
- return (0, react_1.useMemo)(function () {
16
+ var app = useAppBridge_1.useAppBridge();
17
+ return react_1.useMemo(function () {
18
18
  var history = actions_1.History.create(app);
19
19
  function push(location) {
20
20
  history.dispatch(actions_1.History.Action.PUSH, location.pathname);
@@ -14,11 +14,11 @@ exports.DEFAULT_TOAST_DURATION = 5000;
14
14
  * @public
15
15
  */
16
16
  function useToast() {
17
- var app = (0, useAppBridge_1.useAppBridge)();
17
+ var app = useAppBridge_1.useAppBridge();
18
18
  var toast;
19
- var show = (0, react_1.useCallback)(function (_a) {
19
+ var show = react_1.useCallback(function (_a) {
20
20
  var message = _a.content, _b = _a.duration, duration = _b === void 0 ? exports.DEFAULT_TOAST_DURATION : _b, isError = _a.isError, onDismiss = _a.onDismiss;
21
- toast = (0, Toast_1.create)(app, {
21
+ toast = Toast_1.create(app, {
22
22
  message: message,
23
23
  isError: isError,
24
24
  duration: duration,
@@ -28,7 +28,7 @@ function useToast() {
28
28
  toast.subscribe(Toast_1.Action.CLEAR, onDismiss);
29
29
  }
30
30
  }, [app]);
31
- (0, react_1.useEffect)(function () {
31
+ react_1.useEffect(function () {
32
32
  return function () {
33
33
  toast.unsubscribe();
34
34
  };
package/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './components';
2
2
  export { AppBridgeContext as Context } from './context';
3
3
  export { useAppBridge } from './useAppBridge';
4
+ export * from './hooks';
package/index.js CHANGED
@@ -1,11 +1,7 @@
1
1
  "use strict";
2
2
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
3
  if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
9
5
  }) : (function(o, m, k, k2) {
10
6
  if (k2 === undefined) k2 = k;
11
7
  o[k2] = m[k];
@@ -20,3 +16,4 @@ var context_1 = require("./context");
20
16
  Object.defineProperty(exports, "Context", { enumerable: true, get: function () { return context_1.AppBridgeContext; } });
21
17
  var useAppBridge_1 = require("./useAppBridge");
22
18
  Object.defineProperty(exports, "useAppBridge", { enumerable: true, get: function () { return useAppBridge_1.useAppBridge; } });
19
+ __exportStar(require("./hooks"), exports);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shopify/app-bridge-react",
3
- "version": "2.0.22",
3
+ "version": "2.0.25",
4
4
  "types": "index.d.ts",
5
5
  "main": "index.js",
6
6
  "unpkg": "umd/index.js",
@@ -45,7 +45,7 @@
45
45
  }
46
46
  ],
47
47
  "dependencies": {
48
- "@shopify/app-bridge": "^2.0.22"
48
+ "@shopify/app-bridge": "^2.0.25"
49
49
  },
50
50
  "devDependencies": {
51
51
  "@types/react": "^17.0.38",
@@ -55,5 +55,5 @@
55
55
  "peerDependencies": {
56
56
  "react": "^16.0.0 || ^17.0.0"
57
57
  },
58
- "gitHead": "a22c1145bf5fbc3c9ae765a7c37c89d14c229d8c"
58
+ "gitHead": "60fa946eeb60316459d58b45aba7cfc85dc0f7f7"
59
59
  }
package/types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Redirect } from '@shopify/app-bridge/actions';
2
+ import { Group } from '@shopify/app-bridge/actions/types';
2
3
  export declare type Target = Exclude<keyof typeof Redirect.Action, 'ADMIN_SECTION'>;
3
4
  export interface ActionProps {
4
5
  /** Content the action displays */
@@ -31,3 +32,4 @@ export interface ActionGroupProps {
31
32
  /** List of actions */
32
33
  actions: ActionProps[];
33
34
  }
35
+ export { Group };
package/types.js CHANGED
@@ -1,2 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Group = void 0;
4
+ var types_1 = require("@shopify/app-bridge/actions/types");
5
+ Object.defineProperty(exports, "Group", { enumerable: true, get: function () { return types_1.Group; } });