@shopify/app-bridge-react 3.7.11-snapshot-20240220213625 → 4.0.0

package/components/Modal/Modal.js

@@ -1,140 +0,0 @@
-"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);
-};
-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 });
-var react_1 = require("react");
-var Modal_1 = require("@shopify/app-bridge/actions/Modal");
-var transformers_1 = require("../../utilities/transformers");
-var useAppBridge_1 = require("../../useAppBridge");
-var useOnceEffect_1 = require("../../hooks/useOnceEffect");
-/**
- * Modal component
- *
- * @remarks
- * React component which wraps the Shopify App Bridge Modal action.
- *
- * @public
- */
-function Modal(props) {
-    var app = useAppBridge_1.useAppBridge();
-    var focusReturnPoint = react_1.useRef(null);
-    // Initialize with open: false so the open action will dispatch on initial load
-    var prevProps = react_1.useRef({ open: false });
-    var open = props.open;
-    var isUnmounted = react_1.useRef(false);
-    var modal = react_1.useMemo(function () {
-        /**
-         * We purposely don't pass buttons here as they will be replaced
-         * by the subsequent useEffect to call `set` to update the options.
-         * If we pass them in here button subscriptions will be created without
-         * being cleaned up.
-         */
-        var primaryAction = props.primaryAction, secondaryActions = props.secondaryActions, rest = __rest(props, ["primaryAction", "secondaryActions"]);
-        return Modal_1.create(app, transformProps(app, rest));
-    }, [app]);
-    /**
-     * All option updates are handled in this useEffect to avoid race conditions.
-     * For example, we need to call `modal.unsubscribe` to clean up button subscriptions
-     * but we calling it will also unsubscribe the onClose handler. Therefore we want
-     * to ensure all callbacks are handled in a single useEffect with a single clean up
-     * call to unsubscribe.
-     */
-    react_1.useEffect(function () {
-        if (isUnmounted.current) {
-            prevProps.current = props;
-            return;
-        }
-        var wasOpen = prevProps.current.open;
-        var openUpdated = wasOpen !== open;
-        /** We only call `set` to update the options if the modal is open.
-         * This is because while the modal is closed updates don't take effect on screen.
-         */
-        if (open) {
-            var transformedProps = transformProps(app, props, wasOpen);
-            /** We skip dispatching the update action if we're about to update the open state.
-             * This is because the OPEN action will always sends the updated options
-             * so we don't need to send it twice.
-             */
-            var shouldSendUpdate = !openUpdated;
-            if (isIframeModal(transformedProps)) {
-                modal.set(transformedProps, shouldSendUpdate);
-            }
-            else {
-                modal.set(transformedProps, shouldSendUpdate);
-            }
-        }
-        if (openUpdated) {
-            if (open) {
-                modal.dispatch(Modal_1.Action.OPEN);
-                focusReturnPoint.current = document.activeElement;
-            }
-            else {
-                modal.dispatch(Modal_1.Action.CLOSE);
-                if (focusReturnPoint.current != null && document.contains(focusReturnPoint.current)) {
-                    focusReturnPoint.current.focus();
-                    focusReturnPoint.current = null;
-                }
-            }
-        }
-        if (props.onClose != null) {
-            modal.subscribe(Modal_1.Action.CLOSE, props.onClose);
-        }
-        prevProps.current = props;
-        return function () {
-            // This is important to clean up previous buttons and onClose subscriptions
-            modal.unsubscribe();
-        };
-    }, [props, open]);
-    useOnceEffect_1.useOnceEffect(function () {
-        return function () {
-            if (prevProps.current.open) {
-                modal.dispatch(Modal_1.Action.CLOSE);
-            }
-        };
-    }, []);
-    return null;
-}
-function isIframeModal(options) {
-    return (typeof options.url === 'string' ||
-        typeof options.path === 'string');
-}
-function transformProps(app, props, wasOpen) {
-    var title = props.title, size = props.size, message = props.message, src = props.src, primaryAction = props.primaryAction, secondaryActions = props.secondaryActions, loading = props.loading;
-    var safeSize = size == null ? undefined : Modal_1.Size[size];
-    var srcPayload = {};
-    if (src != null) {
-        if (src.match('^https?://')) {
-            srcPayload.url = src;
-        }
-        else {
-            srcPayload.path = src;
-        }
-    }
-    return __assign(__assign({ title: title, message: message, size: safeSize }, srcPayload), { footer: {
-            buttons: transformers_1.transformActions(app, {
-                primaryAction: primaryAction,
-                secondaryActions: secondaryActions,
-            }),
-        }, loading: wasOpen ? undefined : loading });
-}
-exports.default = Modal;

