@shopify/app-bridge-react 2.0.18 → 2.0.19

package/components/ResourcePicker/ResourcePicker.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+import { ResourcePicker as AppBridgeResourcePicker } from '@shopify/app-bridge/actions';
+import { BaseResource } 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: AppBridgeResourcePicker.ResourceSelection[];
+}
+interface BaseProps {
+    /** Whether the picker is open or not */
+    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?: AppBridgeResourcePicker.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 */
+    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;
+/**
+ * ResourcePicker component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge ResourcePicker action.
+ *
+ * @public
+ */
+declare class ResourcePicker extends React.PureComponent<Props, never> {
+    static contextType: React.Context<import("../../context").IAppBridgeContext>;
+    static ActionVerb: typeof AppBridgeResourcePicker.ActionVerb;
+    private focusReturnPoint;
+    private picker;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    componentWillUnmount(): void;
+    render(): null;
+    getActionOptions(): AppBridgeResourcePicker.Options | AppBridgeResourcePicker.ProductOptions;
+}
+export default ResourcePicker;

package/components/ResourcePicker/ResourcePicker.js

@@ -0,0 +1,129 @@
+"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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        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++) {
+            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);
+};
+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");
+/**
+ * ResourcePicker component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge ResourcePicker action.
+ *
+ * @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(),
+        });
+        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);
+        }
+        if (wasOpen !== open) {
+            if (open) {
+                this.picker.dispatch(actions_1.ResourcePicker.Action.OPEN);
+            }
+            else {
+                this.picker.dispatch(actions_1.ResourcePicker.Action.CLOSE);
+            }
+        }
+        if (!wasOpen && open) {
+            this.focusReturnPoint = document.activeElement;
+        }
+        else if (wasOpen &&
+            !open &&
+            this.focusReturnPoint != null &&
+            document.contains(this.focusReturnPoint)) {
+            this.focusReturnPoint.focus();
+            this.focusReturnPoint = 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,
+        };
+        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);
+        }
+        return result;
+    };
+    ResourcePicker.contextType = context_1.AppBridgeContext;
+    ResourcePicker.ActionVerb = actions_1.ResourcePicker.ActionVerb;
+    return ResourcePicker;
+}(react_1.default.PureComponent));
+exports.default = ResourcePicker;

package/components/ResourcePicker/index.d.ts

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

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

package/components/RoutePropagator/RoutePropagator.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { LocationOrHref } from './route-propagator';
+export interface Props {
+    location: LocationOrHref;
+}
+/**
+ * RoutePropagator component
+ *
+ * @remarks
+ * React component which keeps the Shopify admin url in sync with the app url
+ *
+ * @public
+ */
+declare class RoutePropagator extends React.Component<Props, never> {
+    static contextType: React.Context<import("../../context").IAppBridgeContext>;
+    componentDidMount(): void;
+    componentDidUpdate({ location: prevLocation }: Props): void;
+    render(): null;
+}
+export default RoutePropagator;

package/components/RoutePropagator/RoutePropagator.js

@@ -0,0 +1,52 @@
+"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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        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 context_1 = require("../../context");
+var route_propagator_1 = require("./route-propagator");
+/**
+ * RoutePropagator component
+ *
+ * @remarks
+ * React component which keeps the Shopify admin url in sync with the app url
+ *
+ * @public
+ */
+var RoutePropagator = /** @class */ (function (_super) {
+    __extends(RoutePropagator, _super);
+    function RoutePropagator() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RoutePropagator.prototype.componentDidMount = function () {
+        var location = this.props.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) {
+            route_propagator_1.updateHistory(this.context, location);
+        }
+    };
+    RoutePropagator.prototype.render = function () {
+        return null;
+    };
+    RoutePropagator.contextType = context_1.AppBridgeContext;
+    return RoutePropagator;
+}(react_1.default.Component));
+exports.default = RoutePropagator;

package/components/RoutePropagator/globals.d.ts

@@ -0,0 +1,3 @@
+export declare function getSelfWindow(): Window & typeof globalThis;
+export declare function getTopWindow(): Window;
+export declare function getOrigin(): string;

package/components/RoutePropagator/globals.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOrigin = exports.getTopWindow = exports.getSelfWindow = void 0;
+function getSelfWindow() {
+    return window.self;
+}
+exports.getSelfWindow = getSelfWindow;
+function getTopWindow() {
+    return window.top;
+}
+exports.getTopWindow = getTopWindow;
+function getOrigin() {
+    return location.origin;
+}
+exports.getOrigin = getOrigin;

package/components/RoutePropagator/hook.d.ts

@@ -0,0 +1,10 @@
+import { LocationOrHref } from './route-propagator';
+/**
+ * useRoutePropagation
+ *
+ * @remarks
+ * A hook which keeps the Shopify admin url in sync with the app url
+ *
+ * @public
+ */
+export default function useRoutePropagation(location: LocationOrHref): void;

