source: node_modules/react-router-dom/dist/umd/react-router-dom.development.js

main
Last change on this file was d24f17c, checked in by Aleksandar Panovski <apano77@…>, 15 months ago

Initial commit

  • Property mode set to 100644
File size: 66.3 KB
Line 
1/**
2 * React Router DOM v6.22.1
3 *
4 * Copyright (c) Remix Software Inc.
5 *
6 * This source code is licensed under the MIT license found in the
7 * LICENSE.md file in the root directory of this source tree.
8 *
9 * @license MIT
10 */
11(function (global, factory) {
12 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('react-router'), require('@remix-run/router')) :
13 typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'react-router', '@remix-run/router'], factory) :
14 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouterDOM = {}, global.React, global.ReactDOM, global.ReactRouter, global.RemixRouter));
15})(this, (function (exports, React, ReactDOM, reactRouter, router) { 'use strict';
16
17 function _interopNamespace(e) {
18 if (e && e.__esModule) return e;
19 var n = Object.create(null);
20 if (e) {
21 Object.keys(e).forEach(function (k) {
22 if (k !== 'default') {
23 var d = Object.getOwnPropertyDescriptor(e, k);
24 Object.defineProperty(n, k, d.get ? d : {
25 enumerable: true,
26 get: function () { return e[k]; }
27 });
28 }
29 });
30 }
31 n["default"] = e;
32 return Object.freeze(n);
33 }
34
35 var React__namespace = /*#__PURE__*/_interopNamespace(React);
36 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
37
38 function _extends() {
39 _extends = Object.assign ? Object.assign.bind() : function (target) {
40 for (var i = 1; i < arguments.length; i++) {
41 var source = arguments[i];
42 for (var key in source) {
43 if (Object.prototype.hasOwnProperty.call(source, key)) {
44 target[key] = source[key];
45 }
46 }
47 }
48 return target;
49 };
50 return _extends.apply(this, arguments);
51 }
52 function _objectWithoutPropertiesLoose(source, excluded) {
53 if (source == null) return {};
54 var target = {};
55 var sourceKeys = Object.keys(source);
56 var key, i;
57 for (i = 0; i < sourceKeys.length; i++) {
58 key = sourceKeys[i];
59 if (excluded.indexOf(key) >= 0) continue;
60 target[key] = source[key];
61 }
62 return target;
63 }
64
65 const defaultMethod = "get";
66 const defaultEncType = "application/x-www-form-urlencoded";
67 function isHtmlElement(object) {
68 return object != null && typeof object.tagName === "string";
69 }
70 function isButtonElement(object) {
71 return isHtmlElement(object) && object.tagName.toLowerCase() === "button";
72 }
73 function isFormElement(object) {
74 return isHtmlElement(object) && object.tagName.toLowerCase() === "form";
75 }
76 function isInputElement(object) {
77 return isHtmlElement(object) && object.tagName.toLowerCase() === "input";
78 }
79 function isModifiedEvent(event) {
80 return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
81 }
82 function shouldProcessLinkClick(event, target) {
83 return event.button === 0 && (
84 // Ignore everything but left clicks
85 !target || target === "_self") &&
86 // Let browser handle "target=_blank" etc.
87 !isModifiedEvent(event) // Ignore clicks with modifier keys
88 ;
89 }
90
91 /**
92 * Creates a URLSearchParams object using the given initializer.
93 *
94 * This is identical to `new URLSearchParams(init)` except it also
95 * supports arrays as values in the object form of the initializer
96 * instead of just strings. This is convenient when you need multiple
97 * values for a given key, but don't want to use an array initializer.
98 *
99 * For example, instead of:
100 *
101 * let searchParams = new URLSearchParams([
102 * ['sort', 'name'],
103 * ['sort', 'price']
104 * ]);
105 *
106 * you can do:
107 *
108 * let searchParams = createSearchParams({
109 * sort: ['name', 'price']
110 * });
111 */
112 function createSearchParams(init) {
113 if (init === void 0) {
114 init = "";
115 }
116 return new URLSearchParams(typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo, key) => {
117 let value = init[key];
118 return memo.concat(Array.isArray(value) ? value.map(v => [key, v]) : [[key, value]]);
119 }, []));
120 }
121 function getSearchParamsForLocation(locationSearch, defaultSearchParams) {
122 let searchParams = createSearchParams(locationSearch);
123 if (defaultSearchParams) {
124 // Use `defaultSearchParams.forEach(...)` here instead of iterating of
125 // `defaultSearchParams.keys()` to work-around a bug in Firefox related to
126 // web extensions. Relevant Bugzilla tickets:
127 // https://bugzilla.mozilla.org/show_bug.cgi?id=1414602
128 // https://bugzilla.mozilla.org/show_bug.cgi?id=1023984
129 defaultSearchParams.forEach((_, key) => {
130 if (!searchParams.has(key)) {
131 defaultSearchParams.getAll(key).forEach(value => {
132 searchParams.append(key, value);
133 });
134 }
135 });
136 }
137 return searchParams;
138 }
139
140 // Thanks https://github.com/sindresorhus/type-fest!
141
142 // One-time check for submitter support
143 let _formDataSupportsSubmitter = null;
144 function isFormDataSubmitterSupported() {
145 if (_formDataSupportsSubmitter === null) {
146 try {
147 new FormData(document.createElement("form"),
148 // @ts-expect-error if FormData supports the submitter parameter, this will throw
149 0);
150 _formDataSupportsSubmitter = false;
151 } catch (e) {
152 _formDataSupportsSubmitter = true;
153 }
154 }
155 return _formDataSupportsSubmitter;
156 }
157 const supportedFormEncTypes = new Set(["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]);
158 function getFormEncType(encType) {
159 if (encType != null && !supportedFormEncTypes.has(encType)) {
160 router.UNSAFE_warning(false, "\"" + encType + "\" is not a valid `encType` for `<Form>`/`<fetcher.Form>` " + ("and will default to \"" + defaultEncType + "\"")) ;
161 return null;
162 }
163 return encType;
164 }
165 function getFormSubmissionInfo(target, basename) {
166 let method;
167 let action;
168 let encType;
169 let formData;
170 let body;
171 if (isFormElement(target)) {
172 // When grabbing the action from the element, it will have had the basename
173 // prefixed to ensure non-JS scenarios work, so strip it since we'll
174 // re-prefix in the router
175 let attr = target.getAttribute("action");
176 action = attr ? router.stripBasename(attr, basename) : null;
177 method = target.getAttribute("method") || defaultMethod;
178 encType = getFormEncType(target.getAttribute("enctype")) || defaultEncType;
179 formData = new FormData(target);
180 } else if (isButtonElement(target) || isInputElement(target) && (target.type === "submit" || target.type === "image")) {
181 let form = target.form;
182 if (form == null) {
183 throw new Error("Cannot submit a <button> or <input type=\"submit\"> without a <form>");
184 }
185
186 // <button>/<input type="submit"> may override attributes of <form>
187
188 // When grabbing the action from the element, it will have had the basename
189 // prefixed to ensure non-JS scenarios work, so strip it since we'll
190 // re-prefix in the router
191 let attr = target.getAttribute("formaction") || form.getAttribute("action");
192 action = attr ? router.stripBasename(attr, basename) : null;
193 method = target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
194 encType = getFormEncType(target.getAttribute("formenctype")) || getFormEncType(form.getAttribute("enctype")) || defaultEncType;
195
196 // Build a FormData object populated from a form and submitter
197 formData = new FormData(form, target);
198
199 // If this browser doesn't support the `FormData(el, submitter)` format,
200 // then tack on the submitter value at the end. This is a lightweight
201 // solution that is not 100% spec compliant. For complete support in older
202 // browsers, consider using the `formdata-submitter-polyfill` package
203 if (!isFormDataSubmitterSupported()) {
204 let {
205 name,
206 type,
207 value
208 } = target;
209 if (type === "image") {
210 let prefix = name ? name + "." : "";
211 formData.append(prefix + "x", "0");
212 formData.append(prefix + "y", "0");
213 } else if (name) {
214 formData.append(name, value);
215 }
216 }
217 } else if (isHtmlElement(target)) {
218 throw new Error("Cannot submit element that is not <form>, <button>, or " + "<input type=\"submit|image\">");
219 } else {
220 method = defaultMethod;
221 action = null;
222 encType = defaultEncType;
223 body = target;
224 }
225
226 // Send body for <Form encType="text/plain" so we encode it into text
227 if (formData && encType === "text/plain") {
228 body = formData;
229 formData = undefined;
230 }
231 return {
232 action,
233 method: method.toLowerCase(),
234 encType,
235 formData,
236 body
237 };
238 }
239
240 const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset", "unstable_viewTransition"],
241 _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "unstable_viewTransition", "children"],
242 _excluded3 = ["fetcherKey", "navigate", "reloadDocument", "replace", "state", "method", "action", "onSubmit", "relative", "preventScrollReset", "unstable_viewTransition"];
243 //#endregion
244 // HEY YOU! DON'T TOUCH THIS VARIABLE!
245 //
246 // It is replaced with the proper version at build time via a babel plugin in
247 // the rollup config.
248 //
249 // Export a global property onto the window for React Router detection by the
250 // Core Web Vitals Technology Report. This way they can configure the `wappalyzer`
251 // to detect and properly classify live websites as being built with React Router:
252 // https://github.com/HTTPArchive/wappalyzer/blob/main/src/technologies/r.json
253 const REACT_ROUTER_VERSION = "6";
254 try {
255 window.__reactRouterVersion = REACT_ROUTER_VERSION;
256 } catch (e) {
257 // no-op
258 }
259
260 ////////////////////////////////////////////////////////////////////////////////
261 //#region Routers
262 ////////////////////////////////////////////////////////////////////////////////
263 function createBrowserRouter(routes, opts) {
264 return router.createRouter({
265 basename: opts == null ? void 0 : opts.basename,
266 future: _extends({}, opts == null ? void 0 : opts.future, {
267 v7_prependBasename: true
268 }),
269 history: router.createBrowserHistory({
270 window: opts == null ? void 0 : opts.window
271 }),
272 hydrationData: (opts == null ? void 0 : opts.hydrationData) || parseHydrationData(),
273 routes,
274 mapRouteProperties: reactRouter.UNSAFE_mapRouteProperties,
275 window: opts == null ? void 0 : opts.window
276 }).initialize();
277 }
278 function createHashRouter(routes, opts) {
279 return router.createRouter({
280 basename: opts == null ? void 0 : opts.basename,
281 future: _extends({}, opts == null ? void 0 : opts.future, {
282 v7_prependBasename: true
283 }),
284 history: router.createHashHistory({
285 window: opts == null ? void 0 : opts.window
286 }),
287 hydrationData: (opts == null ? void 0 : opts.hydrationData) || parseHydrationData(),
288 routes,
289 mapRouteProperties: reactRouter.UNSAFE_mapRouteProperties,
290 window: opts == null ? void 0 : opts.window
291 }).initialize();
292 }
293 function parseHydrationData() {
294 var _window;
295 let state = (_window = window) == null ? void 0 : _window.__staticRouterHydrationData;
296 if (state && state.errors) {
297 state = _extends({}, state, {
298 errors: deserializeErrors(state.errors)
299 });
300 }
301 return state;
302 }
303 function deserializeErrors(errors) {
304 if (!errors) return null;
305 let entries = Object.entries(errors);
306 let serialized = {};
307 for (let [key, val] of entries) {
308 // Hey you! If you change this, please change the corresponding logic in
309 // serializeErrors in react-router-dom/server.tsx :)
310 if (val && val.__type === "RouteErrorResponse") {
311 serialized[key] = new router.UNSAFE_ErrorResponseImpl(val.status, val.statusText, val.data, val.internal === true);
312 } else if (val && val.__type === "Error") {
313 // Attempt to reconstruct the right type of Error (i.e., ReferenceError)
314 if (val.__subType) {
315 let ErrorConstructor = window[val.__subType];
316 if (typeof ErrorConstructor === "function") {
317 try {
318 // @ts-expect-error
319 let error = new ErrorConstructor(val.message);
320 // Wipe away the client-side stack trace. Nothing to fill it in with
321 // because we don't serialize SSR stack traces for security reasons
322 error.stack = "";
323 serialized[key] = error;
324 } catch (e) {
325 // no-op - fall through and create a normal Error
326 }
327 }
328 }
329 if (serialized[key] == null) {
330 let error = new Error(val.message);
331 // Wipe away the client-side stack trace. Nothing to fill it in with
332 // because we don't serialize SSR stack traces for security reasons
333 error.stack = "";
334 serialized[key] = error;
335 }
336 } else {
337 serialized[key] = val;
338 }
339 }
340 return serialized;
341 }
342
343 //#endregion
344
345 ////////////////////////////////////////////////////////////////////////////////
346 //#region Contexts
347 ////////////////////////////////////////////////////////////////////////////////
348 const ViewTransitionContext = /*#__PURE__*/React__namespace.createContext({
349 isTransitioning: false
350 });
351 {
352 ViewTransitionContext.displayName = "ViewTransition";
353 }
354
355 // TODO: (v7) Change the useFetcher data from `any` to `unknown`
356
357 const FetchersContext = /*#__PURE__*/React__namespace.createContext(new Map());
358 {
359 FetchersContext.displayName = "Fetchers";
360 }
361
362 //#endregion
363
364 ////////////////////////////////////////////////////////////////////////////////
365 //#region Components
366 ////////////////////////////////////////////////////////////////////////////////
367
368 /**
369 Webpack + React 17 fails to compile on any of the following because webpack
370 complains that `startTransition` doesn't exist in `React`:
371 * import { startTransition } from "react"
372 * import * as React from from "react";
373 "startTransition" in React ? React.startTransition(() => setState()) : setState()
374 * import * as React from from "react";
375 "startTransition" in React ? React["startTransition"](() => setState()) : setState()
376
377 Moving it to a constant such as the following solves the Webpack/React 17 issue:
378 * import * as React from from "react";
379 const START_TRANSITION = "startTransition";
380 START_TRANSITION in React ? React[START_TRANSITION](() => setState()) : setState()
381
382 However, that introduces webpack/terser minification issues in production builds
383 in React 18 where minification/obfuscation ends up removing the call of
384 React.startTransition entirely from the first half of the ternary. Grabbing
385 this exported reference once up front resolves that issue.
386
387 See https://github.com/remix-run/react-router/issues/10579
388 */
389 const START_TRANSITION = "startTransition";
390 const startTransitionImpl = React__namespace[START_TRANSITION];
391 const FLUSH_SYNC = "flushSync";
392 const flushSyncImpl = ReactDOM__namespace[FLUSH_SYNC];
393 const USE_ID = "useId";
394 const useIdImpl = React__namespace[USE_ID];
395 function startTransitionSafe(cb) {
396 if (startTransitionImpl) {
397 startTransitionImpl(cb);
398 } else {
399 cb();
400 }
401 }
402 function flushSyncSafe(cb) {
403 if (flushSyncImpl) {
404 flushSyncImpl(cb);
405 } else {
406 cb();
407 }
408 }
409 class Deferred {
410 // @ts-expect-error - no initializer
411
412 // @ts-expect-error - no initializer
413
414 constructor() {
415 this.status = "pending";
416 this.promise = new Promise((resolve, reject) => {
417 this.resolve = value => {
418 if (this.status === "pending") {
419 this.status = "resolved";
420 resolve(value);
421 }
422 };
423 this.reject = reason => {
424 if (this.status === "pending") {
425 this.status = "rejected";
426 reject(reason);
427 }
428 };
429 });
430 }
431 }
432
433 /**
434 * Given a Remix Router instance, render the appropriate UI
435 */
436 function RouterProvider(_ref) {
437 let {
438 fallbackElement,
439 router: router$1,
440 future
441 } = _ref;
442 let [state, setStateImpl] = React__namespace.useState(router$1.state);
443 let [pendingState, setPendingState] = React__namespace.useState();
444 let [vtContext, setVtContext] = React__namespace.useState({
445 isTransitioning: false
446 });
447 let [renderDfd, setRenderDfd] = React__namespace.useState();
448 let [transition, setTransition] = React__namespace.useState();
449 let [interruption, setInterruption] = React__namespace.useState();
450 let fetcherData = React__namespace.useRef(new Map());
451 let {
452 v7_startTransition
453 } = future || {};
454 let optInStartTransition = React__namespace.useCallback(cb => {
455 if (v7_startTransition) {
456 startTransitionSafe(cb);
457 } else {
458 cb();
459 }
460 }, [v7_startTransition]);
461 let setState = React__namespace.useCallback((newState, _ref2) => {
462 let {
463 deletedFetchers,
464 unstable_flushSync: flushSync,
465 unstable_viewTransitionOpts: viewTransitionOpts
466 } = _ref2;
467 deletedFetchers.forEach(key => fetcherData.current.delete(key));
468 newState.fetchers.forEach((fetcher, key) => {
469 if (fetcher.data !== undefined) {
470 fetcherData.current.set(key, fetcher.data);
471 }
472 });
473 let isViewTransitionUnavailable = router$1.window == null || typeof router$1.window.document.startViewTransition !== "function";
474
475 // If this isn't a view transition or it's not available in this browser,
476 // just update and be done with it
477 if (!viewTransitionOpts || isViewTransitionUnavailable) {
478 if (flushSync) {
479 flushSyncSafe(() => setStateImpl(newState));
480 } else {
481 optInStartTransition(() => setStateImpl(newState));
482 }
483 return;
484 }
485
486 // flushSync + startViewTransition
487 if (flushSync) {
488 // Flush through the context to mark DOM elements as transition=ing
489 flushSyncSafe(() => {
490 // Cancel any pending transitions
491 if (transition) {
492 renderDfd && renderDfd.resolve();
493 transition.skipTransition();
494 }
495 setVtContext({
496 isTransitioning: true,
497 flushSync: true,
498 currentLocation: viewTransitionOpts.currentLocation,
499 nextLocation: viewTransitionOpts.nextLocation
500 });
501 });
502
503 // Update the DOM
504 let t = router$1.window.document.startViewTransition(() => {
505 flushSyncSafe(() => setStateImpl(newState));
506 });
507
508 // Clean up after the animation completes
509 t.finished.finally(() => {
510 flushSyncSafe(() => {
511 setRenderDfd(undefined);
512 setTransition(undefined);
513 setPendingState(undefined);
514 setVtContext({
515 isTransitioning: false
516 });
517 });
518 });
519 flushSyncSafe(() => setTransition(t));
520 return;
521 }
522
523 // startTransition + startViewTransition
524 if (transition) {
525 // Interrupting an in-progress transition, cancel and let everything flush
526 // out, and then kick off a new transition from the interruption state
527 renderDfd && renderDfd.resolve();
528 transition.skipTransition();
529 setInterruption({
530 state: newState,
531 currentLocation: viewTransitionOpts.currentLocation,
532 nextLocation: viewTransitionOpts.nextLocation
533 });
534 } else {
535 // Completed navigation update with opted-in view transitions, let 'er rip
536 setPendingState(newState);
537 setVtContext({
538 isTransitioning: true,
539 flushSync: false,
540 currentLocation: viewTransitionOpts.currentLocation,
541 nextLocation: viewTransitionOpts.nextLocation
542 });
543 }
544 }, [router$1.window, transition, renderDfd, fetcherData, optInStartTransition]);
545
546 // Need to use a layout effect here so we are subscribed early enough to
547 // pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
548 React__namespace.useLayoutEffect(() => router$1.subscribe(setState), [router$1, setState]);
549
550 // When we start a view transition, create a Deferred we can use for the
551 // eventual "completed" render
552 React__namespace.useEffect(() => {
553 if (vtContext.isTransitioning && !vtContext.flushSync) {
554 setRenderDfd(new Deferred());
555 }
556 }, [vtContext]);
557
558 // Once the deferred is created, kick off startViewTransition() to update the
559 // DOM and then wait on the Deferred to resolve (indicating the DOM update has
560 // happened)
561 React__namespace.useEffect(() => {
562 if (renderDfd && pendingState && router$1.window) {
563 let newState = pendingState;
564 let renderPromise = renderDfd.promise;
565 let transition = router$1.window.document.startViewTransition(async () => {
566 optInStartTransition(() => setStateImpl(newState));
567 await renderPromise;
568 });
569 transition.finished.finally(() => {
570 setRenderDfd(undefined);
571 setTransition(undefined);
572 setPendingState(undefined);
573 setVtContext({
574 isTransitioning: false
575 });
576 });
577 setTransition(transition);
578 }
579 }, [optInStartTransition, pendingState, renderDfd, router$1.window]);
580
581 // When the new location finally renders and is committed to the DOM, this
582 // effect will run to resolve the transition
583 React__namespace.useEffect(() => {
584 if (renderDfd && pendingState && state.location.key === pendingState.location.key) {
585 renderDfd.resolve();
586 }
587 }, [renderDfd, transition, state.location, pendingState]);
588
589 // If we get interrupted with a new navigation during a transition, we skip
590 // the active transition, let it cleanup, then kick it off again here
591 React__namespace.useEffect(() => {
592 if (!vtContext.isTransitioning && interruption) {
593 setPendingState(interruption.state);
594 setVtContext({
595 isTransitioning: true,
596 flushSync: false,
597 currentLocation: interruption.currentLocation,
598 nextLocation: interruption.nextLocation
599 });
600 setInterruption(undefined);
601 }
602 }, [vtContext.isTransitioning, interruption]);
603 React__namespace.useEffect(() => {
604 router.UNSAFE_warning(fallbackElement == null || !router$1.future.v7_partialHydration, "`<RouterProvider fallbackElement>` is deprecated when using " + "`v7_partialHydration`, use a `HydrateFallback` component instead") ;
605 // Only log this once on initial mount
606 // eslint-disable-next-line react-hooks/exhaustive-deps
607 }, []);
608 let navigator = React__namespace.useMemo(() => {
609 return {
610 createHref: router$1.createHref,
611 encodeLocation: router$1.encodeLocation,
612 go: n => router$1.navigate(n),
613 push: (to, state, opts) => router$1.navigate(to, {
614 state,
615 preventScrollReset: opts == null ? void 0 : opts.preventScrollReset
616 }),
617 replace: (to, state, opts) => router$1.navigate(to, {
618 replace: true,
619 state,
620 preventScrollReset: opts == null ? void 0 : opts.preventScrollReset
621 })
622 };
623 }, [router$1]);
624 let basename = router$1.basename || "/";
625 let dataRouterContext = React__namespace.useMemo(() => ({
626 router: router$1,
627 navigator,
628 static: false,
629 basename
630 }), [router$1, navigator, basename]);
631
632 // The fragment and {null} here are important! We need them to keep React 18's
633 // useId happy when we are server-rendering since we may have a <script> here
634 // containing the hydrated server-side staticContext (from StaticRouterProvider).
635 // useId relies on the component tree structure to generate deterministic id's
636 // so we need to ensure it remains the same on the client even though
637 // we don't need the <script> tag
638 return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(reactRouter.UNSAFE_DataRouterContext.Provider, {
639 value: dataRouterContext
640 }, /*#__PURE__*/React__namespace.createElement(reactRouter.UNSAFE_DataRouterStateContext.Provider, {
641 value: state
642 }, /*#__PURE__*/React__namespace.createElement(FetchersContext.Provider, {
643 value: fetcherData.current
644 }, /*#__PURE__*/React__namespace.createElement(ViewTransitionContext.Provider, {
645 value: vtContext
646 }, /*#__PURE__*/React__namespace.createElement(reactRouter.Router, {
647 basename: basename,
648 location: state.location,
649 navigationType: state.historyAction,
650 navigator: navigator,
651 future: {
652 v7_relativeSplatPath: router$1.future.v7_relativeSplatPath
653 }
654 }, state.initialized || router$1.future.v7_partialHydration ? /*#__PURE__*/React__namespace.createElement(DataRoutes, {
655 routes: router$1.routes,
656 future: router$1.future,
657 state: state
658 }) : fallbackElement))))), null);
659 }
660 function DataRoutes(_ref3) {
661 let {
662 routes,
663 future,
664 state
665 } = _ref3;
666 return reactRouter.UNSAFE_useRoutesImpl(routes, undefined, state, future);
667 }
668 /**
669 * A `<Router>` for use in web browsers. Provides the cleanest URLs.
670 */
671 function BrowserRouter(_ref4) {
672 let {
673 basename,
674 children,
675 future,
676 window
677 } = _ref4;
678 let historyRef = React__namespace.useRef();
679 if (historyRef.current == null) {
680 historyRef.current = router.createBrowserHistory({
681 window,
682 v5Compat: true
683 });
684 }
685 let history = historyRef.current;
686 let [state, setStateImpl] = React__namespace.useState({
687 action: history.action,
688 location: history.location
689 });
690 let {
691 v7_startTransition
692 } = future || {};
693 let setState = React__namespace.useCallback(newState => {
694 v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
695 }, [setStateImpl, v7_startTransition]);
696 React__namespace.useLayoutEffect(() => history.listen(setState), [history, setState]);
697 return /*#__PURE__*/React__namespace.createElement(reactRouter.Router, {
698 basename: basename,
699 children: children,
700 location: state.location,
701 navigationType: state.action,
702 navigator: history,
703 future: future
704 });
705 }
706 /**
707 * A `<Router>` for use in web browsers. Stores the location in the hash
708 * portion of the URL so it is not sent to the server.
709 */
710 function HashRouter(_ref5) {
711 let {
712 basename,
713 children,
714 future,
715 window
716 } = _ref5;
717 let historyRef = React__namespace.useRef();
718 if (historyRef.current == null) {
719 historyRef.current = router.createHashHistory({
720 window,
721 v5Compat: true
722 });
723 }
724 let history = historyRef.current;
725 let [state, setStateImpl] = React__namespace.useState({
726 action: history.action,
727 location: history.location
728 });
729 let {
730 v7_startTransition
731 } = future || {};
732 let setState = React__namespace.useCallback(newState => {
733 v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
734 }, [setStateImpl, v7_startTransition]);
735 React__namespace.useLayoutEffect(() => history.listen(setState), [history, setState]);
736 return /*#__PURE__*/React__namespace.createElement(reactRouter.Router, {
737 basename: basename,
738 children: children,
739 location: state.location,
740 navigationType: state.action,
741 navigator: history,
742 future: future
743 });
744 }
745 /**
746 * A `<Router>` that accepts a pre-instantiated history object. It's important
747 * to note that using your own history object is highly discouraged and may add
748 * two versions of the history library to your bundles unless you use the same
749 * version of the history library that React Router uses internally.
750 */
751 function HistoryRouter(_ref6) {
752 let {
753 basename,
754 children,
755 future,
756 history
757 } = _ref6;
758 let [state, setStateImpl] = React__namespace.useState({
759 action: history.action,
760 location: history.location
761 });
762 let {
763 v7_startTransition
764 } = future || {};
765 let setState = React__namespace.useCallback(newState => {
766 v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
767 }, [setStateImpl, v7_startTransition]);
768 React__namespace.useLayoutEffect(() => history.listen(setState), [history, setState]);
769 return /*#__PURE__*/React__namespace.createElement(reactRouter.Router, {
770 basename: basename,
771 children: children,
772 location: state.location,
773 navigationType: state.action,
774 navigator: history,
775 future: future
776 });
777 }
778 {
779 HistoryRouter.displayName = "unstable_HistoryRouter";
780 }
781 const isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
782 const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
783
784 /**
785 * The public API for rendering a history-aware `<a>`.
786 */
787 const Link = /*#__PURE__*/React__namespace.forwardRef(function LinkWithRef(_ref7, ref) {
788 let {
789 onClick,
790 relative,
791 reloadDocument,
792 replace,
793 state,
794 target,
795 to,
796 preventScrollReset,
797 unstable_viewTransition
798 } = _ref7,
799 rest = _objectWithoutPropertiesLoose(_ref7, _excluded);
800 let {
801 basename
802 } = React__namespace.useContext(reactRouter.UNSAFE_NavigationContext);
803
804 // Rendered into <a href> for absolute URLs
805 let absoluteHref;
806 let isExternal = false;
807 if (typeof to === "string" && ABSOLUTE_URL_REGEX.test(to)) {
808 // Render the absolute href server- and client-side
809 absoluteHref = to;
810
811 // Only check for external origins client-side
812 if (isBrowser) {
813 try {
814 let currentUrl = new URL(window.location.href);
815 let targetUrl = to.startsWith("//") ? new URL(currentUrl.protocol + to) : new URL(to);
816 let path = router.stripBasename(targetUrl.pathname, basename);
817 if (targetUrl.origin === currentUrl.origin && path != null) {
818 // Strip the protocol/origin/basename for same-origin absolute URLs
819 to = path + targetUrl.search + targetUrl.hash;
820 } else {
821 isExternal = true;
822 }
823 } catch (e) {
824 // We can't do external URL detection without a valid URL
825 router.UNSAFE_warning(false, "<Link to=\"" + to + "\"> contains an invalid URL which will probably break " + "when clicked - please update to a valid URL path.") ;
826 }
827 }
828 }
829
830 // Rendered into <a href> for relative URLs
831 let href = reactRouter.useHref(to, {
832 relative
833 });
834 let internalOnClick = useLinkClickHandler(to, {
835 replace,
836 state,
837 target,
838 preventScrollReset,
839 relative,
840 unstable_viewTransition
841 });
842 function handleClick(event) {
843 if (onClick) onClick(event);
844 if (!event.defaultPrevented) {
845 internalOnClick(event);
846 }
847 }
848 return (
849 /*#__PURE__*/
850 // eslint-disable-next-line jsx-a11y/anchor-has-content
851 React__namespace.createElement("a", _extends({}, rest, {
852 href: absoluteHref || href,
853 onClick: isExternal || reloadDocument ? onClick : handleClick,
854 ref: ref,
855 target: target
856 }))
857 );
858 });
859 {
860 Link.displayName = "Link";
861 }
862 /**
863 * A `<Link>` wrapper that knows if it's "active" or not.
864 */
865 const NavLink = /*#__PURE__*/React__namespace.forwardRef(function NavLinkWithRef(_ref8, ref) {
866 let {
867 "aria-current": ariaCurrentProp = "page",
868 caseSensitive = false,
869 className: classNameProp = "",
870 end = false,
871 style: styleProp,
872 to,
873 unstable_viewTransition,
874 children
875 } = _ref8,
876 rest = _objectWithoutPropertiesLoose(_ref8, _excluded2);
877 let path = reactRouter.useResolvedPath(to, {
878 relative: rest.relative
879 });
880 let location = reactRouter.useLocation();
881 let routerState = React__namespace.useContext(reactRouter.UNSAFE_DataRouterStateContext);
882 let {
883 navigator,
884 basename
885 } = React__namespace.useContext(reactRouter.UNSAFE_NavigationContext);
886 let isTransitioning = routerState != null &&
887 // Conditional usage is OK here because the usage of a data router is static
888 // eslint-disable-next-line react-hooks/rules-of-hooks
889 useViewTransitionState(path) && unstable_viewTransition === true;
890 let toPathname = navigator.encodeLocation ? navigator.encodeLocation(path).pathname : path.pathname;
891 let locationPathname = location.pathname;
892 let nextLocationPathname = routerState && routerState.navigation && routerState.navigation.location ? routerState.navigation.location.pathname : null;
893 if (!caseSensitive) {
894 locationPathname = locationPathname.toLowerCase();
895 nextLocationPathname = nextLocationPathname ? nextLocationPathname.toLowerCase() : null;
896 toPathname = toPathname.toLowerCase();
897 }
898 if (nextLocationPathname && basename) {
899 nextLocationPathname = router.stripBasename(nextLocationPathname, basename) || nextLocationPathname;
900 }
901
902 // If the `to` has a trailing slash, look at that exact spot. Otherwise,
903 // we're looking for a slash _after_ what's in `to`. For example:
904 //
905 // <NavLink to="/users"> and <NavLink to="/users/">
906 // both want to look for a / at index 6 to match URL `/users/matt`
907 const endSlashPosition = toPathname !== "/" && toPathname.endsWith("/") ? toPathname.length - 1 : toPathname.length;
908 let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(endSlashPosition) === "/";
909 let isPending = nextLocationPathname != null && (nextLocationPathname === toPathname || !end && nextLocationPathname.startsWith(toPathname) && nextLocationPathname.charAt(toPathname.length) === "/");
910 let renderProps = {
911 isActive,
912 isPending,
913 isTransitioning
914 };
915 let ariaCurrent = isActive ? ariaCurrentProp : undefined;
916 let className;
917 if (typeof classNameProp === "function") {
918 className = classNameProp(renderProps);
919 } else {
920 // If the className prop is not a function, we use a default `active`
921 // class for <NavLink />s that are active. In v5 `active` was the default
922 // value for `activeClassName`, but we are removing that API and can still
923 // use the old default behavior for a cleaner upgrade path and keep the
924 // simple styling rules working as they currently do.
925 className = [classNameProp, isActive ? "active" : null, isPending ? "pending" : null, isTransitioning ? "transitioning" : null].filter(Boolean).join(" ");
926 }
927 let style = typeof styleProp === "function" ? styleProp(renderProps) : styleProp;
928 return /*#__PURE__*/React__namespace.createElement(Link, _extends({}, rest, {
929 "aria-current": ariaCurrent,
930 className: className,
931 ref: ref,
932 style: style,
933 to: to,
934 unstable_viewTransition: unstable_viewTransition
935 }), typeof children === "function" ? children(renderProps) : children);
936 });
937 {
938 NavLink.displayName = "NavLink";
939 }
940 /**
941 * A `@remix-run/router`-aware `<form>`. It behaves like a normal form except
942 * that the interaction with the server is with `fetch` instead of new document
943 * requests, allowing components to add nicer UX to the page as the form is
944 * submitted and returns with data.
945 */
946 const Form = /*#__PURE__*/React__namespace.forwardRef((_ref9, forwardedRef) => {
947 let {
948 fetcherKey,
949 navigate,
950 reloadDocument,
951 replace,
952 state,
953 method = defaultMethod,
954 action,
955 onSubmit,
956 relative,
957 preventScrollReset,
958 unstable_viewTransition
959 } = _ref9,
960 props = _objectWithoutPropertiesLoose(_ref9, _excluded3);
961 let submit = useSubmit();
962 let formAction = useFormAction(action, {
963 relative
964 });
965 let formMethod = method.toLowerCase() === "get" ? "get" : "post";
966 let submitHandler = event => {
967 onSubmit && onSubmit(event);
968 if (event.defaultPrevented) return;
969 event.preventDefault();
970 let submitter = event.nativeEvent.submitter;
971 let submitMethod = (submitter == null ? void 0 : submitter.getAttribute("formmethod")) || method;
972 submit(submitter || event.currentTarget, {
973 fetcherKey,
974 method: submitMethod,
975 navigate,
976 replace,
977 state,
978 relative,
979 preventScrollReset,
980 unstable_viewTransition
981 });
982 };
983 return /*#__PURE__*/React__namespace.createElement("form", _extends({
984 ref: forwardedRef,
985 method: formMethod,
986 action: formAction,
987 onSubmit: reloadDocument ? onSubmit : submitHandler
988 }, props));
989 });
990 {
991 Form.displayName = "Form";
992 }
993 /**
994 * This component will emulate the browser's scroll restoration on location
995 * changes.
996 */
997 function ScrollRestoration(_ref10) {
998 let {
999 getKey,
1000 storageKey
1001 } = _ref10;
1002 useScrollRestoration({
1003 getKey,
1004 storageKey
1005 });
1006 return null;
1007 }
1008 {
1009 ScrollRestoration.displayName = "ScrollRestoration";
1010 }
1011 //#endregion
1012
1013 ////////////////////////////////////////////////////////////////////////////////
1014 //#region Hooks
1015 ////////////////////////////////////////////////////////////////////////////////
1016 var DataRouterHook = /*#__PURE__*/function (DataRouterHook) {
1017 DataRouterHook["UseScrollRestoration"] = "useScrollRestoration";
1018 DataRouterHook["UseSubmit"] = "useSubmit";
1019 DataRouterHook["UseSubmitFetcher"] = "useSubmitFetcher";
1020 DataRouterHook["UseFetcher"] = "useFetcher";
1021 DataRouterHook["useViewTransitionState"] = "useViewTransitionState";
1022 return DataRouterHook;
1023 }(DataRouterHook || {});
1024 var DataRouterStateHook = /*#__PURE__*/function (DataRouterStateHook) {
1025 DataRouterStateHook["UseFetcher"] = "useFetcher";
1026 DataRouterStateHook["UseFetchers"] = "useFetchers";
1027 DataRouterStateHook["UseScrollRestoration"] = "useScrollRestoration";
1028 return DataRouterStateHook;
1029 }(DataRouterStateHook || {}); // Internal hooks
1030 function getDataRouterConsoleError(hookName) {
1031 return hookName + " must be used within a data router. See https://reactrouter.com/routers/picking-a-router.";
1032 }
1033 function useDataRouterContext(hookName) {
1034 let ctx = React__namespace.useContext(reactRouter.UNSAFE_DataRouterContext);
1035 !ctx ? router.UNSAFE_invariant(false, getDataRouterConsoleError(hookName)) : void 0;
1036 return ctx;
1037 }
1038 function useDataRouterState(hookName) {
1039 let state = React__namespace.useContext(reactRouter.UNSAFE_DataRouterStateContext);
1040 !state ? router.UNSAFE_invariant(false, getDataRouterConsoleError(hookName)) : void 0;
1041 return state;
1042 }
1043
1044 // External hooks
1045
1046 /**
1047 * Handles the click behavior for router `<Link>` components. This is useful if
1048 * you need to create custom `<Link>` components with the same click behavior we
1049 * use in our exported `<Link>`.
1050 */
1051 function useLinkClickHandler(to, _temp) {
1052 let {
1053 target,
1054 replace: replaceProp,
1055 state,
1056 preventScrollReset,
1057 relative,
1058 unstable_viewTransition
1059 } = _temp === void 0 ? {} : _temp;
1060 let navigate = reactRouter.useNavigate();
1061 let location = reactRouter.useLocation();
1062 let path = reactRouter.useResolvedPath(to, {
1063 relative
1064 });
1065 return React__namespace.useCallback(event => {
1066 if (shouldProcessLinkClick(event, target)) {
1067 event.preventDefault();
1068
1069 // If the URL hasn't changed, a regular <a> will do a replace instead of
1070 // a push, so do the same here unless the replace prop is explicitly set
1071 let replace = replaceProp !== undefined ? replaceProp : reactRouter.createPath(location) === reactRouter.createPath(path);
1072 navigate(to, {
1073 replace,
1074 state,
1075 preventScrollReset,
1076 relative,
1077 unstable_viewTransition
1078 });
1079 }
1080 }, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative, unstable_viewTransition]);
1081 }
1082
1083 /**
1084 * A convenient wrapper for reading and writing search parameters via the
1085 * URLSearchParams interface.
1086 */
1087 function useSearchParams(defaultInit) {
1088 router.UNSAFE_warning(typeof URLSearchParams !== "undefined", "You cannot use the `useSearchParams` hook in a browser that does not " + "support the URLSearchParams API. If you need to support Internet " + "Explorer 11, we recommend you load a polyfill such as " + "https://github.com/ungap/url-search-params\n\n" + "If you're unsure how to load polyfills, we recommend you check out " + "https://polyfill.io/v3/ which provides some recommendations about how " + "to load polyfills only for users that need them, instead of for every " + "user.") ;
1089 let defaultSearchParamsRef = React__namespace.useRef(createSearchParams(defaultInit));
1090 let hasSetSearchParamsRef = React__namespace.useRef(false);
1091 let location = reactRouter.useLocation();
1092 let searchParams = React__namespace.useMemo(() =>
1093 // Only merge in the defaults if we haven't yet called setSearchParams.
1094 // Once we call that we want those to take precedence, otherwise you can't
1095 // remove a param with setSearchParams({}) if it has an initial value
1096 getSearchParamsForLocation(location.search, hasSetSearchParamsRef.current ? null : defaultSearchParamsRef.current), [location.search]);
1097 let navigate = reactRouter.useNavigate();
1098 let setSearchParams = React__namespace.useCallback((nextInit, navigateOptions) => {
1099 const newSearchParams = createSearchParams(typeof nextInit === "function" ? nextInit(searchParams) : nextInit);
1100 hasSetSearchParamsRef.current = true;
1101 navigate("?" + newSearchParams, navigateOptions);
1102 }, [navigate, searchParams]);
1103 return [searchParams, setSearchParams];
1104 }
1105
1106 /**
1107 * Submits a HTML `<form>` to the server without reloading the page.
1108 */
1109
1110 /**
1111 * Submits a fetcher `<form>` to the server without reloading the page.
1112 */
1113
1114 function validateClientSideSubmission() {
1115 if (typeof document === "undefined") {
1116 throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
1117 }
1118 }
1119 let fetcherId = 0;
1120 let getUniqueFetcherId = () => "__" + String(++fetcherId) + "__";
1121
1122 /**
1123 * Returns a function that may be used to programmatically submit a form (or
1124 * some arbitrary data) to the server.
1125 */
1126 function useSubmit() {
1127 let {
1128 router
1129 } = useDataRouterContext(DataRouterHook.UseSubmit);
1130 let {
1131 basename
1132 } = React__namespace.useContext(reactRouter.UNSAFE_NavigationContext);
1133 let currentRouteId = reactRouter.UNSAFE_useRouteId();
1134 return React__namespace.useCallback(function (target, options) {
1135 if (options === void 0) {
1136 options = {};
1137 }
1138 validateClientSideSubmission();
1139 let {
1140 action,
1141 method,
1142 encType,
1143 formData,
1144 body
1145 } = getFormSubmissionInfo(target, basename);
1146 if (options.navigate === false) {
1147 let key = options.fetcherKey || getUniqueFetcherId();
1148 router.fetch(key, currentRouteId, options.action || action, {
1149 preventScrollReset: options.preventScrollReset,
1150 formData,
1151 body,
1152 formMethod: options.method || method,
1153 formEncType: options.encType || encType,
1154 unstable_flushSync: options.unstable_flushSync
1155 });
1156 } else {
1157 router.navigate(options.action || action, {
1158 preventScrollReset: options.preventScrollReset,
1159 formData,
1160 body,
1161 formMethod: options.method || method,
1162 formEncType: options.encType || encType,
1163 replace: options.replace,
1164 state: options.state,
1165 fromRouteId: currentRouteId,
1166 unstable_flushSync: options.unstable_flushSync,
1167 unstable_viewTransition: options.unstable_viewTransition
1168 });
1169 }
1170 }, [router, basename, currentRouteId]);
1171 }
1172
1173 // v7: Eventually we should deprecate this entirely in favor of using the
1174 // router method directly?
1175 function useFormAction(action, _temp2) {
1176 let {
1177 relative
1178 } = _temp2 === void 0 ? {} : _temp2;
1179 let {
1180 basename
1181 } = React__namespace.useContext(reactRouter.UNSAFE_NavigationContext);
1182 let routeContext = React__namespace.useContext(reactRouter.UNSAFE_RouteContext);
1183 !routeContext ? router.UNSAFE_invariant(false, "useFormAction must be used inside a RouteContext") : void 0;
1184 let [match] = routeContext.matches.slice(-1);
1185 // Shallow clone path so we can modify it below, otherwise we modify the
1186 // object referenced by useMemo inside useResolvedPath
1187 let path = _extends({}, reactRouter.useResolvedPath(action ? action : ".", {
1188 relative
1189 }));
1190
1191 // If no action was specified, browsers will persist current search params
1192 // when determining the path, so match that behavior
1193 // https://github.com/remix-run/remix/issues/927
1194 let location = reactRouter.useLocation();
1195 if (action == null) {
1196 // Safe to write to this directly here since if action was undefined, we
1197 // would have called useResolvedPath(".") which will never include a search
1198 path.search = location.search;
1199
1200 // When grabbing search params from the URL, remove any included ?index param
1201 // since it might not apply to our contextual route. We add it back based
1202 // on match.route.index below
1203 let params = new URLSearchParams(path.search);
1204 if (params.has("index") && params.get("index") === "") {
1205 params.delete("index");
1206 path.search = params.toString() ? "?" + params.toString() : "";
1207 }
1208 }
1209 if ((!action || action === ".") && match.route.index) {
1210 path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
1211 }
1212
1213 // If we're operating within a basename, prepend it to the pathname prior
1214 // to creating the form action. If this is a root navigation, then just use
1215 // the raw basename which allows the basename to have full control over the
1216 // presence of a trailing slash on root actions
1217 if (basename !== "/") {
1218 path.pathname = path.pathname === "/" ? basename : router.joinPaths([basename, path.pathname]);
1219 }
1220 return reactRouter.createPath(path);
1221 }
1222 // TODO: (v7) Change the useFetcher generic default from `any` to `unknown`
1223 /**
1224 * Interacts with route loaders and actions without causing a navigation. Great
1225 * for any interaction that stays on the same page.
1226 */
1227 function useFetcher(_temp3) {
1228 var _route$matches;
1229 let {
1230 key
1231 } = _temp3 === void 0 ? {} : _temp3;
1232 let {
1233 router: router$1
1234 } = useDataRouterContext(DataRouterHook.UseFetcher);
1235 let state = useDataRouterState(DataRouterStateHook.UseFetcher);
1236 let fetcherData = React__namespace.useContext(FetchersContext);
1237 let route = React__namespace.useContext(reactRouter.UNSAFE_RouteContext);
1238 let routeId = (_route$matches = route.matches[route.matches.length - 1]) == null ? void 0 : _route$matches.route.id;
1239 !fetcherData ? router.UNSAFE_invariant(false, "useFetcher must be used inside a FetchersContext") : void 0;
1240 !route ? router.UNSAFE_invariant(false, "useFetcher must be used inside a RouteContext") : void 0;
1241 !(routeId != null) ? router.UNSAFE_invariant(false, "useFetcher can only be used on routes that contain a unique \"id\"") : void 0;
1242
1243 // Fetcher key handling
1244 // OK to call conditionally to feature detect `useId`
1245 // eslint-disable-next-line react-hooks/rules-of-hooks
1246 let defaultKey = useIdImpl ? useIdImpl() : "";
1247 let [fetcherKey, setFetcherKey] = React__namespace.useState(key || defaultKey);
1248 if (key && key !== fetcherKey) {
1249 setFetcherKey(key);
1250 } else if (!fetcherKey) {
1251 // We will only fall through here when `useId` is not available
1252 setFetcherKey(getUniqueFetcherId());
1253 }
1254
1255 // Registration/cleanup
1256 React__namespace.useEffect(() => {
1257 router$1.getFetcher(fetcherKey);
1258 return () => {
1259 // Tell the router we've unmounted - if v7_fetcherPersist is enabled this
1260 // will not delete immediately but instead queue up a delete after the
1261 // fetcher returns to an `idle` state
1262 router$1.deleteFetcher(fetcherKey);
1263 };
1264 }, [router$1, fetcherKey]);
1265
1266 // Fetcher additions
1267 let load = React__namespace.useCallback((href, opts) => {
1268 !routeId ? router.UNSAFE_invariant(false, "No routeId available for fetcher.load()") : void 0;
1269 router$1.fetch(fetcherKey, routeId, href, opts);
1270 }, [fetcherKey, routeId, router$1]);
1271 let submitImpl = useSubmit();
1272 let submit = React__namespace.useCallback((target, opts) => {
1273 submitImpl(target, _extends({}, opts, {
1274 navigate: false,
1275 fetcherKey
1276 }));
1277 }, [fetcherKey, submitImpl]);
1278 let FetcherForm = React__namespace.useMemo(() => {
1279 let FetcherForm = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
1280 return /*#__PURE__*/React__namespace.createElement(Form, _extends({}, props, {
1281 navigate: false,
1282 fetcherKey: fetcherKey,
1283 ref: ref
1284 }));
1285 });
1286 {
1287 FetcherForm.displayName = "fetcher.Form";
1288 }
1289 return FetcherForm;
1290 }, [fetcherKey]);
1291
1292 // Exposed FetcherWithComponents
1293 let fetcher = state.fetchers.get(fetcherKey) || router.IDLE_FETCHER;
1294 let data = fetcherData.get(fetcherKey);
1295 let fetcherWithComponents = React__namespace.useMemo(() => _extends({
1296 Form: FetcherForm,
1297 submit,
1298 load
1299 }, fetcher, {
1300 data
1301 }), [FetcherForm, submit, load, fetcher, data]);
1302 return fetcherWithComponents;
1303 }
1304
1305 /**
1306 * Provides all fetchers currently on the page. Useful for layouts and parent
1307 * routes that need to provide pending/optimistic UI regarding the fetch.
1308 */
1309 function useFetchers() {
1310 let state = useDataRouterState(DataRouterStateHook.UseFetchers);
1311 return Array.from(state.fetchers.entries()).map(_ref11 => {
1312 let [key, fetcher] = _ref11;
1313 return _extends({}, fetcher, {
1314 key
1315 });
1316 });
1317 }
1318 const SCROLL_RESTORATION_STORAGE_KEY = "react-router-scroll-positions";
1319 let savedScrollPositions = {};
1320
1321 /**
1322 * When rendered inside a RouterProvider, will restore scroll positions on navigations
1323 */
1324 function useScrollRestoration(_temp4) {
1325 let {
1326 getKey,
1327 storageKey
1328 } = _temp4 === void 0 ? {} : _temp4;
1329 let {
1330 router: router$1
1331 } = useDataRouterContext(DataRouterHook.UseScrollRestoration);
1332 let {
1333 restoreScrollPosition,
1334 preventScrollReset
1335 } = useDataRouterState(DataRouterStateHook.UseScrollRestoration);
1336 let {
1337 basename
1338 } = React__namespace.useContext(reactRouter.UNSAFE_NavigationContext);
1339 let location = reactRouter.useLocation();
1340 let matches = reactRouter.useMatches();
1341 let navigation = reactRouter.useNavigation();
1342
1343 // Trigger manual scroll restoration while we're active
1344 React__namespace.useEffect(() => {
1345 window.history.scrollRestoration = "manual";
1346 return () => {
1347 window.history.scrollRestoration = "auto";
1348 };
1349 }, []);
1350
1351 // Save positions on pagehide
1352 usePageHide(React__namespace.useCallback(() => {
1353 if (navigation.state === "idle") {
1354 let key = (getKey ? getKey(location, matches) : null) || location.key;
1355 savedScrollPositions[key] = window.scrollY;
1356 }
1357 try {
1358 sessionStorage.setItem(storageKey || SCROLL_RESTORATION_STORAGE_KEY, JSON.stringify(savedScrollPositions));
1359 } catch (error) {
1360 router.UNSAFE_warning(false, "Failed to save scroll positions in sessionStorage, <ScrollRestoration /> will not work properly (" + error + ").") ;
1361 }
1362 window.history.scrollRestoration = "auto";
1363 }, [storageKey, getKey, navigation.state, location, matches]));
1364
1365 // Read in any saved scroll locations
1366 if (typeof document !== "undefined") {
1367 // eslint-disable-next-line react-hooks/rules-of-hooks
1368 React__namespace.useLayoutEffect(() => {
1369 try {
1370 let sessionPositions = sessionStorage.getItem(storageKey || SCROLL_RESTORATION_STORAGE_KEY);
1371 if (sessionPositions) {
1372 savedScrollPositions = JSON.parse(sessionPositions);
1373 }
1374 } catch (e) {
1375 // no-op, use default empty object
1376 }
1377 }, [storageKey]);
1378
1379 // Enable scroll restoration in the router
1380 // eslint-disable-next-line react-hooks/rules-of-hooks
1381 React__namespace.useLayoutEffect(() => {
1382 let getKeyWithoutBasename = getKey && basename !== "/" ? (location, matches) => getKey( // Strip the basename to match useLocation()
1383 _extends({}, location, {
1384 pathname: router.stripBasename(location.pathname, basename) || location.pathname
1385 }), matches) : getKey;
1386 let disableScrollRestoration = router$1 == null ? void 0 : router$1.enableScrollRestoration(savedScrollPositions, () => window.scrollY, getKeyWithoutBasename);
1387 return () => disableScrollRestoration && disableScrollRestoration();
1388 }, [router$1, basename, getKey]);
1389
1390 // Restore scrolling when state.restoreScrollPosition changes
1391 // eslint-disable-next-line react-hooks/rules-of-hooks
1392 React__namespace.useLayoutEffect(() => {
1393 // Explicit false means don't do anything (used for submissions)
1394 if (restoreScrollPosition === false) {
1395 return;
1396 }
1397
1398 // been here before, scroll to it
1399 if (typeof restoreScrollPosition === "number") {
1400 window.scrollTo(0, restoreScrollPosition);
1401 return;
1402 }
1403
1404 // try to scroll to the hash
1405 if (location.hash) {
1406 let el = document.getElementById(decodeURIComponent(location.hash.slice(1)));
1407 if (el) {
1408 el.scrollIntoView();
1409 return;
1410 }
1411 }
1412
1413 // Don't reset if this navigation opted out
1414 if (preventScrollReset === true) {
1415 return;
1416 }
1417
1418 // otherwise go to the top on new locations
1419 window.scrollTo(0, 0);
1420 }, [location, restoreScrollPosition, preventScrollReset]);
1421 }
1422 }
1423
1424 /**
1425 * Setup a callback to be fired on the window's `beforeunload` event. This is
1426 * useful for saving some data to `window.localStorage` just before the page
1427 * refreshes.
1428 *
1429 * Note: The `callback` argument should be a function created with
1430 * `React.useCallback()`.
1431 */
1432 function useBeforeUnload(callback, options) {
1433 let {
1434 capture
1435 } = options || {};
1436 React__namespace.useEffect(() => {
1437 let opts = capture != null ? {
1438 capture
1439 } : undefined;
1440 window.addEventListener("beforeunload", callback, opts);
1441 return () => {
1442 window.removeEventListener("beforeunload", callback, opts);
1443 };
1444 }, [callback, capture]);
1445 }
1446
1447 /**
1448 * Setup a callback to be fired on the window's `pagehide` event. This is
1449 * useful for saving some data to `window.localStorage` just before the page
1450 * refreshes. This event is better supported than beforeunload across browsers.
1451 *
1452 * Note: The `callback` argument should be a function created with
1453 * `React.useCallback()`.
1454 */
1455 function usePageHide(callback, options) {
1456 let {
1457 capture
1458 } = options || {};
1459 React__namespace.useEffect(() => {
1460 let opts = capture != null ? {
1461 capture
1462 } : undefined;
1463 window.addEventListener("pagehide", callback, opts);
1464 return () => {
1465 window.removeEventListener("pagehide", callback, opts);
1466 };
1467 }, [callback, capture]);
1468 }
1469
1470 /**
1471 * Wrapper around useBlocker to show a window.confirm prompt to users instead
1472 * of building a custom UI with useBlocker.
1473 *
1474 * Warning: This has *a lot of rough edges* and behaves very differently (and
1475 * very incorrectly in some cases) across browsers if user click addition
1476 * back/forward navigations while the confirm is open. Use at your own risk.
1477 */
1478 function usePrompt(_ref12) {
1479 let {
1480 when,
1481 message
1482 } = _ref12;
1483 let blocker = reactRouter.useBlocker(when);
1484 React__namespace.useEffect(() => {
1485 if (blocker.state === "blocked") {
1486 let proceed = window.confirm(message);
1487 if (proceed) {
1488 // This timeout is needed to avoid a weird "race" on POP navigations
1489 // between the `window.history` revert navigation and the result of
1490 // `window.confirm`
1491 setTimeout(blocker.proceed, 0);
1492 } else {
1493 blocker.reset();
1494 }
1495 }
1496 }, [blocker, message]);
1497 React__namespace.useEffect(() => {
1498 if (blocker.state === "blocked" && !when) {
1499 blocker.reset();
1500 }
1501 }, [blocker, when]);
1502 }
1503
1504 /**
1505 * Return a boolean indicating if there is an active view transition to the
1506 * given href. You can use this value to render CSS classes or viewTransitionName
1507 * styles onto your elements
1508 *
1509 * @param href The destination href
1510 * @param [opts.relative] Relative routing type ("route" | "path")
1511 */
1512 function useViewTransitionState(to, opts) {
1513 if (opts === void 0) {
1514 opts = {};
1515 }
1516 let vtContext = React__namespace.useContext(ViewTransitionContext);
1517 !(vtContext != null) ? router.UNSAFE_invariant(false, "`unstable_useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`. " + "Did you accidentally import `RouterProvider` from `react-router`?") : void 0;
1518 let {
1519 basename
1520 } = useDataRouterContext(DataRouterHook.useViewTransitionState);
1521 let path = reactRouter.useResolvedPath(to, {
1522 relative: opts.relative
1523 });
1524 if (!vtContext.isTransitioning) {
1525 return false;
1526 }
1527 let currentPath = router.stripBasename(vtContext.currentLocation.pathname, basename) || vtContext.currentLocation.pathname;
1528 let nextPath = router.stripBasename(vtContext.nextLocation.pathname, basename) || vtContext.nextLocation.pathname;
1529
1530 // Transition is active if we're going to or coming from the indicated
1531 // destination. This ensures that other PUSH navigations that reverse
1532 // an indicated transition apply. I.e., on the list view you have:
1533 //
1534 // <NavLink to="/details/1" unstable_viewTransition>
1535 //
1536 // If you click the breadcrumb back to the list view:
1537 //
1538 // <NavLink to="/list" unstable_viewTransition>
1539 //
1540 // We should apply the transition because it's indicated as active going
1541 // from /list -> /details/1 and therefore should be active on the reverse
1542 // (even though this isn't strictly a POP reverse)
1543 return router.matchPath(path.pathname, nextPath) != null || router.matchPath(path.pathname, currentPath) != null;
1544 }
1545
1546 //#endregion
1547
1548 Object.defineProperty(exports, 'AbortedDeferredError', {
1549 enumerable: true,
1550 get: function () { return reactRouter.AbortedDeferredError; }
1551 });
1552 Object.defineProperty(exports, 'Await', {
1553 enumerable: true,
1554 get: function () { return reactRouter.Await; }
1555 });
1556 Object.defineProperty(exports, 'MemoryRouter', {
1557 enumerable: true,
1558 get: function () { return reactRouter.MemoryRouter; }
1559 });
1560 Object.defineProperty(exports, 'Navigate', {
1561 enumerable: true,
1562 get: function () { return reactRouter.Navigate; }
1563 });
1564 Object.defineProperty(exports, 'NavigationType', {
1565 enumerable: true,
1566 get: function () { return reactRouter.NavigationType; }
1567 });
1568 Object.defineProperty(exports, 'Outlet', {
1569 enumerable: true,
1570 get: function () { return reactRouter.Outlet; }
1571 });
1572 Object.defineProperty(exports, 'Route', {
1573 enumerable: true,
1574 get: function () { return reactRouter.Route; }
1575 });
1576 Object.defineProperty(exports, 'Router', {
1577 enumerable: true,
1578 get: function () { return reactRouter.Router; }
1579 });
1580 Object.defineProperty(exports, 'Routes', {
1581 enumerable: true,
1582 get: function () { return reactRouter.Routes; }
1583 });
1584 Object.defineProperty(exports, 'UNSAFE_DataRouterContext', {
1585 enumerable: true,
1586 get: function () { return reactRouter.UNSAFE_DataRouterContext; }
1587 });
1588 Object.defineProperty(exports, 'UNSAFE_DataRouterStateContext', {
1589 enumerable: true,
1590 get: function () { return reactRouter.UNSAFE_DataRouterStateContext; }
1591 });
1592 Object.defineProperty(exports, 'UNSAFE_LocationContext', {
1593 enumerable: true,
1594 get: function () { return reactRouter.UNSAFE_LocationContext; }
1595 });
1596 Object.defineProperty(exports, 'UNSAFE_NavigationContext', {
1597 enumerable: true,
1598 get: function () { return reactRouter.UNSAFE_NavigationContext; }
1599 });
1600 Object.defineProperty(exports, 'UNSAFE_RouteContext', {
1601 enumerable: true,
1602 get: function () { return reactRouter.UNSAFE_RouteContext; }
1603 });
1604 Object.defineProperty(exports, 'UNSAFE_useRouteId', {
1605 enumerable: true,
1606 get: function () { return reactRouter.UNSAFE_useRouteId; }
1607 });
1608 Object.defineProperty(exports, 'createMemoryRouter', {
1609 enumerable: true,
1610 get: function () { return reactRouter.createMemoryRouter; }
1611 });
1612 Object.defineProperty(exports, 'createPath', {
1613 enumerable: true,
1614 get: function () { return reactRouter.createPath; }
1615 });
1616 Object.defineProperty(exports, 'createRoutesFromChildren', {
1617 enumerable: true,
1618 get: function () { return reactRouter.createRoutesFromChildren; }
1619 });
1620 Object.defineProperty(exports, 'createRoutesFromElements', {
1621 enumerable: true,
1622 get: function () { return reactRouter.createRoutesFromElements; }
1623 });
1624 Object.defineProperty(exports, 'defer', {
1625 enumerable: true,
1626 get: function () { return reactRouter.defer; }
1627 });
1628 Object.defineProperty(exports, 'generatePath', {
1629 enumerable: true,
1630 get: function () { return reactRouter.generatePath; }
1631 });
1632 Object.defineProperty(exports, 'isRouteErrorResponse', {
1633 enumerable: true,
1634 get: function () { return reactRouter.isRouteErrorResponse; }
1635 });
1636 Object.defineProperty(exports, 'json', {
1637 enumerable: true,
1638 get: function () { return reactRouter.json; }
1639 });
1640 Object.defineProperty(exports, 'matchPath', {
1641 enumerable: true,
1642 get: function () { return reactRouter.matchPath; }
1643 });
1644 Object.defineProperty(exports, 'matchRoutes', {
1645 enumerable: true,
1646 get: function () { return reactRouter.matchRoutes; }
1647 });
1648 Object.defineProperty(exports, 'parsePath', {
1649 enumerable: true,
1650 get: function () { return reactRouter.parsePath; }
1651 });
1652 Object.defineProperty(exports, 'redirect', {
1653 enumerable: true,
1654 get: function () { return reactRouter.redirect; }
1655 });
1656 Object.defineProperty(exports, 'redirectDocument', {
1657 enumerable: true,
1658 get: function () { return reactRouter.redirectDocument; }
1659 });
1660 Object.defineProperty(exports, 'renderMatches', {
1661 enumerable: true,
1662 get: function () { return reactRouter.renderMatches; }
1663 });
1664 Object.defineProperty(exports, 'resolvePath', {
1665 enumerable: true,
1666 get: function () { return reactRouter.resolvePath; }
1667 });
1668 Object.defineProperty(exports, 'useActionData', {
1669 enumerable: true,
1670 get: function () { return reactRouter.useActionData; }
1671 });
1672 Object.defineProperty(exports, 'useAsyncError', {
1673 enumerable: true,
1674 get: function () { return reactRouter.useAsyncError; }
1675 });
1676 Object.defineProperty(exports, 'useAsyncValue', {
1677 enumerable: true,
1678 get: function () { return reactRouter.useAsyncValue; }
1679 });
1680 Object.defineProperty(exports, 'useBlocker', {
1681 enumerable: true,
1682 get: function () { return reactRouter.useBlocker; }
1683 });
1684 Object.defineProperty(exports, 'useHref', {
1685 enumerable: true,
1686 get: function () { return reactRouter.useHref; }
1687 });
1688 Object.defineProperty(exports, 'useInRouterContext', {
1689 enumerable: true,
1690 get: function () { return reactRouter.useInRouterContext; }
1691 });
1692 Object.defineProperty(exports, 'useLoaderData', {
1693 enumerable: true,
1694 get: function () { return reactRouter.useLoaderData; }
1695 });
1696 Object.defineProperty(exports, 'useLocation', {
1697 enumerable: true,
1698 get: function () { return reactRouter.useLocation; }
1699 });
1700 Object.defineProperty(exports, 'useMatch', {
1701 enumerable: true,
1702 get: function () { return reactRouter.useMatch; }
1703 });
1704 Object.defineProperty(exports, 'useMatches', {
1705 enumerable: true,
1706 get: function () { return reactRouter.useMatches; }
1707 });
1708 Object.defineProperty(exports, 'useNavigate', {
1709 enumerable: true,
1710 get: function () { return reactRouter.useNavigate; }
1711 });
1712 Object.defineProperty(exports, 'useNavigation', {
1713 enumerable: true,
1714 get: function () { return reactRouter.useNavigation; }
1715 });
1716 Object.defineProperty(exports, 'useNavigationType', {
1717 enumerable: true,
1718 get: function () { return reactRouter.useNavigationType; }
1719 });
1720 Object.defineProperty(exports, 'useOutlet', {
1721 enumerable: true,
1722 get: function () { return reactRouter.useOutlet; }
1723 });
1724 Object.defineProperty(exports, 'useOutletContext', {
1725 enumerable: true,
1726 get: function () { return reactRouter.useOutletContext; }
1727 });
1728 Object.defineProperty(exports, 'useParams', {
1729 enumerable: true,
1730 get: function () { return reactRouter.useParams; }
1731 });
1732 Object.defineProperty(exports, 'useResolvedPath', {
1733 enumerable: true,
1734 get: function () { return reactRouter.useResolvedPath; }
1735 });
1736 Object.defineProperty(exports, 'useRevalidator', {
1737 enumerable: true,
1738 get: function () { return reactRouter.useRevalidator; }
1739 });
1740 Object.defineProperty(exports, 'useRouteError', {
1741 enumerable: true,
1742 get: function () { return reactRouter.useRouteError; }
1743 });
1744 Object.defineProperty(exports, 'useRouteLoaderData', {
1745 enumerable: true,
1746 get: function () { return reactRouter.useRouteLoaderData; }
1747 });
1748 Object.defineProperty(exports, 'useRoutes', {
1749 enumerable: true,
1750 get: function () { return reactRouter.useRoutes; }
1751 });
1752 exports.BrowserRouter = BrowserRouter;
1753 exports.Form = Form;
1754 exports.HashRouter = HashRouter;
1755 exports.Link = Link;
1756 exports.NavLink = NavLink;
1757 exports.RouterProvider = RouterProvider;
1758 exports.ScrollRestoration = ScrollRestoration;
1759 exports.UNSAFE_FetchersContext = FetchersContext;
1760 exports.UNSAFE_ViewTransitionContext = ViewTransitionContext;
1761 exports.UNSAFE_useScrollRestoration = useScrollRestoration;
1762 exports.createBrowserRouter = createBrowserRouter;
1763 exports.createHashRouter = createHashRouter;
1764 exports.createSearchParams = createSearchParams;
1765 exports.unstable_HistoryRouter = HistoryRouter;
1766 exports.unstable_usePrompt = usePrompt;
1767 exports.unstable_useViewTransitionState = useViewTransitionState;
1768 exports.useBeforeUnload = useBeforeUnload;
1769 exports.useFetcher = useFetcher;
1770 exports.useFetchers = useFetchers;
1771 exports.useFormAction = useFormAction;
1772 exports.useLinkClickHandler = useLinkClickHandler;
1773 exports.useSearchParams = useSearchParams;
1774 exports.useSubmit = useSubmit;
1775
1776 Object.defineProperty(exports, '__esModule', { value: true });
1777
1778}));
1779//# sourceMappingURL=react-router-dom.development.js.map
Note: See TracBrowser for help on using the repository browser.