package/components/Modal/ModalContent/ModalContent.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-import { AppBridgeContext } from '../../../context';
-export interface Props {
-    /** Show/Dismiss loading spinner */
-    loading: boolean;
-}
-/**
- * Modal Content component
- *
- * @remarks
- * React component which wraps the Shopify App Bridge Modal Content action.
- *
- * @public
- */
-declare class ModalContent extends React.Component<Props> {
-    static contextType: React.Context<import("../../../context").IAppBridgeContext>;
-    context: React.ContextType<typeof AppBridgeContext>;
-    private modalContent;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    syncLoadingStatus(): void;
-    render(): null;
-}
-export default ModalContent;

package/components/Modal/ModalContent/ModalContent.js

@@ -1,61 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var actions_1 = require("@shopify/app-bridge/actions");
-var context_1 = require("../../../context");
-/**
- * Modal Content component
- *
- * @remarks
- * React component which wraps the Shopify App Bridge Modal Content action.
- *
- * @public
- */
-var ModalContent = /** @class */ (function (_super) {
-    __extends(ModalContent, _super);
-    function ModalContent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ModalContent.prototype.componentDidMount = function () {
-        var app = this.context;
-        this.modalContent = actions_1.ModalContent.create(app);
-        this.syncLoadingStatus();
-    };
-    ModalContent.prototype.componentDidUpdate = function () {
-        this.syncLoadingStatus();
-    };
-    ModalContent.prototype.syncLoadingStatus = function () {
-        if (!this.modalContent)
-            return;
-        if (this.props.loading) {
-            this.modalContent.loading();
-        }
-        else {
-            this.modalContent.loaded();
-        }
-    };
-    ModalContent.prototype.render = function () {
-        return null;
-    };
-    ModalContent.contextType = context_1.AppBridgeContext;
-    return ModalContent;
-}(react_1.default.Component));
-exports.default = ModalContent;

package/components/Modal/ModalContent/index.d.ts

@@ -1,2 +0,0 @@
-import ModalContent from './ModalContent';
-export default ModalContent;

package/components/Modal/ModalContent/index.js

@@ -1,7 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var ModalContent_1 = __importDefault(require("./ModalContent"));
-exports.default = ModalContent_1.default;

package/components/Modal/index.d.ts

@@ -1,4 +0,0 @@
-import Modal from './Modal';
-export { default as ModalContent } from './ModalContent';
-export { Props } from './Modal';
-export default Modal;

package/components/Modal/index.js

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalContent = void 0;
-var Modal_1 = __importDefault(require("./Modal"));
-var ModalContent_1 = require("./ModalContent");
-Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return __importDefault(ModalContent_1).default; } });
-exports.default = Modal_1.default;

package/components/NavigationMenu/NavigationMenu.d.ts

@@ -1,18 +0,0 @@
-import { LocationOrHref } from '../RoutePropagator';
-export interface NavigationLink {
-    label: string;
-    destination: string;
-}
-export interface Props {
-    /**
-     * List of links in navigation menu
-     */
-    navigationLinks: NavigationLink[];
-    /**
-     * Custom matcher to set active link.
-     * This function will be called with each link and the current location.
-     * If it returns true the current link will be set to the active link.
-     */
-    matcher?: (link: NavigationLink, location: LocationOrHref) => boolean;
-}
-export default function NavigationMenu({ navigationLinks, matcher }: Props): null;

