@tanstack/react-router 1.127.9 → 1.128.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/link.cjs +98 -67
- package/dist/cjs/link.cjs.map +1 -1
- package/dist/cjs/utils.cjs +4 -10
- package/dist/cjs/utils.cjs.map +1 -1
- package/dist/cjs/utils.d.cts +1 -1
- package/dist/esm/link.js +99 -68
- package/dist/esm/link.js.map +1 -1
- package/dist/esm/utils.d.ts +1 -1
- package/dist/esm/utils.js +4 -10
- package/dist/esm/utils.js.map +1 -1
- package/dist/llms/rules/guide.d.ts +1 -1
- package/dist/llms/rules/guide.js +469 -0
- package/dist/llms/rules/routing.d.ts +1 -1
- package/dist/llms/rules/routing.js +34 -0
- package/package.json +2 -2
- package/src/link.tsx +124 -88
- package/src/utils.ts +6 -14
package/dist/esm/link.js
CHANGED
|
@@ -4,7 +4,7 @@ import { flushSync } from "react-dom";
|
|
|
4
4
|
import { preloadWarning, functionalUpdate, exactPathTest, removeTrailingSlash, deepEqual } from "@tanstack/router-core";
|
|
5
5
|
import { useRouterState } from "./useRouterState.js";
|
|
6
6
|
import { useRouter } from "./useRouter.js";
|
|
7
|
-
import { useForwardedRef, useIntersectionObserver
|
|
7
|
+
import { useForwardedRef, useIntersectionObserver } from "./utils.js";
|
|
8
8
|
import { useMatch } from "./useMatch.js";
|
|
9
9
|
function useLinkProps(options, forwardedRef) {
|
|
10
10
|
const router = useRouter();
|
|
@@ -13,8 +13,8 @@ function useLinkProps(options, forwardedRef) {
|
|
|
13
13
|
const innerRef = useForwardedRef(forwardedRef);
|
|
14
14
|
const {
|
|
15
15
|
// custom props
|
|
16
|
-
activeProps
|
|
17
|
-
inactiveProps
|
|
16
|
+
activeProps,
|
|
17
|
+
inactiveProps,
|
|
18
18
|
activeOptions,
|
|
19
19
|
to,
|
|
20
20
|
preload: userPreload,
|
|
@@ -36,9 +36,6 @@ function useLinkProps(options, forwardedRef) {
|
|
|
36
36
|
onMouseLeave,
|
|
37
37
|
onTouchStart,
|
|
38
38
|
ignoreBlocker,
|
|
39
|
-
...rest
|
|
40
|
-
} = options;
|
|
41
|
-
const {
|
|
42
39
|
// prevent these from being returned
|
|
43
40
|
params: _params,
|
|
44
41
|
search: _search,
|
|
@@ -47,11 +44,13 @@ function useLinkProps(options, forwardedRef) {
|
|
|
47
44
|
mask: _mask,
|
|
48
45
|
reloadDocument: _reloadDocument,
|
|
49
46
|
unsafeRelative: _unsafeRelative,
|
|
47
|
+
from: _from,
|
|
48
|
+
_fromLocation,
|
|
50
49
|
...propsSafeToSpread
|
|
51
|
-
} =
|
|
50
|
+
} = options;
|
|
52
51
|
const type = React.useMemo(() => {
|
|
53
52
|
try {
|
|
54
|
-
new URL(
|
|
53
|
+
new URL(to);
|
|
55
54
|
return "external";
|
|
56
55
|
} catch {
|
|
57
56
|
}
|
|
@@ -61,26 +60,33 @@ function useLinkProps(options, forwardedRef) {
|
|
|
61
60
|
select: (s) => s.location.search,
|
|
62
61
|
structuralSharing: true
|
|
63
62
|
});
|
|
64
|
-
const
|
|
63
|
+
const from = useMatch({
|
|
65
64
|
strict: false,
|
|
66
|
-
select: (match) => match.fullPath
|
|
65
|
+
select: (match) => options.from ?? match.fullPath
|
|
67
66
|
});
|
|
68
|
-
const from = options.from ?? nearestFrom;
|
|
69
|
-
options = { ...options, from };
|
|
70
67
|
const next = React.useMemo(
|
|
71
|
-
() => router.buildLocation(options),
|
|
68
|
+
() => router.buildLocation({ ...options, from }),
|
|
72
69
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
73
|
-
[
|
|
70
|
+
[
|
|
71
|
+
router,
|
|
72
|
+
currentSearch,
|
|
73
|
+
options._fromLocation,
|
|
74
|
+
from,
|
|
75
|
+
options.hash,
|
|
76
|
+
options.to,
|
|
77
|
+
options.search,
|
|
78
|
+
options.params,
|
|
79
|
+
options.state,
|
|
80
|
+
options.mask,
|
|
81
|
+
options.unsafeRelative
|
|
82
|
+
]
|
|
74
83
|
);
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
return false;
|
|
78
|
-
}
|
|
79
|
-
return userPreload ?? router.options.defaultPreload;
|
|
80
|
-
}, [router.options.defaultPreload, userPreload, options.reloadDocument]);
|
|
84
|
+
const isExternal = type === "external";
|
|
85
|
+
const preload = options.reloadDocument || isExternal ? false : userPreload ?? router.options.defaultPreload;
|
|
81
86
|
const preloadDelay = userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0;
|
|
82
87
|
const isActive = useRouterState({
|
|
83
88
|
select: (s) => {
|
|
89
|
+
if (isExternal) return false;
|
|
84
90
|
if (activeOptions == null ? void 0 : activeOptions.exact) {
|
|
85
91
|
const testExact = exactPathTest(
|
|
86
92
|
s.location.pathname,
|
|
@@ -94,14 +100,12 @@ function useLinkProps(options, forwardedRef) {
|
|
|
94
100
|
const currentPathSplit = removeTrailingSlash(
|
|
95
101
|
s.location.pathname,
|
|
96
102
|
router.basepath
|
|
97
|
-
)
|
|
103
|
+
);
|
|
98
104
|
const nextPathSplit = removeTrailingSlash(
|
|
99
105
|
next.pathname,
|
|
100
106
|
router.basepath
|
|
101
|
-
).split("/");
|
|
102
|
-
const pathIsFuzzyEqual = nextPathSplit.every(
|
|
103
|
-
(d, i) => d === currentPathSplit[i]
|
|
104
107
|
);
|
|
108
|
+
const pathIsFuzzyEqual = currentPathSplit.startsWith(nextPathSplit) && (currentPathSplit.length === nextPathSplit.length || currentPathSplit[nextPathSplit.length] === "/");
|
|
105
109
|
if (!pathIsFuzzyEqual) {
|
|
106
110
|
return false;
|
|
107
111
|
}
|
|
@@ -121,12 +125,34 @@ function useLinkProps(options, forwardedRef) {
|
|
|
121
125
|
return true;
|
|
122
126
|
}
|
|
123
127
|
});
|
|
124
|
-
const doPreload = React.useCallback(
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
128
|
+
const doPreload = React.useCallback(
|
|
129
|
+
() => {
|
|
130
|
+
router.preloadRoute({ ...options, from }).catch((err) => {
|
|
131
|
+
console.warn(err);
|
|
132
|
+
console.warn(preloadWarning);
|
|
133
|
+
});
|
|
134
|
+
},
|
|
135
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
136
|
+
[
|
|
137
|
+
router,
|
|
138
|
+
options.to,
|
|
139
|
+
options._fromLocation,
|
|
140
|
+
from,
|
|
141
|
+
options.search,
|
|
142
|
+
options.hash,
|
|
143
|
+
options.params,
|
|
144
|
+
options.state,
|
|
145
|
+
options.mask,
|
|
146
|
+
options.unsafeRelative,
|
|
147
|
+
options.hashScrollIntoView,
|
|
148
|
+
options.href,
|
|
149
|
+
options.ignoreBlocker,
|
|
150
|
+
options.reloadDocument,
|
|
151
|
+
options.replace,
|
|
152
|
+
options.resetScroll,
|
|
153
|
+
options.viewTransition
|
|
154
|
+
]
|
|
155
|
+
);
|
|
130
156
|
const preloadViewportIoCallback = React.useCallback(
|
|
131
157
|
(entry) => {
|
|
132
158
|
if (entry == null ? void 0 : entry.isIntersecting) {
|
|
@@ -138,10 +164,10 @@ function useLinkProps(options, forwardedRef) {
|
|
|
138
164
|
useIntersectionObserver(
|
|
139
165
|
innerRef,
|
|
140
166
|
preloadViewportIoCallback,
|
|
141
|
-
|
|
167
|
+
intersectionObserverOptions,
|
|
142
168
|
{ disabled: !!disabled || !(preload === "viewport") }
|
|
143
169
|
);
|
|
144
|
-
|
|
170
|
+
React.useEffect(() => {
|
|
145
171
|
if (hasRenderFetched.current) {
|
|
146
172
|
return;
|
|
147
173
|
}
|
|
@@ -150,7 +176,7 @@ function useLinkProps(options, forwardedRef) {
|
|
|
150
176
|
hasRenderFetched.current = true;
|
|
151
177
|
}
|
|
152
178
|
}, [disabled, doPreload, preload]);
|
|
153
|
-
if (
|
|
179
|
+
if (isExternal) {
|
|
154
180
|
return {
|
|
155
181
|
...propsSafeToSpread,
|
|
156
182
|
ref: innerRef,
|
|
@@ -180,6 +206,7 @@ function useLinkProps(options, forwardedRef) {
|
|
|
180
206
|
});
|
|
181
207
|
return router.navigate({
|
|
182
208
|
...options,
|
|
209
|
+
from,
|
|
183
210
|
replace,
|
|
184
211
|
resetScroll,
|
|
185
212
|
hashScrollIntoView,
|
|
@@ -197,46 +224,38 @@ function useLinkProps(options, forwardedRef) {
|
|
|
197
224
|
};
|
|
198
225
|
const handleTouchStart = handleFocus;
|
|
199
226
|
const handleEnter = (e) => {
|
|
200
|
-
if (disabled) return;
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
227
|
+
if (disabled || !preload) return;
|
|
228
|
+
if (!preloadDelay) {
|
|
229
|
+
doPreload();
|
|
230
|
+
} else {
|
|
231
|
+
const eventTarget = e.target;
|
|
232
|
+
if (timeoutMap.has(eventTarget)) {
|
|
204
233
|
return;
|
|
205
234
|
}
|
|
206
|
-
|
|
235
|
+
const id = setTimeout(() => {
|
|
236
|
+
timeoutMap.delete(eventTarget);
|
|
207
237
|
doPreload();
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
eventTarget.preloadTimeout = null;
|
|
211
|
-
doPreload();
|
|
212
|
-
}, preloadDelay);
|
|
213
|
-
}
|
|
238
|
+
}, preloadDelay);
|
|
239
|
+
timeoutMap.set(eventTarget, id);
|
|
214
240
|
}
|
|
215
241
|
};
|
|
216
242
|
const handleLeave = (e) => {
|
|
217
|
-
if (disabled) return;
|
|
218
|
-
const eventTarget = e.target
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
243
|
+
if (disabled || !preload || !preloadDelay) return;
|
|
244
|
+
const eventTarget = e.target;
|
|
245
|
+
const id = timeoutMap.get(eventTarget);
|
|
246
|
+
if (id) {
|
|
247
|
+
clearTimeout(id);
|
|
248
|
+
timeoutMap.delete(eventTarget);
|
|
222
249
|
}
|
|
223
250
|
};
|
|
224
|
-
const
|
|
225
|
-
|
|
226
|
-
(_a = e.persist) == null ? void 0 : _a.call(e);
|
|
227
|
-
handlers.filter(Boolean).forEach((handler) => {
|
|
228
|
-
if (e.defaultPrevented) return;
|
|
229
|
-
handler(e);
|
|
230
|
-
});
|
|
231
|
-
};
|
|
232
|
-
const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
|
|
233
|
-
const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {});
|
|
251
|
+
const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? STATIC_ACTIVE_OBJECT : STATIC_EMPTY_OBJECT;
|
|
252
|
+
const resolvedInactiveProps = isActive ? STATIC_EMPTY_OBJECT : functionalUpdate(inactiveProps, {}) ?? STATIC_EMPTY_OBJECT;
|
|
234
253
|
const resolvedClassName = [
|
|
235
254
|
className,
|
|
236
255
|
resolvedActiveProps.className,
|
|
237
256
|
resolvedInactiveProps.className
|
|
238
257
|
].filter(Boolean).join(" ");
|
|
239
|
-
const resolvedStyle = {
|
|
258
|
+
const resolvedStyle = (style || resolvedActiveProps.style || resolvedInactiveProps.style) && {
|
|
240
259
|
...style,
|
|
241
260
|
...resolvedActiveProps.style,
|
|
242
261
|
...resolvedInactiveProps.style
|
|
@@ -254,16 +273,28 @@ function useLinkProps(options, forwardedRef) {
|
|
|
254
273
|
onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
|
|
255
274
|
disabled: !!disabled,
|
|
256
275
|
target,
|
|
257
|
-
...
|
|
276
|
+
...resolvedStyle && { style: resolvedStyle },
|
|
258
277
|
...resolvedClassName && { className: resolvedClassName },
|
|
259
|
-
...disabled &&
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
},
|
|
263
|
-
...isActive && { "data-status": "active", "aria-current": "page" },
|
|
264
|
-
...isTransitioning && { "data-transitioning": "transitioning" }
|
|
278
|
+
...disabled && STATIC_DISABLED_PROPS,
|
|
279
|
+
...isActive && STATIC_ACTIVE_PROPS,
|
|
280
|
+
...isTransitioning && STATIC_TRANSITIONING_PROPS
|
|
265
281
|
};
|
|
266
282
|
}
|
|
283
|
+
const STATIC_EMPTY_OBJECT = {};
|
|
284
|
+
const STATIC_ACTIVE_OBJECT = { className: "active" };
|
|
285
|
+
const STATIC_DISABLED_PROPS = { role: "link", "aria-disabled": true };
|
|
286
|
+
const STATIC_ACTIVE_PROPS = { "data-status": "active", "aria-current": "page" };
|
|
287
|
+
const STATIC_TRANSITIONING_PROPS = { "data-transitioning": "transitioning" };
|
|
288
|
+
const timeoutMap = /* @__PURE__ */ new WeakMap();
|
|
289
|
+
const intersectionObserverOptions = {
|
|
290
|
+
rootMargin: "100px"
|
|
291
|
+
};
|
|
292
|
+
const composeHandlers = (handlers) => (e) => {
|
|
293
|
+
handlers.filter(Boolean).forEach((handler) => {
|
|
294
|
+
if (e.defaultPrevented) return;
|
|
295
|
+
handler(e);
|
|
296
|
+
});
|
|
297
|
+
};
|
|
267
298
|
function createLink(Comp) {
|
|
268
299
|
return React.forwardRef(function CreatedLink(props, ref) {
|
|
269
300
|
return /* @__PURE__ */ jsx(Link, { ...props, _asChild: Comp, ref });
|
|
@@ -280,7 +311,7 @@ const Link = React.forwardRef(
|
|
|
280
311
|
const children = typeof rest.children === "function" ? rest.children({
|
|
281
312
|
isActive: linkProps["data-status"] === "active"
|
|
282
313
|
}) : rest.children;
|
|
283
|
-
if (
|
|
314
|
+
if (_asChild === void 0) {
|
|
284
315
|
delete linkProps.disabled;
|
|
285
316
|
}
|
|
286
317
|
return React.createElement(
|
package/dist/esm/link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.js","sources":["../../src/link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { flushSync } from 'react-dom'\nimport {\n deepEqual,\n exactPathTest,\n functionalUpdate,\n preloadWarning,\n removeTrailingSlash,\n} from '@tanstack/router-core'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\n\nimport {\n useForwardedRef,\n useIntersectionObserver,\n useLayoutEffect,\n} from './utils'\n\nimport { useMatch } from './useMatch'\nimport type {\n AnyRouter,\n Constrain,\n LinkCurrentTargetElement,\n LinkOptions,\n RegisteredRouter,\n RoutePaths,\n} from '@tanstack/router-core'\nimport type { ReactNode } from 'react'\nimport type {\n ValidateLinkOptions,\n ValidateLinkOptionsArray,\n} from './typePrimitives'\n\nexport function useLinkProps<\n TRouter extends AnyRouter = RegisteredRouter,\n const TFrom extends string = string,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n>(\n options: UseLinkPropsOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,\n forwardedRef?: React.ForwardedRef<Element>,\n): React.ComponentPropsWithRef<'a'> {\n const router = useRouter()\n const [isTransitioning, setIsTransitioning] = React.useState(false)\n const hasRenderFetched = React.useRef(false)\n const innerRef = useForwardedRef(forwardedRef)\n\n const {\n // custom props\n activeProps = () => ({ className: 'active' }),\n inactiveProps = () => ({}),\n activeOptions,\n to,\n preload: userPreload,\n preloadDelay: userPreloadDelay,\n hashScrollIntoView,\n replace,\n startTransition,\n resetScroll,\n viewTransition,\n // element props\n children,\n target,\n disabled,\n style,\n className,\n onClick,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n onTouchStart,\n ignoreBlocker,\n ...rest\n } = options\n\n const {\n // prevent these from being returned\n params: _params,\n search: _search,\n hash: _hash,\n state: _state,\n mask: _mask,\n reloadDocument: _reloadDocument,\n unsafeRelative: _unsafeRelative,\n ...propsSafeToSpread\n } = rest\n\n // If this link simply reloads the current route,\n // make sure it has a new key so it will trigger a data refresh\n\n // If this `to` is a valid external URL, return\n // null for LinkUtils\n\n const type: 'internal' | 'external' = React.useMemo(() => {\n try {\n new URL(`${to}`)\n return 'external'\n } catch {}\n return 'internal'\n }, [to])\n\n // subscribe to search params to re-build location if it changes\n const currentSearch = useRouterState({\n select: (s) => s.location.search,\n structuralSharing: true as any,\n })\n\n const nearestFrom = useMatch({\n strict: false,\n select: (match) => match.fullPath,\n })\n\n const from = options.from ?? nearestFrom\n\n // Use it as the default `from` location\n options = { ...options, from }\n\n const next = React.useMemo(\n () => router.buildLocation(options as any),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [router, options, currentSearch],\n )\n\n const preload = React.useMemo(() => {\n if (options.reloadDocument) {\n return false\n }\n return userPreload ?? router.options.defaultPreload\n }, [router.options.defaultPreload, userPreload, options.reloadDocument])\n const preloadDelay =\n userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0\n\n const isActive = useRouterState({\n select: (s) => {\n if (activeOptions?.exact) {\n const testExact = exactPathTest(\n s.location.pathname,\n next.pathname,\n router.basepath,\n )\n if (!testExact) {\n return false\n }\n } else {\n const currentPathSplit = removeTrailingSlash(\n s.location.pathname,\n router.basepath,\n ).split('/')\n const nextPathSplit = removeTrailingSlash(\n next.pathname,\n router.basepath,\n ).split('/')\n\n const pathIsFuzzyEqual = nextPathSplit.every(\n (d, i) => d === currentPathSplit[i],\n )\n if (!pathIsFuzzyEqual) {\n return false\n }\n }\n\n if (activeOptions?.includeSearch ?? true) {\n const searchTest = deepEqual(s.location.search, next.search, {\n partial: !activeOptions?.exact,\n ignoreUndefined: !activeOptions?.explicitUndefined,\n })\n if (!searchTest) {\n return false\n }\n }\n\n if (activeOptions?.includeHash) {\n return s.location.hash === next.hash\n }\n return true\n },\n })\n\n const doPreload = React.useCallback(() => {\n router.preloadRoute(options as any).catch((err) => {\n console.warn(err)\n console.warn(preloadWarning)\n })\n }, [options, router])\n\n const preloadViewportIoCallback = React.useCallback(\n (entry: IntersectionObserverEntry | undefined) => {\n if (entry?.isIntersecting) {\n doPreload()\n }\n },\n [doPreload],\n )\n\n useIntersectionObserver(\n innerRef,\n preloadViewportIoCallback,\n { rootMargin: '100px' },\n { disabled: !!disabled || !(preload === 'viewport') },\n )\n\n useLayoutEffect(() => {\n if (hasRenderFetched.current) {\n return\n }\n if (!disabled && preload === 'render') {\n doPreload()\n hasRenderFetched.current = true\n }\n }, [disabled, doPreload, preload])\n\n if (type === 'external') {\n return {\n ...propsSafeToSpread,\n ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],\n type,\n href: to,\n ...(children && { children }),\n ...(target && { target }),\n ...(disabled && { disabled }),\n ...(style && { style }),\n ...(className && { className }),\n ...(onClick && { onClick }),\n ...(onFocus && { onFocus }),\n ...(onMouseEnter && { onMouseEnter }),\n ...(onMouseLeave && { onMouseLeave }),\n ...(onTouchStart && { onTouchStart }),\n }\n }\n\n // The click handler\n const handleClick = (e: MouseEvent) => {\n if (\n !disabled &&\n !isCtrlEvent(e) &&\n !e.defaultPrevented &&\n (!target || target === '_self') &&\n e.button === 0\n ) {\n e.preventDefault()\n\n flushSync(() => {\n setIsTransitioning(true)\n })\n\n const unsub = router.subscribe('onResolved', () => {\n unsub()\n setIsTransitioning(false)\n })\n\n // All is well? Navigate!\n // N.B. we don't call `router.commitLocation(next) here because we want to run `validateSearch` before committing\n return router.navigate({\n ...options,\n replace,\n resetScroll,\n hashScrollIntoView,\n startTransition,\n viewTransition,\n ignoreBlocker,\n })\n }\n }\n\n // The click handler\n const handleFocus = (_: MouseEvent) => {\n if (disabled) return\n if (preload) {\n doPreload()\n }\n }\n\n const handleTouchStart = handleFocus\n\n const handleEnter = (e: MouseEvent) => {\n if (disabled) return\n const eventTarget = (e.target || {}) as LinkCurrentTargetElement\n\n if (preload) {\n if (eventTarget.preloadTimeout) {\n return\n }\n\n if (!preloadDelay) {\n doPreload()\n } else {\n eventTarget.preloadTimeout = setTimeout(() => {\n eventTarget.preloadTimeout = null\n doPreload()\n }, preloadDelay)\n }\n }\n }\n\n const handleLeave = (e: MouseEvent) => {\n if (disabled) return\n const eventTarget = (e.target || {}) as LinkCurrentTargetElement\n\n if (eventTarget.preloadTimeout) {\n clearTimeout(eventTarget.preloadTimeout)\n eventTarget.preloadTimeout = null\n }\n }\n\n const composeHandlers =\n (handlers: Array<undefined | ((e: any) => void)>) =>\n (e: { persist?: () => void; defaultPrevented: boolean }) => {\n e.persist?.()\n handlers.filter(Boolean).forEach((handler) => {\n if (e.defaultPrevented) return\n handler!(e)\n })\n }\n\n // Get the active props\n const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> = isActive\n ? (functionalUpdate(activeProps as any, {}) ?? {})\n : {}\n\n // Get the inactive props\n const resolvedInactiveProps: React.HTMLAttributes<HTMLAnchorElement> =\n isActive ? {} : functionalUpdate(inactiveProps, {})\n\n const resolvedClassName = [\n className,\n resolvedActiveProps.className,\n resolvedInactiveProps.className,\n ]\n .filter(Boolean)\n .join(' ')\n\n const resolvedStyle = {\n ...style,\n ...resolvedActiveProps.style,\n ...resolvedInactiveProps.style,\n }\n\n return {\n ...propsSafeToSpread,\n ...resolvedActiveProps,\n ...resolvedInactiveProps,\n href: disabled\n ? undefined\n : next.maskedLocation\n ? router.history.createHref(next.maskedLocation.href)\n : router.history.createHref(next.href),\n ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],\n onClick: composeHandlers([onClick, handleClick]),\n onFocus: composeHandlers([onFocus, handleFocus]),\n onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),\n onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),\n onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),\n disabled: !!disabled,\n target,\n ...(Object.keys(resolvedStyle).length && { style: resolvedStyle }),\n ...(resolvedClassName && { className: resolvedClassName }),\n ...(disabled && {\n role: 'link',\n 'aria-disabled': true,\n }),\n ...(isActive && { 'data-status': 'active', 'aria-current': 'page' }),\n ...(isTransitioning && { 'data-transitioning': 'transitioning' }),\n }\n}\n\ntype UseLinkReactProps<TComp> = TComp extends keyof React.JSX.IntrinsicElements\n ? React.JSX.IntrinsicElements[TComp]\n : React.PropsWithoutRef<\n TComp extends React.ComponentType<infer TProps> ? TProps : never\n > &\n React.RefAttributes<\n TComp extends\n | React.FC<{ ref: React.Ref<infer TRef> }>\n | React.Component<{ ref: React.Ref<infer TRef> }>\n ? TRef\n : never\n >\n\nexport type UseLinkPropsOptions<\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends RoutePaths<TRouter['routeTree']> | string = string,\n TTo extends string | undefined = '.',\n TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n TMaskTo extends string = '.',\n> = ActiveLinkOptions<'a', TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &\n UseLinkReactProps<'a'>\n\nexport type ActiveLinkOptions<\n TComp = 'a',\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = '.',\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '.',\n> = LinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &\n ActiveLinkOptionProps<TComp>\n\ntype ActiveLinkProps<TComp> = Partial<\n LinkComponentReactProps<TComp> & {\n [key: `data-${string}`]: unknown\n }\n>\n\nexport interface ActiveLinkOptionProps<TComp = 'a'> {\n /**\n * A function that returns additional props for the `active` state of this link.\n * These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)\n */\n activeProps?: ActiveLinkProps<TComp> | (() => ActiveLinkProps<TComp>)\n /**\n * A function that returns additional props for the `inactive` state of this link.\n * These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)\n */\n inactiveProps?: ActiveLinkProps<TComp> | (() => ActiveLinkProps<TComp>)\n}\n\nexport type LinkProps<\n TComp = 'a',\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = '.',\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '.',\n> = ActiveLinkOptions<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &\n LinkPropsChildren\n\nexport interface LinkPropsChildren {\n // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns\n children?:\n | React.ReactNode\n | ((state: {\n isActive: boolean\n isTransitioning: boolean\n }) => React.ReactNode)\n}\n\ntype LinkComponentReactProps<TComp> = Omit<\n UseLinkReactProps<TComp>,\n keyof CreateLinkProps\n>\n\nexport type LinkComponentProps<\n TComp = 'a',\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = '.',\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '.',\n> = LinkComponentReactProps<TComp> &\n LinkProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>\n\nexport type CreateLinkProps = LinkProps<\n any,\n any,\n string,\n string,\n string,\n string\n>\n\nexport type LinkComponent<\n in out TComp,\n in out TDefaultFrom extends string = string,\n> = <\n TRouter extends AnyRouter = RegisteredRouter,\n const TFrom extends string = TDefaultFrom,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n>(\n props: LinkComponentProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,\n) => React.ReactElement\n\nexport interface LinkComponentRoute<\n in out TDefaultFrom extends string = string,\n> {\n defaultFrom: TDefaultFrom\n <\n TRouter extends AnyRouter = RegisteredRouter,\n const TTo extends string | undefined = undefined,\n const TMaskTo extends string = '',\n >(\n props: LinkComponentProps<\n 'a',\n TRouter,\n this['defaultFrom'],\n TTo,\n this['defaultFrom'],\n TMaskTo\n >,\n ): React.ReactElement\n}\n\nexport function createLink<const TComp>(\n Comp: Constrain<TComp, any, (props: CreateLinkProps) => ReactNode>,\n): LinkComponent<TComp> {\n return React.forwardRef(function CreatedLink(props, ref) {\n return <Link {...(props as any)} _asChild={Comp} ref={ref} />\n }) as any\n}\n\nexport const Link: LinkComponent<'a'> = React.forwardRef<Element, any>(\n (props, ref) => {\n const { _asChild, ...rest } = props\n const {\n type: _type,\n ref: innerRef,\n ...linkProps\n } = useLinkProps(rest as any, ref)\n\n const children =\n typeof rest.children === 'function'\n ? rest.children({\n isActive: (linkProps as any)['data-status'] === 'active',\n })\n : rest.children\n\n if (typeof _asChild === 'undefined') {\n // the ReturnType of useLinkProps returns the correct type for a <a> element, not a general component that has a disabled prop\n // @ts-expect-error\n delete linkProps.disabled\n }\n\n return React.createElement(\n _asChild ? _asChild : 'a',\n {\n ...linkProps,\n ref: innerRef,\n },\n children,\n )\n },\n) as any\n\nfunction isCtrlEvent(e: MouseEvent) {\n return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)\n}\n\nexport type LinkOptionsFnOptions<\n TOptions,\n TComp,\n TRouter extends AnyRouter = RegisteredRouter,\n> =\n TOptions extends ReadonlyArray<any>\n ? ValidateLinkOptionsArray<TRouter, TOptions, string, TComp>\n : ValidateLinkOptions<TRouter, TOptions, string, TComp>\n\nexport type LinkOptionsFn<TComp> = <\n const TOptions,\n TRouter extends AnyRouter = RegisteredRouter,\n>(\n options: LinkOptionsFnOptions<TOptions, TComp, TRouter>,\n) => TOptions\n\nexport const linkOptions: LinkOptionsFn<'a'> = (options) => {\n return options as any\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"link.js","sources":["../../src/link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { flushSync } from 'react-dom'\nimport {\n deepEqual,\n exactPathTest,\n functionalUpdate,\n preloadWarning,\n removeTrailingSlash,\n} from '@tanstack/router-core'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\n\nimport { useForwardedRef, useIntersectionObserver } from './utils'\n\nimport { useMatch } from './useMatch'\nimport type {\n AnyRouter,\n Constrain,\n LinkOptions,\n RegisteredRouter,\n RoutePaths,\n} from '@tanstack/router-core'\nimport type { ReactNode } from 'react'\nimport type {\n ValidateLinkOptions,\n ValidateLinkOptionsArray,\n} from './typePrimitives'\n\nexport function useLinkProps<\n TRouter extends AnyRouter = RegisteredRouter,\n const TFrom extends string = string,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n>(\n options: UseLinkPropsOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,\n forwardedRef?: React.ForwardedRef<Element>,\n): React.ComponentPropsWithRef<'a'> {\n const router = useRouter()\n const [isTransitioning, setIsTransitioning] = React.useState(false)\n const hasRenderFetched = React.useRef(false)\n const innerRef = useForwardedRef(forwardedRef)\n\n const {\n // custom props\n activeProps,\n inactiveProps,\n activeOptions,\n to,\n preload: userPreload,\n preloadDelay: userPreloadDelay,\n hashScrollIntoView,\n replace,\n startTransition,\n resetScroll,\n viewTransition,\n // element props\n children,\n target,\n disabled,\n style,\n className,\n onClick,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n onTouchStart,\n ignoreBlocker,\n // prevent these from being returned\n params: _params,\n search: _search,\n hash: _hash,\n state: _state,\n mask: _mask,\n reloadDocument: _reloadDocument,\n unsafeRelative: _unsafeRelative,\n from: _from,\n _fromLocation,\n ...propsSafeToSpread\n } = options\n\n // If this link simply reloads the current route,\n // make sure it has a new key so it will trigger a data refresh\n\n // If this `to` is a valid external URL, return\n // null for LinkUtils\n\n const type: 'internal' | 'external' = React.useMemo(() => {\n try {\n new URL(to as any)\n return 'external'\n } catch {}\n return 'internal'\n }, [to])\n\n // subscribe to search params to re-build location if it changes\n const currentSearch = useRouterState({\n select: (s) => s.location.search,\n structuralSharing: true as any,\n })\n\n const from = useMatch({\n strict: false,\n select: (match) => options.from ?? match.fullPath,\n })\n\n const next = React.useMemo(\n () => router.buildLocation({ ...options, from } as any),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n router,\n currentSearch,\n options._fromLocation,\n from,\n options.hash,\n options.to,\n options.search,\n options.params,\n options.state,\n options.mask,\n options.unsafeRelative,\n ],\n )\n\n const isExternal = type === 'external'\n\n const preload =\n options.reloadDocument || isExternal\n ? false\n : (userPreload ?? router.options.defaultPreload)\n const preloadDelay =\n userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0\n\n const isActive = useRouterState({\n select: (s) => {\n if (isExternal) return false\n if (activeOptions?.exact) {\n const testExact = exactPathTest(\n s.location.pathname,\n next.pathname,\n router.basepath,\n )\n if (!testExact) {\n return false\n }\n } else {\n const currentPathSplit = removeTrailingSlash(\n s.location.pathname,\n router.basepath,\n )\n const nextPathSplit = removeTrailingSlash(\n next.pathname,\n router.basepath,\n )\n\n const pathIsFuzzyEqual =\n currentPathSplit.startsWith(nextPathSplit) &&\n (currentPathSplit.length === nextPathSplit.length ||\n currentPathSplit[nextPathSplit.length] === '/')\n\n if (!pathIsFuzzyEqual) {\n return false\n }\n }\n\n if (activeOptions?.includeSearch ?? true) {\n const searchTest = deepEqual(s.location.search, next.search, {\n partial: !activeOptions?.exact,\n ignoreUndefined: !activeOptions?.explicitUndefined,\n })\n if (!searchTest) {\n return false\n }\n }\n\n if (activeOptions?.includeHash) {\n return s.location.hash === next.hash\n }\n return true\n },\n })\n\n const doPreload = React.useCallback(\n () => {\n router.preloadRoute({ ...options, from } as any).catch((err) => {\n console.warn(err)\n console.warn(preloadWarning)\n })\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n router,\n options.to,\n options._fromLocation,\n from,\n options.search,\n options.hash,\n options.params,\n options.state,\n options.mask,\n options.unsafeRelative,\n options.hashScrollIntoView,\n options.href,\n options.ignoreBlocker,\n options.reloadDocument,\n options.replace,\n options.resetScroll,\n options.viewTransition,\n ],\n )\n\n const preloadViewportIoCallback = React.useCallback(\n (entry: IntersectionObserverEntry | undefined) => {\n if (entry?.isIntersecting) {\n doPreload()\n }\n },\n [doPreload],\n )\n\n useIntersectionObserver(\n innerRef,\n preloadViewportIoCallback,\n intersectionObserverOptions,\n { disabled: !!disabled || !(preload === 'viewport') },\n )\n\n React.useEffect(() => {\n if (hasRenderFetched.current) {\n return\n }\n if (!disabled && preload === 'render') {\n doPreload()\n hasRenderFetched.current = true\n }\n }, [disabled, doPreload, preload])\n\n if (isExternal) {\n return {\n ...propsSafeToSpread,\n ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],\n type,\n href: to,\n ...(children && { children }),\n ...(target && { target }),\n ...(disabled && { disabled }),\n ...(style && { style }),\n ...(className && { className }),\n ...(onClick && { onClick }),\n ...(onFocus && { onFocus }),\n ...(onMouseEnter && { onMouseEnter }),\n ...(onMouseLeave && { onMouseLeave }),\n ...(onTouchStart && { onTouchStart }),\n }\n }\n\n // The click handler\n const handleClick = (e: React.MouseEvent) => {\n if (\n !disabled &&\n !isCtrlEvent(e) &&\n !e.defaultPrevented &&\n (!target || target === '_self') &&\n e.button === 0\n ) {\n e.preventDefault()\n\n flushSync(() => {\n setIsTransitioning(true)\n })\n\n const unsub = router.subscribe('onResolved', () => {\n unsub()\n setIsTransitioning(false)\n })\n\n // All is well? Navigate!\n // N.B. we don't call `router.commitLocation(next) here because we want to run `validateSearch` before committing\n return router.navigate({\n ...options,\n from,\n replace,\n resetScroll,\n hashScrollIntoView,\n startTransition,\n viewTransition,\n ignoreBlocker,\n })\n }\n }\n\n // The click handler\n const handleFocus = (_: React.MouseEvent) => {\n if (disabled) return\n if (preload) {\n doPreload()\n }\n }\n\n const handleTouchStart = handleFocus\n\n const handleEnter = (e: React.MouseEvent) => {\n if (disabled || !preload) return\n\n if (!preloadDelay) {\n doPreload()\n } else {\n const eventTarget = e.target\n if (timeoutMap.has(eventTarget)) {\n return\n }\n const id = setTimeout(() => {\n timeoutMap.delete(eventTarget)\n doPreload()\n }, preloadDelay)\n timeoutMap.set(eventTarget, id)\n }\n }\n\n const handleLeave = (e: React.MouseEvent) => {\n if (disabled || !preload || !preloadDelay) return\n const eventTarget = e.target\n const id = timeoutMap.get(eventTarget)\n if (id) {\n clearTimeout(id)\n timeoutMap.delete(eventTarget)\n }\n }\n\n // Get the active props\n const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> = isActive\n ? (functionalUpdate(activeProps as any, {}) ?? STATIC_ACTIVE_OBJECT)\n : STATIC_EMPTY_OBJECT\n\n // Get the inactive props\n const resolvedInactiveProps: React.HTMLAttributes<HTMLAnchorElement> =\n isActive\n ? STATIC_EMPTY_OBJECT\n : (functionalUpdate(inactiveProps, {}) ?? STATIC_EMPTY_OBJECT)\n\n const resolvedClassName = [\n className,\n resolvedActiveProps.className,\n resolvedInactiveProps.className,\n ]\n .filter(Boolean)\n .join(' ')\n\n const resolvedStyle = (style ||\n resolvedActiveProps.style ||\n resolvedInactiveProps.style) && {\n ...style,\n ...resolvedActiveProps.style,\n ...resolvedInactiveProps.style,\n }\n\n return {\n ...propsSafeToSpread,\n ...resolvedActiveProps,\n ...resolvedInactiveProps,\n href: disabled\n ? undefined\n : next.maskedLocation\n ? router.history.createHref(next.maskedLocation.href)\n : router.history.createHref(next.href),\n ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],\n onClick: composeHandlers([onClick, handleClick]),\n onFocus: composeHandlers([onFocus, handleFocus]),\n onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),\n onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),\n onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),\n disabled: !!disabled,\n target,\n ...(resolvedStyle && { style: resolvedStyle }),\n ...(resolvedClassName && { className: resolvedClassName }),\n ...(disabled && STATIC_DISABLED_PROPS),\n ...(isActive && STATIC_ACTIVE_PROPS),\n ...(isTransitioning && STATIC_TRANSITIONING_PROPS),\n }\n}\n\nconst STATIC_EMPTY_OBJECT = {}\nconst STATIC_ACTIVE_OBJECT = { className: 'active' }\nconst STATIC_DISABLED_PROPS = { role: 'link', 'aria-disabled': true }\nconst STATIC_ACTIVE_PROPS = { 'data-status': 'active', 'aria-current': 'page' }\nconst STATIC_TRANSITIONING_PROPS = { 'data-transitioning': 'transitioning' }\n\nconst timeoutMap = new WeakMap<EventTarget, ReturnType<typeof setTimeout>>()\n\nconst intersectionObserverOptions: IntersectionObserverInit = {\n rootMargin: '100px',\n}\n\nconst composeHandlers =\n (handlers: Array<undefined | React.EventHandler<any>>) =>\n (e: React.SyntheticEvent) => {\n handlers.filter(Boolean).forEach((handler) => {\n if (e.defaultPrevented) return\n handler!(e)\n })\n }\n\ntype UseLinkReactProps<TComp> = TComp extends keyof React.JSX.IntrinsicElements\n ? React.JSX.IntrinsicElements[TComp]\n : React.PropsWithoutRef<\n TComp extends React.ComponentType<infer TProps> ? TProps : never\n > &\n React.RefAttributes<\n TComp extends\n | React.FC<{ ref: React.Ref<infer TRef> }>\n | React.Component<{ ref: React.Ref<infer TRef> }>\n ? TRef\n : never\n >\n\nexport type UseLinkPropsOptions<\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends RoutePaths<TRouter['routeTree']> | string = string,\n TTo extends string | undefined = '.',\n TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n TMaskTo extends string = '.',\n> = ActiveLinkOptions<'a', TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &\n UseLinkReactProps<'a'>\n\nexport type ActiveLinkOptions<\n TComp = 'a',\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = '.',\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '.',\n> = LinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &\n ActiveLinkOptionProps<TComp>\n\ntype ActiveLinkProps<TComp> = Partial<\n LinkComponentReactProps<TComp> & {\n [key: `data-${string}`]: unknown\n }\n>\n\nexport interface ActiveLinkOptionProps<TComp = 'a'> {\n /**\n * A function that returns additional props for the `active` state of this link.\n * These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)\n */\n activeProps?: ActiveLinkProps<TComp> | (() => ActiveLinkProps<TComp>)\n /**\n * A function that returns additional props for the `inactive` state of this link.\n * These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)\n */\n inactiveProps?: ActiveLinkProps<TComp> | (() => ActiveLinkProps<TComp>)\n}\n\nexport type LinkProps<\n TComp = 'a',\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = '.',\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '.',\n> = ActiveLinkOptions<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &\n LinkPropsChildren\n\nexport interface LinkPropsChildren {\n // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns\n children?:\n | React.ReactNode\n | ((state: {\n isActive: boolean\n isTransitioning: boolean\n }) => React.ReactNode)\n}\n\ntype LinkComponentReactProps<TComp> = Omit<\n UseLinkReactProps<TComp>,\n keyof CreateLinkProps\n>\n\nexport type LinkComponentProps<\n TComp = 'a',\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = '.',\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '.',\n> = LinkComponentReactProps<TComp> &\n LinkProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>\n\nexport type CreateLinkProps = LinkProps<\n any,\n any,\n string,\n string,\n string,\n string\n>\n\nexport type LinkComponent<\n in out TComp,\n in out TDefaultFrom extends string = string,\n> = <\n TRouter extends AnyRouter = RegisteredRouter,\n const TFrom extends string = TDefaultFrom,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n>(\n props: LinkComponentProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,\n) => React.ReactElement\n\nexport interface LinkComponentRoute<\n in out TDefaultFrom extends string = string,\n> {\n defaultFrom: TDefaultFrom\n <\n TRouter extends AnyRouter = RegisteredRouter,\n const TTo extends string | undefined = undefined,\n const TMaskTo extends string = '',\n >(\n props: LinkComponentProps<\n 'a',\n TRouter,\n this['defaultFrom'],\n TTo,\n this['defaultFrom'],\n TMaskTo\n >,\n ): React.ReactElement\n}\n\nexport function createLink<const TComp>(\n Comp: Constrain<TComp, any, (props: CreateLinkProps) => ReactNode>,\n): LinkComponent<TComp> {\n return React.forwardRef(function CreatedLink(props, ref) {\n return <Link {...(props as any)} _asChild={Comp} ref={ref} />\n }) as any\n}\n\nexport const Link: LinkComponent<'a'> = React.forwardRef<Element, any>(\n (props, ref) => {\n const { _asChild, ...rest } = props\n const {\n type: _type,\n ref: innerRef,\n ...linkProps\n } = useLinkProps(rest as any, ref)\n\n const children =\n typeof rest.children === 'function'\n ? rest.children({\n isActive: (linkProps as any)['data-status'] === 'active',\n })\n : rest.children\n\n if (_asChild === undefined) {\n // the ReturnType of useLinkProps returns the correct type for a <a> element, not a general component that has a disabled prop\n // @ts-expect-error\n delete linkProps.disabled\n }\n\n return React.createElement(\n _asChild ? _asChild : 'a',\n {\n ...linkProps,\n ref: innerRef,\n },\n children,\n )\n },\n) as any\n\nfunction isCtrlEvent(e: React.MouseEvent) {\n return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)\n}\n\nexport type LinkOptionsFnOptions<\n TOptions,\n TComp,\n TRouter extends AnyRouter = RegisteredRouter,\n> =\n TOptions extends ReadonlyArray<any>\n ? ValidateLinkOptionsArray<TRouter, TOptions, string, TComp>\n : ValidateLinkOptions<TRouter, TOptions, string, TComp>\n\nexport type LinkOptionsFn<TComp> = <\n const TOptions,\n TRouter extends AnyRouter = RegisteredRouter,\n>(\n options: LinkOptionsFnOptions<TOptions, TComp, TRouter>,\n) => TOptions\n\nexport const linkOptions: LinkOptionsFn<'a'> = (options) => {\n return options as any\n}\n"],"names":[],"mappings":";;;;;;;;AA4BgB,SAAA,aAOd,SACA,cACkC;AAClC,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAS,KAAK;AAC5D,QAAA,mBAAmB,MAAM,OAAO,KAAK;AACrC,QAAA,WAAW,gBAAgB,YAAY;AAEvC,QAAA;AAAA;AAAA,IAEJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAQE,QAAA,OAAgC,MAAM,QAAQ,MAAM;AACpD,QAAA;AACF,UAAI,IAAI,EAAS;AACV,aAAA;AAAA,IAAA,QACD;AAAA,IAAA;AACD,WAAA;AAAA,EAAA,GACN,CAAC,EAAE,CAAC;AAGP,QAAM,gBAAgB,eAAe;AAAA,IACnC,QAAQ,CAAC,MAAM,EAAE,SAAS;AAAA,IAC1B,mBAAmB;AAAA,EAAA,CACpB;AAED,QAAM,OAAO,SAAS;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ,CAAC,UAAU,QAAQ,QAAQ,MAAM;AAAA,EAAA,CAC1C;AAED,QAAM,OAAO,MAAM;AAAA,IACjB,MAAM,OAAO,cAAc,EAAE,GAAG,SAAS,MAAa;AAAA;AAAA,IAEtD;AAAA,MACE;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAEA,QAAM,aAAa,SAAS;AAE5B,QAAM,UACJ,QAAQ,kBAAkB,aACtB,QACC,eAAe,OAAO,QAAQ;AACrC,QAAM,eACJ,oBAAoB,OAAO,QAAQ,uBAAuB;AAE5D,QAAM,WAAW,eAAe;AAAA,IAC9B,QAAQ,CAAC,MAAM;AACb,UAAI,WAAmB,QAAA;AACvB,UAAI,+CAAe,OAAO;AACxB,cAAM,YAAY;AAAA,UAChB,EAAE,SAAS;AAAA,UACX,KAAK;AAAA,UACL,OAAO;AAAA,QACT;AACA,YAAI,CAAC,WAAW;AACP,iBAAA;AAAA,QAAA;AAAA,MACT,OACK;AACL,cAAM,mBAAmB;AAAA,UACvB,EAAE,SAAS;AAAA,UACX,OAAO;AAAA,QACT;AACA,cAAM,gBAAgB;AAAA,UACpB,KAAK;AAAA,UACL,OAAO;AAAA,QACT;AAEA,cAAM,mBACJ,iBAAiB,WAAW,aAAa,MACxC,iBAAiB,WAAW,cAAc,UACzC,iBAAiB,cAAc,MAAM,MAAM;AAE/C,YAAI,CAAC,kBAAkB;AACd,iBAAA;AAAA,QAAA;AAAA,MACT;AAGE,WAAA,+CAAe,kBAAiB,MAAM;AACxC,cAAM,aAAa,UAAU,EAAE,SAAS,QAAQ,KAAK,QAAQ;AAAA,UAC3D,SAAS,EAAC,+CAAe;AAAA,UACzB,iBAAiB,EAAC,+CAAe;AAAA,QAAA,CAClC;AACD,YAAI,CAAC,YAAY;AACR,iBAAA;AAAA,QAAA;AAAA,MACT;AAGF,UAAI,+CAAe,aAAa;AACvB,eAAA,EAAE,SAAS,SAAS,KAAK;AAAA,MAAA;AAE3B,aAAA;AAAA,IAAA;AAAA,EACT,CACD;AAED,QAAM,YAAY,MAAM;AAAA,IACtB,MAAM;AACG,aAAA,aAAa,EAAE,GAAG,SAAS,MAAa,EAAE,MAAM,CAAC,QAAQ;AAC9D,gBAAQ,KAAK,GAAG;AAChB,gBAAQ,KAAK,cAAc;AAAA,MAAA,CAC5B;AAAA,IACH;AAAA;AAAA,IAEA;AAAA,MACE;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAEA,QAAM,4BAA4B,MAAM;AAAA,IACtC,CAAC,UAAiD;AAChD,UAAI,+BAAO,gBAAgB;AACf,kBAAA;AAAA,MAAA;AAAA,IAEd;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,EAAE,UAAU,CAAC,CAAC,YAAY,EAAE,YAAY,YAAY;AAAA,EACtD;AAEA,QAAM,UAAU,MAAM;AACpB,QAAI,iBAAiB,SAAS;AAC5B;AAAA,IAAA;AAEE,QAAA,CAAC,YAAY,YAAY,UAAU;AAC3B,gBAAA;AACV,uBAAiB,UAAU;AAAA,IAAA;AAAA,EAE5B,GAAA,CAAC,UAAU,WAAW,OAAO,CAAC;AAEjC,MAAI,YAAY;AACP,WAAA;AAAA,MACL,GAAG;AAAA,MACH,KAAK;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,GAAI,YAAY,EAAE,SAAS;AAAA,MAC3B,GAAI,UAAU,EAAE,OAAO;AAAA,MACvB,GAAI,YAAY,EAAE,SAAS;AAAA,MAC3B,GAAI,SAAS,EAAE,MAAM;AAAA,MACrB,GAAI,aAAa,EAAE,UAAU;AAAA,MAC7B,GAAI,WAAW,EAAE,QAAQ;AAAA,MACzB,GAAI,WAAW,EAAE,QAAQ;AAAA,MACzB,GAAI,gBAAgB,EAAE,aAAa;AAAA,MACnC,GAAI,gBAAgB,EAAE,aAAa;AAAA,MACnC,GAAI,gBAAgB,EAAE,aAAa;AAAA,IACrC;AAAA,EAAA;AAII,QAAA,cAAc,CAAC,MAAwB;AAC3C,QACE,CAAC,YACD,CAAC,YAAY,CAAC,KACd,CAAC,EAAE,qBACF,CAAC,UAAU,WAAW,YACvB,EAAE,WAAW,GACb;AACA,QAAE,eAAe;AAEjB,gBAAU,MAAM;AACd,2BAAmB,IAAI;AAAA,MAAA,CACxB;AAED,YAAM,QAAQ,OAAO,UAAU,cAAc,MAAM;AAC3C,cAAA;AACN,2BAAmB,KAAK;AAAA,MAAA,CACzB;AAID,aAAO,OAAO,SAAS;AAAA,QACrB,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAGM,QAAA,cAAc,CAAC,MAAwB;AAC3C,QAAI,SAAU;AACd,QAAI,SAAS;AACD,gBAAA;AAAA,IAAA;AAAA,EAEd;AAEA,QAAM,mBAAmB;AAEnB,QAAA,cAAc,CAAC,MAAwB;AACvC,QAAA,YAAY,CAAC,QAAS;AAE1B,QAAI,CAAC,cAAc;AACP,gBAAA;AAAA,IAAA,OACL;AACL,YAAM,cAAc,EAAE;AAClB,UAAA,WAAW,IAAI,WAAW,GAAG;AAC/B;AAAA,MAAA;AAEI,YAAA,KAAK,WAAW,MAAM;AAC1B,mBAAW,OAAO,WAAW;AACnB,kBAAA;AAAA,SACT,YAAY;AACJ,iBAAA,IAAI,aAAa,EAAE;AAAA,IAAA;AAAA,EAElC;AAEM,QAAA,cAAc,CAAC,MAAwB;AAC3C,QAAI,YAAY,CAAC,WAAW,CAAC,aAAc;AAC3C,UAAM,cAAc,EAAE;AAChB,UAAA,KAAK,WAAW,IAAI,WAAW;AACrC,QAAI,IAAI;AACN,mBAAa,EAAE;AACf,iBAAW,OAAO,WAAW;AAAA,IAAA;AAAA,EAEjC;AAGA,QAAM,sBAA+D,WAChE,iBAAiB,aAAoB,CAAE,CAAA,KAAK,uBAC7C;AAGJ,QAAM,wBACJ,WACI,sBACC,iBAAiB,eAAe,CAAE,CAAA,KAAK;AAE9C,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA,oBAAoB;AAAA,IACpB,sBAAsB;AAAA,EAErB,EAAA,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,iBAAiB,SACrB,oBAAoB,SACpB,sBAAsB,UAAU;AAAA,IAChC,GAAG;AAAA,IACH,GAAG,oBAAoB;AAAA,IACvB,GAAG,sBAAsB;AAAA,EAC3B;AAEO,SAAA;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM,WACF,SACA,KAAK,iBACH,OAAO,QAAQ,WAAW,KAAK,eAAe,IAAI,IAClD,OAAO,QAAQ,WAAW,KAAK,IAAI;AAAA,IACzC,KAAK;AAAA,IACL,SAAS,gBAAgB,CAAC,SAAS,WAAW,CAAC;AAAA,IAC/C,SAAS,gBAAgB,CAAC,SAAS,WAAW,CAAC;AAAA,IAC/C,cAAc,gBAAgB,CAAC,cAAc,WAAW,CAAC;AAAA,IACzD,cAAc,gBAAgB,CAAC,cAAc,WAAW,CAAC;AAAA,IACzD,cAAc,gBAAgB,CAAC,cAAc,gBAAgB,CAAC;AAAA,IAC9D,UAAU,CAAC,CAAC;AAAA,IACZ;AAAA,IACA,GAAI,iBAAiB,EAAE,OAAO,cAAc;AAAA,IAC5C,GAAI,qBAAqB,EAAE,WAAW,kBAAkB;AAAA,IACxD,GAAI,YAAY;AAAA,IAChB,GAAI,YAAY;AAAA,IAChB,GAAI,mBAAmB;AAAA,EACzB;AACF;AAEA,MAAM,sBAAsB,CAAC;AAC7B,MAAM,uBAAuB,EAAE,WAAW,SAAS;AACnD,MAAM,wBAAwB,EAAE,MAAM,QAAQ,iBAAiB,KAAK;AACpE,MAAM,sBAAsB,EAAE,eAAe,UAAU,gBAAgB,OAAO;AAC9E,MAAM,6BAA6B,EAAE,sBAAsB,gBAAgB;AAE3E,MAAM,iCAAiB,QAAoD;AAE3E,MAAM,8BAAwD;AAAA,EAC5D,YAAY;AACd;AAEA,MAAM,kBACJ,CAAC,aACD,CAAC,MAA4B;AAC3B,WAAS,OAAO,OAAO,EAAE,QAAQ,CAAC,YAAY;AAC5C,QAAI,EAAE,iBAAkB;AACxB,YAAS,CAAC;AAAA,EAAA,CACX;AACH;AAkIK,SAAS,WACd,MACsB;AACtB,SAAO,MAAM,WAAW,SAAS,YAAY,OAAO,KAAK;AACvD,+BAAQ,MAAM,EAAA,GAAI,OAAe,UAAU,MAAM,KAAU;AAAA,EAAA,CAC5D;AACH;AAEO,MAAM,OAA2B,MAAM;AAAA,EAC5C,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,UAAU,GAAG,KAAA,IAAS;AACxB,UAAA;AAAA,MACJ,MAAM;AAAA,MACN,KAAK;AAAA,MACL,GAAG;AAAA,IAAA,IACD,aAAa,MAAa,GAAG;AAEjC,UAAM,WACJ,OAAO,KAAK,aAAa,aACrB,KAAK,SAAS;AAAA,MACZ,UAAW,UAAkB,aAAa,MAAM;AAAA,IAAA,CACjD,IACD,KAAK;AAEX,QAAI,aAAa,QAAW;AAG1B,aAAO,UAAU;AAAA,IAAA;AAGnB,WAAO,MAAM;AAAA,MACX,WAAW,WAAW;AAAA,MACtB;AAAA,QACE,GAAG;AAAA,QACH,KAAK;AAAA,MACP;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAEJ;AAEA,SAAS,YAAY,GAAqB;AACjC,SAAA,CAAC,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE;AACpD;AAkBa,MAAA,cAAkC,CAAC,YAAY;AACnD,SAAA;AACT;"}
|
package/dist/esm/utils.d.ts
CHANGED
|
@@ -32,7 +32,7 @@ export declare function usePrevious<T>(value: T): T | null;
|
|
|
32
32
|
*/
|
|
33
33
|
export declare function useIntersectionObserver<T extends Element>(ref: React.RefObject<T | null>, callback: (entry: IntersectionObserverEntry | undefined) => void, intersectionObserverOptions?: IntersectionObserverInit, options?: {
|
|
34
34
|
disabled?: boolean;
|
|
35
|
-
}):
|
|
35
|
+
}): void;
|
|
36
36
|
/**
|
|
37
37
|
* React hook to take a `React.ForwardedRef` and returns a `ref` that can be used on a DOM element.
|
|
38
38
|
*
|
package/dist/esm/utils.js
CHANGED
|
@@ -21,24 +21,18 @@ function usePrevious(value) {
|
|
|
21
21
|
return ref.current.prev;
|
|
22
22
|
}
|
|
23
23
|
function useIntersectionObserver(ref, callback, intersectionObserverOptions = {}, options = {}) {
|
|
24
|
-
const isIntersectionObserverAvailable = React.useRef(
|
|
25
|
-
typeof IntersectionObserver === "function"
|
|
26
|
-
);
|
|
27
|
-
const observerRef = React.useRef(null);
|
|
28
24
|
React.useEffect(() => {
|
|
29
|
-
if (!ref.current ||
|
|
25
|
+
if (!ref.current || options.disabled || typeof IntersectionObserver !== "function") {
|
|
30
26
|
return;
|
|
31
27
|
}
|
|
32
|
-
|
|
28
|
+
const observer = new IntersectionObserver(([entry]) => {
|
|
33
29
|
callback(entry);
|
|
34
30
|
}, intersectionObserverOptions);
|
|
35
|
-
|
|
31
|
+
observer.observe(ref.current);
|
|
36
32
|
return () => {
|
|
37
|
-
|
|
38
|
-
(_a = observerRef.current) == null ? void 0 : _a.disconnect();
|
|
33
|
+
observer.disconnect();
|
|
39
34
|
};
|
|
40
35
|
}, [callback, intersectionObserverOptions, options.disabled, ref]);
|
|
41
|
-
return observerRef.current;
|
|
42
36
|
}
|
|
43
37
|
function useForwardedRef(ref) {
|
|
44
38
|
const innerRef = React.useRef(null);
|
package/dist/esm/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\n\nexport function useStableCallback<T extends (...args: Array<any>) => any>(\n fn: T,\n): T {\n const fnRef = React.useRef(fn)\n fnRef.current = fn\n\n const ref = React.useRef((...args: Array<any>) => fnRef.current(...args))\n return ref.current as T\n}\n\nexport const useLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\n/**\n * Taken from https://www.developerway.com/posts/implementing-advanced-use-previous-hook#part3\n */\nexport function usePrevious<T>(value: T): T | null {\n // initialise the ref with previous and current values\n const ref = React.useRef<{ value: T; prev: T | null }>({\n value: value,\n prev: null,\n })\n\n const current = ref.current.value\n\n // if the value passed into hook doesn't match what we store as \"current\"\n // move the \"current\" to the \"previous\"\n // and store the passed value as \"current\"\n if (value !== current) {\n ref.current = {\n value: value,\n prev: current,\n }\n }\n\n // return the previous value only\n return ref.current.prev\n}\n\n/**\n * React hook to wrap `IntersectionObserver`.\n *\n * This hook will create an `IntersectionObserver` and observe the ref passed to it.\n *\n * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.\n *\n * @param ref - The ref to observe\n * @param intersectionObserverOptions - The options to pass to the IntersectionObserver\n * @param options - The options to pass to the hook\n * @param callback - The callback to call when the intersection changes\n * @returns The IntersectionObserver instance\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const ref = React.useRef<HTMLDivElement>(null)\n * useIntersectionObserver(\n * ref,\n * (entry) => { doSomething(entry) },\n * { rootMargin: '10px' },\n * { disabled: false }\n * )\n * return <div ref={ref} />\n * ```\n */\nexport function useIntersectionObserver<T extends Element>(\n ref: React.RefObject<T | null>,\n callback: (entry: IntersectionObserverEntry | undefined) => void,\n intersectionObserverOptions: IntersectionObserverInit = {},\n options: { disabled?: boolean } = {},\n)
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\n\nexport function useStableCallback<T extends (...args: Array<any>) => any>(\n fn: T,\n): T {\n const fnRef = React.useRef(fn)\n fnRef.current = fn\n\n const ref = React.useRef((...args: Array<any>) => fnRef.current(...args))\n return ref.current as T\n}\n\nexport const useLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\n/**\n * Taken from https://www.developerway.com/posts/implementing-advanced-use-previous-hook#part3\n */\nexport function usePrevious<T>(value: T): T | null {\n // initialise the ref with previous and current values\n const ref = React.useRef<{ value: T; prev: T | null }>({\n value: value,\n prev: null,\n })\n\n const current = ref.current.value\n\n // if the value passed into hook doesn't match what we store as \"current\"\n // move the \"current\" to the \"previous\"\n // and store the passed value as \"current\"\n if (value !== current) {\n ref.current = {\n value: value,\n prev: current,\n }\n }\n\n // return the previous value only\n return ref.current.prev\n}\n\n/**\n * React hook to wrap `IntersectionObserver`.\n *\n * This hook will create an `IntersectionObserver` and observe the ref passed to it.\n *\n * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.\n *\n * @param ref - The ref to observe\n * @param intersectionObserverOptions - The options to pass to the IntersectionObserver\n * @param options - The options to pass to the hook\n * @param callback - The callback to call when the intersection changes\n * @returns The IntersectionObserver instance\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const ref = React.useRef<HTMLDivElement>(null)\n * useIntersectionObserver(\n * ref,\n * (entry) => { doSomething(entry) },\n * { rootMargin: '10px' },\n * { disabled: false }\n * )\n * return <div ref={ref} />\n * ```\n */\nexport function useIntersectionObserver<T extends Element>(\n ref: React.RefObject<T | null>,\n callback: (entry: IntersectionObserverEntry | undefined) => void,\n intersectionObserverOptions: IntersectionObserverInit = {},\n options: { disabled?: boolean } = {},\n) {\n React.useEffect(() => {\n if (\n !ref.current ||\n options.disabled ||\n typeof IntersectionObserver !== 'function'\n ) {\n return\n }\n\n const observer = new IntersectionObserver(([entry]) => {\n callback(entry)\n }, intersectionObserverOptions)\n\n observer.observe(ref.current)\n\n return () => {\n observer.disconnect()\n }\n }, [callback, intersectionObserverOptions, options.disabled, ref])\n}\n\n/**\n * React hook to take a `React.ForwardedRef` and returns a `ref` that can be used on a DOM element.\n *\n * @param ref - The forwarded ref\n * @returns The inner ref returned by `useRef`\n * @example\n * ```tsx\n * const MyComponent = React.forwardRef((props, ref) => {\n * const innerRef = useForwardedRef(ref)\n * return <div ref={innerRef} />\n * })\n * ```\n */\nexport function useForwardedRef<T>(ref?: React.ForwardedRef<T>) {\n const innerRef = React.useRef<T>(null)\n React.useImperativeHandle(ref, () => innerRef.current!, [])\n return innerRef\n}\n"],"names":[],"mappings":";AAEO,SAAS,kBACd,IACG;AACG,QAAA,QAAQ,MAAM,OAAO,EAAE;AAC7B,QAAM,UAAU;AAEV,QAAA,MAAM,MAAM,OAAO,IAAI,SAAqB,MAAM,QAAQ,GAAG,IAAI,CAAC;AACxE,SAAO,IAAI;AACb;AAEO,MAAM,kBACX,OAAO,WAAW,cAAc,MAAM,kBAAkB,MAAM;AAKzD,SAAS,YAAe,OAAoB;AAE3C,QAAA,MAAM,MAAM,OAAqC;AAAA,IACrD;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAEK,QAAA,UAAU,IAAI,QAAQ;AAK5B,MAAI,UAAU,SAAS;AACrB,QAAI,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EAAA;AAIF,SAAO,IAAI,QAAQ;AACrB;AA2BgB,SAAA,wBACd,KACA,UACA,8BAAwD,CACxD,GAAA,UAAkC,IAClC;AACA,QAAM,UAAU,MAAM;AACpB,QACE,CAAC,IAAI,WACL,QAAQ,YACR,OAAO,yBAAyB,YAChC;AACA;AAAA,IAAA;AAGF,UAAM,WAAW,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACrD,eAAS,KAAK;AAAA,OACb,2BAA2B;AAErB,aAAA,QAAQ,IAAI,OAAO;AAE5B,WAAO,MAAM;AACX,eAAS,WAAW;AAAA,IACtB;AAAA,EAAA,GACC,CAAC,UAAU,6BAA6B,QAAQ,UAAU,GAAG,CAAC;AACnE;AAeO,SAAS,gBAAmB,KAA6B;AACxD,QAAA,WAAW,MAAM,OAAU,IAAI;AACrC,QAAM,oBAAoB,KAAK,MAAM,SAAS,SAAU,CAAA,CAAE;AACnD,SAAA;AACT;"}
|