package/components/RoutePropagator/hook.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useAppBridge_1 = require("../../useAppBridge");
+var route_propagator_1 = require("./route-propagator");
+/**
+ * useRoutePropagation
+ *
+ * @remarks
+ * A hook which keeps the Shopify admin url in sync with the app url
+ *
+ * @public
+ */
+function useRoutePropagation(location) {
+    var app = useAppBridge_1.useAppBridge();
+    react_1.useEffect(function () {
+        route_propagator_1.updateHistory(app, location);
+    }, [app, location]);
+}
+exports.default = useRoutePropagation;

package/components/RoutePropagator/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RoutePropagator } from './RoutePropagator';
+export { default as useRoutePropagation } from './hook';
+export { LocationOrHref } from './route-propagator';

package/components/RoutePropagator/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var RoutePropagator_1 = require("./RoutePropagator");
+Object.defineProperty(exports, "RoutePropagator", { enumerable: true, get: function () { return RoutePropagator_1.default; } });
+var hook_1 = require("./hook");
+Object.defineProperty(exports, "useRoutePropagation", { enumerable: true, get: function () { return hook_1.default; } });

package/components/RoutePropagator/route-propagator.d.ts

@@ -0,0 +1,7 @@
+import type { ClientApplication } from '@shopify/app-bridge';
+export declare type LocationOrHref = string | {
+    search: string;
+    hash: string;
+    pathname: string;
+};
+export declare function updateHistory(app: ClientApplication<any>, location: LocationOrHref): Promise<void>;

package/components/RoutePropagator/route-propagator.js

@@ -0,0 +1,91 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateHistory = void 0;
+var MessageTransport_1 = require("@shopify/app-bridge/MessageTransport");
+var actions_1 = require("@shopify/app-bridge/actions");
+var globals_1 = require("./globals");
+// These parameters are added to the iframe url but we don't want to propagate
+// them up to the address bar as they are not provided by the application
+// Removing hmac is especially important as its presence may cause infinite
+// oauth authentication loops
+var embeddedFrameParamsToRemove = [
+    'hmac',
+    'locale',
+    'protocol',
+    'session',
+    'shop',
+    'timestamp',
+    'host',
+];
+function updateHistory(app, location) {
+    return __awaiter(this, void 0, void 0, function () {
+        var selfWindow, topWindow, renderedInTheTopWindow, renderedAsMainApp, normalizedLocation, pathname, search, hash, locationStr;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    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;
+                        })];
+                case 1:
+                    renderedAsMainApp = _a.sent();
+                    if (renderedInTheTopWindow || !renderedAsMainApp) {
+                        return [2 /*return*/];
+                    }
+                    normalizedLocation = getNormalizedURL(location);
+                    embeddedFrameParamsToRemove.forEach(function (param) { return normalizedLocation.searchParams.delete(param); });
+                    pathname = normalizedLocation.pathname, search = normalizedLocation.search, hash = normalizedLocation.hash;
+                    locationStr = "" + pathname + search + hash;
+                    actions_1.History.create(app).dispatch(actions_1.History.Action.REPLACE, locationStr);
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+exports.updateHistory = updateHistory;
+function getNormalizedURL(location) {
+    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("" + pathname + search + hash, origin);
+}

package/components/TitleBar/TitleBar.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ActionProps, ActionGroupProps, Target } from '../../types';
+export interface Breadcrumb {
+    /** Content the action displays */
+    content?: string;
+    /** A destination to link to */
+    url?: string;
+    /**
+     * Where to display the target link
+     * @default 'APP'
+     */
+    target?: Target;
+    /** Callback when an action takes place */
+    onAction?(): void;
+}
+export interface Props {
+    /** TitleBar title */
+    title: string;
+    /** Collection of breadcrumbs */
+    breadcrumbs?: Breadcrumb[];
+    /** Primary TitleBar action */
+    primaryAction?: ActionProps;
+    /** Collection of secondary TitleBar actions */
+    secondaryActions?: ActionProps[];
+    /** 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;

package/components/TitleBar/TitleBar.js

@@ -0,0 +1,78 @@
+"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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        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 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: 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 = transformers_1.generateRedirect(app, url, target);
+        if (redirect != null) {
+            button.subscribe(actions_1.Button.Action.CLICK, redirect);
+        }
+        if (onAction != null) {
+            button.subscribe(actions_1.Button.Action.CLICK, onAction);
+        }
+        return button;
+    };
+    TitleBar.contextType = context_1.AppBridgeContext;
+    return TitleBar;
+}(react_1.default.PureComponent));
+exports.default = TitleBar;

package/components/TitleBar/index.d.ts

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

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

package/components/Toast/Toast.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export interface Props {
+    /** The content that should appear in the toast message */
+    content: string;
+    /**
+     * The length of time in milliseconds the toast message should persist
+     * @default 5000
+     */
+    duration?: number;
+    /** Display an error toast. */
+    error?: boolean;
+    /** Callback when the dismiss icon is clicked */
+    onDismiss(): void;
+}
+export declare const DEFAULT_TOAST_DURATION = 5000;
+/**
+ * Toast component
+ *
+ * @remarks
+ * React component which wraps the Shopify App Bridge Toast action.
+ *
+ * @public
+ */
+declare class Toast extends React.PureComponent<Props, never> {
+    static contextType: React.Context<import("../../context").IAppBridgeContext>;
+    private toast;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): null;
+}
+export default Toast;