@inertiajs/react 2.3.9 → 2.3.11
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/index.esm.js +33 -25
- package/dist/index.esm.js.map +4 -4
- package/dist/index.js +166 -159
- package/dist/index.js.map +4 -4
- package/package.json +8 -8
- package/types/react.d.ts +1 -0
- package/types/useForm.d.ts +1 -0
package/dist/index.js
CHANGED
|
@@ -235,12 +235,21 @@ async function createInertiaApp({
|
|
|
235
235
|
}
|
|
236
236
|
|
|
237
237
|
// src/Deferred.ts
|
|
238
|
-
var
|
|
238
|
+
var import_react8 = require("react");
|
|
239
239
|
|
|
240
240
|
// src/usePage.ts
|
|
241
|
+
var import_react6 = __toESM(require("react"), 1);
|
|
242
|
+
|
|
243
|
+
// src/react.ts
|
|
241
244
|
var import_react5 = __toESM(require("react"), 1);
|
|
245
|
+
function useIsomorphicLayoutEffect(effect, deps) {
|
|
246
|
+
typeof window === "undefined" ? (0, import_react5.useEffect)(effect, deps) : (0, import_react5.useLayoutEffect)(effect, deps);
|
|
247
|
+
}
|
|
248
|
+
var isReact19 = typeof import_react5.default.use === "function";
|
|
249
|
+
|
|
250
|
+
// src/usePage.ts
|
|
242
251
|
function usePage() {
|
|
243
|
-
const page =
|
|
252
|
+
const page = isReact19 ? import_react6.default.use(PageContext_default) : import_react6.default.useContext(PageContext_default);
|
|
244
253
|
if (!page) {
|
|
245
254
|
throw new Error("usePage must be used within the Inertia component");
|
|
246
255
|
}
|
|
@@ -260,10 +269,10 @@ var Deferred = ({ children, data, fallback }) => {
|
|
|
260
269
|
if (!data) {
|
|
261
270
|
throw new Error("`<Deferred>` requires a `data` prop to be a string or array of strings");
|
|
262
271
|
}
|
|
263
|
-
const [loaded, setLoaded] = (0,
|
|
272
|
+
const [loaded, setLoaded] = (0, import_react8.useState)(false);
|
|
264
273
|
const pageProps = usePage().props;
|
|
265
|
-
const keys = (0,
|
|
266
|
-
(0,
|
|
274
|
+
const keys = (0, import_react8.useMemo)(() => Array.isArray(data) ? data : [data], [data]);
|
|
275
|
+
(0, import_react8.useEffect)(() => {
|
|
267
276
|
const removeListener = router3.on("start", (e) => {
|
|
268
277
|
const isPartialVisit = e.detail.visit.only.length > 0 || e.detail.visit.except.length > 0;
|
|
269
278
|
const isReloadingKey = e.detail.visit.only.find((key) => keys.includes(key));
|
|
@@ -275,7 +284,7 @@ var Deferred = ({ children, data, fallback }) => {
|
|
|
275
284
|
removeListener();
|
|
276
285
|
};
|
|
277
286
|
}, []);
|
|
278
|
-
(0,
|
|
287
|
+
(0, import_react8.useEffect)(() => {
|
|
279
288
|
setLoaded(keys.every((key) => pageProps[key] !== void 0));
|
|
280
289
|
}, [pageProps, keys]);
|
|
281
290
|
if (loaded) {
|
|
@@ -289,29 +298,23 @@ var Deferred_default = Deferred;
|
|
|
289
298
|
// src/Form.ts
|
|
290
299
|
var import_core5 = require("@inertiajs/core");
|
|
291
300
|
var import_lodash_es2 = require("lodash-es");
|
|
292
|
-
var
|
|
301
|
+
var import_react12 = __toESM(require("react"), 1);
|
|
293
302
|
|
|
294
303
|
// src/useForm.ts
|
|
295
304
|
var import_core4 = require("@inertiajs/core");
|
|
296
305
|
var import_laravel_precognition = require("laravel-precognition");
|
|
297
306
|
var import_lodash_es = require("lodash-es");
|
|
298
|
-
var
|
|
299
|
-
|
|
300
|
-
// src/react.ts
|
|
301
|
-
var import_react7 = require("react");
|
|
302
|
-
function useIsomorphicLayoutEffect(effect, deps) {
|
|
303
|
-
typeof window === "undefined" ? (0, import_react7.useEffect)(effect, deps) : (0, import_react7.useLayoutEffect)(effect, deps);
|
|
304
|
-
}
|
|
307
|
+
var import_react10 = require("react");
|
|
305
308
|
|
|
306
309
|
// src/useRemember.ts
|
|
307
310
|
var import_core3 = require("@inertiajs/core");
|
|
308
|
-
var
|
|
311
|
+
var import_react9 = require("react");
|
|
309
312
|
function useRemember(initialState, key, excludeKeysRef) {
|
|
310
|
-
const [state, setState] = (0,
|
|
313
|
+
const [state, setState] = (0, import_react9.useState)(() => {
|
|
311
314
|
const restored = import_core3.router.restore(key);
|
|
312
315
|
return restored !== void 0 ? restored : initialState;
|
|
313
316
|
});
|
|
314
|
-
(0,
|
|
317
|
+
(0, import_react9.useEffect)(() => {
|
|
315
318
|
const keys = excludeKeysRef?.current;
|
|
316
319
|
if (keys && keys.length > 0 && typeof state === "object" && state !== null) {
|
|
317
320
|
const filtered = { ...state };
|
|
@@ -326,38 +329,38 @@ function useRemember(initialState, key, excludeKeysRef) {
|
|
|
326
329
|
|
|
327
330
|
// src/useForm.ts
|
|
328
331
|
function useForm(...args) {
|
|
329
|
-
const isMounted = (0,
|
|
332
|
+
const isMounted = (0, import_react10.useRef)(false);
|
|
330
333
|
const parsedArgs = import_core4.UseFormUtils.parseUseFormArguments(...args);
|
|
331
334
|
const { rememberKey, data: initialData } = parsedArgs;
|
|
332
|
-
const precognitionEndpoint = (0,
|
|
333
|
-
const [defaults, setDefaults] = (0,
|
|
335
|
+
const precognitionEndpoint = (0, import_react10.useRef)(parsedArgs.precognitionEndpoint);
|
|
336
|
+
const [defaults, setDefaults] = (0, import_react10.useState)(
|
|
334
337
|
typeof initialData === "function" ? (0, import_lodash_es.cloneDeep)(initialData()) : (0, import_lodash_es.cloneDeep)(initialData)
|
|
335
338
|
);
|
|
336
|
-
const cancelToken = (0,
|
|
337
|
-
const recentlySuccessfulTimeoutId = (0,
|
|
338
|
-
const excludeKeysRef = (0,
|
|
339
|
-
const [data, setData] = rememberKey ? useRemember(defaults, `${rememberKey}:data`, excludeKeysRef) : (0,
|
|
340
|
-
const [errors, setErrors] = rememberKey ? useRemember({}, `${rememberKey}:errors`) : (0,
|
|
341
|
-
const [hasErrors, setHasErrors] = (0,
|
|
342
|
-
const [processing, setProcessing] = (0,
|
|
343
|
-
const [progress2, setProgress] = (0,
|
|
344
|
-
const [wasSuccessful, setWasSuccessful] = (0,
|
|
345
|
-
const [recentlySuccessful, setRecentlySuccessful] = (0,
|
|
346
|
-
const transform = (0,
|
|
347
|
-
const isDirty = (0,
|
|
348
|
-
const validatorRef = (0,
|
|
349
|
-
const [validating, setValidating] = (0,
|
|
350
|
-
const [touchedFields, setTouchedFields] = (0,
|
|
351
|
-
const [validFields, setValidFields] = (0,
|
|
352
|
-
const withAllErrors = (0,
|
|
353
|
-
(0,
|
|
339
|
+
const cancelToken = (0, import_react10.useRef)(null);
|
|
340
|
+
const recentlySuccessfulTimeoutId = (0, import_react10.useRef)(void 0);
|
|
341
|
+
const excludeKeysRef = (0, import_react10.useRef)([]);
|
|
342
|
+
const [data, setData] = rememberKey ? useRemember(defaults, `${rememberKey}:data`, excludeKeysRef) : (0, import_react10.useState)(defaults);
|
|
343
|
+
const [errors, setErrors] = rememberKey ? useRemember({}, `${rememberKey}:errors`) : (0, import_react10.useState)({});
|
|
344
|
+
const [hasErrors, setHasErrors] = (0, import_react10.useState)(false);
|
|
345
|
+
const [processing, setProcessing] = (0, import_react10.useState)(false);
|
|
346
|
+
const [progress2, setProgress] = (0, import_react10.useState)(null);
|
|
347
|
+
const [wasSuccessful, setWasSuccessful] = (0, import_react10.useState)(false);
|
|
348
|
+
const [recentlySuccessful, setRecentlySuccessful] = (0, import_react10.useState)(false);
|
|
349
|
+
const transform = (0, import_react10.useRef)((data2) => data2);
|
|
350
|
+
const isDirty = (0, import_react10.useMemo)(() => !(0, import_lodash_es.isEqual)(data, defaults), [data, defaults]);
|
|
351
|
+
const validatorRef = (0, import_react10.useRef)(null);
|
|
352
|
+
const [validating, setValidating] = (0, import_react10.useState)(false);
|
|
353
|
+
const [touchedFields, setTouchedFields] = (0, import_react10.useState)([]);
|
|
354
|
+
const [validFields, setValidFields] = (0, import_react10.useState)([]);
|
|
355
|
+
const withAllErrors = (0, import_react10.useRef)(false);
|
|
356
|
+
(0, import_react10.useEffect)(() => {
|
|
354
357
|
isMounted.current = true;
|
|
355
358
|
return () => {
|
|
356
359
|
isMounted.current = false;
|
|
357
360
|
};
|
|
358
361
|
}, []);
|
|
359
|
-
const setDefaultsCalledInOnSuccess = (0,
|
|
360
|
-
const submit = (0,
|
|
362
|
+
const setDefaultsCalledInOnSuccess = (0, import_react10.useRef)(false);
|
|
363
|
+
const submit = (0, import_react10.useCallback)(
|
|
361
364
|
(...args2) => {
|
|
362
365
|
const { method, url, options } = import_core4.UseFormUtils.parseSubmitArguments(args2, precognitionEndpoint.current);
|
|
363
366
|
setDefaultsCalledInOnSuccess.current = false;
|
|
@@ -451,7 +454,7 @@ function useForm(...args) {
|
|
|
451
454
|
},
|
|
452
455
|
[data, setErrors, transform]
|
|
453
456
|
);
|
|
454
|
-
const setDataFunction = (0,
|
|
457
|
+
const setDataFunction = (0, import_react10.useCallback)(
|
|
455
458
|
(keyOrData, maybeValue) => {
|
|
456
459
|
if (typeof keyOrData === "string") {
|
|
457
460
|
setData((data2) => (0, import_lodash_es.set)((0, import_lodash_es.cloneDeep)(data2), keyOrData, maybeValue));
|
|
@@ -463,12 +466,12 @@ function useForm(...args) {
|
|
|
463
466
|
},
|
|
464
467
|
[setData]
|
|
465
468
|
);
|
|
466
|
-
const [dataAsDefaults, setDataAsDefaults] = (0,
|
|
467
|
-
const dataRef = (0,
|
|
468
|
-
(0,
|
|
469
|
+
const [dataAsDefaults, setDataAsDefaults] = (0, import_react10.useState)(false);
|
|
470
|
+
const dataRef = (0, import_react10.useRef)(data);
|
|
471
|
+
(0, import_react10.useEffect)(() => {
|
|
469
472
|
dataRef.current = data;
|
|
470
473
|
});
|
|
471
|
-
const setDefaultsFunction = (0,
|
|
474
|
+
const setDefaultsFunction = (0, import_react10.useCallback)(
|
|
472
475
|
(fieldOrFields, maybeValue) => {
|
|
473
476
|
setDefaultsCalledInOnSuccess.current = true;
|
|
474
477
|
let newDefaults = {};
|
|
@@ -495,7 +498,7 @@ function useForm(...args) {
|
|
|
495
498
|
}
|
|
496
499
|
setDataAsDefaults(false);
|
|
497
500
|
}, [dataAsDefaults]);
|
|
498
|
-
const reset = (0,
|
|
501
|
+
const reset = (0, import_react10.useCallback)(
|
|
499
502
|
(...fields) => {
|
|
500
503
|
if (fields.length === 0) {
|
|
501
504
|
setData(defaults);
|
|
@@ -513,7 +516,7 @@ function useForm(...args) {
|
|
|
513
516
|
},
|
|
514
517
|
[setData, defaults]
|
|
515
518
|
);
|
|
516
|
-
const setError = (0,
|
|
519
|
+
const setError = (0, import_react10.useCallback)(
|
|
517
520
|
(fieldOrFields, maybeValue) => {
|
|
518
521
|
setErrors((errors2) => {
|
|
519
522
|
const newErrors = {
|
|
@@ -527,7 +530,7 @@ function useForm(...args) {
|
|
|
527
530
|
},
|
|
528
531
|
[setErrors, setHasErrors]
|
|
529
532
|
);
|
|
530
|
-
const clearErrors = (0,
|
|
533
|
+
const clearErrors = (0, import_react10.useCallback)(
|
|
531
534
|
(...fields) => {
|
|
532
535
|
setErrors((errors2) => {
|
|
533
536
|
const newErrors = Object.keys(errors2).reduce(
|
|
@@ -550,7 +553,7 @@ function useForm(...args) {
|
|
|
550
553
|
},
|
|
551
554
|
[setErrors, setHasErrors]
|
|
552
555
|
);
|
|
553
|
-
const resetAndClearErrors = (0,
|
|
556
|
+
const resetAndClearErrors = (0, import_react10.useCallback)(
|
|
554
557
|
(...fields) => {
|
|
555
558
|
reset(...fields);
|
|
556
559
|
clearErrors(...fields);
|
|
@@ -560,17 +563,17 @@ function useForm(...args) {
|
|
|
560
563
|
const createSubmitMethod = (method) => (url, options = {}) => {
|
|
561
564
|
submit(method, url, options);
|
|
562
565
|
};
|
|
563
|
-
const getMethod = (0,
|
|
564
|
-
const post = (0,
|
|
565
|
-
const put = (0,
|
|
566
|
-
const patch = (0,
|
|
567
|
-
const deleteMethod = (0,
|
|
568
|
-
const cancel = (0,
|
|
566
|
+
const getMethod = (0, import_react10.useCallback)(createSubmitMethod("get"), [submit]);
|
|
567
|
+
const post = (0, import_react10.useCallback)(createSubmitMethod("post"), [submit]);
|
|
568
|
+
const put = (0, import_react10.useCallback)(createSubmitMethod("put"), [submit]);
|
|
569
|
+
const patch = (0, import_react10.useCallback)(createSubmitMethod("patch"), [submit]);
|
|
570
|
+
const deleteMethod = (0, import_react10.useCallback)(createSubmitMethod("delete"), [submit]);
|
|
571
|
+
const cancel = (0, import_react10.useCallback)(() => {
|
|
569
572
|
if (cancelToken.current) {
|
|
570
573
|
cancelToken.current.cancel();
|
|
571
574
|
}
|
|
572
575
|
}, []);
|
|
573
|
-
const transformFunction = (0,
|
|
576
|
+
const transformFunction = (0, import_react10.useCallback)((callback) => {
|
|
574
577
|
transform.current = callback;
|
|
575
578
|
}, []);
|
|
576
579
|
const form = {
|
|
@@ -605,12 +608,12 @@ function useForm(...args) {
|
|
|
605
608
|
callback(value);
|
|
606
609
|
return value;
|
|
607
610
|
};
|
|
608
|
-
const valid = (0,
|
|
611
|
+
const valid = (0, import_react10.useCallback)(
|
|
609
612
|
(field) => validFields.includes(field),
|
|
610
613
|
[validFields]
|
|
611
614
|
);
|
|
612
|
-
const invalid = (0,
|
|
613
|
-
const touched = (0,
|
|
615
|
+
const invalid = (0, import_react10.useCallback)((field) => field in errors, [errors]);
|
|
616
|
+
const touched = (0, import_react10.useCallback)(
|
|
614
617
|
(field) => typeof field === "string" ? touchedFields.includes(field) : touchedFields.length > 0,
|
|
615
618
|
[touchedFields]
|
|
616
619
|
);
|
|
@@ -687,11 +690,11 @@ function useForm(...args) {
|
|
|
687
690
|
|
|
688
691
|
// src/Form.ts
|
|
689
692
|
var deferStateUpdate = (callback) => {
|
|
690
|
-
typeof
|
|
693
|
+
typeof import_react12.default.startTransition === "function" ? import_react12.default.startTransition(callback) : setTimeout(callback, 0);
|
|
691
694
|
};
|
|
692
695
|
var noop = () => void 0;
|
|
693
|
-
var FormContext = (0,
|
|
694
|
-
var Form = (0,
|
|
696
|
+
var FormContext = (0, import_react12.createContext)(void 0);
|
|
697
|
+
var Form = (0, import_react12.forwardRef)(
|
|
695
698
|
({
|
|
696
699
|
action = "",
|
|
697
700
|
method = "get",
|
|
@@ -736,12 +739,12 @@ var Form = (0, import_react11.forwardRef)(
|
|
|
736
739
|
form.withAllErrors();
|
|
737
740
|
}
|
|
738
741
|
form.transform(getTransformedData);
|
|
739
|
-
const formElement = (0,
|
|
740
|
-
const resolvedMethod = (0,
|
|
742
|
+
const formElement = (0, import_react12.useRef)(void 0);
|
|
743
|
+
const resolvedMethod = (0, import_react12.useMemo)(() => {
|
|
741
744
|
return (0, import_core5.isUrlMethodPair)(action) ? action.method : method.toLowerCase();
|
|
742
745
|
}, [action, method]);
|
|
743
|
-
const [isDirty, setIsDirty] = (0,
|
|
744
|
-
const defaultData = (0,
|
|
746
|
+
const [isDirty, setIsDirty] = (0, import_react12.useState)(false);
|
|
747
|
+
const defaultData = (0, import_react12.useRef)(new FormData());
|
|
745
748
|
const getFormData = (submitter) => new FormData(formElement.current, submitter);
|
|
746
749
|
const getData = (submitter) => (0, import_core5.formDataToObject)(getFormData(submitter));
|
|
747
750
|
const getUrlAndData = (submitter) => {
|
|
@@ -752,14 +755,19 @@ var Form = (0, import_react11.forwardRef)(
|
|
|
752
755
|
queryStringArrayFormat
|
|
753
756
|
);
|
|
754
757
|
};
|
|
755
|
-
const updateDirtyState = (event) =>
|
|
756
|
-
|
|
757
|
-
|
|
758
|
+
const updateDirtyState = (event) => {
|
|
759
|
+
if (event.type === "reset" && event.detail?.[import_core5.FormComponentResetSymbol]) {
|
|
760
|
+
event.preventDefault();
|
|
761
|
+
}
|
|
762
|
+
deferStateUpdate(
|
|
763
|
+
() => setIsDirty(event.type === "reset" ? false : !(0, import_lodash_es2.isEqual)(getData(), (0, import_core5.formDataToObject)(defaultData.current)))
|
|
764
|
+
);
|
|
765
|
+
};
|
|
758
766
|
const clearErrors = (...names) => {
|
|
759
767
|
form.clearErrors(...names);
|
|
760
768
|
return form;
|
|
761
769
|
};
|
|
762
|
-
(0,
|
|
770
|
+
(0, import_react12.useEffect)(() => {
|
|
763
771
|
defaultData.current = getFormData();
|
|
764
772
|
form.setDefaults(getData());
|
|
765
773
|
const formEvents = ["input", "change", "reset"];
|
|
@@ -768,10 +776,10 @@ var Form = (0, import_react11.forwardRef)(
|
|
|
768
776
|
formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState));
|
|
769
777
|
};
|
|
770
778
|
}, []);
|
|
771
|
-
(0,
|
|
779
|
+
(0, import_react12.useEffect)(() => {
|
|
772
780
|
form.setValidationTimeout(validationTimeout);
|
|
773
781
|
}, [validationTimeout]);
|
|
774
|
-
(0,
|
|
782
|
+
(0, import_react12.useEffect)(() => {
|
|
775
783
|
if (validateFiles) {
|
|
776
784
|
form.validateFiles();
|
|
777
785
|
} else {
|
|
@@ -862,8 +870,8 @@ var Form = (0, import_react11.forwardRef)(
|
|
|
862
870
|
touch: form.touch,
|
|
863
871
|
touched: form.touched
|
|
864
872
|
};
|
|
865
|
-
(0,
|
|
866
|
-
const formNode = (0,
|
|
873
|
+
(0, import_react12.useImperativeHandle)(ref, () => exposed, [form, isDirty, submit]);
|
|
874
|
+
const formNode = (0, import_react12.createElement)(
|
|
867
875
|
"form",
|
|
868
876
|
{
|
|
869
877
|
...props,
|
|
@@ -874,31 +882,30 @@ var Form = (0, import_react11.forwardRef)(
|
|
|
874
882
|
event.preventDefault();
|
|
875
883
|
submit(event.nativeEvent.submitter);
|
|
876
884
|
},
|
|
877
|
-
//
|
|
878
|
-
//
|
|
879
|
-
// Unfortunately, React 19 treats an empty string as `false`.
|
|
885
|
+
// React 19 supports passing a boolean to the `inert` attribute, but shows
|
|
886
|
+
// a warning when receiving a string. Earlier versions require the string 'true'.
|
|
880
887
|
// See: https://github.com/inertiajs/inertia/pull/2536
|
|
881
|
-
inert: disableWhileProcessing && form.processing && "true"
|
|
888
|
+
inert: disableWhileProcessing && form.processing && (isReact19 ? true : "true")
|
|
882
889
|
},
|
|
883
890
|
typeof children === "function" ? children(exposed) : children
|
|
884
891
|
);
|
|
885
|
-
return (0,
|
|
892
|
+
return (0, import_react12.createElement)(FormContext.Provider, { value: exposed }, formNode);
|
|
886
893
|
}
|
|
887
894
|
);
|
|
888
895
|
Form.displayName = "InertiaForm";
|
|
889
896
|
function useFormContext() {
|
|
890
|
-
return (0,
|
|
897
|
+
return (0, import_react12.useContext)(FormContext);
|
|
891
898
|
}
|
|
892
899
|
var Form_default = Form;
|
|
893
900
|
|
|
894
901
|
// src/Head.ts
|
|
895
902
|
var import_lodash_es3 = require("lodash-es");
|
|
896
|
-
var
|
|
903
|
+
var import_react14 = __toESM(require("react"), 1);
|
|
897
904
|
var Head = function({ children, title }) {
|
|
898
|
-
const headManager = (0,
|
|
899
|
-
const provider = (0,
|
|
905
|
+
const headManager = (0, import_react14.useContext)(HeadContext_default);
|
|
906
|
+
const provider = (0, import_react14.useMemo)(() => headManager.createProvider(), [headManager]);
|
|
900
907
|
const isServer = typeof window === "undefined";
|
|
901
|
-
(0,
|
|
908
|
+
(0, import_react14.useEffect)(() => {
|
|
902
909
|
provider.reconnect();
|
|
903
910
|
provider.update(renderNodes(children));
|
|
904
911
|
return () => {
|
|
@@ -961,7 +968,7 @@ var Head = function({ children, title }) {
|
|
|
961
968
|
return html;
|
|
962
969
|
}
|
|
963
970
|
function ensureNodeHasInertiaProp(node) {
|
|
964
|
-
return
|
|
971
|
+
return import_react14.default.cloneElement(node, {
|
|
965
972
|
[provider.preferredAttribute()]: node.props["head-key"] !== void 0 ? node.props["head-key"] : ""
|
|
966
973
|
});
|
|
967
974
|
}
|
|
@@ -969,7 +976,7 @@ var Head = function({ children, title }) {
|
|
|
969
976
|
return renderTag(ensureNodeHasInertiaProp(node));
|
|
970
977
|
}
|
|
971
978
|
function renderNodes(nodes) {
|
|
972
|
-
const elements =
|
|
979
|
+
const elements = import_react14.default.Children.toArray(nodes).filter((node) => node).map((node) => renderNode(node));
|
|
973
980
|
if (title && !elements.find((tag) => tag.startsWith("<title"))) {
|
|
974
981
|
elements.push(`<title ${provider.preferredAttribute()}>${title}</title>`);
|
|
975
982
|
}
|
|
@@ -984,7 +991,7 @@ var Head_default = Head;
|
|
|
984
991
|
|
|
985
992
|
// src/InfiniteScroll.ts
|
|
986
993
|
var import_core6 = require("@inertiajs/core");
|
|
987
|
-
var
|
|
994
|
+
var import_react15 = __toESM(require("react"), 1);
|
|
988
995
|
var resolveHTMLElement = (value, fallback) => {
|
|
989
996
|
if (!value) {
|
|
990
997
|
return fallback;
|
|
@@ -1003,7 +1010,7 @@ var renderSlot = (slotContent, slotProps, fallback = null) => {
|
|
|
1003
1010
|
}
|
|
1004
1011
|
return typeof slotContent === "function" ? slotContent(slotProps) : slotContent;
|
|
1005
1012
|
};
|
|
1006
|
-
var InfiniteScroll = (0,
|
|
1013
|
+
var InfiniteScroll = (0, import_react15.forwardRef)(
|
|
1007
1014
|
({
|
|
1008
1015
|
data,
|
|
1009
1016
|
buffer = 0,
|
|
@@ -1024,34 +1031,34 @@ var InfiniteScroll = (0, import_react13.forwardRef)(
|
|
|
1024
1031
|
onlyPrevious = false,
|
|
1025
1032
|
...props
|
|
1026
1033
|
}, ref) => {
|
|
1027
|
-
const [startElementFromRef, setStartElementFromRef] = (0,
|
|
1028
|
-
const startElementRef = (0,
|
|
1029
|
-
const [endElementFromRef, setEndElementFromRef] = (0,
|
|
1030
|
-
const endElementRef = (0,
|
|
1031
|
-
const [itemsElementFromRef, setItemsElementFromRef] = (0,
|
|
1032
|
-
const itemsElementRef = (0,
|
|
1033
|
-
const [loadingPrevious, setLoadingPrevious] = (0,
|
|
1034
|
-
const [loadingNext, setLoadingNext] = (0,
|
|
1035
|
-
const [requestCount, setRequestCount] = (0,
|
|
1036
|
-
const [hasPreviousPage, setHasPreviousPage] = (0,
|
|
1037
|
-
const [hasNextPage, setHasNextPage] = (0,
|
|
1038
|
-
const [resolvedStartElement, setResolvedStartElement] = (0,
|
|
1039
|
-
const [resolvedEndElement, setResolvedEndElement] = (0,
|
|
1040
|
-
const [resolvedItemsElement, setResolvedItemsElement] = (0,
|
|
1041
|
-
(0,
|
|
1034
|
+
const [startElementFromRef, setStartElementFromRef] = (0, import_react15.useState)(null);
|
|
1035
|
+
const startElementRef = (0, import_react15.useCallback)((node) => setStartElementFromRef(node), []);
|
|
1036
|
+
const [endElementFromRef, setEndElementFromRef] = (0, import_react15.useState)(null);
|
|
1037
|
+
const endElementRef = (0, import_react15.useCallback)((node) => setEndElementFromRef(node), []);
|
|
1038
|
+
const [itemsElementFromRef, setItemsElementFromRef] = (0, import_react15.useState)(null);
|
|
1039
|
+
const itemsElementRef = (0, import_react15.useCallback)((node) => setItemsElementFromRef(node), []);
|
|
1040
|
+
const [loadingPrevious, setLoadingPrevious] = (0, import_react15.useState)(false);
|
|
1041
|
+
const [loadingNext, setLoadingNext] = (0, import_react15.useState)(false);
|
|
1042
|
+
const [requestCount, setRequestCount] = (0, import_react15.useState)(0);
|
|
1043
|
+
const [hasPreviousPage, setHasPreviousPage] = (0, import_react15.useState)(false);
|
|
1044
|
+
const [hasNextPage, setHasNextPage] = (0, import_react15.useState)(false);
|
|
1045
|
+
const [resolvedStartElement, setResolvedStartElement] = (0, import_react15.useState)(null);
|
|
1046
|
+
const [resolvedEndElement, setResolvedEndElement] = (0, import_react15.useState)(null);
|
|
1047
|
+
const [resolvedItemsElement, setResolvedItemsElement] = (0, import_react15.useState)(null);
|
|
1048
|
+
(0, import_react15.useEffect)(() => {
|
|
1042
1049
|
const element = startElement ? resolveHTMLElement(startElement, startElementFromRef) : startElementFromRef;
|
|
1043
1050
|
setResolvedStartElement(element);
|
|
1044
1051
|
}, [startElement, startElementFromRef]);
|
|
1045
|
-
(0,
|
|
1052
|
+
(0, import_react15.useEffect)(() => {
|
|
1046
1053
|
const element = endElement ? resolveHTMLElement(endElement, endElementFromRef) : endElementFromRef;
|
|
1047
1054
|
setResolvedEndElement(element);
|
|
1048
1055
|
}, [endElement, endElementFromRef]);
|
|
1049
|
-
(0,
|
|
1056
|
+
(0, import_react15.useEffect)(() => {
|
|
1050
1057
|
const element = itemsElement ? resolveHTMLElement(itemsElement, itemsElementFromRef) : itemsElementFromRef;
|
|
1051
1058
|
setResolvedItemsElement(element);
|
|
1052
1059
|
}, [itemsElement, itemsElementFromRef]);
|
|
1053
|
-
const scrollableParent = (0,
|
|
1054
|
-
const callbackPropsRef = (0,
|
|
1060
|
+
const scrollableParent = (0, import_react15.useMemo)(() => (0, import_core6.getScrollableParent)(resolvedItemsElement), [resolvedItemsElement]);
|
|
1061
|
+
const callbackPropsRef = (0, import_react15.useRef)({
|
|
1055
1062
|
buffer,
|
|
1056
1063
|
onlyNext,
|
|
1057
1064
|
onlyPrevious,
|
|
@@ -1065,10 +1072,10 @@ var InfiniteScroll = (0, import_react13.forwardRef)(
|
|
|
1065
1072
|
reverse,
|
|
1066
1073
|
preserveUrl
|
|
1067
1074
|
};
|
|
1068
|
-
const [infiniteScroll, setInfiniteScroll] = (0,
|
|
1069
|
-
const dataManager = (0,
|
|
1070
|
-
const elementManager = (0,
|
|
1071
|
-
const scrollToBottom = (0,
|
|
1075
|
+
const [infiniteScroll, setInfiniteScroll] = (0, import_react15.useState)(null);
|
|
1076
|
+
const dataManager = (0, import_react15.useMemo)(() => infiniteScroll?.dataManager, [infiniteScroll]);
|
|
1077
|
+
const elementManager = (0, import_react15.useMemo)(() => infiniteScroll?.elementManager, [infiniteScroll]);
|
|
1078
|
+
const scrollToBottom = (0, import_react15.useCallback)(() => {
|
|
1072
1079
|
if (scrollableParent) {
|
|
1073
1080
|
scrollableParent.scrollTo({
|
|
1074
1081
|
top: scrollableParent.scrollHeight,
|
|
@@ -1081,7 +1088,7 @@ var InfiniteScroll = (0, import_react13.forwardRef)(
|
|
|
1081
1088
|
});
|
|
1082
1089
|
}
|
|
1083
1090
|
}, [scrollableParent]);
|
|
1084
|
-
(0,
|
|
1091
|
+
(0, import_react15.useEffect)(() => {
|
|
1085
1092
|
if (!resolvedItemsElement) {
|
|
1086
1093
|
return;
|
|
1087
1094
|
}
|
|
@@ -1129,21 +1136,21 @@ var InfiniteScroll = (0, import_react13.forwardRef)(
|
|
|
1129
1136
|
setInfiniteScroll(null);
|
|
1130
1137
|
};
|
|
1131
1138
|
}, [data, resolvedItemsElement, resolvedStartElement, resolvedEndElement, scrollableParent]);
|
|
1132
|
-
const manualMode = (0,
|
|
1139
|
+
const manualMode = (0, import_react15.useMemo)(
|
|
1133
1140
|
() => manual || manualAfter > 0 && requestCount >= manualAfter,
|
|
1134
1141
|
[manual, manualAfter, requestCount]
|
|
1135
1142
|
);
|
|
1136
|
-
const autoLoad = (0,
|
|
1137
|
-
(0,
|
|
1143
|
+
const autoLoad = (0, import_react15.useMemo)(() => !manualMode, [manualMode]);
|
|
1144
|
+
(0, import_react15.useEffect)(() => {
|
|
1138
1145
|
autoLoad ? elementManager?.enableTriggers() : elementManager?.disableTriggers();
|
|
1139
1146
|
}, [autoLoad, onlyNext, onlyPrevious, resolvedStartElement, resolvedEndElement]);
|
|
1140
|
-
(0,
|
|
1147
|
+
(0, import_react15.useEffect)(() => {
|
|
1141
1148
|
const shouldAutoScroll = autoScroll !== void 0 ? autoScroll : reverse;
|
|
1142
1149
|
if (shouldAutoScroll) {
|
|
1143
1150
|
scrollToBottom();
|
|
1144
1151
|
}
|
|
1145
1152
|
}, [scrollableParent]);
|
|
1146
|
-
(0,
|
|
1153
|
+
(0, import_react15.useImperativeHandle)(
|
|
1147
1154
|
ref,
|
|
1148
1155
|
() => ({
|
|
1149
1156
|
fetchNext: dataManager?.fetchNext || (() => {
|
|
@@ -1189,7 +1196,7 @@ var InfiniteScroll = (0, import_react13.forwardRef)(
|
|
|
1189
1196
|
const renderElements = [];
|
|
1190
1197
|
if (!startElement) {
|
|
1191
1198
|
renderElements.push(
|
|
1192
|
-
(0,
|
|
1199
|
+
(0, import_react15.createElement)(
|
|
1193
1200
|
"div",
|
|
1194
1201
|
{ ref: startElementRef },
|
|
1195
1202
|
// Render previous slot or fallback to loading indicator
|
|
@@ -1198,7 +1205,7 @@ var InfiniteScroll = (0, import_react13.forwardRef)(
|
|
|
1198
1205
|
);
|
|
1199
1206
|
}
|
|
1200
1207
|
renderElements.push(
|
|
1201
|
-
(0,
|
|
1208
|
+
(0, import_react15.createElement)(
|
|
1202
1209
|
as,
|
|
1203
1210
|
{ ...props, ref: itemsElementRef },
|
|
1204
1211
|
typeof children === "function" ? children(exposedSlot) : children
|
|
@@ -1206,7 +1213,7 @@ var InfiniteScroll = (0, import_react13.forwardRef)(
|
|
|
1206
1213
|
);
|
|
1207
1214
|
if (!endElement) {
|
|
1208
1215
|
renderElements.push(
|
|
1209
|
-
(0,
|
|
1216
|
+
(0, import_react15.createElement)(
|
|
1210
1217
|
"div",
|
|
1211
1218
|
{ ref: endElementRef },
|
|
1212
1219
|
// Render next slot or fallback to loading indicator
|
|
@@ -1214,7 +1221,7 @@ var InfiniteScroll = (0, import_react13.forwardRef)(
|
|
|
1214
1221
|
)
|
|
1215
1222
|
);
|
|
1216
1223
|
}
|
|
1217
|
-
return (0,
|
|
1224
|
+
return (0, import_react15.createElement)(import_react15.default.Fragment, {}, ...reverse ? [...renderElements].reverse() : renderElements);
|
|
1218
1225
|
}
|
|
1219
1226
|
);
|
|
1220
1227
|
InfiniteScroll.displayName = "InertiaInfiniteScroll";
|
|
@@ -1222,9 +1229,9 @@ var InfiniteScroll_default = InfiniteScroll;
|
|
|
1222
1229
|
|
|
1223
1230
|
// src/Link.ts
|
|
1224
1231
|
var import_core7 = require("@inertiajs/core");
|
|
1225
|
-
var
|
|
1232
|
+
var import_react16 = require("react");
|
|
1226
1233
|
var noop2 = () => void 0;
|
|
1227
|
-
var Link = (0,
|
|
1234
|
+
var Link = (0, import_react16.forwardRef)(
|
|
1228
1235
|
({
|
|
1229
1236
|
children,
|
|
1230
1237
|
as = "a",
|
|
@@ -1257,24 +1264,24 @@ var Link = (0, import_react14.forwardRef)(
|
|
|
1257
1264
|
viewTransition = false,
|
|
1258
1265
|
...props
|
|
1259
1266
|
}, ref) => {
|
|
1260
|
-
const [inFlightCount, setInFlightCount] = (0,
|
|
1261
|
-
const hoverTimeout = (0,
|
|
1262
|
-
const _method = (0,
|
|
1267
|
+
const [inFlightCount, setInFlightCount] = (0, import_react16.useState)(0);
|
|
1268
|
+
const hoverTimeout = (0, import_react16.useRef)(void 0);
|
|
1269
|
+
const _method = (0, import_react16.useMemo)(() => {
|
|
1263
1270
|
return (0, import_core7.isUrlMethodPair)(href) ? href.method : method.toLowerCase();
|
|
1264
1271
|
}, [href, method]);
|
|
1265
|
-
const _as = (0,
|
|
1272
|
+
const _as = (0, import_react16.useMemo)(() => {
|
|
1266
1273
|
if (typeof as !== "string" || as.toLowerCase() !== "a") {
|
|
1267
1274
|
return as;
|
|
1268
1275
|
}
|
|
1269
1276
|
return _method !== "get" ? "button" : as.toLowerCase();
|
|
1270
1277
|
}, [as, _method]);
|
|
1271
|
-
const mergeDataArray = (0,
|
|
1278
|
+
const mergeDataArray = (0, import_react16.useMemo)(
|
|
1272
1279
|
() => (0, import_core7.mergeDataIntoQueryString)(_method, (0, import_core7.isUrlMethodPair)(href) ? href.url : href, data, queryStringArrayFormat),
|
|
1273
1280
|
[href, _method, data, queryStringArrayFormat]
|
|
1274
1281
|
);
|
|
1275
|
-
const url = (0,
|
|
1276
|
-
const _data = (0,
|
|
1277
|
-
const baseParams = (0,
|
|
1282
|
+
const url = (0, import_react16.useMemo)(() => mergeDataArray[0], [mergeDataArray]);
|
|
1283
|
+
const _data = (0, import_react16.useMemo)(() => mergeDataArray[1], [mergeDataArray]);
|
|
1284
|
+
const baseParams = (0, import_react16.useMemo)(
|
|
1278
1285
|
() => ({
|
|
1279
1286
|
data: _data,
|
|
1280
1287
|
method: _method,
|
|
@@ -1289,7 +1296,7 @@ var Link = (0, import_react14.forwardRef)(
|
|
|
1289
1296
|
}),
|
|
1290
1297
|
[_data, _method, preserveScroll, preserveState, preserveUrl, replace, only, except, headers, async]
|
|
1291
1298
|
);
|
|
1292
|
-
const visitParams = (0,
|
|
1299
|
+
const visitParams = (0, import_react16.useMemo)(
|
|
1293
1300
|
() => ({
|
|
1294
1301
|
...baseParams,
|
|
1295
1302
|
viewTransition,
|
|
@@ -1321,7 +1328,7 @@ var Link = (0, import_react14.forwardRef)(
|
|
|
1321
1328
|
onError
|
|
1322
1329
|
]
|
|
1323
1330
|
);
|
|
1324
|
-
const prefetchModes = (0,
|
|
1331
|
+
const prefetchModes = (0, import_react16.useMemo)(
|
|
1325
1332
|
() => {
|
|
1326
1333
|
if (prefetch === true) {
|
|
1327
1334
|
return ["hover"];
|
|
@@ -1336,7 +1343,7 @@ var Link = (0, import_react14.forwardRef)(
|
|
|
1336
1343
|
},
|
|
1337
1344
|
Array.isArray(prefetch) ? prefetch : [prefetch]
|
|
1338
1345
|
);
|
|
1339
|
-
const cacheForValue = (0,
|
|
1346
|
+
const cacheForValue = (0, import_react16.useMemo)(() => {
|
|
1340
1347
|
if (cacheFor !== 0) {
|
|
1341
1348
|
return cacheFor;
|
|
1342
1349
|
}
|
|
@@ -1345,7 +1352,7 @@ var Link = (0, import_react14.forwardRef)(
|
|
|
1345
1352
|
}
|
|
1346
1353
|
return config.get("prefetch.cacheFor");
|
|
1347
1354
|
}, [cacheFor, prefetchModes]);
|
|
1348
|
-
const doPrefetch = (0,
|
|
1355
|
+
const doPrefetch = (0, import_react16.useMemo)(() => {
|
|
1349
1356
|
return () => {
|
|
1350
1357
|
import_core7.router.prefetch(
|
|
1351
1358
|
url,
|
|
@@ -1358,12 +1365,12 @@ var Link = (0, import_react14.forwardRef)(
|
|
|
1358
1365
|
);
|
|
1359
1366
|
};
|
|
1360
1367
|
}, [url, baseParams, onPrefetching, onPrefetched, cacheForValue, cacheTags]);
|
|
1361
|
-
(0,
|
|
1368
|
+
(0, import_react16.useEffect)(() => {
|
|
1362
1369
|
return () => {
|
|
1363
1370
|
clearTimeout(hoverTimeout.current);
|
|
1364
1371
|
};
|
|
1365
1372
|
}, []);
|
|
1366
|
-
(0,
|
|
1373
|
+
(0, import_react16.useEffect)(() => {
|
|
1367
1374
|
if (prefetchModes.includes("mount")) {
|
|
1368
1375
|
setTimeout(() => doPrefetch());
|
|
1369
1376
|
}
|
|
@@ -1420,7 +1427,7 @@ var Link = (0, import_react14.forwardRef)(
|
|
|
1420
1427
|
}
|
|
1421
1428
|
}
|
|
1422
1429
|
};
|
|
1423
|
-
const elProps = (0,
|
|
1430
|
+
const elProps = (0, import_react16.useMemo)(() => {
|
|
1424
1431
|
if (_as === "button") {
|
|
1425
1432
|
return { type: "button" };
|
|
1426
1433
|
}
|
|
@@ -1429,7 +1436,7 @@ var Link = (0, import_react14.forwardRef)(
|
|
|
1429
1436
|
}
|
|
1430
1437
|
return {};
|
|
1431
1438
|
}, [_as, url]);
|
|
1432
|
-
return (0,
|
|
1439
|
+
return (0, import_react16.createElement)(
|
|
1433
1440
|
_as,
|
|
1434
1441
|
{
|
|
1435
1442
|
...props,
|
|
@@ -1455,18 +1462,18 @@ var Link_default = Link;
|
|
|
1455
1462
|
|
|
1456
1463
|
// src/usePoll.ts
|
|
1457
1464
|
var import_core8 = require("@inertiajs/core");
|
|
1458
|
-
var
|
|
1465
|
+
var import_react17 = require("react");
|
|
1459
1466
|
function usePoll(interval, requestOptions = {}, options = {
|
|
1460
1467
|
keepAlive: false,
|
|
1461
1468
|
autoStart: true
|
|
1462
1469
|
}) {
|
|
1463
|
-
const pollRef = (0,
|
|
1470
|
+
const pollRef = (0, import_react17.useRef)(
|
|
1464
1471
|
import_core8.router.poll(interval, requestOptions, {
|
|
1465
1472
|
...options,
|
|
1466
1473
|
autoStart: false
|
|
1467
1474
|
})
|
|
1468
1475
|
);
|
|
1469
|
-
(0,
|
|
1476
|
+
(0, import_react17.useEffect)(() => {
|
|
1470
1477
|
if (options.autoStart ?? true) {
|
|
1471
1478
|
pollRef.current.start();
|
|
1472
1479
|
}
|
|
@@ -1480,14 +1487,14 @@ function usePoll(interval, requestOptions = {}, options = {
|
|
|
1480
1487
|
|
|
1481
1488
|
// src/usePrefetch.ts
|
|
1482
1489
|
var import_core9 = require("@inertiajs/core");
|
|
1483
|
-
var
|
|
1490
|
+
var import_react18 = require("react");
|
|
1484
1491
|
function usePrefetch(options = {}) {
|
|
1485
1492
|
const cached = typeof window === "undefined" ? null : import_core9.router.getCached(window.location.pathname, options);
|
|
1486
1493
|
const inFlight = typeof window === "undefined" ? null : import_core9.router.getPrefetching(window.location.pathname, options);
|
|
1487
|
-
const [lastUpdatedAt, setLastUpdatedAt] = (0,
|
|
1488
|
-
const [isPrefetching, setIsPrefetching] = (0,
|
|
1489
|
-
const [isPrefetched, setIsPrefetched] = (0,
|
|
1490
|
-
(0,
|
|
1494
|
+
const [lastUpdatedAt, setLastUpdatedAt] = (0, import_react18.useState)(cached?.staleTimestamp || null);
|
|
1495
|
+
const [isPrefetching, setIsPrefetching] = (0, import_react18.useState)(inFlight !== null);
|
|
1496
|
+
const [isPrefetched, setIsPrefetched] = (0, import_react18.useState)(cached !== null);
|
|
1497
|
+
(0, import_react18.useEffect)(() => {
|
|
1491
1498
|
const onPrefetchingListener = import_core9.router.on("prefetching", (e) => {
|
|
1492
1499
|
if (e.detail.visit.url.pathname === window.location.pathname) {
|
|
1493
1500
|
setIsPrefetching(true);
|
|
@@ -1515,25 +1522,25 @@ function usePrefetch(options = {}) {
|
|
|
1515
1522
|
|
|
1516
1523
|
// src/WhenVisible.ts
|
|
1517
1524
|
var import_core10 = require("@inertiajs/core");
|
|
1518
|
-
var
|
|
1525
|
+
var import_react19 = require("react");
|
|
1519
1526
|
var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) => {
|
|
1520
1527
|
always = always ?? false;
|
|
1521
1528
|
as = as ?? "div";
|
|
1522
1529
|
fallback = fallback ?? null;
|
|
1523
1530
|
const pageProps = usePage().props;
|
|
1524
|
-
const keys = (0,
|
|
1525
|
-
const [loaded, setLoaded] = (0,
|
|
1526
|
-
const [isFetching, setIsFetching] = (0,
|
|
1527
|
-
const fetching = (0,
|
|
1528
|
-
const ref = (0,
|
|
1529
|
-
const observer = (0,
|
|
1530
|
-
const getReloadParamsRef = (0,
|
|
1531
|
-
(0,
|
|
1531
|
+
const keys = (0, import_react19.useMemo)(() => data ? Array.isArray(data) ? data : [data] : [], [data]);
|
|
1532
|
+
const [loaded, setLoaded] = (0, import_react19.useState)(() => keys.length > 0 && keys.every((key) => pageProps[key] !== void 0));
|
|
1533
|
+
const [isFetching, setIsFetching] = (0, import_react19.useState)(false);
|
|
1534
|
+
const fetching = (0, import_react19.useRef)(false);
|
|
1535
|
+
const ref = (0, import_react19.useRef)(null);
|
|
1536
|
+
const observer = (0, import_react19.useRef)(null);
|
|
1537
|
+
const getReloadParamsRef = (0, import_react19.useRef)(() => ({}));
|
|
1538
|
+
(0, import_react19.useEffect)(() => {
|
|
1532
1539
|
if (keys.length > 0) {
|
|
1533
1540
|
setLoaded(keys.every((key) => pageProps[key] !== void 0));
|
|
1534
1541
|
}
|
|
1535
1542
|
}, [pageProps, keys]);
|
|
1536
|
-
const getReloadParams = (0,
|
|
1543
|
+
const getReloadParams = (0, import_react19.useCallback)(() => {
|
|
1537
1544
|
const reloadParams = { ...params };
|
|
1538
1545
|
if (data) {
|
|
1539
1546
|
reloadParams.only = Array.isArray(data) ? data : [data];
|
|
@@ -1581,7 +1588,7 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
|
|
|
1581
1588
|
);
|
|
1582
1589
|
observer.current.observe(ref.current);
|
|
1583
1590
|
};
|
|
1584
|
-
(0,
|
|
1591
|
+
(0, import_react19.useEffect)(() => {
|
|
1585
1592
|
if (!ref.current) {
|
|
1586
1593
|
return;
|
|
1587
1594
|
}
|
|
@@ -1596,7 +1603,7 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
|
|
|
1596
1603
|
const resolveChildren = () => typeof children === "function" ? children({ fetching: isFetching }) : children;
|
|
1597
1604
|
const resolveFallback = () => typeof fallback === "function" ? fallback() : fallback;
|
|
1598
1605
|
if (always || !loaded) {
|
|
1599
|
-
return (0,
|
|
1606
|
+
return (0, import_react19.createElement)(
|
|
1600
1607
|
as,
|
|
1601
1608
|
{
|
|
1602
1609
|
props: null,
|