package/components/NavigationMenu/NavigationMenu.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var AppLink_1 = require("@shopify/app-bridge/actions/Link/AppLink");
-var NavigationMenu_1 = require("@shopify/app-bridge/actions/Menu/NavigationMenu");
-var useAppBridge_1 = require("../../useAppBridge");
-var Provider_1 = require("../Provider/Provider");
-function defaultMatcher(link, location) {
-    var pathname = typeof location === 'string' ? new URL(location).pathname : location.pathname;
-    return link.destination.replace(/\/$/, '') === pathname.replace(/\/$/, '');
-}
-function NavigationMenu(_a) {
-    var navigationLinks = _a.navigationLinks, _b = _a.matcher, matcher = _b === void 0 ? defaultMatcher : _b;
-    var app = useAppBridge_1.useAppBridge();
-    var _c = react_1.useState(), items = _c[0], setItems = _c[1];
-    var locationOrHref = (Provider_1.useRouter() || {}).location;
-    var location = react_1.useMemo(function () { return locationOrHref !== null && locationOrHref !== void 0 ? locationOrHref : window.location; }, [locationOrHref]);
-    react_1.useEffect(function () {
-        var items = navigationLinks.map(function (link) { return AppLink_1.create(app, link); });
-        setItems(items);
-    }, [app, JSON.stringify(navigationLinks)]);
-    var activeLink = react_1.useMemo(function () {
-        var activeLinkIndex = (items || []).findIndex(function (link) {
-            return matcher(link, location);
-        });
-        if (activeLinkIndex >= 0) {
-            return items === null || items === void 0 ? void 0 : items[activeLinkIndex];
-        }
-    }, [items, matcher, location]);
-    react_1.useEffect(function () {
-        // Skip creating the navigation menu on initial render
-        if (!items) {
-            return;
-        }
-        /**
-         * There isn't any advantage to keeping around a consistent instance of
-         * the navigation menu as when we create a new one it results in
-         * the same UPDATE action to be dispatched
-         */
-        NavigationMenu_1.create(app, { items: items, active: activeLink });
-    }, [items, activeLink, app]);
-    return null;
-}
-exports.default = NavigationMenu;

package/components/NavigationMenu/index.d.ts

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

package/components/NavigationMenu/index.js

@@ -1,7 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var NavigationMenu_1 = __importDefault(require("./NavigationMenu"));
-exports.default = NavigationMenu_1.default;

package/components/Provider/Provider.d.ts

@@ -1,87 +0,0 @@
-import React from 'react';
-import type { PropsWithChildren } from 'react';
-import type { AppConfigV2, DispatchActionHook } from '@shopify/app-bridge/client';
-import type { History } from '../ClientRouter';
-import type { LocationOrHref } from '../RoutePropagator';
-/**
- * Provider props
- *
- * @public
- */
-export interface Props {
-    /** Application configuration */
-    config: AppConfigV2;
-    /** The child elements to render. */
-    children?: React.ReactNode;
-    /**
-     * Option to set up client routing and route propagation automatically.
-     * Passing in a router will allow you to bypass setting these
-     * utilities up yourself.
-     *
-     * If you are using React Router, ensure that the Provider is a child
-     * of the router component. For example:
-     *
-     * import {useMemo} from 'react';
-     * import {useLocation, useNavigate, BrowserRouter} from 'react-router-dom';
-     * import {Provider} from '@shopify/app-bridge-react';
-     * import Routes from './Routes';
-     *
-     * export function App() {
-     *   const navigate = useNavigate();
-     *   const location = useLocation();
-     *   const history = useMemo(
-     *     () => ({replace: (path: string) => navigate(path, {replace: true})}),
-     *     [navigate],
-     *   );
-     *   const router = useMemo(
-     *     () => ({
-     *       location,
-     *       history,
-     *     }),
-     *     [location, navigate],
-     *   );
-     *   return (
-     *     <Provider
-     *       apiKey={{
-     *         apiKey: 'API key from Shopify Partner Dashboard',
-     *         host: host,
-     *       }}
-     *       router={router}
-     *     >
-     *       <Routes />
-     *     </Provider>
-     *   );
-     * }
-     *
-     * export default function AppWrapper() {
-     *   return (
-     *     <BrowserRouter>
-     *       <App />
-     *     </BrowserRouter>
-     *   );
-     * }
-     */
-    router?: {
-        location: LocationOrHref;
-        history: History;
-    };
-}
-/**
- * Create an App Bridge client application from a config and pass it as the
- * value to the context provider.
- *
- * @public
- */
-declare function Provider({ config, router, children }: PropsWithChildren<Props>): JSX.Element;
-/**
- * Augment actions with clientInterface metadata, identifying use of this library
- *
- * @internal
- */
-export declare const setClientInterfaceHook: DispatchActionHook;
-interface RouterProps {
-    location: LocationOrHref;
-    history: History;
-}
-export declare function useRouter(): RouterProps | undefined;
-export default Provider;

package/components/Provider/Provider.js

@@ -1,81 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRouter = exports.setClientInterfaceHook = void 0;
-var react_1 = __importStar(require("react"));
-var app_bridge_1 = __importStar(require("@shopify/app-bridge"));
-var context_1 = require("../../context");
-var ClientRouter_1 = require("../ClientRouter");
-var RoutePropagator_1 = require("../RoutePropagator");
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-var packageJson = require('../../package.json');
-/**
- * Create an App Bridge client application from a config and pass it as the
- * value to the context provider.
- *
- * @public
- */
-function Provider(_a) {
-    var config = _a.config, router = _a.router, children = _a.children;
-    /**
-     * 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);
-        }
-    }, [app]);
-    var routerMarkup = (router === null || router === void 0 ? void 0 : router.history) && (router === null || router === void 0 ? void 0 : router.location) ? react_1.default.createElement(Router, { router: router }, children) : children;
-    return react_1.default.createElement(context_1.AppBridgeContext.Provider, { value: app }, routerMarkup);
-}
-/**
- * Augment actions with clientInterface metadata, identifying use of this library
- *
- * @internal
- */
-var setClientInterfaceHook = function (next) {
-    return function (action) {
-        action.clientInterface = {
-            name: '@shopify/app-bridge-react',
-            version: packageJson.version,
-        };
-        return next(action);
-    };
-};
-exports.setClientInterfaceHook = setClientInterfaceHook;
-var RouterContext = react_1.createContext(undefined);
-function useRouter() {
-    return react_1.useContext(RouterContext);
-}
-exports.useRouter = useRouter;
-function Router(_a) {
-    var router = _a.router, children = _a.children;
-    ClientRouter_1.useClientRouting(router.history);
-    RoutePropagator_1.useRoutePropagation(router.location);
-    return react_1.default.createElement(RouterContext.Provider, { value: router }, children);
-}
-exports.default = Provider;

package/components/Provider/index.d.ts

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

package/components/Provider/index.js

@@ -1,7 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var Provider_1 = __importDefault(require("./Provider"));
-exports.default = Provider_1.default;

package/components/ResourcePicker/ResourcePicker.d.ts

@@ -1,36 +0,0 @@
-import { ActionVerb, ResourceType } from '@shopify/app-bridge/actions/ResourcePicker';
-import type { BaseResource, Options, ResourceSelection, ProductOptions } from '@shopify/app-bridge/actions/ResourcePicker';
-export interface SelectPayload {
-    selection: ResourceSelection[];
-}
-interface BaseProps extends Options {
-    open: boolean;
-    /**
-     * @deprecated as of 1.28.0
-     */
-    allowMultiple?: boolean;
-    onSelection?(selectPayload: SelectPayload): void;
-    onCancel?(): void;
-}
-export interface ProductPickerProps extends BaseProps, ProductOptions {
-    resourceType: 'Product';
-}
-export interface ProductVariantProps extends BaseProps {
-    resourceType: 'ProductVariant';
-}
-export interface CollectionPickerProps extends BaseProps {
-    resourceType: 'Collection';
-}
-export declare type Props = ProductPickerProps | ProductVariantProps | CollectionPickerProps;
-/**
- * ResourcePicker component
- *
- * @remarks
- * React component which wraps the Shopify App Bridge ResourcePicker action.
- *
- * @public
- */
-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

@@ -1,120 +0,0 @@
-"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);
-};
-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");
-var ResourcePicker_1 = require("@shopify/app-bridge/actions/ResourcePicker");
-Object.defineProperty(exports, "ActionVerb", { enumerable: true, get: function () { return ResourcePicker_1.ActionVerb; } });
-Object.defineProperty(exports, "ResourceType", { enumerable: true, get: function () { return ResourcePicker_1.ResourceType; } });
-var useAppBridge_1 = require("../../useAppBridge");
-/**
- * ResourcePicker component
- *
- * @remarks
- * React component which wraps the Shopify App Bridge ResourcePicker action.
- *
- * @public
- */
-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 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: optionsRef.current,
-        });
-    }, [app, resourceType]);
-    react_1.useEffect(function () {
-        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;
-        }
-    }, []);
-    var applyFocusReturnPoint = react_1.useCallback(function () {
-        var focusReturnPoint = focusReturnPointRef.current;
-        focusReturnPointRef.current = null;
-        if (focusReturnPoint && document.contains(focusReturnPoint)) {
-            focusReturnPoint.focus();
-        }
-    }, []);
-    react_1.useEffect(function () {
-        if (open === openRef.current)
-            return;
-        openRef.current = open;
-        if (open) {
-            picker.dispatch(ResourcePicker_1.Action.OPEN);
-            storeFocusReturnPoint();
-        }
-        else {
-            picker.dispatch(ResourcePicker_1.Action.CLOSE);
-            applyFocusReturnPoint();
-        }
-    }, [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];
-            }
-            openRef.current = false;
-            applyFocusReturnPoint();
-            return onSelection.apply(void 0, args);
-        });
-    }, [picker, onSelection, applyFocusReturnPoint]);
-    react_1.useEffect(function () {
-        if (!onCancel)
-            return;
-        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;
-}
-exports.default = ResourcePicker;