1 |
|
2 | import * as CSS from 'csstype';
|
3 | import { CSSProperties } from 'react';
|
4 | import { DetailedHTMLFactory } from 'react';
|
5 | import { Easing as Easing_2 } from '@popmotion/easing';
|
6 | import { ForwardRefExoticComponent } from 'react';
|
7 | import { HTMLAttributes } from 'react';
|
8 | import { PropsWithoutRef } from 'react';
|
9 | import * as PropTypes from 'prop-types';
|
10 | import * as React from 'react';
|
11 | import { ReactHTML } from 'react';
|
12 | import { Ref } from 'react';
|
13 | import { RefAttributes } from 'react';
|
14 | import { RefObject } from 'react';
|
15 | import { SpringProps } from 'popmotion';
|
16 | import { SVGAttributes } from 'react';
|
17 |
|
18 |
|
19 |
|
20 |
|
21 | export declare function addScaleCorrection(correctors: ScaleCorrectionDefinitionMap): void;
|
22 |
|
23 | declare type AlwaysPresent = [true, null];
|
24 |
|
25 |
|
26 |
|
27 |
|
28 | export declare const AnimateLayoutFeature: MotionFeature;
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 | export declare const AnimatePresence: React.FunctionComponent<AnimatePresenceProps>;
|
93 |
|
94 |
|
95 |
|
96 |
|
97 | export declare interface AnimatePresenceProps {
|
98 | |
99 |
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 | initial?: boolean;
|
135 | |
136 |
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 | custom?: any;
|
143 | |
144 |
|
145 |
|
146 |
|
147 |
|
148 | onExitComplete?: () => void;
|
149 | |
150 |
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 |
|
173 |
|
174 |
|
175 |
|
176 |
|
177 | exitBeforeEnter?: boolean;
|
178 | }
|
179 |
|
180 |
|
181 |
|
182 |
|
183 | export declare class AnimateSharedLayout extends React.Component<SharedLayoutProps> {
|
184 | |
185 |
|
186 |
|
187 | private children;
|
188 | |
189 |
|
190 |
|
191 |
|
192 |
|
193 | private stacks;
|
194 | |
195 |
|
196 |
|
197 |
|
198 | private hasMounted;
|
199 | |
200 |
|
201 |
|
202 |
|
203 | private updateScheduled;
|
204 | |
205 |
|
206 |
|
207 | private renderScheduled;
|
208 | |
209 |
|
210 |
|
211 | syncContext: SharedLayoutSyncMethods;
|
212 | componentDidMount(): void;
|
213 | componentDidUpdate(): void;
|
214 | shouldComponentUpdate(): boolean;
|
215 | startLayoutAnimation(): void;
|
216 | updateStacks(): void;
|
217 | scheduleUpdate(force?: boolean): void;
|
218 | addChild(child: HTMLVisualElement): void;
|
219 | removeChild(child: HTMLVisualElement): void;
|
220 | addToStack(child: HTMLVisualElement): void;
|
221 | removeFromStack(child: HTMLVisualElement): void;
|
222 | |
223 |
|
224 |
|
225 |
|
226 | getStack(id?: string): LayoutStack | undefined;
|
227 | render(): JSX.Element;
|
228 | }
|
229 |
|
230 |
|
231 |
|
232 |
|
233 |
|
234 |
|
235 | export declare class AnimationControls {
|
236 | |
237 |
|
238 |
|
239 |
|
240 |
|
241 | private hasMounted;
|
242 | |
243 |
|
244 |
|
245 |
|
246 |
|
247 | private defaultTransition;
|
248 | |
249 |
|
250 |
|
251 |
|
252 |
|
253 | private pendingAnimations;
|
254 | |
255 |
|
256 |
|
257 |
|
258 |
|
259 | private componentControls;
|
260 | |
261 |
|
262 |
|
263 |
|
264 |
|
265 | private variants;
|
266 | |
267 |
|
268 |
|
269 |
|
270 |
|
271 |
|
272 |
|
273 | setVariants(variants: Variants): void;
|
274 | |
275 |
|
276 |
|
277 |
|
278 |
|
279 |
|
280 |
|
281 | setDefaultTransition(transition: Transition): void;
|
282 | |
283 |
|
284 |
|
285 |
|
286 |
|
287 |
|
288 |
|
289 |
|
290 | subscribe(controls: VisualElementAnimationControls): () => boolean;
|
291 | |
292 |
|
293 |
|
294 |
|
295 |
|
296 |
|
297 |
|
298 |
|
299 |
|
300 |
|
301 |
|
302 |
|
303 |
|
304 |
|
305 |
|
306 |
|
307 |
|
308 |
|
309 |
|
310 | start(definition: AnimationDefinition, transitionOverride?: Transition): Promise<any>;
|
311 | |
312 |
|
313 |
|
314 |
|
315 |
|
316 |
|
317 |
|
318 |
|
319 |
|
320 |
|
321 |
|
322 |
|
323 |
|
324 |
|
325 |
|
326 |
|
327 |
|
328 |
|
329 |
|
330 |
|
331 | set(definition: AnimationDefinition): void;
|
332 | |
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 |
|
339 |
|
340 |
|
341 | stop(): void;
|
342 | |
343 |
|
344 |
|
345 |
|
346 |
|
347 | mount(): void;
|
348 | |
349 |
|
350 |
|
351 |
|
352 |
|
353 | unmount(): void;
|
354 | }
|
355 |
|
356 |
|
357 |
|
358 |
|
359 | export declare const animationControls: () => AnimationControls;
|
360 |
|
361 | declare interface AnimationControlsConfig {
|
362 | makeTargetAnimatable?: MakeTargetAnimatable;
|
363 | }
|
364 |
|
365 | declare type AnimationDefinition = VariantLabels | TargetAndTransition | TargetResolver;
|
366 |
|
367 |
|
368 |
|
369 |
|
370 | export declare const AnimationFeature: MotionFeature;
|
371 |
|
372 | declare type AnimationOptions = {
|
373 | delay?: number;
|
374 | priority?: number;
|
375 | transitionOverride?: Transition;
|
376 | };
|
377 |
|
378 |
|
379 |
|
380 |
|
381 | export declare interface AnimationProps {
|
382 | |
383 |
|
384 |
|
385 |
|
386 |
|
387 |
|
388 |
|
389 |
|
390 |
|
391 |
|
392 |
|
393 |
|
394 |
|
395 |
|
396 |
|
397 |
|
398 |
|
399 |
|
400 |
|
401 |
|
402 |
|
403 |
|
404 |
|
405 |
|
406 |
|
407 |
|
408 |
|
409 |
|
410 |
|
411 |
|
412 |
|
413 |
|
414 |
|
415 |
|
416 |
|
417 | animate?: AnimationControls | TargetAndTransition | VariantLabels | boolean;
|
418 | |
419 |
|
420 |
|
421 |
|
422 |
|
423 |
|
424 |
|
425 |
|
426 |
|
427 |
|
428 |
|
429 |
|
430 |
|
431 |
|
432 |
|
433 |
|
434 |
|
435 |
|
436 |
|
437 |
|
438 |
|
439 |
|
440 |
|
441 |
|
442 |
|
443 |
|
444 |
|
445 |
|
446 |
|
447 |
|
448 |
|
449 |
|
450 |
|
451 |
|
452 |
|
453 |
|
454 |
|
455 |
|
456 |
|
457 |
|
458 |
|
459 |
|
460 |
|
461 |
|
462 |
|
463 |
|
464 |
|
465 |
|
466 | exit?: TargetAndTransition | VariantLabels | TargetResolver;
|
467 | |
468 |
|
469 |
|
470 |
|
471 |
|
472 |
|
473 |
|
474 |
|
475 |
|
476 |
|
477 |
|
478 |
|
479 |
|
480 |
|
481 |
|
482 |
|
483 |
|
484 |
|
485 |
|
486 |
|
487 |
|
488 |
|
489 |
|
490 |
|
491 |
|
492 |
|
493 |
|
494 |
|
495 |
|
496 |
|
497 |
|
498 |
|
499 |
|
500 |
|
501 |
|
502 |
|
503 |
|
504 |
|
505 |
|
506 |
|
507 |
|
508 |
|
509 |
|
510 |
|
511 |
|
512 | variants?: Variants;
|
513 | |
514 |
|
515 |
|
516 |
|
517 |
|
518 |
|
519 |
|
520 |
|
521 |
|
522 |
|
523 |
|
524 |
|
525 |
|
526 |
|
527 |
|
528 |
|
529 |
|
530 |
|
531 |
|
532 |
|
533 |
|
534 |
|
535 |
|
536 |
|
537 |
|
538 |
|
539 |
|
540 | transition?: Transition;
|
541 | }
|
542 |
|
543 | declare type AnyPointerEvent = MouseEvent | TouchEvent | PointerEvent;
|
544 |
|
545 |
|
546 |
|
547 |
|
548 |
|
549 |
|
550 |
|
551 | export declare interface Axis {
|
552 | min: number;
|
553 | max: number;
|
554 | }
|
555 |
|
556 |
|
557 |
|
558 |
|
559 |
|
560 |
|
561 |
|
562 | export declare interface AxisBox2D {
|
563 | x: Axis;
|
564 | y: Axis;
|
565 | }
|
566 |
|
567 |
|
568 |
|
569 |
|
570 | export declare interface AxisBox3D extends AxisBox2D {
|
571 | z: Axis;
|
572 | }
|
573 |
|
574 |
|
575 |
|
576 |
|
577 |
|
578 | export declare interface AxisDelta {
|
579 | translate: number;
|
580 | scale: number;
|
581 | origin: number;
|
582 | originPoint: number;
|
583 | }
|
584 |
|
585 | declare type Booleanish = boolean | 'true' | 'false';
|
586 |
|
587 |
|
588 |
|
589 |
|
590 |
|
591 |
|
592 | export declare interface BoundingBox2D {
|
593 | top: number;
|
594 | left: number;
|
595 | bottom: number;
|
596 | right: number;
|
597 | }
|
598 |
|
599 |
|
600 |
|
601 |
|
602 |
|
603 |
|
604 | export declare interface BoundingBox3D extends BoundingBox2D {
|
605 | front: number;
|
606 | back: number;
|
607 | }
|
608 |
|
609 |
|
610 |
|
611 |
|
612 |
|
613 | export declare interface BoxDelta {
|
614 | x: AxisDelta;
|
615 | y: AxisDelta;
|
616 | }
|
617 |
|
618 | declare interface ControlsProp {
|
619 | controls?: VisualElementAnimationControls;
|
620 | }
|
621 |
|
622 |
|
623 |
|
624 |
|
625 |
|
626 |
|
627 |
|
628 |
|
629 |
|
630 |
|
631 |
|
632 |
|
633 | export declare function createMotionComponent<P extends {}, E>(Component: string | React.ComponentType<P>, { defaultFeatures, useVisualElement, render, animationControlsConfig, }: MotionComponentConfig<E>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & MotionProps> & React.RefAttributes<E>>;
|
634 |
|
635 | declare type CSSPropertiesWithoutTransitionOrSingleTransforms = Omit<CSSProperties, "transition" | "rotate" | "scale" | "perspective">;
|
636 |
|
637 |
|
638 |
|
639 |
|
640 |
|
641 |
|
642 | export declare type CustomDomComponent<Props> = React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & MotionProps> & React.RefAttributes<SVGElement | HTMLElement>>;
|
643 |
|
644 | declare interface CustomStyles {
|
645 | |
646 |
|
647 |
|
648 |
|
649 | size?: string | number;
|
650 | radius?: string | number;
|
651 | shadow?: string;
|
652 | image?: string;
|
653 | }
|
654 |
|
655 |
|
656 |
|
657 |
|
658 | export declare interface CustomValueType {
|
659 | mix: (from: any, to: any) => (p: number) => number | string;
|
660 | toValue: () => number | string;
|
661 | }
|
662 |
|
663 | declare type Cycle = (i?: number) => void;
|
664 |
|
665 | declare type CycleState<T> = [T, Cycle];
|
666 |
|
667 |
|
668 |
|
669 |
|
670 | declare interface DOMVisualElementConfig extends VisualElementConfig {
|
671 | |
672 |
|
673 |
|
674 | allowTransformNone?: boolean;
|
675 | |
676 |
|
677 |
|
678 |
|
679 | enableHardwareAcceleration?: boolean;
|
680 | |
681 |
|
682 |
|
683 |
|
684 | transformPagePoint?: TransformPoint2D;
|
685 | |
686 |
|
687 |
|
688 |
|
689 |
|
690 |
|
691 |
|
692 |
|
693 |
|
694 |
|
695 |
|
696 |
|
697 |
|
698 | transformTemplate?: MotionProps["transformTemplate"];
|
699 | onViewportBoxUpdate?: MotionProps["onViewportBoxUpdate"];
|
700 | transition?: MotionProps["transition"];
|
701 | layoutOrder?: number;
|
702 | }
|
703 |
|
704 | declare interface DragControlConfig {
|
705 | visualElement: HTMLVisualElement;
|
706 | }
|
707 |
|
708 | declare interface DragControlOptions {
|
709 | snapToCursor?: boolean;
|
710 | cursorProgress?: Point2D;
|
711 | }
|
712 |
|
713 |
|
714 |
|
715 |
|
716 |
|
717 |
|
718 |
|
719 |
|
720 |
|
721 |
|
722 |
|
723 |
|
724 |
|
725 |
|
726 |
|
727 |
|
728 |
|
729 |
|
730 |
|
731 |
|
732 |
|
733 |
|
734 |
|
735 |
|
736 |
|
737 |
|
738 |
|
739 |
|
740 |
|
741 |
|
742 |
|
743 |
|
744 |
|
745 |
|
746 |
|
747 |
|
748 |
|
749 |
|
750 |
|
751 |
|
752 | export declare class DragControls {
|
753 | private componentControls;
|
754 | |
755 |
|
756 |
|
757 |
|
758 |
|
759 | subscribe(controls: VisualElementDragControls): () => void;
|
760 | |
761 |
|
762 |
|
763 |
|
764 |
|
765 |
|
766 |
|
767 |
|
768 |
|
769 |
|
770 |
|
771 |
|
772 |
|
773 |
|
774 |
|
775 | start(event: React.MouseEvent | React.TouchEvent | React.PointerEvent | MouseEvent | TouchEvent | PointerEvent, options?: DragControlOptions): void;
|
776 | }
|
777 |
|
778 | declare interface DragControlsProps extends DraggableProps {
|
779 | transformPagePoint?: TransformPoint2D;
|
780 | }
|
781 |
|
782 | declare type DragDirection = "x" | "y";
|
783 |
|
784 |
|
785 |
|
786 |
|
787 | export declare const DragFeature: MotionFeature;
|
788 |
|
789 |
|
790 |
|
791 |
|
792 | export declare interface DraggableProps extends DragHandlers {
|
793 | |
794 |
|
795 |
|
796 |
|
797 |
|
798 |
|
799 |
|
800 |
|
801 |
|
802 |
|
803 |
|
804 |
|
805 |
|
806 |
|
807 |
|
808 |
|
809 |
|
810 | drag?: boolean | "x" | "y";
|
811 | |
812 |
|
813 |
|
814 |
|
815 |
|
816 |
|
817 |
|
818 |
|
819 |
|
820 |
|
821 |
|
822 |
|
823 |
|
824 |
|
825 |
|
826 | dragDirectionLock?: boolean;
|
827 | |
828 |
|
829 |
|
830 |
|
831 |
|
832 |
|
833 |
|
834 |
|
835 |
|
836 |
|
837 |
|
838 |
|
839 |
|
840 |
|
841 |
|
842 |
|
843 | dragPropagation?: boolean;
|
844 | |
845 |
|
846 |
|
847 |
|
848 |
|
849 |
|
850 |
|
851 |
|
852 |
|
853 |
|
854 |
|
855 |
|
856 |
|
857 |
|
858 |
|
859 |
|
860 |
|
861 |
|
862 |
|
863 |
|
864 |
|
865 |
|
866 |
|
867 |
|
868 |
|
869 |
|
870 |
|
871 |
|
872 |
|
873 |
|
874 |
|
875 |
|
876 |
|
877 |
|
878 |
|
879 |
|
880 |
|
881 |
|
882 |
|
883 |
|
884 |
|
885 |
|
886 |
|
887 |
|
888 |
|
889 |
|
890 |
|
891 |
|
892 |
|
893 | dragConstraints?: false | Partial<BoundingBox2D> | RefObject<Element>;
|
894 | |
895 |
|
896 |
|
897 |
|
898 |
|
899 |
|
900 |
|
901 |
|
902 |
|
903 |
|
904 |
|
905 |
|
906 |
|
907 |
|
908 |
|
909 |
|
910 |
|
911 |
|
912 |
|
913 |
|
914 |
|
915 |
|
916 |
|
917 |
|
918 | dragElastic?: boolean | number;
|
919 | |
920 |
|
921 |
|
922 |
|
923 |
|
924 |
|
925 |
|
926 |
|
927 |
|
928 |
|
929 |
|
930 |
|
931 |
|
932 |
|
933 |
|
934 |
|
935 |
|
936 |
|
937 |
|
938 |
|
939 |
|
940 |
|
941 |
|
942 |
|
943 | dragMomentum?: boolean;
|
944 | |
945 |
|
946 |
|
947 |
|
948 |
|
949 |
|
950 |
|
951 |
|
952 |
|
953 |
|
954 |
|
955 |
|
956 |
|
957 |
|
958 |
|
959 |
|
960 |
|
961 |
|
962 |
|
963 |
|
964 |
|
965 |
|
966 |
|
967 | dragTransition?: InertiaOptions;
|
968 | |
969 |
|
970 |
|
971 |
|
972 |
|
973 |
|
974 |
|
975 |
|
976 |
|
977 |
|
978 |
|
979 |
|
980 |
|
981 |
|
982 |
|
983 |
|
984 |
|
985 |
|
986 |
|
987 |
|
988 |
|
989 |
|
990 |
|
991 |
|
992 |
|
993 |
|
994 |
|
995 |
|
996 |
|
997 |
|
998 |
|
999 |
|
1000 |
|
1001 |
|
1002 |
|
1003 |
|
1004 |
|
1005 |
|
1006 |
|
1007 |
|
1008 |
|
1009 |
|
1010 |
|
1011 | dragControls?: DragControls;
|
1012 | |
1013 |
|
1014 |
|
1015 |
|
1016 |
|
1017 |
|
1018 |
|
1019 |
|
1020 |
|
1021 |
|
1022 |
|
1023 |
|
1024 |
|
1025 |
|
1026 |
|
1027 |
|
1028 |
|
1029 |
|
1030 |
|
1031 |
|
1032 |
|
1033 |
|
1034 |
|
1035 |
|
1036 |
|
1037 |
|
1038 |
|
1039 |
|
1040 |
|
1041 |
|
1042 |
|
1043 |
|
1044 |
|
1045 |
|
1046 |
|
1047 |
|
1048 |
|
1049 |
|
1050 |
|
1051 |
|
1052 |
|
1053 |
|
1054 |
|
1055 |
|
1056 |
|
1057 |
|
1058 |
|
1059 |
|
1060 | dragListener?: boolean;
|
1061 | |
1062 |
|
1063 |
|
1064 |
|
1065 |
|
1066 | onMeasureDragConstraints?: (constraints: BoundingBox2D) => BoundingBox2D | void;
|
1067 | }
|
1068 |
|
1069 |
|
1070 |
|
1071 |
|
1072 | export declare interface DragHandlers {
|
1073 | |
1074 |
|
1075 |
|
1076 |
|
1077 |
|
1078 |
|
1079 |
|
1080 |
|
1081 |
|
1082 |
|
1083 |
|
1084 |
|
1085 |
|
1086 |
|
1087 |
|
1088 |
|
1089 |
|
1090 |
|
1091 |
|
1092 |
|
1093 |
|
1094 |
|
1095 |
|
1096 |
|
1097 |
|
1098 |
|
1099 | onDragStart?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
|
1100 | |
1101 |
|
1102 |
|
1103 |
|
1104 |
|
1105 |
|
1106 |
|
1107 |
|
1108 |
|
1109 |
|
1110 |
|
1111 |
|
1112 |
|
1113 |
|
1114 |
|
1115 |
|
1116 |
|
1117 |
|
1118 |
|
1119 |
|
1120 |
|
1121 |
|
1122 |
|
1123 |
|
1124 |
|
1125 |
|
1126 | onDragEnd?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
|
1127 | |
1128 |
|
1129 |
|
1130 |
|
1131 |
|
1132 |
|
1133 |
|
1134 |
|
1135 |
|
1136 |
|
1137 |
|
1138 |
|
1139 |
|
1140 |
|
1141 |
|
1142 |
|
1143 |
|
1144 |
|
1145 |
|
1146 |
|
1147 |
|
1148 |
|
1149 |
|
1150 |
|
1151 |
|
1152 |
|
1153 | onDrag?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
|
1154 | |
1155 |
|
1156 |
|
1157 |
|
1158 |
|
1159 |
|
1160 |
|
1161 |
|
1162 |
|
1163 |
|
1164 |
|
1165 |
|
1166 |
|
1167 |
|
1168 |
|
1169 |
|
1170 |
|
1171 |
|
1172 |
|
1173 |
|
1174 |
|
1175 |
|
1176 |
|
1177 |
|
1178 |
|
1179 |
|
1180 |
|
1181 |
|
1182 |
|
1183 | onDirectionLock?(axis: "x" | "y"): void;
|
1184 | |
1185 |
|
1186 |
|
1187 |
|
1188 |
|
1189 |
|
1190 |
|
1191 |
|
1192 |
|
1193 |
|
1194 |
|
1195 |
|
1196 |
|
1197 |
|
1198 |
|
1199 |
|
1200 |
|
1201 |
|
1202 |
|
1203 |
|
1204 |
|
1205 |
|
1206 |
|
1207 |
|
1208 |
|
1209 |
|
1210 |
|
1211 | onDragTransitionEnd?(): void;
|
1212 | }
|
1213 |
|
1214 |
|
1215 |
|
1216 |
|
1217 |
|
1218 |
|
1219 |
|
1220 |
|
1221 |
|
1222 |
|
1223 | declare type Easing = [number, number, number, number] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | EasingFunction;
|
1224 |
|
1225 |
|
1226 |
|
1227 |
|
1228 |
|
1229 |
|
1230 |
|
1231 |
|
1232 |
|
1233 |
|
1234 |
|
1235 |
|
1236 |
|
1237 |
|
1238 |
|
1239 |
|
1240 |
|
1241 |
|
1242 |
|
1243 |
|
1244 |
|
1245 |
|
1246 |
|
1247 |
|
1248 |
|
1249 |
|
1250 |
|
1251 |
|
1252 |
|
1253 |
|
1254 |
|
1255 |
|
1256 | export declare type EasingFunction = (v: number) => number;
|
1257 |
|
1258 |
|
1259 | export declare interface EventInfo {
|
1260 | point: Point;
|
1261 | }
|
1262 |
|
1263 |
|
1264 |
|
1265 |
|
1266 | export declare const ExitFeature: MotionFeature;
|
1267 |
|
1268 |
|
1269 |
|
1270 |
|
1271 | export declare interface FeatureProps extends MotionProps {
|
1272 | visualElement: HTMLVisualElement;
|
1273 | controls: VisualElementAnimationControls;
|
1274 | localContext: MotionContextProps;
|
1275 | parentContext: MotionContextProps;
|
1276 | }
|
1277 |
|
1278 |
|
1279 |
|
1280 |
|
1281 | export declare type ForwardRefComponent<T, P> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
|
1282 |
|
1283 |
|
1284 |
|
1285 |
|
1286 | export declare type GestureHandlers = PanHandlers & TapHandlers & HoverHandlers;
|
1287 |
|
1288 |
|
1289 |
|
1290 |
|
1291 | export declare const GesturesFeature: MotionFeature;
|
1292 |
|
1293 |
|
1294 |
|
1295 |
|
1296 | export declare interface HoverHandlers {
|
1297 | |
1298 |
|
1299 |
|
1300 |
|
1301 |
|
1302 |
|
1303 |
|
1304 |
|
1305 |
|
1306 |
|
1307 |
|
1308 |
|
1309 |
|
1310 |
|
1311 |
|
1312 | whileHover?: string | TargetAndTransition;
|
1313 | |
1314 |
|
1315 |
|
1316 |
|
1317 |
|
1318 |
|
1319 |
|
1320 |
|
1321 |
|
1322 |
|
1323 |
|
1324 |
|
1325 |
|
1326 |
|
1327 |
|
1328 |
|
1329 |
|
1330 |
|
1331 |
|
1332 | onHoverStart?(event: MouseEvent, info: EventInfo): void;
|
1333 | |
1334 |
|
1335 |
|
1336 |
|
1337 |
|
1338 |
|
1339 |
|
1340 |
|
1341 |
|
1342 |
|
1343 |
|
1344 |
|
1345 |
|
1346 |
|
1347 |
|
1348 |
|
1349 |
|
1350 |
|
1351 |
|
1352 | onHoverEnd?(event: MouseEvent, info: EventInfo): void;
|
1353 | }
|
1354 |
|
1355 | declare type HTMLAttributesWithoutMotionProps<Attributes extends HTMLAttributes<Element>, Element extends HTMLElement> = {
|
1356 | [K in Exclude<keyof Attributes, keyof MotionProps>]?: Attributes[K];
|
1357 | };
|
1358 |
|
1359 | declare type HTMLElements = UnionStringArray<typeof htmlElements>;
|
1360 |
|
1361 |
|
1362 |
|
1363 |
|
1364 | declare const htmlElements: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr", "webview"];
|
1365 |
|
1366 |
|
1367 |
|
1368 |
|
1369 |
|
1370 |
|
1371 | declare type HTMLMotionComponents = {
|
1372 | [K in HTMLElements]: ForwardRefComponent<UnwrapFactoryElement<ReactHTML[K]>, HTMLMotionProps<K>>;
|
1373 | };
|
1374 |
|
1375 |
|
1376 |
|
1377 |
|
1378 | export declare type HTMLMotionProps<TagName extends keyof ReactHTML> = HTMLAttributesWithoutMotionProps<UnwrapFactoryAttributes<ReactHTML[TagName]>, UnwrapFactoryElement<ReactHTML[TagName]>> & MotionProps;
|
1379 |
|
1380 |
|
1381 |
|
1382 |
|
1383 | declare class HTMLVisualElement<E extends HTMLElement | SVGElement = HTMLElement> extends VisualElement<E> {
|
1384 | |
1385 |
|
1386 |
|
1387 | protected defaultConfig: DOMVisualElementConfig;
|
1388 | |
1389 |
|
1390 |
|
1391 |
|
1392 | style: ResolvedValues;
|
1393 | |
1394 |
|
1395 |
|
1396 |
|
1397 |
|
1398 | reactStyle: ResolvedValues;
|
1399 | |
1400 |
|
1401 |
|
1402 |
|
1403 | vars: ResolvedValues;
|
1404 | |
1405 |
|
1406 |
|
1407 |
|
1408 | presence?: Presence;
|
1409 | isPresent?: boolean;
|
1410 | |
1411 |
|
1412 |
|
1413 |
|
1414 | protected transform: ResolvedValues;
|
1415 | |
1416 |
|
1417 |
|
1418 |
|
1419 | protected transformOrigin: TransformOrigin;
|
1420 | |
1421 |
|
1422 |
|
1423 |
|
1424 | protected transformKeys: string[];
|
1425 | config: DOMVisualElementConfig;
|
1426 | |
1427 |
|
1428 |
|
1429 | removeValue(key: string): void;
|
1430 | |
1431 |
|
1432 |
|
1433 |
|
1434 |
|
1435 | clean(): void;
|
1436 | updateConfig(config?: DOMVisualElementConfig): void;
|
1437 | |
1438 |
|
1439 |
|
1440 | read(key: string): number | string | null;
|
1441 | |
1442 |
|
1443 |
|
1444 |
|
1445 |
|
1446 | readNativeValue(key: string): any;
|
1447 | |
1448 |
|
1449 |
|
1450 |
|
1451 |
|
1452 | isLayoutProjectionEnabled: boolean;
|
1453 | enableLayoutProjection(): void;
|
1454 | |
1455 |
|
1456 |
|
1457 |
|
1458 | private layoutUpdateListeners;
|
1459 | |
1460 |
|
1461 |
|
1462 |
|
1463 | private hasViewportBoxUpdated;
|
1464 | |
1465 |
|
1466 |
|
1467 |
|
1468 | layoutId?: string;
|
1469 | |
1470 |
|
1471 |
|
1472 |
|
1473 |
|
1474 |
|
1475 |
|
1476 |
|
1477 |
|
1478 |
|
1479 |
|
1480 |
|
1481 |
|
1482 | box: AxisBox2D;
|
1483 | |
1484 |
|
1485 |
|
1486 |
|
1487 |
|
1488 |
|
1489 |
|
1490 | private boxCorrected;
|
1491 | |
1492 |
|
1493 |
|
1494 |
|
1495 |
|
1496 |
|
1497 | targetBox: AxisBox2D;
|
1498 | |
1499 |
|
1500 |
|
1501 |
|
1502 |
|
1503 |
|
1504 | protected targetBoxFinal: AxisBox2D;
|
1505 | |
1506 |
|
1507 |
|
1508 |
|
1509 | prevViewportBox?: AxisBox2D;
|
1510 | |
1511 |
|
1512 |
|
1513 |
|
1514 |
|
1515 |
|
1516 |
|
1517 | treeScale: Point2D;
|
1518 | |
1519 |
|
1520 |
|
1521 |
|
1522 |
|
1523 |
|
1524 |
|
1525 |
|
1526 | delta: BoxDelta;
|
1527 | |
1528 |
|
1529 |
|
1530 |
|
1531 |
|
1532 |
|
1533 |
|
1534 | deltaFinal: BoxDelta;
|
1535 | |
1536 |
|
1537 |
|
1538 |
|
1539 |
|
1540 | deltaTransform: string;
|
1541 | |
1542 |
|
1543 |
|
1544 | stopLayoutAxisAnimation: {
|
1545 | x: () => void;
|
1546 | y: () => void;
|
1547 | };
|
1548 | isVisible?: boolean;
|
1549 | hide(): void;
|
1550 | show(): void;
|
1551 | |
1552 |
|
1553 |
|
1554 |
|
1555 | onLayoutUpdate(callback: LayoutUpdateHandler): () => boolean;
|
1556 | |
1557 |
|
1558 |
|
1559 |
|
1560 | layoutReady(config?: SharedLayoutAnimationConfig): void;
|
1561 | |
1562 |
|
1563 |
|
1564 |
|
1565 | getBoundingBox(): AxisBox2D;
|
1566 | getBoundingBoxWithoutTransforms(): AxisBox2D;
|
1567 | |
1568 |
|
1569 |
|
1570 | getComputedStyle(): CSSStyleDeclaration;
|
1571 | |
1572 |
|
1573 |
|
1574 | snapshotBoundingBox(): void;
|
1575 | |
1576 |
|
1577 |
|
1578 | viewportScroll: Point2D;
|
1579 | measureLayout(): void;
|
1580 | |
1581 |
|
1582 |
|
1583 | refreshTargetBox(): void;
|
1584 | isTargetBoxLocked: boolean;
|
1585 | lockTargetBox(): void;
|
1586 | unlockTargetBox(): void;
|
1587 | |
1588 |
|
1589 |
|
1590 |
|
1591 |
|
1592 |
|
1593 |
|
1594 | resetTransform(): void;
|
1595 | |
1596 |
|
1597 |
|
1598 | setAxisTarget(axis: "x" | "y", min: number, max: number): void;
|
1599 | |
1600 |
|
1601 |
|
1602 | axisProgress: MotionPoint;
|
1603 | |
1604 |
|
1605 |
|
1606 | startLayoutAxisAnimation(axis: "x" | "y", transition: Transition): Promise<void>;
|
1607 | stopLayoutAnimation(): void;
|
1608 | updateLayoutDelta: () => void;
|
1609 | |
1610 |
|
1611 |
|
1612 |
|
1613 | updateLayoutDeltas(): void;
|
1614 | updateTransformDeltas(): void;
|
1615 | |
1616 |
|
1617 |
|
1618 |
|
1619 |
|
1620 | |
1621 |
|
1622 |
|
1623 | build(): void;
|
1624 | |
1625 |
|
1626 |
|
1627 | render(): void;
|
1628 | }
|
1629 |
|
1630 |
|
1631 |
|
1632 |
|
1633 |
|
1634 |
|
1635 |
|
1636 |
|
1637 |
|
1638 |
|
1639 |
|
1640 |
|
1641 |
|
1642 |
|
1643 |
|
1644 |
|
1645 |
|
1646 | export declare interface Inertia {
|
1647 | |
1648 |
|
1649 |
|
1650 |
|
1651 |
|
1652 |
|
1653 |
|
1654 |
|
1655 |
|
1656 |
|
1657 |
|
1658 |
|
1659 |
|
1660 |
|
1661 |
|
1662 |
|
1663 |
|
1664 |
|
1665 |
|
1666 |
|
1667 |
|
1668 |
|
1669 |
|
1670 |
|
1671 |
|
1672 |
|
1673 |
|
1674 |
|
1675 |
|
1676 | type: "inertia";
|
1677 | |
1678 |
|
1679 |
|
1680 |
|
1681 |
|
1682 |
|
1683 |
|
1684 |
|
1685 |
|
1686 |
|
1687 |
|
1688 |
|
1689 |
|
1690 |
|
1691 |
|
1692 |
|
1693 |
|
1694 |
|
1695 |
|
1696 |
|
1697 |
|
1698 |
|
1699 |
|
1700 |
|
1701 |
|
1702 |
|
1703 |
|
1704 |
|
1705 |
|
1706 |
|
1707 |
|
1708 |
|
1709 |
|
1710 | modifyTarget?(v: number): number;
|
1711 | |
1712 |
|
1713 |
|
1714 |
|
1715 |
|
1716 |
|
1717 |
|
1718 |
|
1719 |
|
1720 |
|
1721 |
|
1722 |
|
1723 |
|
1724 |
|
1725 |
|
1726 |
|
1727 |
|
1728 |
|
1729 |
|
1730 |
|
1731 |
|
1732 |
|
1733 |
|
1734 |
|
1735 |
|
1736 |
|
1737 |
|
1738 |
|
1739 |
|
1740 |
|
1741 |
|
1742 |
|
1743 |
|
1744 |
|
1745 |
|
1746 | bounceStiffness?: number;
|
1747 | |
1748 |
|
1749 |
|
1750 |
|
1751 |
|
1752 |
|
1753 |
|
1754 |
|
1755 |
|
1756 |
|
1757 |
|
1758 |
|
1759 |
|
1760 |
|
1761 |
|
1762 |
|
1763 |
|
1764 |
|
1765 |
|
1766 |
|
1767 |
|
1768 |
|
1769 |
|
1770 |
|
1771 |
|
1772 |
|
1773 |
|
1774 |
|
1775 |
|
1776 |
|
1777 |
|
1778 |
|
1779 |
|
1780 |
|
1781 |
|
1782 | bounceDamping?: number;
|
1783 | |
1784 |
|
1785 |
|
1786 |
|
1787 |
|
1788 |
|
1789 |
|
1790 |
|
1791 |
|
1792 |
|
1793 |
|
1794 |
|
1795 |
|
1796 |
|
1797 |
|
1798 |
|
1799 |
|
1800 |
|
1801 |
|
1802 |
|
1803 |
|
1804 |
|
1805 |
|
1806 |
|
1807 |
|
1808 |
|
1809 |
|
1810 |
|
1811 |
|
1812 | power?: number;
|
1813 | |
1814 |
|
1815 |
|
1816 |
|
1817 |
|
1818 |
|
1819 |
|
1820 |
|
1821 |
|
1822 |
|
1823 |
|
1824 |
|
1825 |
|
1826 |
|
1827 |
|
1828 |
|
1829 |
|
1830 |
|
1831 |
|
1832 |
|
1833 |
|
1834 |
|
1835 |
|
1836 |
|
1837 |
|
1838 |
|
1839 |
|
1840 |
|
1841 |
|
1842 |
|
1843 | timeConstant?: number;
|
1844 | |
1845 |
|
1846 |
|
1847 |
|
1848 |
|
1849 |
|
1850 |
|
1851 |
|
1852 |
|
1853 |
|
1854 |
|
1855 |
|
1856 |
|
1857 |
|
1858 |
|
1859 |
|
1860 |
|
1861 |
|
1862 |
|
1863 |
|
1864 |
|
1865 |
|
1866 |
|
1867 |
|
1868 |
|
1869 |
|
1870 |
|
1871 |
|
1872 |
|
1873 |
|
1874 |
|
1875 | restDelta?: number;
|
1876 | |
1877 |
|
1878 |
|
1879 |
|
1880 |
|
1881 |
|
1882 |
|
1883 |
|
1884 |
|
1885 |
|
1886 |
|
1887 |
|
1888 |
|
1889 |
|
1890 |
|
1891 |
|
1892 |
|
1893 |
|
1894 |
|
1895 |
|
1896 |
|
1897 |
|
1898 |
|
1899 | min?: number;
|
1900 | |
1901 |
|
1902 |
|
1903 |
|
1904 |
|
1905 |
|
1906 |
|
1907 |
|
1908 |
|
1909 |
|
1910 |
|
1911 |
|
1912 |
|
1913 |
|
1914 |
|
1915 |
|
1916 |
|
1917 |
|
1918 |
|
1919 |
|
1920 |
|
1921 |
|
1922 |
|
1923 | max?: number;
|
1924 | |
1925 |
|
1926 |
|
1927 |
|
1928 |
|
1929 |
|
1930 |
|
1931 |
|
1932 |
|
1933 |
|
1934 |
|
1935 |
|
1936 |
|
1937 |
|
1938 |
|
1939 |
|
1940 |
|
1941 |
|
1942 |
|
1943 |
|
1944 |
|
1945 |
|
1946 |
|
1947 |
|
1948 |
|
1949 |
|
1950 |
|
1951 |
|
1952 |
|
1953 | from?: number | string;
|
1954 | |
1955 |
|
1956 |
|
1957 |
|
1958 |
|
1959 |
|
1960 |
|
1961 |
|
1962 |
|
1963 |
|
1964 |
|
1965 |
|
1966 |
|
1967 |
|
1968 |
|
1969 |
|
1970 |
|
1971 |
|
1972 |
|
1973 |
|
1974 |
|
1975 |
|
1976 |
|
1977 |
|
1978 |
|
1979 |
|
1980 |
|
1981 |
|
1982 |
|
1983 | velocity?: number;
|
1984 | |
1985 |
|
1986 |
|
1987 | delay?: number;
|
1988 | }
|
1989 |
|
1990 |
|
1991 |
|
1992 |
|
1993 | declare type InertiaOptions = Partial<Omit<Inertia, "velocity" | "type">>;
|
1994 |
|
1995 |
|
1996 |
|
1997 |
|
1998 |
|
1999 |
|
2000 |
|
2001 |
|
2002 |
|
2003 | export declare function isValidMotionProp(key: string): boolean;
|
2004 |
|
2005 |
|
2006 |
|
2007 |
|
2008 | declare interface Just {
|
2009 | type: "just";
|
2010 | to?: number | string | ValueTarget;
|
2011 | from?: number | string;
|
2012 | delay?: number;
|
2013 | velocity?: number;
|
2014 | }
|
2015 |
|
2016 |
|
2017 |
|
2018 |
|
2019 |
|
2020 |
|
2021 |
|
2022 |
|
2023 |
|
2024 |
|
2025 |
|
2026 |
|
2027 | export declare interface Keyframes {
|
2028 | |
2029 |
|
2030 |
|
2031 |
|
2032 |
|
2033 |
|
2034 | type: "keyframes";
|
2035 | |
2036 |
|
2037 |
|
2038 |
|
2039 |
|
2040 | values: KeyframesTarget;
|
2041 | |
2042 |
|
2043 |
|
2044 |
|
2045 |
|
2046 |
|
2047 |
|
2048 |
|
2049 |
|
2050 | times?: number[];
|
2051 | |
2052 |
|
2053 |
|
2054 |
|
2055 |
|
2056 |
|
2057 |
|
2058 |
|
2059 |
|
2060 |
|
2061 |
|
2062 |
|
2063 |
|
2064 |
|
2065 |
|
2066 |
|
2067 | ease?: Easing | Easing[];
|
2068 | |
2069 |
|
2070 |
|
2071 |
|
2072 |
|
2073 | easings?: Easing | Easing[];
|
2074 | |
2075 |
|
2076 |
|
2077 | elapsed?: number;
|
2078 | |
2079 |
|
2080 |
|
2081 |
|
2082 |
|
2083 |
|
2084 |
|
2085 |
|
2086 |
|
2087 |
|
2088 |
|
2089 |
|
2090 |
|
2091 |
|
2092 |
|
2093 |
|
2094 |
|
2095 | duration?: number;
|
2096 | |
2097 |
|
2098 |
|
2099 |
|
2100 |
|
2101 |
|
2102 |
|
2103 | loop?: number;
|
2104 | |
2105 |
|
2106 |
|
2107 |
|
2108 |
|
2109 |
|
2110 |
|
2111 |
|
2112 |
|
2113 |
|
2114 |
|
2115 |
|
2116 |
|
2117 |
|
2118 |
|
2119 |
|
2120 |
|
2121 |
|
2122 | flip?: number;
|
2123 | |
2124 |
|
2125 |
|
2126 |
|
2127 |
|
2128 |
|
2129 |
|
2130 |
|
2131 |
|
2132 |
|
2133 |
|
2134 |
|
2135 |
|
2136 |
|
2137 |
|
2138 |
|
2139 |
|
2140 |
|
2141 | yoyo?: number;
|
2142 | |
2143 |
|
2144 |
|
2145 | repeatDelay?: number;
|
2146 | |
2147 |
|
2148 |
|
2149 | from?: number | string;
|
2150 | |
2151 |
|
2152 |
|
2153 | to?: number | string | ValueTarget;
|
2154 | |
2155 |
|
2156 |
|
2157 | velocity?: number;
|
2158 | |
2159 |
|
2160 |
|
2161 | delay?: number;
|
2162 | }
|
2163 |
|
2164 |
|
2165 |
|
2166 |
|
2167 | export declare type KeyframesTarget = ResolvedKeyframesTarget | [null, ...CustomValueType[]] | CustomValueType[];
|
2168 |
|
2169 |
|
2170 |
|
2171 |
|
2172 | export declare interface LayoutProps {
|
2173 | |
2174 |
|
2175 |
|
2176 |
|
2177 |
|
2178 |
|
2179 |
|
2180 |
|
2181 |
|
2182 |
|
2183 |
|
2184 |
|
2185 |
|
2186 |
|
2187 |
|
2188 |
|
2189 |
|
2190 |
|
2191 |
|
2192 |
|
2193 |
|
2194 |
|
2195 | layout?: boolean | "position";
|
2196 | |
2197 |
|
2198 |
|
2199 |
|
2200 |
|
2201 |
|
2202 |
|
2203 |
|
2204 |
|
2205 |
|
2206 |
|
2207 |
|
2208 |
|
2209 |
|
2210 |
|
2211 |
|
2212 |
|
2213 |
|
2214 |
|
2215 |
|
2216 |
|
2217 |
|
2218 |
|
2219 | layoutId?: string;
|
2220 | |
2221 |
|
2222 |
|
2223 |
|
2224 |
|
2225 | onLayoutAnimationComplete?(): void;
|
2226 | |
2227 |
|
2228 |
|
2229 |
|
2230 |
|
2231 | onViewportBoxUpdate?(box: AxisBox2D, delta: BoxDelta): void;
|
2232 | }
|
2233 |
|
2234 | declare class LayoutStack {
|
2235 | order: HTMLVisualElement[];
|
2236 | lead?: HTMLVisualElement | undefined;
|
2237 | follow?: HTMLVisualElement | undefined;
|
2238 | prevLead?: HTMLVisualElement | undefined;
|
2239 | prevFollow?: HTMLVisualElement | undefined;
|
2240 | snapshot?: Snapshot;
|
2241 | hasChildren: boolean;
|
2242 | add(child: HTMLVisualElement): void;
|
2243 | remove(child: HTMLVisualElement): void;
|
2244 | updateLeadAndFollow(): void;
|
2245 | updateSnapshot(): void;
|
2246 | isLeadPresent(): boolean | undefined;
|
2247 | shouldStackAnimate(): boolean;
|
2248 | getFollowOrigin(): AxisBox2D | undefined;
|
2249 | getFollowTarget(): AxisBox2D | undefined;
|
2250 | getLeadOrigin(): AxisBox2D | undefined;
|
2251 | getLeadTarget(): AxisBox2D | undefined;
|
2252 | getLeadTransition(): Transition | undefined;
|
2253 | }
|
2254 |
|
2255 | declare type LayoutUpdateHandler = (layout: AxisBox2D, prev: AxisBox2D, config?: SharedLayoutAnimationConfig) => void;
|
2256 |
|
2257 |
|
2258 |
|
2259 |
|
2260 | export declare const m: HTMLMotionComponents & SVGMotionComponents & {
|
2261 | custom: <Props>(Component: string | React.ComponentClass<Props, any> | React.FunctionComponent<Props>) => CustomDomComponent<Props>;
|
2262 | };
|
2263 |
|
2264 | declare type MakeCustomValueType<T> = {
|
2265 | [K in keyof T]: T[K] | CustomValueType;
|
2266 | };
|
2267 |
|
2268 | declare type MakeKeyframes<T> = {
|
2269 | [K in keyof T]: T[K] | T[K][] | [null, ...T[K][]];
|
2270 | };
|
2271 |
|
2272 | declare type MakeMotion<T> = MakeCustomValueType<{
|
2273 | [K in keyof T]: T[K] | MotionValue<number> | MotionValue<string> | MotionValue<any>;
|
2274 | }>;
|
2275 |
|
2276 | declare type MakeTargetAnimatable = (visualElement: VisualElement, target: TargetWithKeyframes, origin?: Target, transitionEnd?: Target) => {
|
2277 | target: TargetWithKeyframes;
|
2278 | origin?: Target;
|
2279 | transitionEnd?: Target;
|
2280 | };
|
2281 |
|
2282 |
|
2283 |
|
2284 |
|
2285 |
|
2286 |
|
2287 |
|
2288 | export declare const motion: HTMLMotionComponents & SVGMotionComponents & {
|
2289 | custom: <Props>(Component: string | React.ComponentClass<Props, any> | React.FunctionComponent<Props>) => CustomDomComponent<Props>;
|
2290 | };
|
2291 |
|
2292 |
|
2293 |
|
2294 |
|
2295 | export declare interface MotionAdvancedProps {
|
2296 | |
2297 |
|
2298 |
|
2299 |
|
2300 |
|
2301 |
|
2302 |
|
2303 |
|
2304 |
|
2305 |
|
2306 |
|
2307 |
|
2308 |
|
2309 |
|
2310 |
|
2311 |
|
2312 |
|
2313 |
|
2314 |
|
2315 |
|
2316 |
|
2317 |
|
2318 |
|
2319 |
|
2320 |
|
2321 |
|
2322 |
|
2323 |
|
2324 |
|
2325 |
|
2326 |
|
2327 |
|
2328 |
|
2329 |
|
2330 |
|
2331 | custom?: any;
|
2332 | |
2333 |
|
2334 |
|
2335 |
|
2336 | inherit?: boolean;
|
2337 | |
2338 |
|
2339 |
|
2340 |
|
2341 |
|
2342 | static?: boolean;
|
2343 | }
|
2344 |
|
2345 |
|
2346 |
|
2347 |
|
2348 | export declare interface MotionCallbacks {
|
2349 | |
2350 |
|
2351 |
|
2352 |
|
2353 |
|
2354 |
|
2355 |
|
2356 |
|
2357 |
|
2358 |
|
2359 |
|
2360 |
|
2361 |
|
2362 |
|
2363 |
|
2364 |
|
2365 |
|
2366 |
|
2367 |
|
2368 |
|
2369 |
|
2370 |
|
2371 |
|
2372 | onUpdate?(latest: {
|
2373 | [key: string]: string | number;
|
2374 | }): void;
|
2375 | |
2376 |
|
2377 |
|
2378 |
|
2379 |
|
2380 |
|
2381 |
|
2382 |
|
2383 |
|
2384 |
|
2385 |
|
2386 |
|
2387 |
|
2388 |
|
2389 |
|
2390 |
|
2391 |
|
2392 |
|
2393 |
|
2394 |
|
2395 |
|
2396 |
|
2397 |
|
2398 | onAnimationStart?(): void;
|
2399 | |
2400 |
|
2401 |
|
2402 |
|
2403 |
|
2404 |
|
2405 |
|
2406 |
|
2407 |
|
2408 |
|
2409 |
|
2410 |
|
2411 |
|
2412 |
|
2413 |
|
2414 |
|
2415 |
|
2416 |
|
2417 |
|
2418 |
|
2419 |
|
2420 |
|
2421 |
|
2422 | onAnimationComplete?(): void;
|
2423 | }
|
2424 |
|
2425 | declare interface MotionComponentConfig<E> {
|
2426 | defaultFeatures: MotionFeature[];
|
2427 | useVisualElement: UseVisualElement<E>;
|
2428 | render: RenderComponent;
|
2429 | animationControlsConfig: AnimationControlsConfig;
|
2430 | }
|
2431 |
|
2432 |
|
2433 |
|
2434 |
|
2435 |
|
2436 |
|
2437 |
|
2438 |
|
2439 |
|
2440 |
|
2441 |
|
2442 |
|
2443 |
|
2444 |
|
2445 |
|
2446 |
|
2447 |
|
2448 |
|
2449 |
|
2450 |
|
2451 |
|
2452 |
|
2453 |
|
2454 | export declare function MotionConfig({ children, features, ...props }: MotionConfigProps): JSX.Element;
|
2455 |
|
2456 |
|
2457 |
|
2458 |
|
2459 | export declare interface MotionConfigContext {
|
2460 | |
2461 |
|
2462 |
|
2463 | transformPagePoint: TransformPoint2D;
|
2464 | |
2465 |
|
2466 |
|
2467 |
|
2468 |
|
2469 | features: MotionFeature[];
|
2470 | }
|
2471 |
|
2472 |
|
2473 |
|
2474 |
|
2475 | export declare const MotionConfigContext: React.Context<MotionConfigContext>;
|
2476 |
|
2477 | declare interface MotionConfigProps extends Partial<MotionConfigContext> {
|
2478 | children?: React.ReactNode;
|
2479 | }
|
2480 |
|
2481 |
|
2482 |
|
2483 |
|
2484 | export declare const MotionContext: React.Context<MotionContextProps>;
|
2485 |
|
2486 | declare interface MotionContextProps {
|
2487 | visualElement?: VisualElement<any>;
|
2488 | controls?: VisualElementAnimationControls;
|
2489 | initial?: false | VariantLabels;
|
2490 | animate?: VariantLabels;
|
2491 | static?: boolean;
|
2492 | hasMounted?: RefObject<boolean>;
|
2493 | presenceId?: number;
|
2494 | isReducedMotion?: boolean | undefined;
|
2495 | }
|
2496 |
|
2497 | declare type MotionCSS = MakeMotion<Omit<CSSProperties, "rotate" | "scale" | "perspective">>;
|
2498 |
|
2499 |
|
2500 |
|
2501 |
|
2502 | export declare interface MotionFeature {
|
2503 | key: string;
|
2504 | shouldRender: (props: MotionProps, parentContext: MotionContextProps) => boolean;
|
2505 | getComponent: (props: MotionProps) => React.ComponentType<FeatureProps> | undefined;
|
2506 | }
|
2507 |
|
2508 | declare interface MotionPoint {
|
2509 | x: MotionValue<number>;
|
2510 | y: MotionValue<number>;
|
2511 | }
|
2512 |
|
2513 |
|
2514 |
|
2515 |
|
2516 |
|
2517 |
|
2518 | export declare interface MotionProps extends AnimationProps, MotionCallbacks, GestureHandlers, DraggableProps, LayoutProps, MotionAdvancedProps {
|
2519 | |
2520 |
|
2521 |
|
2522 |
|
2523 |
|
2524 |
|
2525 |
|
2526 |
|
2527 |
|
2528 |
|
2529 |
|
2530 |
|
2531 |
|
2532 |
|
2533 |
|
2534 |
|
2535 |
|
2536 |
|
2537 |
|
2538 |
|
2539 |
|
2540 |
|
2541 |
|
2542 |
|
2543 |
|
2544 |
|
2545 |
|
2546 |
|
2547 |
|
2548 |
|
2549 |
|
2550 |
|
2551 |
|
2552 |
|
2553 |
|
2554 |
|
2555 |
|
2556 | initial?: boolean | Target | VariantLabels;
|
2557 | |
2558 |
|
2559 |
|
2560 |
|
2561 |
|
2562 |
|
2563 |
|
2564 |
|
2565 |
|
2566 |
|
2567 |
|
2568 |
|
2569 |
|
2570 |
|
2571 |
|
2572 |
|
2573 |
|
2574 |
|
2575 |
|
2576 |
|
2577 |
|
2578 | style?: MotionStyle;
|
2579 | |
2580 |
|
2581 |
|
2582 |
|
2583 |
|
2584 |
|
2585 |
|
2586 |
|
2587 |
|
2588 |
|
2589 |
|
2590 |
|
2591 |
|
2592 |
|
2593 |
|
2594 |
|
2595 |
|
2596 |
|
2597 |
|
2598 |
|
2599 |
|
2600 |
|
2601 |
|
2602 |
|
2603 |
|
2604 |
|
2605 |
|
2606 |
|
2607 |
|
2608 |
|
2609 | transformTemplate?(transform: TransformProperties, generatedTransform: string): string;
|
2610 | |
2611 |
|
2612 |
|
2613 |
|
2614 |
|
2615 |
|
2616 |
|
2617 |
|
2618 |
|
2619 |
|
2620 |
|
2621 |
|
2622 |
|
2623 |
|
2624 | transformValues?<V extends ResolvedValues>(values: V): V;
|
2625 | }
|
2626 |
|
2627 |
|
2628 |
|
2629 |
|
2630 | export declare type MotionStyle = MotionCSS & MotionTransform & MakeMotion<SVGPathProperties> & MakeCustomValueType<CustomStyles>;
|
2631 |
|
2632 |
|
2633 |
|
2634 |
|
2635 | export declare type MotionTransform = MakeMotion<TransformProperties>;
|
2636 |
|
2637 |
|
2638 |
|
2639 |
|
2640 |
|
2641 |
|
2642 | export declare class MotionValue<V = any> {
|
2643 | |
2644 |
|
2645 |
|
2646 |
|
2647 |
|
2648 | private current;
|
2649 | |
2650 |
|
2651 |
|
2652 |
|
2653 |
|
2654 | private prev;
|
2655 | |
2656 |
|
2657 |
|
2658 |
|
2659 |
|
2660 | private timeDelta;
|
2661 | |
2662 |
|
2663 |
|
2664 |
|
2665 |
|
2666 | private lastUpdated;
|
2667 | |
2668 |
|
2669 |
|
2670 |
|
2671 |
|
2672 | updateSubscribers?: Set<Subscriber<V>>;
|
2673 | |
2674 |
|
2675 |
|
2676 |
|
2677 |
|
2678 | private renderSubscribers?;
|
2679 | |
2680 |
|
2681 |
|
2682 |
|
2683 |
|
2684 |
|
2685 |
|
2686 |
|
2687 |
|
2688 | private passiveEffect?;
|
2689 | |
2690 |
|
2691 |
|
2692 |
|
2693 |
|
2694 | private stopAnimation?;
|
2695 | |
2696 |
|
2697 |
|
2698 |
|
2699 |
|
2700 |
|
2701 |
|
2702 | private canTrackVelocity;
|
2703 | |
2704 |
|
2705 |
|
2706 |
|
2707 |
|
2708 |
|
2709 |
|
2710 |
|
2711 | constructor(init: V);
|
2712 | /**
|
2713 | * Subscribes a subscriber function to a subscription list.
|
2714 | *
|
2715 | * @param subscriptions - A `Set` of subscribers.
|
2716 | * @param subscription - A subscriber function.
|
2717 | */
|
2718 | private subscribeTo;
|
2719 | /**
|
2720 | * Adds a function that will be notified when the `MotionValue` is updated.
|
2721 | *
|
2722 | * It returns a function that, when called, will cancel the subscription.
|
2723 | *
|
2724 | * When calling `onChange` inside a React component, it should be wrapped with the
|
2725 | * `useEffect` hook. As it returns an unsubscribe function, this should be returned
|
2726 | * from the `useEffect` function to ensure you don't add duplicate subscribers..
|
2727 | *
|
2728 | * @library
|
2729 | *
|
2730 | * ```jsx
|
2731 | * function MyComponent() {
|
2732 | * const x = useMotionValue(0)
|
2733 | * const y = useMotionValue(0)
|
2734 | * const opacity = useMotionValue(1)
|
2735 | *
|
2736 | * useEffect(() => {
|
2737 | * function updateOpacity() {
|
2738 | * const maxXY = Math.max(x.get(), y.get())
|
2739 | * const newOpacity = transform(maxXY, [0, 100], [1, 0])
|
2740 | * opacity.set(newOpacity)
|
2741 | * }
|
2742 | *
|
2743 | * const unsubscribeX = x.onChange(updateOpacity)
|
2744 | * const unsubscribeY = y.onChange(updateOpacity)
|
2745 | *
|
2746 | * return () => {
|
2747 | * unsubscribeX()
|
2748 | * unsubscribeY()
|
2749 | * }
|
2750 | * }, [])
|
2751 | *
|
2752 | * return <Frame x={x} />
|
2753 | * }
|
2754 | * ```
|
2755 | *
|
2756 | * @motion
|
2757 | *
|
2758 | * ```jsx
|
2759 | * export const MyComponent = () => {
|
2760 | * const x = useMotionValue(0)
|
2761 | * const y = useMotionValue(0)
|
2762 | * const opacity = useMotionValue(1)
|
2763 | *
|
2764 | * useEffect(() => {
|
2765 | * function updateOpacity() {
|
2766 | * const maxXY = Math.max(x.get(), y.get())
|
2767 | * const newOpacity = transform(maxXY, [0, 100], [1, 0])
|
2768 | * opacity.set(newOpacity)
|
2769 | * }
|
2770 | *
|
2771 | * const unsubscribeX = x.onChange(updateOpacity)
|
2772 | * const unsubscribeY = y.onChange(updateOpacity)
|
2773 | *
|
2774 | * return () => {
|
2775 | * unsubscribeX()
|
2776 | * unsubscribeY()
|
2777 | * }
|
2778 | * }, [])
|
2779 | *
|
2780 | * return <motion.div style={{ x }} />
|
2781 | * }
|
2782 | * ```
|
2783 | *
|
2784 | * @internalremarks
|
2785 | *
|
2786 | * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
|
2787 | *
|
2788 | * ```jsx
|
2789 | * useOnChange(x, () => {})
|
2790 | * ```
|
2791 | *
|
2792 | * @param subscriber - A function that receives the latest value.
|
2793 | * @returns A function that, when called, will cancel this subscription.
|
2794 | *
|
2795 | * @public
|
2796 | */
|
2797 | onChange(subscription: Subscriber<V>): () => void;
|
2798 | clearListeners(): void;
|
2799 | /**
|
2800 | * Adds a function that will be notified when the `MotionValue` requests a render.
|
2801 | *
|
2802 | * @param subscriber - A function that's provided the latest value.
|
2803 | * @returns A function that, when called, will cancel this subscription.
|
2804 | *
|
2805 | * @internal
|
2806 | */
|
2807 | onRenderRequest(subscription: Subscriber<V>): () => boolean;
|
2808 | /**
|
2809 | * Attaches a passive effect to the `MotionValue`.
|
2810 | *
|
2811 | * @internal
|
2812 | */
|
2813 | attach(passiveEffect: PassiveEffect<V>): void;
|
2814 | /**
|
2815 | * Sets the state of the `MotionValue`.
|
2816 | *
|
2817 | * @remarks
|
2818 | *
|
2819 | * ```jsx
|
2820 | * const x = useMotionValue(0)
|
2821 | * x.set(10)
|
2822 | * ```
|
2823 | *
|
2824 | * @param latest - Latest value to set.
|
2825 | * @param render - Whether to notify render subscribers. Defaults to `true`
|
2826 | *
|
2827 | * @public
|
2828 | */
|
2829 | set(v: V, render?: boolean): void;
|
2830 | updateAndNotify: (v: V, render?: boolean) => void;
|
2831 | /**
|
2832 | * Returns the latest state of `MotionValue`
|
2833 | *
|
2834 | * @returns - The latest state of `MotionValue`
|
2835 | *
|
2836 | * @public
|
2837 | */
|
2838 | get(): V;
|
2839 | /**
|
2840 | * @public
|
2841 | */
|
2842 | getPrevious(): V;
|
2843 | /**
|
2844 | * Returns the latest velocity of `MotionValue`
|
2845 | *
|
2846 | * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
|
2847 | *
|
2848 | * @public
|
2849 | */
|
2850 | getVelocity(): number;
|
2851 | /**
|
2852 | * Notify a subscriber with the latest value.
|
2853 | *
|
2854 | * This is an instanced and bound function to prevent generating a new
|
2855 | * function once per frame.
|
2856 | *
|
2857 | * @param subscriber - The subscriber to notify.
|
2858 | *
|
2859 | * @internal
|
2860 | */
|
2861 | private notifySubscriber;
|
2862 | /**
|
2863 | * Schedule a velocity check for the next frame.
|
2864 | *
|
2865 | * This is an instanced and bound function to prevent generating a new
|
2866 | * function once per frame.
|
2867 | *
|
2868 | * @internal
|
2869 | */
|
2870 | private scheduleVelocityCheck;
|
2871 | /**
|
2872 | * Updates `prev` with `current` if the value hasn't been updated this frame.
|
2873 | * This ensures velocity calculations return `0`.
|
2874 | *
|
2875 | * This is an instanced and bound function to prevent generating a new
|
2876 | * function once per frame.
|
2877 | *
|
2878 | * @internal
|
2879 | */
|
2880 | private velocityCheck;
|
2881 | /**
|
2882 | * Registers a new animation to control this `MotionValue`. Only one
|
2883 | * animation can drive a `MotionValue` at one time.
|
2884 | *
|
2885 | * ```jsx
|
2886 | * value.start()
|
2887 | * ```
|
2888 | *
|
2889 | * @param animation - A function that starts the provided animation
|
2890 | *
|
2891 | * @internal
|
2892 | */
|
2893 | start(animation: StartAnimation): Promise<void>;
|
2894 | /**
|
2895 | * Stop the currently active animation.
|
2896 | *
|
2897 | * @public
|
2898 | */
|
2899 | stop(): void;
|
2900 | /**
|
2901 | * Returns `true` if this value is currently animating.
|
2902 | *
|
2903 | * @public
|
2904 | */
|
2905 | isAnimating(): boolean;
|
2906 | private clearAnimation;
|
2907 | /**
|
2908 | * Destroy and clean up subscribers to this `MotionValue`.
|
2909 | *
|
2910 | * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
|
2911 | * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
|
2912 | * created a `MotionValue` via the `motionValue` function.
|
2913 | *
|
2914 | * @public
|
2915 | */
|
2916 | destroy(): void;
|
2917 | }
|
2918 |
|
2919 | /**
|
2920 | * @internal
|
2921 | */
|
2922 | export declare function motionValue<V>(init: V): MotionValue<V>;
|
2923 |
|
2924 | declare type NativeAnimationEvent = AnimationEvent;
|
2925 |
|
2926 | declare type NativeClipboardEvent = ClipboardEvent;
|
2927 |
|
2928 | declare type NativeCompositionEvent = CompositionEvent;
|
2929 |
|
2930 | declare type NativeDragEvent = DragEvent;
|
2931 |
|
2932 | declare type NativeFocusEvent = FocusEvent;
|
2933 |
|
2934 | declare type NativeKeyboardEvent = KeyboardEvent;
|
2935 |
|
2936 | declare type NativeMouseEvent = MouseEvent;
|
2937 |
|
2938 | declare type NativePointerEvent = PointerEvent;
|
2939 |
|
2940 | declare type NativeTouchEvent = TouchEvent;
|
2941 |
|
2942 | declare type NativeTransitionEvent = TransitionEvent;
|
2943 |
|
2944 | declare type NativeUIEvent = UIEvent;
|
2945 |
|
2946 | declare type NativeWheelEvent = WheelEvent;
|
2947 |
|
2948 | /**
|
2949 | * @public
|
2950 | */
|
2951 | export declare interface None {
|
2952 | /**
|
2953 | * Set `type` to `false` for an instant transition.
|
2954 | *
|
2955 | * @public
|
2956 | */
|
2957 | type: false;
|
2958 | /**
|
2959 | * @internal
|
2960 | */
|
2961 | from?: number | string;
|
2962 | /**
|
2963 | * @internal
|
2964 | */
|
2965 | delay?: number;
|
2966 | /**
|
2967 | * @internal
|
2968 | */
|
2969 | velocity?: number;
|
2970 | }
|
2971 |
|
2972 | declare type NotPresent = [false, SafeToRemove];
|
2973 |
|
2974 | declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
2975 |
|
2976 | /**
|
2977 | * Options for orchestrating the timing of animations.
|
2978 | *
|
2979 | * @public
|
2980 | */
|
2981 | export declare interface Orchestration {
|
2982 | /**
|
2983 | * Delay the animation by this duration (in seconds). Defaults to `0`.
|
2984 | *
|
2985 | * @remarks
|
2986 | * ```javascript
|
2987 | * const transition = {
|
2988 | * delay: 0.2
|
2989 | * }
|
2990 | * ```
|
2991 | *
|
2992 | * @public
|
2993 | */
|
2994 | delay?: number;
|
2995 | /**
|
2996 | * Describes the relationship between the transition and its children. Set
|
2997 | * to `false` by default.
|
2998 | *
|
2999 | * @remarks
|
3000 | * When using variants, the transition can be scheduled in relation to its
|
3001 | * children with either `"beforeChildren"` to finish this transition before
|
3002 | * starting children transitions, `"afterChildren"` to finish children
|
3003 | * transitions before starting this transition.
|
3004 | *
|
3005 | * @library
|
3006 | *
|
3007 | * ```jsx
|
3008 | * const container = {
|
3009 | * hidden: {
|
3010 | * opacity: 0,
|
3011 | * transition: { when: "afterChildren" }
|
3012 | * }
|
3013 | * }
|
3014 | *
|
3015 | * const item = {
|
3016 | * hidden: {
|
3017 | * opacity: 0,
|
3018 | * transition: { duration: 2 }
|
3019 | * }
|
3020 | * }
|
3021 | *
|
3022 | * return (
|
3023 | * <Frame variants={container} animate="hidden">
|
3024 | * <Frame variants={item} size={50} />
|
3025 | * <Frame variants={item} size={50} />
|
3026 | * </Frame>
|
3027 | * )
|
3028 | * ```
|
3029 | *
|
3030 | * @motion
|
3031 | *
|
3032 | * ```jsx
|
3033 | * const list = {
|
3034 | * hidden: {
|
3035 | * opacity: 0,
|
3036 | * transition: { when: "afterChildren" }
|
3037 | * }
|
3038 | * }
|
3039 | *
|
3040 | * const item = {
|
3041 | * hidden: {
|
3042 | * opacity: 0,
|
3043 | * transition: { duration: 2 }
|
3044 | * }
|
3045 | * }
|
3046 | *
|
3047 | * return (
|
3048 | * <motion.ul variants={list} animate="hidden">
|
3049 | * <motion.li variants={item} />
|
3050 | * <motion.li variants={item} />
|
3051 | * </motion.ul>
|
3052 | * )
|
3053 | * ```
|
3054 | *
|
3055 | * @public
|
3056 | */
|
3057 | when?: false | "beforeChildren" | "afterChildren" | string;
|
3058 | /**
|
3059 | * When using variants, children animations will start after this duration
|
3060 | * (in seconds). You can add the `transition` property to both the `Frame` and the `variant` directly. Adding it to the `variant` generally offers more flexibility, as it allows you to customize the delay per visual state.
|
3061 | *
|
3062 | * @library
|
3063 | *
|
3064 | * ```jsx
|
3065 | * const container = {
|
3066 | * hidden: { opacity: 0 },
|
3067 | * show: {
|
3068 | * opacity: 1,
|
3069 | * transition: {
|
3070 | * delayChildren: 0.5
|
3071 | * }
|
3072 | * }
|
3073 | * }
|
3074 | *
|
3075 | * const item = {
|
3076 | * hidden: { opacity: 0 },
|
3077 | * show: { opacity: 1 }
|
3078 | * }
|
3079 | *
|
3080 | * return (
|
3081 | * <Frame
|
3082 | * variants={container}
|
3083 | * initial="hidden"
|
3084 | * animate="show"
|
3085 | * >
|
3086 | * <Frame variants={item} size={50} />
|
3087 | * <Frame variants={item} size={50} />
|
3088 | * </Frame>
|
3089 | * )
|
3090 | * ```
|
3091 | *
|
3092 | * @motion
|
3093 | *
|
3094 | * ```jsx
|
3095 | * const container = {
|
3096 | * hidden: { opacity: 0 },
|
3097 | * show: {
|
3098 | * opacity: 1,
|
3099 | * transition: {
|
3100 | * delayChildren: 0.5
|
3101 | * }
|
3102 | * }
|
3103 | * }
|
3104 | *
|
3105 | * const item = {
|
3106 | * hidden: { opacity: 0 },
|
3107 | * show: { opacity: 1 }
|
3108 | * }
|
3109 | *
|
3110 | * return (
|
3111 | * <motion.ul
|
3112 | * variants={container}
|
3113 | * initial="hidden"
|
3114 | * animate="show"
|
3115 | * >
|
3116 | * <motion.li variants={item} />
|
3117 | * <motion.li variants={item} />
|
3118 | * </motion.ul>
|
3119 | * )
|
3120 | * ```
|
3121 | *
|
3122 | * @public
|
3123 | */
|
3124 | delayChildren?: number;
|
3125 | /**
|
3126 | * When using variants, animations of child components can be staggered by this
|
3127 | * duration (in seconds).
|
3128 | *
|
3129 | * For instance, if `staggerChildren` is `0.01`, the first child will be
|
3130 | * delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so
|
3131 | * on.
|
3132 | *
|
3133 | * The calculated stagger delay will be added to `delayChildren`.
|
3134 | *
|
3135 | * @library
|
3136 | *
|
3137 | * ```jsx
|
3138 | * const container = {
|
3139 | * hidden: { opacity: 0 },
|
3140 | * show: {
|
3141 | * opacity: 1,
|
3142 | * transition: {
|
3143 | * staggerChildren: 0.5
|
3144 | * }
|
3145 | * }
|
3146 | * }
|
3147 | *
|
3148 | * const item = {
|
3149 | * hidden: { opacity: 0 },
|
3150 | * show: { opacity: 1 }
|
3151 | * }
|
3152 | *
|
3153 | * return (
|
3154 | * <Frame
|
3155 | * variants={container}
|
3156 | * initial="hidden"
|
3157 | * animate="show"
|
3158 | * >
|
3159 | * <Frame variants={item} size={50} />
|
3160 | * <Frame variants={item} size={50} />
|
3161 | * </Frame>
|
3162 | * )
|
3163 | * ```
|
3164 | *
|
3165 | * @motion
|
3166 | *
|
3167 | * ```jsx
|
3168 | * const container = {
|
3169 | * hidden: { opacity: 0 },
|
3170 | * show: {
|
3171 | * opacity: 1,
|
3172 | * transition: {
|
3173 | * staggerChildren: 0.5
|
3174 | * }
|
3175 | * }
|
3176 | * }
|
3177 | *
|
3178 | * const item = {
|
3179 | * hidden: { opacity: 0 },
|
3180 | * show: { opacity: 1 }
|
3181 | * }
|
3182 | *
|
3183 | * return (
|
3184 | * <motion.ol
|
3185 | * variants={container}
|
3186 | * initial="hidden"
|
3187 | * animate="show"
|
3188 | * >
|
3189 | * <motion.li variants={item} />
|
3190 | * <motion.li variants={item} />
|
3191 | * </motion.ol>
|
3192 | * )
|
3193 | * ```
|
3194 | *
|
3195 | * @public
|
3196 | */
|
3197 | staggerChildren?: number;
|
3198 | /**
|
3199 | * The direction in which to stagger children.
|
3200 | *
|
3201 | * A value of `1` staggers from the first to the last while `-1`
|
3202 | * staggers from the last to the first.
|
3203 | *
|
3204 | * @library
|
3205 | *
|
3206 | * ```jsx
|
3207 | * const container = {
|
3208 | * hidden: { opacity: 0 },
|
3209 | * show: {
|
3210 | * opacity: 1,
|
3211 | * transition: {
|
3212 | * delayChildren: 0.5,
|
3213 | * staggerDirection: -1
|
3214 | * }
|
3215 | * }
|
3216 | * }
|
3217 | *
|
3218 | * const item = {
|
3219 | * hidden: { opacity: 0 },
|
3220 | * show: { opacity: 1 }
|
3221 | * }
|
3222 | *
|
3223 | * return (
|
3224 | * <Frame
|
3225 | * variants={container}
|
3226 | * initial="hidden"
|
3227 | * animate="show"
|
3228 | * >
|
3229 | * <Frame variants={item} size={50} />
|
3230 | * <Frame variants={item} size={50} />
|
3231 | * </Frame>
|
3232 | * )
|
3233 | * ```
|
3234 | *
|
3235 | * @motion
|
3236 | *
|
3237 | * ```jsx
|
3238 | * const container = {
|
3239 | * hidden: { opacity: 0 },
|
3240 | * show: {
|
3241 | * opacity: 1,
|
3242 | * transition: {
|
3243 | * delayChildren: 0.5,
|
3244 | * staggerDirection: -1
|
3245 | * }
|
3246 | * }
|
3247 | * }
|
3248 | *
|
3249 | * const item = {
|
3250 | * hidden: { opacity: 0 },
|
3251 | * show: { opacity: 1 }
|
3252 | * }
|
3253 | *
|
3254 | * return (
|
3255 | * <motion.ul
|
3256 | * variants={container}
|
3257 | * initial="hidden"
|
3258 | * animate="show"
|
3259 | * >
|
3260 | * <motion.li variants={item} size={50} />
|
3261 | * <motion.li variants={item} size={50} />
|
3262 | * </motion.ul>
|
3263 | * )
|
3264 | * ```
|
3265 | *
|
3266 | * @public
|
3267 | */
|
3268 | staggerDirection?: number;
|
3269 | }
|
3270 |
|
3271 | /**
|
3272 | * @public
|
3273 | */
|
3274 | export declare interface PanHandlers {
|
3275 | /**
|
3276 | * Callback function that fires when the pan gesture is recognised on this element.
|
3277 | *
|
3278 | * @library
|
3279 | *
|
3280 | * ```jsx
|
3281 | * function onPan(event, info) {
|
3282 | * console.log(info.point.x, info.point.y)
|
3283 | * }
|
3284 | *
|
3285 | * <Frame onPan={onPan} />
|
3286 | * ```
|
3287 | *
|
3288 | * @motion
|
3289 | *
|
3290 | * ```jsx
|
3291 | * function onPan(event, info) {
|
3292 | * console.log(info.point.x, info.point.y)
|
3293 | * }
|
3294 | *
|
3295 | * <motion.div onPan={onPan} />
|
3296 | * ```
|
3297 | *
|
3298 | * @param event - The originating pointer event.
|
3299 | * @param info - A {@link PanInfo} object containing `x` and `y` values for:
|
3300 | *
|
3301 | * - `point`: Relative to the device or page.
|
3302 | * - `delta`: Distance moved since the last event.
|
3303 | * - `offset`: Offset from the original pan event.
|
3304 | * - `velocity`: Current velocity of the pointer.
|
3305 | */
|
3306 | onPan?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
|
3307 | /**
|
3308 | * Callback function that fires when the pan gesture begins on this element.
|
3309 | *
|
3310 | * @library
|
3311 | *
|
3312 | * ```jsx
|
3313 | * function onPanStart(event, info) {
|
3314 | * console.log(info.point.x, info.point.y)
|
3315 | * }
|
3316 | *
|
3317 | * <Frame onPanStart={onPanStart} />
|
3318 | * ```
|
3319 | *
|
3320 | * @motion
|
3321 | *
|
3322 | * ```jsx
|
3323 | * function onPanStart(event, info) {
|
3324 | * console.log(info.point.x, info.point.y)
|
3325 | * }
|
3326 | *
|
3327 | * <motion.div onPanStart={onPanStart} />
|
3328 | * ```
|
3329 | *
|
3330 | * @param event - The originating pointer event.
|
3331 | * @param info - A {@link PanInfo} object containing `x`/`y` values for:
|
3332 | *
|
3333 | * - `point`: Relative to the device or page.
|
3334 | * - `delta`: Distance moved since the last event.
|
3335 | * - `offset`: Offset from the original pan event.
|
3336 | * - `velocity`: Current velocity of the pointer.
|
3337 | */
|
3338 | onPanStart?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
|
3339 | /**
|
3340 | * Callback function that fires when we begin detecting a pan gesture. This
|
3341 | * is analogous to `onMouseStart` or `onTouchStart`.
|
3342 | *
|
3343 | * @library
|
3344 | *
|
3345 | * ```jsx
|
3346 | * function onPanSessionStart(event, info) {
|
3347 | * console.log(info.point.x, info.point.y)
|
3348 | * }
|
3349 | *
|
3350 | * <Frame onPanSessionStart={onPanSessionStart} />
|
3351 | * ```
|
3352 | *
|
3353 | * @motion
|
3354 | *
|
3355 | * ```jsx
|
3356 | * function onPanSessionStart(event, info) {
|
3357 | * console.log(info.point.x, info.point.y)
|
3358 | * }
|
3359 | *
|
3360 | * <motion.div onPanSessionStart={onPanSessionStart} />
|
3361 | * ```
|
3362 | *
|
3363 | * @param event - The originating pointer event.
|
3364 | * @param info - An {@link EventInfo} object containing `x`/`y` values for:
|
3365 | *
|
3366 | * - `point`: Relative to the device or page.
|
3367 | */
|
3368 | onPanSessionStart?(event: MouseEvent | TouchEvent | PointerEvent, info: EventInfo): void;
|
3369 | /**
|
3370 | * Callback function that fires when the pan gesture ends on this element.
|
3371 | *
|
3372 | * @library
|
3373 | *
|
3374 | * ```jsx
|
3375 | * function onPanEnd(event, info) {
|
3376 | * console.log(info.point.x, info.point.y)
|
3377 | * }
|
3378 | *
|
3379 | * <Frame onPanEnd={onPanEnd} />
|
3380 | * ```
|
3381 | *
|
3382 | * @motion
|
3383 | *
|
3384 | * ```jsx
|
3385 | * function onPanEnd(event, info) {
|
3386 | * console.log(info.point.x, info.point.y)
|
3387 | * }
|
3388 | *
|
3389 | * <motion.div onPanEnd={onPanEnd} />
|
3390 | * ```
|
3391 | *
|
3392 | * @param event - The originating pointer event.
|
3393 | * @param info - A {@link PanInfo} object containing `x`/`y` values for:
|
3394 | *
|
3395 | * - `point`: Relative to the device or page.
|
3396 | * - `delta`: Distance moved since the last event.
|
3397 | * - `offset`: Offset from the original pan event.
|
3398 | * - `velocity`: Current velocity of the pointer.
|
3399 | */
|
3400 | onPanEnd?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
|
3401 | }
|
3402 |
|
3403 | /**
|
3404 | * Passed in to pan event handlers like `onPan` the `PanInfo` object contains
|
3405 | * information about the current state of the tap gesture such as its
|
3406 | * `point`, `delta`, `offset` and `velocity`.
|
3407 | *
|
3408 | * @library
|
3409 | *
|
3410 | * ```jsx
|
3411 | * function onPan(event, info) {
|
3412 | * console.log(info.point.x, info.point.y)
|
3413 | * }
|
3414 | *
|
3415 | * <Frame onPan={onPan} />
|
3416 | * ```
|
3417 | *
|
3418 | * @motion
|
3419 | *
|
3420 | * ```jsx
|
3421 | * <motion.div onPan={(event, info) => {
|
3422 | * console.log(info.point.x, info.point.y)
|
3423 | * }} />
|
3424 | * ```
|
3425 | *
|
3426 | * @public
|
3427 | */
|
3428 | export declare interface PanInfo {
|
3429 | /**
|
3430 | * Contains `x` and `y` values for the current pan position relative
|
3431 | * to the device or page.
|
3432 | *
|
3433 | * @library
|
3434 | *
|
3435 | * ```jsx
|
3436 | * function onPan(event, info) {
|
3437 | * console.log(info.point.x, info.point.y)
|
3438 | * }
|
3439 | *
|
3440 | * <Frame onPan={onPan} />
|
3441 | * ```
|
3442 | *
|
3443 | * @motion
|
3444 | *
|
3445 | * ```jsx
|
3446 | * function onPan(event, info) {
|
3447 | * console.log(info.point.x, info.point.y)
|
3448 | * }
|
3449 | *
|
3450 | * <motion.div onPan={onPan} />
|
3451 | * ```
|
3452 | *
|
3453 | * @public
|
3454 | */
|
3455 | point: Point;
|
3456 | /**
|
3457 | * Contains `x` and `y` values for the distance moved since
|
3458 | * the last event.
|
3459 | *
|
3460 | * @library
|
3461 | *
|
3462 | * ```jsx
|
3463 | * function onPan(event, info) {
|
3464 | * console.log(info.delta.x, info.delta.y)
|
3465 | * }
|
3466 | *
|
3467 | * <Frame onPan={onPan} />
|
3468 | * ```
|
3469 | *
|
3470 | * @motion
|
3471 | *
|
3472 | * ```jsx
|
3473 | * function onPan(event, info) {
|
3474 | * console.log(info.delta.x, info.delta.y)
|
3475 | * }
|
3476 | *
|
3477 | * <motion.div onPan={onPan} />
|
3478 | * ```
|
3479 | *
|
3480 | * @public
|
3481 | */
|
3482 | delta: Point;
|
3483 | /**
|
3484 | * Contains `x` and `y` values for the distance moved from
|
3485 | * the first pan event.
|
3486 | *
|
3487 | * @library
|
3488 | *
|
3489 | * ```jsx
|
3490 | * function onPan(event, info) {
|
3491 | * console.log(info.offset.x, info.offset.y)
|
3492 | * }
|
3493 | *
|
3494 | * <Frame onPan={onPan} />
|
3495 | * ```
|
3496 | *
|
3497 | * @motion
|
3498 | *
|
3499 | * ```jsx
|
3500 | * function onPan(event, info) {
|
3501 | * console.log(info.offset.x, info.offset.y)
|
3502 | * }
|
3503 | *
|
3504 | * <motion.div onPan={onPan} />
|
3505 | * ```
|
3506 | *
|
3507 | * @public
|
3508 | */
|
3509 | offset: Point;
|
3510 | /**
|
3511 | * Contains `x` and `y` values for the current velocity of the pointer.
|
3512 | *
|
3513 | * @library
|
3514 | *
|
3515 | * ```jsx
|
3516 | * function onPan(event, info) {
|
3517 | * console.log(info.velocity.x, info.velocity.y)
|
3518 | * }
|
3519 | *
|
3520 | * <Frame onPan={onPan} />
|
3521 | * ```
|
3522 | *
|
3523 | * @motion
|
3524 | *
|
3525 | * ```jsx
|
3526 | * function onPan(event, info) {
|
3527 | * console.log(info.velocity.x, info.velocity.y)
|
3528 | * }
|
3529 | *
|
3530 | * <motion.div onPan={onPan} />
|
3531 | * ```
|
3532 | *
|
3533 | * @public
|
3534 | */
|
3535 | velocity: Point;
|
3536 | }
|
3537 |
|
3538 | /**
|
3539 | * @public
|
3540 | */
|
3541 | export declare type PassiveEffect<T> = (v: T, safeSetter: (v: T) => void) => void;
|
3542 |
|
3543 | declare type PermissiveTransitionDefinition = {
|
3544 | [key: string]: any;
|
3545 | };
|
3546 |
|
3547 | /** @public */
|
3548 | declare interface Point {
|
3549 | x: number;
|
3550 | y: number;
|
3551 | }
|
3552 |
|
3553 | /** @public */
|
3554 | declare namespace Point {
|
3555 | /** @beta */
|
3556 | const subtract: (a: Point, b: Point) => Point;
|
3557 | /** @beta */
|
3558 | const relativeTo: (idOrElem: string | HTMLElement) => ({ x, y }: Point) => Point | undefined;
|
3559 | }
|
3560 |
|
3561 | /**
|
3562 | * A description of a two-dimensional point
|
3563 | *
|
3564 | * @public
|
3565 | */
|
3566 | export declare interface Point2D {
|
3567 | x: number;
|
3568 | y: number;
|
3569 | }
|
3570 |
|
3571 | /**
|
3572 | * A description of a three-dimensional point
|
3573 | *
|
3574 | * @public
|
3575 | */
|
3576 | export declare interface Point3D extends Point2D {
|
3577 | z: number;
|
3578 | }
|
3579 |
|
3580 | declare enum Presence {
|
3581 | Entering = 0,
|
3582 | Present = 1,
|
3583 | Exiting = 2
|
3584 | }
|
3585 |
|
3586 | /**
|
3587 | * @public
|
3588 | */
|
3589 | export declare const PresenceContext: import("react").Context<PresenceContextProps | null>;
|
3590 |
|
3591 | /**
|
3592 | * @public
|
3593 | */
|
3594 | declare interface PresenceContextProps {
|
3595 | id: number;
|
3596 | isPresent: boolean;
|
3597 | register: (id: number) => () => void;
|
3598 | onExitComplete?: (id: number) => void;
|
3599 | initial?: false | VariantLabels;
|
3600 | custom?: any;
|
3601 | }
|
3602 |
|
3603 | declare type Present = [true];
|
3604 |
|
3605 | declare interface Props {
|
3606 | children?: any;
|
3607 | /**
|
3608 | * Can be used to explicitly set whether we're in reduced motion mode. Set
|
3609 | * as undefined to resume device detection.
|
3610 | */
|
3611 | enabled?: boolean | undefined;
|
3612 | }
|
3613 |
|
3614 | declare namespace React_2 {
|
3615 | //
|
3616 | // React Elements
|
3617 | // ----------------------------------------------------------------------
|
3618 |
|
3619 | type ElementType<P = any> =
|
3620 | {
|
3621 | [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never
|
3622 | }[keyof JSX.IntrinsicElements] |
|
3623 | ComponentType<P>;
|
3624 | /**
|
3625 | * @deprecated Please use `ElementType`
|
3626 | */
|
3627 | type ReactType<P = any> = ElementType<P>;
|
3628 | type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
|
3629 |
|
3630 | type JSXElementConstructor<P> =
|
3631 | | ((props: P) => ReactElement | null)
|
3632 | | (new (props: P) => Component<P, any>);
|
3633 |
|
3634 | interface RefObject<T> {
|
3635 | readonly current: T | null;
|
3636 | }
|
3637 | type RefCallback<T> = { bivarianceHack(instance: T | null): void }["bivarianceHack"];
|
3638 | type Ref<T> = RefCallback<T> | RefObject<T> | null;
|
3639 | type LegacyRef<T> = string | Ref<T>;
|
3640 | /**
|
3641 | * Gets the instance type for a React element. The instance will be different for various component types:
|
3642 | *
|
3643 | * - React class components will be the class instance. So if you had `class Foo extends React.Component<{}> {}`
|
3644 | * and used `React.ElementRef<typeof Foo>` then the type would be the instance of `Foo`.
|
3645 | * - React stateless functional components do not have a backing instance and so `React.ElementRef<typeof Bar>`
|
3646 | * (when `Bar` is `function Bar() {}`) will give you the `undefined` type.
|
3647 | * - JSX intrinsics like `div` will give you their DOM instance. For `React.ElementRef<'div'>` that would be
|
3648 | * `HTMLDivElement`. For `React.ElementRef<'input'>` that would be `HTMLInputElement`.
|
3649 | * - React stateless functional components that forward a `ref` will give you the `ElementRef` of the forwarded
|
3650 | * to component.
|
3651 | *
|
3652 | * `C` must be the type _of_ a React component so you need to use typeof as in React.ElementRef<typeof MyComponent>.
|
3653 | *
|
3654 | * @todo In Flow, this works a little different with forwarded refs and the `AbstractComponent` that
|
3655 | * `React.forwardRef()` returns.
|
3656 | */
|
3657 | type ElementRef<
|
3658 | C extends
|
3659 | | ForwardRefExoticComponent<any>
|
3660 | | { new (props: any): Component<any> }
|
3661 | | ((props: any, context?: any) => ReactElement | null)
|
3662 | | keyof JSX.IntrinsicElements
|
3663 | > =
|
3664 | // need to check first if `ref` is a valid prop for ts@3.0
|
3665 | // otherwise it will infer `{}` instead of `never`
|
3666 | "ref" extends keyof ComponentPropsWithRef<C>
|
3667 | ? NonNullable<ComponentPropsWithRef<C>["ref"]> extends Ref<
|
3668 | infer Instance
|
3669 | >
|
3670 | ? Instance
|
3671 | : never
|
3672 | : never;
|
3673 |
|
3674 | type ComponentState = any;
|
3675 |
|
3676 | type Key = string | number;
|
3677 |
|
3678 | /**
|
3679 | * @internal You shouldn't need to use this type since you never see these attributes
|
3680 | * inside your component or have to validate them.
|
3681 | */
|
3682 | interface Attributes {
|
3683 | key?: Key;
|
3684 | }
|
3685 | interface RefAttributes<T> extends Attributes {
|
3686 | ref?: Ref<T>;
|
3687 | }
|
3688 | interface ClassAttributes<T> extends Attributes {
|
3689 | ref?: LegacyRef<T>;
|
3690 | }
|
3691 |
|
3692 | interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
|
3693 | type: T;
|
3694 | props: P;
|
3695 | key: Key | null;
|
3696 | }
|
3697 |
|
3698 | interface ReactComponentElement<
|
3699 | T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
|
3700 | P = Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, 'key' | 'ref'>>
|
3701 | > extends ReactElement<P, Exclude<T, number>> { }
|
3702 |
|
3703 | /**
|
3704 | * @deprecated Please use `FunctionComponentElement`
|
3705 | */
|
3706 | type SFCElement<P> = FunctionComponentElement<P>;
|
3707 |
|
3708 | interface FunctionComponentElement<P> extends ReactElement<P, FunctionComponent<P>> {
|
3709 | ref?: 'ref' extends keyof P ? P extends { ref?: infer R } ? R : never : never;
|
3710 | }
|
3711 |
|
3712 | type CElement<P, T extends Component<P, ComponentState>> = ComponentElement<P, T>;
|
3713 | interface ComponentElement<P, T extends Component<P, ComponentState>> extends ReactElement<P, ComponentClass<P>> {
|
3714 | ref?: LegacyRef<T>;
|
3715 | }
|
3716 |
|
3717 | type ClassicElement<P> = CElement<P, ClassicComponent<P, ComponentState>>;
|
3718 |
|
3719 | // string fallback for custom web-components
|
3720 | interface DOMElement<P extends HTMLAttributes<T> | SVGAttributes<T>, T extends Element> extends ReactElement<P, string> {
|
3721 | ref: LegacyRef<T>;
|
3722 | }
|
3723 |
|
3724 | // ReactHTML for ReactHTMLElement
|
3725 | // tslint:disable-next-line:no-empty-interface
|
3726 | interface ReactHTMLElement<T extends HTMLElement> extends DetailedReactHTMLElement<AllHTMLAttributes<T>, T> { }
|
3727 |
|
3728 | interface DetailedReactHTMLElement<P extends HTMLAttributes<T>, T extends HTMLElement> extends DOMElement<P, T> {
|
3729 | type: keyof ReactHTML;
|
3730 | }
|
3731 |
|
3732 | // ReactSVG for ReactSVGElement
|
3733 | interface ReactSVGElement extends DOMElement<SVGAttributes<SVGElement>, SVGElement> {
|
3734 | type: keyof ReactSVG;
|
3735 | }
|
3736 |
|
3737 | interface ReactPortal extends ReactElement {
|
3738 | key: Key | null;
|
3739 | children: ReactNode;
|
3740 | }
|
3741 |
|
3742 | //
|
3743 | // Factories
|
3744 | // ----------------------------------------------------------------------
|
3745 |
|
3746 | type Factory<P> = (props?: Attributes & P, ...children: ReactNode[]) => ReactElement<P>;
|
3747 |
|
3748 | /**
|
3749 | * @deprecated Please use `FunctionComponentFactory`
|
3750 | */
|
3751 | type SFCFactory<P> = FunctionComponentFactory<P>;
|
3752 |
|
3753 | type FunctionComponentFactory<P> = (props?: Attributes & P, ...children: ReactNode[]) => FunctionComponentElement<P>;
|
3754 |
|
3755 | type ComponentFactory<P, T extends Component<P, ComponentState>> =
|
3756 | (props?: ClassAttributes<T> & P, ...children: ReactNode[]) => CElement<P, T>;
|
3757 |
|
3758 | type CFactory<P, T extends Component<P, ComponentState>> = ComponentFactory<P, T>;
|
3759 | type ClassicFactory<P> = CFactory<P, ClassicComponent<P, ComponentState>>;
|
3760 |
|
3761 | type DOMFactory<P extends DOMAttributes<T>, T extends Element> =
|
3762 | (props?: ClassAttributes<T> & P | null, ...children: ReactNode[]) => DOMElement<P, T>;
|
3763 |
|
3764 | // tslint:disable-next-line:no-empty-interface
|
3765 | interface HTMLFactory<T extends HTMLElement> extends DetailedHTMLFactory<AllHTMLAttributes<T>, T> {}
|
3766 |
|
3767 | interface DetailedHTMLFactory<P extends HTMLAttributes<T>, T extends HTMLElement> extends DOMFactory<P, T> {
|
3768 | (props?: ClassAttributes<T> & P | null, ...children: ReactNode[]): DetailedReactHTMLElement<P, T>;
|
3769 | }
|
3770 |
|
3771 | interface SVGFactory extends DOMFactory<SVGAttributes<SVGElement>, SVGElement> {
|
3772 | (props?: ClassAttributes<SVGElement> & SVGAttributes<SVGElement> | null, ...children: ReactNode[]): ReactSVGElement;
|
3773 | }
|
3774 |
|
3775 | //
|
3776 | // React Nodes
|
3777 | // http://facebook.github.io/react/docs/glossary.html
|
3778 | // ----------------------------------------------------------------------
|
3779 |
|
3780 | type ReactText = string | number;
|
3781 | type ReactChild = ReactElement | ReactText;
|
3782 |
|
3783 | interface ReactNodeArray extends Array<ReactNode> {}
|
3784 | type ReactFragment = {} | ReactNodeArray;
|
3785 | type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
|
3786 |
|
3787 | //
|
3788 | // Top Level API
|
3789 | // ----------------------------------------------------------------------
|
3790 |
|
3791 | // DOM Elements
|
3792 | function createFactory<T extends HTMLElement>(
|
3793 | type: keyof ReactHTML): HTMLFactory<T>;
|
3794 | function createFactory(
|
3795 | type: keyof ReactSVG): SVGFactory;
|
3796 | function createFactory<P extends DOMAttributes<T>, T extends Element>(
|
3797 | type: string): DOMFactory<P, T>;
|
3798 |
|
3799 | // Custom components
|
3800 | function createFactory<P>(type: FunctionComponent<P>): FunctionComponentFactory<P>;
|
3801 | function createFactory<P>(
|
3802 | type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>): CFactory<P, ClassicComponent<P, ComponentState>>;
|
3803 | function createFactory<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(
|
3804 | type: ClassType<P, T, C>): CFactory<P, T>;
|
3805 | function createFactory<P>(type: ComponentClass<P>): Factory<P>;
|
3806 |
|
3807 | // DOM Elements
|
3808 | // TODO: generalize this to everything in `keyof ReactHTML`, not just "input"
|
3809 | function createElement(
|
3810 | type: "input",
|
3811 | props?: InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement> | null,
|
3812 | ...children: ReactNode[]): DetailedReactHTMLElement<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
3813 | function createElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
|
3814 | type: keyof ReactHTML,
|
3815 | props?: ClassAttributes<T> & P | null,
|
3816 | ...children: ReactNode[]): DetailedReactHTMLElement<P, T>;
|
3817 | function createElement<P extends SVGAttributes<T>, T extends SVGElement>(
|
3818 | type: keyof ReactSVG,
|
3819 | props?: ClassAttributes<T> & P | null,
|
3820 | ...children: ReactNode[]): ReactSVGElement;
|
3821 | function createElement<P extends DOMAttributes<T>, T extends Element>(
|
3822 | type: string,
|
3823 | props?: ClassAttributes<T> & P | null,
|
3824 | ...children: ReactNode[]): DOMElement<P, T>;
|
3825 |
|
3826 | // Custom components
|
3827 |
|
3828 | function createElement<P extends {}>(
|
3829 | type: FunctionComponent<P>,
|
3830 | props?: Attributes & P | null,
|
3831 | ...children: ReactNode[]): FunctionComponentElement<P>;
|
3832 | function createElement<P extends {}>(
|
3833 | type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>,
|
3834 | props?: ClassAttributes<ClassicComponent<P, ComponentState>> & P | null,
|
3835 | ...children: ReactNode[]): CElement<P, ClassicComponent<P, ComponentState>>;
|
3836 | function createElement<P extends {}, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(
|
3837 | type: ClassType<P, T, C>,
|
3838 | props?: ClassAttributes<T> & P | null,
|
3839 | ...children: ReactNode[]): CElement<P, T>;
|
3840 | function createElement<P extends {}>(
|
3841 | type: FunctionComponent<P> | ComponentClass<P> | string,
|
3842 | props?: Attributes & P | null,
|
3843 | ...children: ReactNode[]): ReactElement<P>;
|
3844 |
|
3845 | // DOM Elements
|
3846 | // ReactHTMLElement
|
3847 | function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
|
3848 | element: DetailedReactHTMLElement<P, T>,
|
3849 | props?: P,
|
3850 | ...children: ReactNode[]): DetailedReactHTMLElement<P, T>;
|
3851 | // ReactHTMLElement, less specific
|
3852 | function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
|
3853 | element: ReactHTMLElement<T>,
|
3854 | props?: P,
|
3855 | ...children: ReactNode[]): ReactHTMLElement<T>;
|
3856 | // SVGElement
|
3857 | function cloneElement<P extends SVGAttributes<T>, T extends SVGElement>(
|
3858 | element: ReactSVGElement,
|
3859 | props?: P,
|
3860 | ...children: ReactNode[]): ReactSVGElement;
|
3861 | // DOM Element (has to be the last, because type checking stops at first overload that fits)
|
3862 | function cloneElement<P extends DOMAttributes<T>, T extends Element>(
|
3863 | element: DOMElement<P, T>,
|
3864 | props?: DOMAttributes<T> & P,
|
3865 | ...children: ReactNode[]): DOMElement<P, T>;
|
3866 |
|
3867 | // Custom components
|
3868 | function cloneElement<P>(
|
3869 | element: FunctionComponentElement<P>,
|
3870 | props?: Partial<P> & Attributes,
|
3871 | ...children: ReactNode[]): FunctionComponentElement<P>;
|
3872 | function cloneElement<P, T extends Component<P, ComponentState>>(
|
3873 | element: CElement<P, T>,
|
3874 | props?: Partial<P> & ClassAttributes<T>,
|
3875 | ...children: ReactNode[]): CElement<P, T>;
|
3876 | function cloneElement<P>(
|
3877 | element: ReactElement<P>,
|
3878 | props?: Partial<P> & Attributes,
|
3879 | ...children: ReactNode[]): ReactElement<P>;
|
3880 |
|
3881 | // Context via RenderProps
|
3882 | interface ProviderProps<T> {
|
3883 | value: T;
|
3884 | children?: ReactNode;
|
3885 | }
|
3886 |
|
3887 | interface ConsumerProps<T> {
|
3888 | children: (value: T) => ReactNode;
|
3889 | }
|
3890 |
|
3891 | // TODO: similar to how Fragment is actually a symbol, the values returned from createContext,
|
3892 | // forwardRef and memo are actually objects that are treated specially by the renderer; see:
|
3893 | // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/ReactContext.js#L35-L48
|
3894 | // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/forwardRef.js#L42-L45
|
3895 | // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/memo.js#L27-L31
|
3896 | // However, we have no way of telling the JSX parser that it's a JSX element type or its props other than
|
3897 | // by pretending to be a normal component.
|
3898 | //
|
3899 | // We don't just use ComponentType or SFC types because you are not supposed to attach statics to this
|
3900 | // object, but rather to the original function.
|
3901 | interface ExoticComponent<P = {}> {
|
3902 | /**
|
3903 | * **NOTE**: Exotic components are not callable.
|
3904 | */
|
3905 | (props: P): (ReactElement|null);
|
3906 | readonly $$typeof: symbol;
|
3907 | }
|
3908 |
|
3909 | interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
|
3910 | displayName?: string;
|
3911 | }
|
3912 |
|
3913 | interface ProviderExoticComponent<P> extends ExoticComponent<P> {
|
3914 | propTypes?: WeakValidationMap<P>;
|
3915 | }
|
3916 |
|
3917 | type ContextType<C extends Context<any>> = C extends Context<infer T> ? T : never;
|
3918 |
|
3919 | // NOTE: only the Context object itself can get a displayName
|
3920 | // https://github.com/facebook/react-devtools/blob/e0b854e4c/backend/attachRendererFiber.js#L310-L325
|
3921 | type Provider<T> = ProviderExoticComponent<ProviderProps<T>>;
|
3922 | type Consumer<T> = ExoticComponent<ConsumerProps<T>>;
|
3923 | interface Context<T> {
|
3924 | Provider: Provider<T>;
|
3925 | Consumer: Consumer<T>;
|
3926 | displayName?: string;
|
3927 | }
|
3928 | function createContext<T>(
|
3929 | // If you thought this should be optional, see
|
3930 | // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106
|
3931 | defaultValue: T,
|
3932 | ): Context<T>;
|
3933 |
|
3934 | function isValidElement<P>(object: {} | null | undefined): object is ReactElement<P>;
|
3935 |
|
3936 | const Children: ReactChildren;
|
3937 | const Fragment: ExoticComponent<{ children?: ReactNode }>;
|
3938 | const StrictMode: ExoticComponent<{ children?: ReactNode }>;
|
3939 |
|
3940 | interface SuspenseProps {
|
3941 | children?: ReactNode;
|
3942 |
|
3943 | /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */
|
3944 | fallback: NonNullable<ReactNode>|null;
|
3945 | }
|
3946 | /**
|
3947 | * This feature is not yet available for server-side rendering.
|
3948 | * Suspense support will be added in a later release.
|
3949 | */
|
3950 | const Suspense: ExoticComponent<SuspenseProps>;
|
3951 | const version: string;
|
3952 |
|
3953 | /**
|
3954 | * {@link https://github.com/bvaughn/rfcs/blob/profiler/text/0000-profiler.md#detailed-design | API}
|
3955 | */
|
3956 | type ProfilerOnRenderCallback = (
|
3957 | id: string,
|
3958 | phase: "mount" | "update",
|
3959 | actualDuration: number,
|
3960 | baseDuration: number,
|
3961 | startTime: number,
|
3962 | commitTime: number,
|
3963 | interactions: Set<SchedulerInteraction>,
|
3964 | ) => void;
|
3965 | interface ProfilerProps {
|
3966 | children?: ReactNode;
|
3967 | id: string;
|
3968 | onRender: ProfilerOnRenderCallback;
|
3969 | }
|
3970 |
|
3971 | const Profiler: ExoticComponent<ProfilerProps>;
|
3972 |
|
3973 | //
|
3974 | // Component API
|
3975 | // ----------------------------------------------------------------------
|
3976 |
|
3977 | type ReactInstance = Component<any> | Element;
|
3978 |
|
3979 | // Base component for plain JS classes
|
3980 | // tslint:disable-next-line:no-empty-interface
|
3981 | interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> { }
|
3982 | class Component<P, S> {
|
3983 | // tslint won't let me format the sample code in a way that vscode likes it :(
|
3984 | /**
|
3985 | * If set, `this.context` will be set at runtime to the current value of the given Context.
|
3986 | *
|
3987 | * Usage:
|
3988 | *
|
3989 | * ```ts
|
3990 | * type MyContext = number
|
3991 | * const Ctx = React.createContext<MyContext>(0)
|
3992 | *
|
3993 | * class Foo extends React.Component {
|
3994 | * static contextType = Ctx
|
3995 | * context!: React.ContextType<typeof Ctx>
|
3996 | * render () {
|
3997 | * return <>My context's value: {this.context}</>;
|
3998 | * }
|
3999 | * }
|
4000 | * ```
|
4001 | *
|
4002 | * @see https://reactjs.org/docs/context.html#classcontexttype
|
4003 | */
|
4004 | static contextType?: Context<any>;
|
4005 |
|
4006 | /**
|
4007 | * If using the new style context, re-declare this in your class to be the
|
4008 | * `React.ContextType` of your `static contextType`.
|
4009 | * Should be used with type annotation or static contextType.
|
4010 | *
|
4011 | * ```ts
|
4012 | * static contextType = MyContext
|
4013 | *
|
4014 | * context!: React.ContextType<typeof MyContext>
|
4015 | *
|
4016 | * declare context: React.ContextType<typeof MyContext>
|
4017 | * ```
|
4018 | *
|
4019 | * @see https://reactjs.org/docs/context.html
|
4020 | */
|
4021 | // TODO (TypeScript 3.0): unknown
|
4022 | context: any;
|
4023 |
|
4024 | constructor(props: Readonly<P>);
|
4025 | /**
|
4026 | * @deprecated
|
4027 | * @see https://reactjs.org/docs/legacy-context.html
|
4028 | */
|
4029 | constructor(props: P, context?: any);
|
4030 |
|
4031 | // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
|
4032 | // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
|
4033 | // Also, the ` | S` allows intellisense to not be dumbisense
|
4034 | setState<K extends keyof S>(
|
4035 | state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
|
4036 | callback?: () => void
|
4037 | ): void;
|
4038 |
|
4039 | forceUpdate(callback?: () => void): void;
|
4040 | render(): ReactNode;
|
4041 |
|
4042 | // React.Props<T> is now deprecated, which means that the `children`
|
4043 | // property is not available on `P` by default, even though you can
|
4044 | // always pass children as variadic arguments to `createElement`.
|
4045 | // In the future, if we can define its call signature conditionally
|
4046 | // on the existence of `children` in `P`, then we should remove this.
|
4047 | readonly props: Readonly<P> & Readonly<{ children?: ReactNode }>;
|
4048 | state: Readonly<S>;
|
4049 | /**
|
4050 | * @deprecated
|
4051 | * https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
|
4052 | */
|
4053 | refs: {
|
4054 | [key: string]: ReactInstance
|
4055 | };
|
4056 | }
|
4057 |
|
4058 | class PureComponent<P = {}, S = {}, SS = any> extends Component<P, S, SS> { }
|
4059 |
|
4060 | interface ClassicComponent<P = {}, S = {}> extends Component<P, S> {
|
4061 | replaceState(nextState: S, callback?: () => void): void;
|
4062 | isMounted(): boolean;
|
4063 | getInitialState?(): S;
|
4064 | }
|
4065 |
|
4066 | interface ChildContextProvider<CC> {
|
4067 | getChildContext(): CC;
|
4068 | }
|
4069 |
|
4070 | //
|
4071 | // Class Interfaces
|
4072 | // ----------------------------------------------------------------------
|
4073 |
|
4074 | /**
|
4075 | * @deprecated as of recent React versions, function components can no
|
4076 | * longer be considered 'stateless'. Please use `FunctionComponent` instead.
|
4077 | *
|
4078 | * @see [React Hooks](https://reactjs.org/docs/hooks-intro.html)
|
4079 | */
|
4080 | type SFC<P = {}> = FunctionComponent<P>;
|
4081 |
|
4082 | /**
|
4083 | * @deprecated as of recent React versions, function components can no
|
4084 | * longer be considered 'stateless'. Please use `FunctionComponent` instead.
|
4085 | *
|
4086 | * @see [React Hooks](https://reactjs.org/docs/hooks-intro.html)
|
4087 | */
|
4088 | type StatelessComponent<P = {}> = FunctionComponent<P>;
|
4089 |
|
4090 | type FC<P = {}> = FunctionComponent<P>;
|
4091 |
|
4092 | interface FunctionComponent<P = {}> {
|
4093 | (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
|
4094 | propTypes?: WeakValidationMap<P>;
|
4095 | contextTypes?: ValidationMap<any>;
|
4096 | defaultProps?: Partial<P>;
|
4097 | displayName?: string;
|
4098 | }
|
4099 |
|
4100 | interface ForwardRefRenderFunction<T, P = {}> {
|
4101 | (props: PropsWithChildren<P>, ref: ((instance: T | null) => void) | MutableRefObject<T | null> | null): ReactElement | null;
|
4102 | displayName?: string;
|
4103 | // explicit rejected with `never` required due to
|
4104 | // https://github.com/microsoft/TypeScript/issues/36826
|
4105 | /**
|
4106 | * defaultProps are not supported on render functions
|
4107 | */
|
4108 | defaultProps?: never;
|
4109 | /**
|
4110 | * propTypes are not supported on render functions
|
4111 | */
|
4112 | propTypes?: never;
|
4113 | }
|
4114 |
|
4115 | /**
|
4116 | * @deprecated Use ForwardRefRenderFunction. forwardRef doesn't accept a
|
4117 | * "real" component.
|
4118 | */
|
4119 | interface RefForwardingComponent <T, P = {}> extends ForwardRefRenderFunction<T, P> {}
|
4120 |
|
4121 | interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
|
4122 | new (props: P, context?: any): Component<P, S>;
|
4123 | propTypes?: WeakValidationMap<P>;
|
4124 | contextType?: Context<any>;
|
4125 | contextTypes?: ValidationMap<any>;
|
4126 | childContextTypes?: ValidationMap<any>;
|
4127 | defaultProps?: Partial<P>;
|
4128 | displayName?: string;
|
4129 | }
|
4130 |
|
4131 | interface ClassicComponentClass<P = {}> extends ComponentClass<P> {
|
4132 | new (props: P, context?: any): ClassicComponent<P, ComponentState>;
|
4133 | getDefaultProps?(): P;
|
4134 | }
|
4135 |
|
4136 | /**
|
4137 | * We use an intersection type to infer multiple type parameters from
|
4138 | * a single argument, which is useful for many top-level API defs.
|
4139 | * See https://github.com/Microsoft/TypeScript/issues/7234 for more info.
|
4140 | */
|
4141 | type ClassType<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>> =
|
4142 | C &
|
4143 | (new (props: P, context?: any) => T);
|
4144 |
|
4145 | //
|
4146 | // Component Specs and Lifecycle
|
4147 | // ----------------------------------------------------------------------
|
4148 |
|
4149 | // This should actually be something like `Lifecycle<P, S> | DeprecatedLifecycle<P, S>`,
|
4150 | // as React will _not_ call the deprecated lifecycle methods if any of the new lifecycle
|
4151 | // methods are present.
|
4152 | interface ComponentLifecycle<P, S, SS = any> extends NewLifecycle<P, S, SS>, DeprecatedLifecycle<P, S> {
|
4153 | /**
|
4154 | * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
|
4155 | */
|
4156 | componentDidMount?(): void;
|
4157 | /**
|
4158 | * Called to determine whether the change in props and state should trigger a re-render.
|
4159 | *
|
4160 | * `Component` always returns true.
|
4161 | * `PureComponent` implements a shallow comparison on props and state and returns true if any
|
4162 | * props or states have changed.
|
4163 | *
|
4164 | * If false is returned, `Component#render`, `componentWillUpdate`
|
4165 | * and `componentDidUpdate` will not be called.
|
4166 | */
|
4167 | shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
|
4168 | /**
|
4169 | * Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
|
4170 | * cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.
|
4171 | */
|
4172 | componentWillUnmount?(): void;
|
4173 | /**
|
4174 | * Catches exceptions generated in descendant components. Unhandled exceptions will cause
|
4175 | * the entire component tree to unmount.
|
4176 | */
|
4177 | componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;
|
4178 | }
|
4179 |
|
4180 | // Unfortunately, we have no way of declaring that the component constructor must implement this
|
4181 | interface StaticLifecycle<P, S> {
|
4182 | getDerivedStateFromProps?: GetDerivedStateFromProps<P, S>;
|
4183 | getDerivedStateFromError?: GetDerivedStateFromError<P, S>;
|
4184 | }
|
4185 |
|
4186 | type GetDerivedStateFromProps<P, S> =
|
4187 | /**
|
4188 | * Returns an update to a component's state based on its new props and old state.
|
4189 | *
|
4190 | * Note: its presence prevents any of the deprecated lifecycle methods from being invoked
|
4191 | */
|
4192 | (nextProps: Readonly<P>, prevState: S) => Partial<S> | null;
|
4193 |
|
4194 | type GetDerivedStateFromError<P, S> =
|
4195 | /**
|
4196 | * This lifecycle is invoked after an error has been thrown by a descendant component.
|
4197 | * It receives the error that was thrown as a parameter and should return a value to update state.
|
4198 | *
|
4199 | * Note: its presence prevents any of the deprecated lifecycle methods from being invoked
|
4200 | */
|
4201 | (error: any) => Partial<S> | null;
|
4202 |
|
4203 | // This should be "infer SS" but can't use it yet
|
4204 | interface NewLifecycle<P, S, SS> {
|
4205 | /**
|
4206 | * Runs before React applies the result of `render` to the document, and
|
4207 | * returns an object to be given to componentDidUpdate. Useful for saving
|
4208 | * things such as scroll position before `render` causes changes to it.
|
4209 | *
|
4210 | * Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated
|
4211 | * lifecycle events from running.
|
4212 | */
|
4213 | getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>): SS | null;
|
4214 | /**
|
4215 | * Called immediately after updating occurs. Not called for the initial render.
|
4216 | *
|
4217 | * The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
|
4218 | */
|
4219 | componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot?: SS): void;
|
4220 | }
|
4221 |
|
4222 | interface DeprecatedLifecycle<P, S> {
|
4223 | /**
|
4224 | * Called immediately before mounting occurs, and before `Component#render`.
|
4225 | * Avoid introducing any side-effects or subscriptions in this method.
|
4226 | *
|
4227 | * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
|
4228 | * prevents this from being invoked.
|
4229 | *
|
4230 | * @deprecated 16.3, use componentDidMount or the constructor instead; will stop working in React 17
|
4231 | * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
|
4232 | * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
|
4233 | */
|
4234 | componentWillMount?(): void;
|
4235 | /**
|
4236 | * Called immediately before mounting occurs, and before `Component#render`.
|
4237 | * Avoid introducing any side-effects or subscriptions in this method.
|
4238 | *
|
4239 | * This method will not stop working in React 17.
|
4240 | *
|
4241 | * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
|
4242 | * prevents this from being invoked.
|
4243 | *
|
4244 | * @deprecated 16.3, use componentDidMount or the constructor instead
|
4245 | * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
|
4246 | * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
|
4247 | */
|
4248 | UNSAFE_componentWillMount?(): void;
|
4249 | /**
|
4250 | * Called when the component may be receiving new props.
|
4251 | * React may call this even if props have not changed, so be sure to compare new and existing
|
4252 | * props if you only want to handle changes.
|
4253 | *
|
4254 | * Calling `Component#setState` generally does not trigger this method.
|
4255 | *
|
4256 | * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
|
4257 | * prevents this from being invoked.
|
4258 | *
|
4259 | * @deprecated 16.3, use static getDerivedStateFromProps instead; will stop working in React 17
|
4260 | * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
|
4261 | * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
|
4262 | */
|
4263 | componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
|
4264 | /**
|
4265 | * Called when the component may be receiving new props.
|
4266 | * React may call this even if props have not changed, so be sure to compare new and existing
|
4267 | * props if you only want to handle changes.
|
4268 | *
|
4269 | * Calling `Component#setState` generally does not trigger this method.
|
4270 | *
|
4271 | * This method will not stop working in React 17.
|
4272 | *
|
4273 | * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
|
4274 | * prevents this from being invoked.
|
4275 | *
|
4276 | * @deprecated 16.3, use static getDerivedStateFromProps instead
|
4277 | * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
|
4278 | * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
|
4279 | */
|
4280 | UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
|
4281 | /**
|
4282 | * Called immediately before rendering when new props or state is received. Not called for the initial render.
|
4283 | *
|
4284 | * Note: You cannot call `Component#setState` here.
|
4285 | *
|
4286 | * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
|
4287 | * prevents this from being invoked.
|
4288 | *
|
4289 | * @deprecated 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
|
4290 | * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
|
4291 | * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
|
4292 | */
|
4293 | componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
|
4294 | /**
|
4295 | * Called immediately before rendering when new props or state is received. Not called for the initial render.
|
4296 | *
|
4297 | * Note: You cannot call `Component#setState` here.
|
4298 | *
|
4299 | * This method will not stop working in React 17.
|
4300 | *
|
4301 | * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
|
4302 | * prevents this from being invoked.
|
4303 | *
|
4304 | * @deprecated 16.3, use getSnapshotBeforeUpdate instead
|
4305 | * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
|
4306 | * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
|
4307 | */
|
4308 | UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
|
4309 | }
|
4310 |
|
4311 | interface Mixin<P, S> extends ComponentLifecycle<P, S> {
|
4312 | mixins?: Array<Mixin<P, S>>;
|
4313 | statics?: {
|
4314 | [key: string]: any;
|
4315 | };
|
4316 |
|
4317 | displayName?: string;
|
4318 | propTypes?: ValidationMap<any>;
|
4319 | contextTypes?: ValidationMap<any>;
|
4320 | childContextTypes?: ValidationMap<any>;
|
4321 |
|
4322 | getDefaultProps?(): P;
|
4323 | getInitialState?(): S;
|
4324 | }
|
4325 |
|
4326 | interface ComponentSpec<P, S> extends Mixin<P, S> {
|
4327 | render(): ReactNode;
|
4328 |
|
4329 | [propertyName: string]: any;
|
4330 | }
|
4331 |
|
4332 | function createRef<T>(): RefObject<T>;
|
4333 |
|
4334 | // will show `ForwardRef(${Component.displayName || Component.name})` in devtools by default,
|
4335 | // but can be given its own specific name
|
4336 | interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> {
|
4337 | defaultProps?: Partial<P>;
|
4338 | propTypes?: WeakValidationMap<P>;
|
4339 | }
|
4340 |
|
4341 | function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
|
4342 |
|
4343 | /** Ensures that the props do not include ref at all */
|
4344 | type PropsWithoutRef<P> =
|
4345 | // Just Pick would be sufficient for this, but I'm trying to avoid unnecessary mapping over union types
|
4346 | // https://github.com/Microsoft/TypeScript/issues/28339
|
4347 | 'ref' extends keyof P
|
4348 | ? Pick<P, Exclude<keyof P, 'ref'>>
|
4349 | : P;
|
4350 | /** Ensures that the props do not include string ref, which cannot be forwarded */
|
4351 | type PropsWithRef<P> =
|
4352 | // Just "P extends { ref?: infer R }" looks sufficient, but R will infer as {} if P is {}.
|
4353 | 'ref' extends keyof P
|
4354 | ? P extends { ref?: infer R }
|
4355 | ? string extends R
|
4356 | ? PropsWithoutRef<P> & { ref?: Exclude<R, string> }
|
4357 | : P
|
4358 | : P
|
4359 | : P;
|
4360 |
|
4361 | type PropsWithChildren<P> = P & { children?: ReactNode };
|
4362 |
|
4363 | /**
|
4364 | * NOTE: prefer ComponentPropsWithRef, if the ref is forwarded,
|
4365 | * or ComponentPropsWithoutRef when refs are not supported.
|
4366 | */
|
4367 | type ComponentProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> =
|
4368 | T extends JSXElementConstructor<infer P>
|
4369 | ? P
|
4370 | : T extends keyof JSX.IntrinsicElements
|
4371 | ? JSX.IntrinsicElements[T]
|
4372 | : {};
|
4373 | type ComponentPropsWithRef<T extends ElementType> =
|
4374 | T extends ComponentClass<infer P>
|
4375 | ? PropsWithoutRef<P> & RefAttributes<InstanceType<T>>
|
4376 | : PropsWithRef<ComponentProps<T>>;
|
4377 | type ComponentPropsWithoutRef<T extends ElementType> =
|
4378 | PropsWithoutRef<ComponentProps<T>>;
|
4379 |
|
4380 | // will show `Memo(${Component.displayName || Component.name})` in devtools by default,
|
4381 | // but can be given its own specific name
|
4382 | type MemoExoticComponent<T extends ComponentType<any>> = NamedExoticComponent<ComponentPropsWithRef<T>> & {
|
4383 | readonly type: T;
|
4384 | };
|
4385 |
|
4386 | function memo<P extends object>(
|
4387 | Component: SFC<P>,
|
4388 | propsAreEqual?: (prevProps: Readonly<PropsWithChildren<P>>, nextProps: Readonly<PropsWithChildren<P>>) => boolean
|
4389 | ): NamedExoticComponent<P>;
|
4390 | function memo<T extends ComponentType<any>>(
|
4391 | Component: T,
|
4392 | propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean
|
4393 | ): MemoExoticComponent<T>;
|
4394 |
|
4395 | type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & {
|
4396 | readonly _result: T;
|
4397 | };
|
4398 |
|
4399 | function lazy<T extends ComponentType<any>>(
|
4400 | factory: () => Promise<{ default: T }>
|
4401 | ): LazyExoticComponent<T>;
|
4402 |
|
4403 | //
|
4404 | // React Hooks
|
4405 | // ----------------------------------------------------------------------
|
4406 |
|
4407 | // based on the code in https://github.com/facebook/react/pull/13968
|
4408 |
|
4409 | // Unlike the class component setState, the updates are not allowed to be partial
|
4410 | type SetStateAction<S> = S | ((prevState: S) => S);
|
4411 | // this technically does accept a second argument, but it's already under a deprecation warning
|
4412 | // and it's not even released so probably better to not define it.
|
4413 | type Dispatch<A> = (value: A) => void;
|
4414 | // Since action _can_ be undefined, dispatch may be called without any parameters.
|
4415 | type DispatchWithoutAction = () => void;
|
4416 | // Unlike redux, the actions _can_ be anything
|
4417 | type Reducer<S, A> = (prevState: S, action: A) => S;
|
4418 | // If useReducer accepts a reducer without action, dispatch may be called without any parameters.
|
4419 | type ReducerWithoutAction<S> = (prevState: S) => S;
|
4420 | // types used to try and prevent the compiler from reducing S
|
4421 | // to a supertype common with the second argument to useReducer()
|
4422 | type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;
|
4423 | type ReducerAction<R extends Reducer<any, any>> = R extends Reducer<any, infer A> ? A : never;
|
4424 | // The identity check is done with the SameValue algorithm (Object.is), which is stricter than ===
|
4425 | type ReducerStateWithoutAction<R extends ReducerWithoutAction<any>> =
|
4426 | R extends ReducerWithoutAction<infer S> ? S : never;
|
4427 | // TODO (TypeScript 3.0): ReadonlyArray<unknown>
|
4428 | type DependencyList = ReadonlyArray<any>;
|
4429 |
|
4430 | // NOTE: callbacks are _only_ allowed to return either void, or a destructor.
|
4431 | // The destructor is itself only allowed to return void.
|
4432 | type EffectCallback = () => (void | (() => void | undefined));
|
4433 |
|
4434 | interface MutableRefObject<T> {
|
4435 | current: T;
|
4436 | }
|
4437 |
|
4438 | // This will technically work if you give a Consumer<T> or Provider<T> but it's deprecated and warns
|
4439 | /**
|
4440 | * Accepts a context object (the value returned from `React.createContext`) and returns the current
|
4441 | * context value, as given by the nearest context provider for the given context.
|
4442 | *
|
4443 | * @version 16.8.0
|
4444 | * @see https://reactjs.org/docs/hooks-reference.html#usecontext
|
4445 | */
|
4446 | function useContext<T>(context: Context<T>/*, (not public API) observedBits?: number|boolean */): T;
|
4447 | /**
|
4448 | * Returns a stateful value, and a function to update it.
|
4449 | *
|
4450 | * @version 16.8.0
|
4451 | * @see https://reactjs.org/docs/hooks-reference.html#usestate
|
4452 | */
|
4453 | function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
|
4454 | // convenience overload when first argument is ommitted
|
4455 | /**
|
4456 | * Returns a stateful value, and a function to update it.
|
4457 | *
|
4458 | * @version 16.8.0
|
4459 | * @see https://reactjs.org/docs/hooks-reference.html#usestate
|
4460 | */
|
4461 | function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
|
4462 | /**
|
4463 | * An alternative to `useState`.
|
4464 | *
|
4465 | * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
|
4466 | * multiple sub-values. It also lets you optimize performance for components that trigger deep
|
4467 | * updates because you can pass `dispatch` down instead of callbacks.
|
4468 | *
|
4469 | * @version 16.8.0
|
4470 | * @see https://reactjs.org/docs/hooks-reference.html#usereducer
|
4471 | */
|
4472 | // overload where dispatch could accept 0 arguments.
|
4473 | function useReducer<R extends ReducerWithoutAction<any>, I>(
|
4474 | reducer: R,
|
4475 | initializerArg: I,
|
4476 | initializer: (arg: I) => ReducerStateWithoutAction<R>
|
4477 | ): [ReducerStateWithoutAction<R>, DispatchWithoutAction];
|
4478 | /**
|
4479 | * An alternative to `useState`.
|
4480 | *
|
4481 | * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
|
4482 | * multiple sub-values. It also lets you optimize performance for components that trigger deep
|
4483 | * updates because you can pass `dispatch` down instead of callbacks.
|
4484 | *
|
4485 | * @version 16.8.0
|
4486 | * @see https://reactjs.org/docs/hooks-reference.html#usereducer
|
4487 | */
|
4488 | // overload where dispatch could accept 0 arguments.
|
4489 | function useReducer<R extends ReducerWithoutAction<any>>(
|
4490 | reducer: R,
|
4491 | initializerArg: ReducerStateWithoutAction<R>,
|
4492 | initializer?: undefined
|
4493 | ): [ReducerStateWithoutAction<R>, DispatchWithoutAction];
|
4494 | /**
|
4495 | * An alternative to `useState`.
|
4496 | *
|
4497 | * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
|
4498 | * multiple sub-values. It also lets you optimize performance for components that trigger deep
|
4499 | * updates because you can pass `dispatch` down instead of callbacks.
|
4500 | *
|
4501 | * @version 16.8.0
|
4502 | * @see https://reactjs.org/docs/hooks-reference.html#usereducer
|
4503 | */
|
4504 | // overload where "I" may be a subset of ReducerState<R>; used to provide autocompletion.
|
4505 | // If "I" matches ReducerState<R> exactly then the last overload will allow initializer to be ommitted.
|
4506 | // the last overload effectively behaves as if the identity function (x => x) is the initializer.
|
4507 | function useReducer<R extends Reducer<any, any>, I>(
|
4508 | reducer: R,
|
4509 | initializerArg: I & ReducerState<R>,
|
4510 | initializer: (arg: I & ReducerState<R>) => ReducerState<R>
|
4511 | ): [ReducerState<R>, Dispatch<ReducerAction<R>>];
|
4512 | /**
|
4513 | * An alternative to `useState`.
|
4514 | *
|
4515 | * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
|
4516 | * multiple sub-values. It also lets you optimize performance for components that trigger deep
|
4517 | * updates because you can pass `dispatch` down instead of callbacks.
|
4518 | *
|
4519 | * @version 16.8.0
|
4520 | * @see https://reactjs.org/docs/hooks-reference.html#usereducer
|
4521 | */
|
4522 | // overload for free "I"; all goes as long as initializer converts it into "ReducerState<R>".
|
4523 | function useReducer<R extends Reducer<any, any>, I>(
|
4524 | reducer: R,
|
4525 | initializerArg: I,
|
4526 | initializer: (arg: I) => ReducerState<R>
|
4527 | ): [ReducerState<R>, Dispatch<ReducerAction<R>>];
|
4528 | /**
|
4529 | * An alternative to `useState`.
|
4530 | *
|
4531 | * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
|
4532 | * multiple sub-values. It also lets you optimize performance for components that trigger deep
|
4533 | * updates because you can pass `dispatch` down instead of callbacks.
|
4534 | *
|
4535 | * @version 16.8.0
|
4536 | * @see https://reactjs.org/docs/hooks-reference.html#usereducer
|
4537 | */
|
4538 |
|
4539 | // I'm not sure if I keep this 2-ary or if I make it (2,3)-ary; it's currently (2,3)-ary.
|
4540 | // The Flow types do have an overload for 3-ary invocation with undefined initializer.
|
4541 |
|
4542 | // NOTE: without the ReducerState indirection, TypeScript would reduce S to be the most common
|
4543 | // supertype between the reducer's return type and the initialState (or the initializer's return type),
|
4544 | // which would prevent autocompletion from ever working.
|
4545 |
|
4546 | // TODO: double-check if this weird overload logic is necessary. It is possible it's either a bug
|
4547 | // in older versions, or a regression in newer versions of the typescript completion service.
|
4548 | function useReducer<R extends Reducer<any, any>>(
|
4549 | reducer: R,
|
4550 | initialState: ReducerState<R>,
|
4551 | initializer?: undefined
|
4552 | ): [ReducerState<R>, Dispatch<ReducerAction<R>>];
|
4553 | /**
|
4554 | * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
|
4555 | * (`initialValue`). The returned object will persist for the full lifetime of the component.
|
4556 | *
|
4557 | * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
|
4558 | * value around similar to how you’d use instance fields in classes.
|
4559 | *
|
4560 | * @version 16.8.0
|
4561 | * @see https://reactjs.org/docs/hooks-reference.html#useref
|
4562 | */
|
4563 | // TODO (TypeScript 3.0): <T extends unknown>
|
4564 | function useRef<T>(initialValue: T): MutableRefObject<T>;
|
4565 | // convenience overload for refs given as a ref prop as they typically start with a null value
|
4566 | /**
|
4567 | * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
|
4568 | * (`initialValue`). The returned object will persist for the full lifetime of the component.
|
4569 | *
|
4570 | * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
|
4571 | * value around similar to how you’d use instance fields in classes.
|
4572 | *
|
4573 | * Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type
|
4574 | * of the generic argument.
|
4575 | *
|
4576 | * @version 16.8.0
|
4577 | * @see https://reactjs.org/docs/hooks-reference.html#useref
|
4578 | */
|
4579 | // TODO (TypeScript 3.0): <T extends unknown>
|
4580 | function useRef<T>(initialValue: T|null): RefObject<T>;
|
4581 | // convenience overload for potentially undefined initialValue / call with 0 arguments
|
4582 | // has a default to stop it from defaulting to {} instead
|
4583 | /**
|
4584 | * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
|
4585 | * (`initialValue`). The returned object will persist for the full lifetime of the component.
|
4586 | *
|
4587 | * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
|
4588 | * value around similar to how you’d use instance fields in classes.
|
4589 | *
|
4590 | * @version 16.8.0
|
4591 | * @see https://reactjs.org/docs/hooks-reference.html#useref
|
4592 | */
|
4593 | // TODO (TypeScript 3.0): <T extends unknown>
|
4594 | function useRef<T = undefined>(): MutableRefObject<T | undefined>;
|
4595 | /**
|
4596 | * The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations.
|
4597 | * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside
|
4598 | * `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.
|
4599 | *
|
4600 | * Prefer the standard `useEffect` when possible to avoid blocking visual updates.
|
4601 | *
|
4602 | * If you’re migrating code from a class component, `useLayoutEffect` fires in the same phase as
|
4603 | * `componentDidMount` and `componentDidUpdate`.
|
4604 | *
|
4605 | * @version 16.8.0
|
4606 | * @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect
|
4607 | */
|
4608 | function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;
|
4609 | /**
|
4610 | * Accepts a function that contains imperative, possibly effectful code.
|
4611 | *
|
4612 | * @param effect Imperative function that can return a cleanup function
|
4613 | * @param deps If present, effect will only activate if the values in the list change.
|
4614 | *
|
4615 | * @version 16.8.0
|
4616 | * @see https://reactjs.org/docs/hooks-reference.html#useeffect
|
4617 | */
|
4618 | function useEffect(effect: EffectCallback, deps?: DependencyList): void;
|
4619 | // NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref<T>
|
4620 | /**
|
4621 | * `useImperativeHandle` customizes the instance value that is exposed to parent components when using
|
4622 | * `ref`. As always, imperative code using refs should be avoided in most cases.
|
4623 | *
|
4624 | * `useImperativeHandle` should be used with `React.forwardRef`.
|
4625 | *
|
4626 | * @version 16.8.0
|
4627 | * @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle
|
4628 | */
|
4629 | function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void;
|
4630 | // I made 'inputs' required here and in useMemo as there's no point to memoizing without the memoization key
|
4631 | // useCallback(X) is identical to just using X, useMemo(() => Y) is identical to just using Y.
|
4632 | /**
|
4633 | * `useCallback` will return a memoized version of the callback that only changes if one of the `inputs`
|
4634 | * has changed.
|
4635 | *
|
4636 | * @version 16.8.0
|
4637 | * @see https://reactjs.org/docs/hooks-reference.html#usecallback
|
4638 | */
|
4639 | // TODO (TypeScript 3.0): <T extends (...args: never[]) => unknown>
|
4640 | function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;
|
4641 | /**
|
4642 | * `useMemo` will only recompute the memoized value when one of the `deps` has changed.
|
4643 | *
|
4644 | * Usage note: if calling `useMemo` with a referentially stable function, also give it as the input in
|
4645 | * the second argument.
|
4646 | *
|
4647 | * ```ts
|
4648 | * function expensive () { ... }
|
4649 | *
|
4650 | * function Component () {
|
4651 | * const expensiveResult = useMemo(expensive, [expensive])
|
4652 | * return ...
|
4653 | * }
|
4654 | * ```
|
4655 | *
|
4656 | * @version 16.8.0
|
4657 | * @see https://reactjs.org/docs/hooks-reference.html#usememo
|
4658 | */
|
4659 | // allow undefined, but don't make it optional as that is very likely a mistake
|
4660 | function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;
|
4661 | /**
|
4662 | * `useDebugValue` can be used to display a label for custom hooks in React DevTools.
|
4663 | *
|
4664 | * NOTE: We don’t recommend adding debug values to every custom hook.
|
4665 | * It’s most valuable for custom hooks that are part of shared libraries.
|
4666 | *
|
4667 | * @version 16.8.0
|
4668 | * @see https://reactjs.org/docs/hooks-reference.html#usedebugvalue
|
4669 | */
|
4670 | // the name of the custom hook is itself derived from the function name at runtime:
|
4671 | // it's just the function name without the "use" prefix.
|
4672 | function useDebugValue<T>(value: T, format?: (value: T) => any): void;
|
4673 |
|
4674 | //
|
4675 | // Event System
|
4676 | // ----------------------------------------------------------------------
|
4677 | // TODO: change any to unknown when moving to TS v3
|
4678 | interface BaseSyntheticEvent<E = object, C = any, T = any> {
|
4679 | nativeEvent: E;
|
4680 | currentTarget: C;
|
4681 | target: T;
|
4682 | bubbles: boolean;
|
4683 | cancelable: boolean;
|
4684 | defaultPrevented: boolean;
|
4685 | eventPhase: number;
|
4686 | isTrusted: boolean;
|
4687 | preventDefault(): void;
|
4688 | isDefaultPrevented(): boolean;
|
4689 | stopPropagation(): void;
|
4690 | isPropagationStopped(): boolean;
|
4691 | persist(): void;
|
4692 | timeStamp: number;
|
4693 | type: string;
|
4694 | }
|
4695 |
|
4696 | /**
|
4697 | * currentTarget - a reference to the element on which the event listener is registered.
|
4698 | *
|
4699 | * target - a reference to the element from which the event was originally dispatched.
|
4700 | * This might be a child element to the element on which the event listener is registered.
|
4701 | * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
|
4702 | */
|
4703 | interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}
|
4704 |
|
4705 | interface ClipboardEvent<T = Element> extends SyntheticEvent<T, NativeClipboardEvent> {
|
4706 | clipboardData: DataTransfer;
|
4707 | }
|
4708 |
|
4709 | interface CompositionEvent<T = Element> extends SyntheticEvent<T, NativeCompositionEvent> {
|
4710 | data: string;
|
4711 | }
|
4712 |
|
4713 | interface DragEvent<T = Element> extends MouseEvent<T, NativeDragEvent> {
|
4714 | dataTransfer: DataTransfer;
|
4715 | }
|
4716 |
|
4717 | interface PointerEvent<T = Element> extends MouseEvent<T, NativePointerEvent> {
|
4718 | pointerId: number;
|
4719 | pressure: number;
|
4720 | tangentialPressure: number;
|
4721 | tiltX: number;
|
4722 | tiltY: number;
|
4723 | twist: number;
|
4724 | width: number;
|
4725 | height: number;
|
4726 | pointerType: 'mouse' | 'pen' | 'touch';
|
4727 | isPrimary: boolean;
|
4728 | }
|
4729 |
|
4730 | interface FocusEvent<T = Element> extends SyntheticEvent<T, NativeFocusEvent> {
|
4731 | relatedTarget: EventTarget | null;
|
4732 | target: EventTarget & T;
|
4733 | }
|
4734 |
|
4735 | // tslint:disable-next-line:no-empty-interface
|
4736 | interface FormEvent<T = Element> extends SyntheticEvent<T> {
|
4737 | }
|
4738 |
|
4739 | interface InvalidEvent<T = Element> extends SyntheticEvent<T> {
|
4740 | target: EventTarget & T;
|
4741 | }
|
4742 |
|
4743 | interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
|
4744 | target: EventTarget & T;
|
4745 | }
|
4746 |
|
4747 | interface KeyboardEvent<T = Element> extends SyntheticEvent<T, NativeKeyboardEvent> {
|
4748 | altKey: boolean;
|
4749 | charCode: number;
|
4750 | ctrlKey: boolean;
|
4751 | /**
|
4752 | * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
|
4753 | */
|
4754 | getModifierState(key: string): boolean;
|
4755 | /**
|
4756 | * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
|
4757 | */
|
4758 | key: string;
|
4759 | keyCode: number;
|
4760 | locale: string;
|
4761 | location: number;
|
4762 | metaKey: boolean;
|
4763 | repeat: boolean;
|
4764 | shiftKey: boolean;
|
4765 | /** @deprecated */
|
4766 | which: number;
|
4767 | }
|
4768 |
|
4769 | interface MouseEvent<T = Element, E = NativeMouseEvent> extends UIEvent<T, E> {
|
4770 | altKey: boolean;
|
4771 | button: number;
|
4772 | buttons: number;
|
4773 | clientX: number;
|
4774 | clientY: number;
|
4775 | ctrlKey: boolean;
|
4776 | /**
|
4777 | * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
|
4778 | */
|
4779 | getModifierState(key: string): boolean;
|
4780 | metaKey: boolean;
|
4781 | movementX: number;
|
4782 | movementY: number;
|
4783 | pageX: number;
|
4784 | pageY: number;
|
4785 | relatedTarget: EventTarget | null;
|
4786 | screenX: number;
|
4787 | screenY: number;
|
4788 | shiftKey: boolean;
|
4789 | }
|
4790 |
|
4791 | interface TouchEvent<T = Element> extends UIEvent<T, NativeTouchEvent> {
|
4792 | altKey: boolean;
|
4793 | changedTouches: TouchList;
|
4794 | ctrlKey: boolean;
|
4795 | /**
|
4796 | * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
|
4797 | */
|
4798 | getModifierState(key: string): boolean;
|
4799 | metaKey: boolean;
|
4800 | shiftKey: boolean;
|
4801 | targetTouches: TouchList;
|
4802 | touches: TouchList;
|
4803 | }
|
4804 |
|
4805 | interface UIEvent<T = Element, E = NativeUIEvent> extends SyntheticEvent<T, E> {
|
4806 | detail: number;
|
4807 | view: AbstractView;
|
4808 | }
|
4809 |
|
4810 | interface WheelEvent<T = Element> extends MouseEvent<T, NativeWheelEvent> {
|
4811 | deltaMode: number;
|
4812 | deltaX: number;
|
4813 | deltaY: number;
|
4814 | deltaZ: number;
|
4815 | }
|
4816 |
|
4817 | interface AnimationEvent<T = Element> extends SyntheticEvent<T, NativeAnimationEvent> {
|
4818 | animationName: string;
|
4819 | elapsedTime: number;
|
4820 | pseudoElement: string;
|
4821 | }
|
4822 |
|
4823 | interface TransitionEvent<T = Element> extends SyntheticEvent<T, NativeTransitionEvent> {
|
4824 | elapsedTime: number;
|
4825 | propertyName: string;
|
4826 | pseudoElement: string;
|
4827 | }
|
4828 |
|
4829 | //
|
4830 | // Event Handler Types
|
4831 | // ----------------------------------------------------------------------
|
4832 |
|
4833 | type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"];
|
4834 |
|
4835 | type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
|
4836 |
|
4837 | type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>;
|
4838 | type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>;
|
4839 | type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
|
4840 | type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>;
|
4841 | type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;
|
4842 | type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>;
|
4843 | type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>;
|
4844 | type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
|
4845 | type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
|
4846 | type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
|
4847 | type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
|
4848 | type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
|
4849 | type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;
|
4850 | type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;
|
4851 |
|
4852 | //
|
4853 | // Props / DOM Attributes
|
4854 | // ----------------------------------------------------------------------
|
4855 |
|
4856 | /**
|
4857 | * @deprecated. This was used to allow clients to pass `ref` and `key`
|
4858 | * to `createElement`, which is no longer necessary due to intersection
|
4859 | * types. If you need to declare a props object before passing it to
|
4860 | * `createElement` or a factory, use `ClassAttributes<T>`:
|
4861 | *
|
4862 | * ```ts
|
4863 | * var b: Button | null;
|
4864 | * var props: ButtonProps & ClassAttributes<Button> = {
|
4865 | * ref: b => button = b,
|
4866 | * label: "I'm a Button"
|
4867 | * };
|
4868 | * ```
|
4869 | */
|
4870 | interface Props<T> {
|
4871 | children?: ReactNode;
|
4872 | key?: Key;
|
4873 | ref?: LegacyRef<T>;
|
4874 | }
|
4875 |
|
4876 | interface HTMLProps<T> extends AllHTMLAttributes<T>, ClassAttributes<T> {
|
4877 | }
|
4878 |
|
4879 | type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & E;
|
4880 |
|
4881 | interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes<T> {
|
4882 | }
|
4883 |
|
4884 | interface DOMAttributes<T> {
|
4885 | children?: ReactNode;
|
4886 | dangerouslySetInnerHTML?: {
|
4887 | __html: string;
|
4888 | };
|
4889 |
|
4890 | // Clipboard Events
|
4891 | onCopy?: ClipboardEventHandler<T>;
|
4892 | onCopyCapture?: ClipboardEventHandler<T>;
|
4893 | onCut?: ClipboardEventHandler<T>;
|
4894 | onCutCapture?: ClipboardEventHandler<T>;
|
4895 | onPaste?: ClipboardEventHandler<T>;
|
4896 | onPasteCapture?: ClipboardEventHandler<T>;
|
4897 |
|
4898 | // Composition Events
|
4899 | onCompositionEnd?: CompositionEventHandler<T>;
|
4900 | onCompositionEndCapture?: CompositionEventHandler<T>;
|
4901 | onCompositionStart?: CompositionEventHandler<T>;
|
4902 | onCompositionStartCapture?: CompositionEventHandler<T>;
|
4903 | onCompositionUpdate?: CompositionEventHandler<T>;
|
4904 | onCompositionUpdateCapture?: CompositionEventHandler<T>;
|
4905 |
|
4906 | // Focus Events
|
4907 | onFocus?: FocusEventHandler<T>;
|
4908 | onFocusCapture?: FocusEventHandler<T>;
|
4909 | onBlur?: FocusEventHandler<T>;
|
4910 | onBlurCapture?: FocusEventHandler<T>;
|
4911 |
|
4912 | // Form Events
|
4913 | onChange?: FormEventHandler<T>;
|
4914 | onChangeCapture?: FormEventHandler<T>;
|
4915 | onBeforeInput?: FormEventHandler<T>;
|
4916 | onBeforeInputCapture?: FormEventHandler<T>;
|
4917 | onInput?: FormEventHandler<T>;
|
4918 | onInputCapture?: FormEventHandler<T>;
|
4919 | onReset?: FormEventHandler<T>;
|
4920 | onResetCapture?: FormEventHandler<T>;
|
4921 | onSubmit?: FormEventHandler<T>;
|
4922 | onSubmitCapture?: FormEventHandler<T>;
|
4923 | onInvalid?: FormEventHandler<T>;
|
4924 | onInvalidCapture?: FormEventHandler<T>;
|
4925 |
|
4926 | // Image Events
|
4927 | onLoad?: ReactEventHandler<T>;
|
4928 | onLoadCapture?: ReactEventHandler<T>;
|
4929 | onError?: ReactEventHandler<T>; // also a Media Event
|
4930 | onErrorCapture?: ReactEventHandler<T>; // also a Media Event
|
4931 |
|
4932 | // Keyboard Events
|
4933 | onKeyDown?: KeyboardEventHandler<T>;
|
4934 | onKeyDownCapture?: KeyboardEventHandler<T>;
|
4935 | onKeyPress?: KeyboardEventHandler<T>;
|
4936 | onKeyPressCapture?: KeyboardEventHandler<T>;
|
4937 | onKeyUp?: KeyboardEventHandler<T>;
|
4938 | onKeyUpCapture?: KeyboardEventHandler<T>;
|
4939 |
|
4940 | // Media Events
|
4941 | onAbort?: ReactEventHandler<T>;
|
4942 | onAbortCapture?: ReactEventHandler<T>;
|
4943 | onCanPlay?: ReactEventHandler<T>;
|
4944 | onCanPlayCapture?: ReactEventHandler<T>;
|
4945 | onCanPlayThrough?: ReactEventHandler<T>;
|
4946 | onCanPlayThroughCapture?: ReactEventHandler<T>;
|
4947 | onDurationChange?: ReactEventHandler<T>;
|
4948 | onDurationChangeCapture?: ReactEventHandler<T>;
|
4949 | onEmptied?: ReactEventHandler<T>;
|
4950 | onEmptiedCapture?: ReactEventHandler<T>;
|
4951 | onEncrypted?: ReactEventHandler<T>;
|
4952 | onEncryptedCapture?: ReactEventHandler<T>;
|
4953 | onEnded?: ReactEventHandler<T>;
|
4954 | onEndedCapture?: ReactEventHandler<T>;
|
4955 | onLoadedData?: ReactEventHandler<T>;
|
4956 | onLoadedDataCapture?: ReactEventHandler<T>;
|
4957 | onLoadedMetadata?: ReactEventHandler<T>;
|
4958 | onLoadedMetadataCapture?: ReactEventHandler<T>;
|
4959 | onLoadStart?: ReactEventHandler<T>;
|
4960 | onLoadStartCapture?: ReactEventHandler<T>;
|
4961 | onPause?: ReactEventHandler<T>;
|
4962 | onPauseCapture?: ReactEventHandler<T>;
|
4963 | onPlay?: ReactEventHandler<T>;
|
4964 | onPlayCapture?: ReactEventHandler<T>;
|
4965 | onPlaying?: ReactEventHandler<T>;
|
4966 | onPlayingCapture?: ReactEventHandler<T>;
|
4967 | onProgress?: ReactEventHandler<T>;
|
4968 | onProgressCapture?: ReactEventHandler<T>;
|
4969 | onRateChange?: ReactEventHandler<T>;
|
4970 | onRateChangeCapture?: ReactEventHandler<T>;
|
4971 | onSeeked?: ReactEventHandler<T>;
|
4972 | onSeekedCapture?: ReactEventHandler<T>;
|
4973 | onSeeking?: ReactEventHandler<T>;
|
4974 | onSeekingCapture?: ReactEventHandler<T>;
|
4975 | onStalled?: ReactEventHandler<T>;
|
4976 | onStalledCapture?: ReactEventHandler<T>;
|
4977 | onSuspend?: ReactEventHandler<T>;
|
4978 | onSuspendCapture?: ReactEventHandler<T>;
|
4979 | onTimeUpdate?: ReactEventHandler<T>;
|
4980 | onTimeUpdateCapture?: ReactEventHandler<T>;
|
4981 | onVolumeChange?: ReactEventHandler<T>;
|
4982 | onVolumeChangeCapture?: ReactEventHandler<T>;
|
4983 | onWaiting?: ReactEventHandler<T>;
|
4984 | onWaitingCapture?: ReactEventHandler<T>;
|
4985 |
|
4986 | // MouseEvents
|
4987 | onAuxClick?: MouseEventHandler<T>;
|
4988 | onAuxClickCapture?: MouseEventHandler<T>;
|
4989 | onClick?: MouseEventHandler<T>;
|
4990 | onClickCapture?: MouseEventHandler<T>;
|
4991 | onContextMenu?: MouseEventHandler<T>;
|
4992 | onContextMenuCapture?: MouseEventHandler<T>;
|
4993 | onDoubleClick?: MouseEventHandler<T>;
|
4994 | onDoubleClickCapture?: MouseEventHandler<T>;
|
4995 | onDrag?: DragEventHandler<T>;
|
4996 | onDragCapture?: DragEventHandler<T>;
|
4997 | onDragEnd?: DragEventHandler<T>;
|
4998 | onDragEndCapture?: DragEventHandler<T>;
|
4999 | onDragEnter?: DragEventHandler<T>;
|
5000 | onDragEnterCapture?: DragEventHandler<T>;
|
5001 | onDragExit?: DragEventHandler<T>;
|
5002 | onDragExitCapture?: DragEventHandler<T>;
|
5003 | onDragLeave?: DragEventHandler<T>;
|
5004 | onDragLeaveCapture?: DragEventHandler<T>;
|
5005 | onDragOver?: DragEventHandler<T>;
|
5006 | onDragOverCapture?: DragEventHandler<T>;
|
5007 | onDragStart?: DragEventHandler<T>;
|
5008 | onDragStartCapture?: DragEventHandler<T>;
|
5009 | onDrop?: DragEventHandler<T>;
|
5010 | onDropCapture?: DragEventHandler<T>;
|
5011 | onMouseDown?: MouseEventHandler<T>;
|
5012 | onMouseDownCapture?: MouseEventHandler<T>;
|
5013 | onMouseEnter?: MouseEventHandler<T>;
|
5014 | onMouseLeave?: MouseEventHandler<T>;
|
5015 | onMouseMove?: MouseEventHandler<T>;
|
5016 | onMouseMoveCapture?: MouseEventHandler<T>;
|
5017 | onMouseOut?: MouseEventHandler<T>;
|
5018 | onMouseOutCapture?: MouseEventHandler<T>;
|
5019 | onMouseOver?: MouseEventHandler<T>;
|
5020 | onMouseOverCapture?: MouseEventHandler<T>;
|
5021 | onMouseUp?: MouseEventHandler<T>;
|
5022 | onMouseUpCapture?: MouseEventHandler<T>;
|
5023 |
|
5024 | // Selection Events
|
5025 | onSelect?: ReactEventHandler<T>;
|
5026 | onSelectCapture?: ReactEventHandler<T>;
|
5027 |
|
5028 | // Touch Events
|
5029 | onTouchCancel?: TouchEventHandler<T>;
|
5030 | onTouchCancelCapture?: TouchEventHandler<T>;
|
5031 | onTouchEnd?: TouchEventHandler<T>;
|
5032 | onTouchEndCapture?: TouchEventHandler<T>;
|
5033 | onTouchMove?: TouchEventHandler<T>;
|
5034 | onTouchMoveCapture?: TouchEventHandler<T>;
|
5035 | onTouchStart?: TouchEventHandler<T>;
|
5036 | onTouchStartCapture?: TouchEventHandler<T>;
|
5037 |
|
5038 | // Pointer Events
|
5039 | onPointerDown?: PointerEventHandler<T>;
|
5040 | onPointerDownCapture?: PointerEventHandler<T>;
|
5041 | onPointerMove?: PointerEventHandler<T>;
|
5042 | onPointerMoveCapture?: PointerEventHandler<T>;
|
5043 | onPointerUp?: PointerEventHandler<T>;
|
5044 | onPointerUpCapture?: PointerEventHandler<T>;
|
5045 | onPointerCancel?: PointerEventHandler<T>;
|
5046 | onPointerCancelCapture?: PointerEventHandler<T>;
|
5047 | onPointerEnter?: PointerEventHandler<T>;
|
5048 | onPointerEnterCapture?: PointerEventHandler<T>;
|
5049 | onPointerLeave?: PointerEventHandler<T>;
|
5050 | onPointerLeaveCapture?: PointerEventHandler<T>;
|
5051 | onPointerOver?: PointerEventHandler<T>;
|
5052 | onPointerOverCapture?: PointerEventHandler<T>;
|
5053 | onPointerOut?: PointerEventHandler<T>;
|
5054 | onPointerOutCapture?: PointerEventHandler<T>;
|
5055 | onGotPointerCapture?: PointerEventHandler<T>;
|
5056 | onGotPointerCaptureCapture?: PointerEventHandler<T>;
|
5057 | onLostPointerCapture?: PointerEventHandler<T>;
|
5058 | onLostPointerCaptureCapture?: PointerEventHandler<T>;
|
5059 |
|
5060 | // UI Events
|
5061 | onScroll?: UIEventHandler<T>;
|
5062 | onScrollCapture?: UIEventHandler<T>;
|
5063 |
|
5064 | // Wheel Events
|
5065 | onWheel?: WheelEventHandler<T>;
|
5066 | onWheelCapture?: WheelEventHandler<T>;
|
5067 |
|
5068 | // Animation Events
|
5069 | onAnimationStart?: AnimationEventHandler<T>;
|
5070 | onAnimationStartCapture?: AnimationEventHandler<T>;
|
5071 | onAnimationEnd?: AnimationEventHandler<T>;
|
5072 | onAnimationEndCapture?: AnimationEventHandler<T>;
|
5073 | onAnimationIteration?: AnimationEventHandler<T>;
|
5074 | onAnimationIterationCapture?: AnimationEventHandler<T>;
|
5075 |
|
5076 | // Transition Events
|
5077 | onTransitionEnd?: TransitionEventHandler<T>;
|
5078 | onTransitionEndCapture?: TransitionEventHandler<T>;
|
5079 | }
|
5080 |
|
5081 | interface CSSProperties extends CSS.Properties<string | number> {
|
5082 | /**
|
5083 | * The index signature was removed to enable closed typing for style
|
5084 | * using CSSType. You're able to use type assertion or module augmentation
|
5085 | * to add properties or an index signature of your own.
|
5086 | *
|
5087 | * For examples and more information, visit:
|
5088 | * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
|
5089 | */
|
5090 | }
|
5091 |
|
5092 | // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
|
5093 | interface AriaAttributes {
|
5094 | /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
|
5095 | 'aria-activedescendant'?: string;
|
5096 | /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
|
5097 | 'aria-atomic'?: boolean | 'false' | 'true';
|
5098 | /**
|
5099 | * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
|
5100 | * presented if they are made.
|
5101 | */
|
5102 | 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both';
|
5103 | /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
|
5104 | 'aria-busy'?: boolean | 'false' | 'true';
|
5105 | /**
|
5106 | * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
|
5107 | * @see aria-pressed @see aria-selected.
|
5108 | */
|
5109 | 'aria-checked'?: boolean | 'false' | 'mixed' | 'true';
|
5110 | /**
|
5111 | * Defines the total number of columns in a table, grid, or treegrid.
|
5112 | * @see aria-colindex.
|
5113 | */
|
5114 | 'aria-colcount'?: number;
|
5115 | /**
|
5116 | * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
|
5117 | * @see aria-colcount @see aria-colspan.
|
5118 | */
|
5119 | 'aria-colindex'?: number;
|
5120 | /**
|
5121 | * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
|
5122 | * @see aria-colindex @see aria-rowspan.
|
5123 | */
|
5124 | 'aria-colspan'?: number;
|
5125 | /**
|
5126 | * Identifies the element (or elements) whose contents or presence are controlled by the current element.
|
5127 | * @see aria-owns.
|
5128 | */
|
5129 | 'aria-controls'?: string;
|
5130 | /** Indicates the element that represents the current item within a container or set of related elements. */
|
5131 | 'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';
|
5132 | /**
|
5133 | * Identifies the element (or elements) that describes the object.
|
5134 | * @see aria-labelledby
|
5135 | */
|
5136 | 'aria-describedby'?: string;
|
5137 | /**
|
5138 | * Identifies the element that provides a detailed, extended description for the object.
|
5139 | * @see aria-describedby.
|
5140 | */
|
5141 | 'aria-details'?: string;
|
5142 | /**
|
5143 | * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
|
5144 | * @see aria-hidden @see aria-readonly.
|
5145 | */
|
5146 | 'aria-disabled'?: boolean | 'false' | 'true';
|
5147 | /**
|
5148 | * Indicates what functions can be performed when a dragged object is released on the drop target.
|
5149 | * @deprecated in ARIA 1.1
|
5150 | */
|
5151 | 'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup';
|
5152 | /**
|
5153 | * Identifies the element that provides an error message for the object.
|
5154 | * @see aria-invalid @see aria-describedby.
|
5155 | */
|
5156 | 'aria-errormessage'?: string;
|
5157 | /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
|
5158 | 'aria-expanded'?: boolean | 'false' | 'true';
|
5159 | /**
|
5160 | * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
|
5161 | * allows assistive technology to override the general default of reading in document source order.
|
5162 | */
|
5163 | 'aria-flowto'?: string;
|
5164 | /**
|
5165 | * Indicates an element's "grabbed" state in a drag-and-drop operation.
|
5166 | * @deprecated in ARIA 1.1
|
5167 | */
|
5168 | 'aria-grabbed'?: boolean | 'false' | 'true';
|
5169 | /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
|
5170 | 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
|
5171 | /**
|
5172 | * Indicates whether the element is exposed to an accessibility API.
|
5173 | * @see aria-disabled.
|
5174 | */
|
5175 | 'aria-hidden'?: boolean | 'false' | 'true';
|
5176 | /**
|
5177 | * Indicates the entered value does not conform to the format expected by the application.
|
5178 | * @see aria-errormessage.
|
5179 | */
|
5180 | 'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling';
|
5181 | /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
|
5182 | 'aria-keyshortcuts'?: string;
|
5183 | /**
|
5184 | * Defines a string value that labels the current element.
|
5185 | * @see aria-labelledby.
|
5186 | */
|
5187 | 'aria-label'?: string;
|
5188 | /**
|
5189 | * Identifies the element (or elements) that labels the current element.
|
5190 | * @see aria-describedby.
|
5191 | */
|
5192 | 'aria-labelledby'?: string;
|
5193 | /** Defines the hierarchical level of an element within a structure. */
|
5194 | 'aria-level'?: number;
|
5195 | /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
|
5196 | 'aria-live'?: 'off' | 'assertive' | 'polite';
|
5197 | /** Indicates whether an element is modal when displayed. */
|
5198 | 'aria-modal'?: boolean | 'false' | 'true';
|
5199 | /** Indicates whether a text box accepts multiple lines of input or only a single line. */
|
5200 | 'aria-multiline'?: boolean | 'false' | 'true';
|
5201 | /** Indicates that the user may select more than one item from the current selectable descendants. */
|
5202 | 'aria-multiselectable'?: boolean | 'false' | 'true';
|
5203 | /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
|
5204 | 'aria-orientation'?: 'horizontal' | 'vertical';
|
5205 | /**
|
5206 | * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
|
5207 | * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
|
5208 | * @see aria-controls.
|
5209 | */
|
5210 | 'aria-owns'?: string;
|
5211 | /**
|
5212 | * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
|
5213 | * A hint could be a sample value or a brief description of the expected format.
|
5214 | */
|
5215 | 'aria-placeholder'?: string;
|
5216 | /**
|
5217 | * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
|
5218 | * @see aria-setsize.
|
5219 | */
|
5220 | 'aria-posinset'?: number;
|
5221 | /**
|
5222 | * Indicates the current "pressed" state of toggle buttons.
|
5223 | * @see aria-checked @see aria-selected.
|
5224 | */
|
5225 | 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true';
|
5226 | /**
|
5227 | * Indicates that the element is not editable, but is otherwise operable.
|
5228 | * @see aria-disabled.
|
5229 | */
|
5230 | 'aria-readonly'?: boolean | 'false' | 'true';
|
5231 | /**
|
5232 | * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
|
5233 | * @see aria-atomic.
|
5234 | */
|
5235 | 'aria-relevant'?: 'additions' | 'additions text' | 'all' | 'removals' | 'text';
|
5236 | /** Indicates that user input is required on the element before a form may be submitted. */
|
5237 | 'aria-required'?: boolean | 'false' | 'true';
|
5238 | /** Defines a human-readable, author-localized description for the role of an element. */
|
5239 | 'aria-roledescription'?: string;
|
5240 | /**
|
5241 | * Defines the total number of rows in a table, grid, or treegrid.
|
5242 | * @see aria-rowindex.
|
5243 | */
|
5244 | 'aria-rowcount'?: number;
|
5245 | /**
|
5246 | * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
|
5247 | * @see aria-rowcount @see aria-rowspan.
|
5248 | */
|
5249 | 'aria-rowindex'?: number;
|
5250 | /**
|
5251 | * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
|
5252 | * @see aria-rowindex @see aria-colspan.
|
5253 | */
|
5254 | 'aria-rowspan'?: number;
|
5255 | /**
|
5256 | * Indicates the current "selected" state of various widgets.
|
5257 | * @see aria-checked @see aria-pressed.
|
5258 | */
|
5259 | 'aria-selected'?: boolean | 'false' | 'true';
|
5260 | /**
|
5261 | * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
|
5262 | * @see aria-posinset.
|
5263 | */
|
5264 | 'aria-setsize'?: number;
|
5265 | /** Indicates if items in a table or grid are sorted in ascending or descending order. */
|
5266 | 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
|
5267 | /** Defines the maximum allowed value for a range widget. */
|
5268 | 'aria-valuemax'?: number;
|
5269 | /** Defines the minimum allowed value for a range widget. */
|
5270 | 'aria-valuemin'?: number;
|
5271 | /**
|
5272 | * Defines the current value for a range widget.
|
5273 | * @see aria-valuetext.
|
5274 | */
|
5275 | 'aria-valuenow'?: number;
|
5276 | /** Defines the human readable text alternative of aria-valuenow for a range widget. */
|
5277 | 'aria-valuetext'?: string;
|
5278 | }
|
5279 |
|
5280 | interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
|
5281 | // React-specific Attributes
|
5282 | defaultChecked?: boolean;
|
5283 | defaultValue?: string | number | ReadonlyArray<string>;
|
5284 | suppressContentEditableWarning?: boolean;
|
5285 | suppressHydrationWarning?: boolean;
|
5286 |
|
5287 | // Standard HTML Attributes
|
5288 | accessKey?: string;
|
5289 | className?: string;
|
5290 | contentEditable?: Booleanish | "inherit";
|
5291 | contextMenu?: string;
|
5292 | dir?: string;
|
5293 | draggable?: Booleanish;
|
5294 | hidden?: boolean;
|
5295 | id?: string;
|
5296 | lang?: string;
|
5297 | placeholder?: string;
|
5298 | slot?: string;
|
5299 | spellCheck?: Booleanish;
|
5300 | style?: CSSProperties;
|
5301 | tabIndex?: number;
|
5302 | title?: string;
|
5303 | translate?: 'yes' | 'no';
|
5304 |
|
5305 | // Unknown
|
5306 | radioGroup?: string; // <command>, <menuitem>
|
5307 |
|
5308 | // WAI-ARIA
|
5309 | role?: string;
|
5310 |
|
5311 | // RDFa Attributes
|
5312 | about?: string;
|
5313 | datatype?: string;
|
5314 | inlist?: any;
|
5315 | prefix?: string;
|
5316 | property?: string;
|
5317 | resource?: string;
|
5318 | typeof?: string;
|
5319 | vocab?: string;
|
5320 |
|
5321 | // Non-standard Attributes
|
5322 | autoCapitalize?: string;
|
5323 | autoCorrect?: string;
|
5324 | autoSave?: string;
|
5325 | color?: string;
|
5326 | itemProp?: string;
|
5327 | itemScope?: boolean;
|
5328 | itemType?: string;
|
5329 | itemID?: string;
|
5330 | itemRef?: string;
|
5331 | results?: number;
|
5332 | security?: string;
|
5333 | unselectable?: 'on' | 'off';
|
5334 |
|
5335 | // Living Standard
|
5336 | /**
|
5337 | * Hints at the type of data that might be entered by the user while editing the element or its contents
|
5338 | * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
|
5339 | */
|
5340 | inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
|
5341 | /**
|
5342 | * Specify that a standard HTML element should behave like a defined custom built-in element
|
5343 | * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
|
5344 | */
|
5345 | is?: string;
|
5346 | }
|
5347 |
|
5348 | interface AllHTMLAttributes<T> extends HTMLAttributes<T> {
|
5349 | // Standard HTML Attributes
|
5350 | accept?: string;
|
5351 | acceptCharset?: string;
|
5352 | action?: string;
|
5353 | allowFullScreen?: boolean;
|
5354 | allowTransparency?: boolean;
|
5355 | alt?: string;
|
5356 | as?: string;
|
5357 | async?: boolean;
|
5358 | autoComplete?: string;
|
5359 | autoFocus?: boolean;
|
5360 | autoPlay?: boolean;
|
5361 | capture?: boolean | string;
|
5362 | cellPadding?: number | string;
|
5363 | cellSpacing?: number | string;
|
5364 | charSet?: string;
|
5365 | challenge?: string;
|
5366 | checked?: boolean;
|
5367 | cite?: string;
|
5368 | classID?: string;
|
5369 | cols?: number;
|
5370 | colSpan?: number;
|
5371 | content?: string;
|
5372 | controls?: boolean;
|
5373 | coords?: string;
|
5374 | crossOrigin?: string;
|
5375 | data?: string;
|
5376 | dateTime?: string;
|
5377 | default?: boolean;
|
5378 | defer?: boolean;
|
5379 | disabled?: boolean;
|
5380 | download?: any;
|
5381 | encType?: string;
|
5382 | form?: string;
|
5383 | formAction?: string;
|
5384 | formEncType?: string;
|
5385 | formMethod?: string;
|
5386 | formNoValidate?: boolean;
|
5387 | formTarget?: string;
|
5388 | frameBorder?: number | string;
|
5389 | headers?: string;
|
5390 | height?: number | string;
|
5391 | high?: number;
|
5392 | href?: string;
|
5393 | hrefLang?: string;
|
5394 | htmlFor?: string;
|
5395 | httpEquiv?: string;
|
5396 | integrity?: string;
|
5397 | keyParams?: string;
|
5398 | keyType?: string;
|
5399 | kind?: string;
|
5400 | label?: string;
|
5401 | list?: string;
|
5402 | loop?: boolean;
|
5403 | low?: number;
|
5404 | manifest?: string;
|
5405 | marginHeight?: number;
|
5406 | marginWidth?: number;
|
5407 | max?: number | string;
|
5408 | maxLength?: number;
|
5409 | media?: string;
|
5410 | mediaGroup?: string;
|
5411 | method?: string;
|
5412 | min?: number | string;
|
5413 | minLength?: number;
|
5414 | multiple?: boolean;
|
5415 | muted?: boolean;
|
5416 | name?: string;
|
5417 | nonce?: string;
|
5418 | noValidate?: boolean;
|
5419 | open?: boolean;
|
5420 | optimum?: number;
|
5421 | pattern?: string;
|
5422 | placeholder?: string;
|
5423 | playsInline?: boolean;
|
5424 | poster?: string;
|
5425 | preload?: string;
|
5426 | readOnly?: boolean;
|
5427 | rel?: string;
|
5428 | required?: boolean;
|
5429 | reversed?: boolean;
|
5430 | rows?: number;
|
5431 | rowSpan?: number;
|
5432 | sandbox?: string;
|
5433 | scope?: string;
|
5434 | scoped?: boolean;
|
5435 | scrolling?: string;
|
5436 | seamless?: boolean;
|
5437 | selected?: boolean;
|
5438 | shape?: string;
|
5439 | size?: number;
|
5440 | sizes?: string;
|
5441 | span?: number;
|
5442 | src?: string;
|
5443 | srcDoc?: string;
|
5444 | srcLang?: string;
|
5445 | srcSet?: string;
|
5446 | start?: number;
|
5447 | step?: number | string;
|
5448 | summary?: string;
|
5449 | target?: string;
|
5450 | type?: string;
|
5451 | useMap?: string;
|
5452 | value?: string | ReadonlyArray<string> | number;
|
5453 | width?: number | string;
|
5454 | wmode?: string;
|
5455 | wrap?: string;
|
5456 | }
|
5457 |
|
5458 | interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
|
5459 | download?: any;
|
5460 | href?: string;
|
5461 | hrefLang?: string;
|
5462 | media?: string;
|
5463 | ping?: string;
|
5464 | rel?: string;
|
5465 | target?: string;
|
5466 | type?: string;
|
5467 | referrerPolicy?: string;
|
5468 | }
|
5469 |
|
5470 | // tslint:disable-next-line:no-empty-interface
|
5471 | interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {}
|
5472 |
|
5473 | interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {
|
5474 | alt?: string;
|
5475 | coords?: string;
|
5476 | download?: any;
|
5477 | href?: string;
|
5478 | hrefLang?: string;
|
5479 | media?: string;
|
5480 | rel?: string;
|
5481 | shape?: string;
|
5482 | target?: string;
|
5483 | }
|
5484 |
|
5485 | interface BaseHTMLAttributes<T> extends HTMLAttributes<T> {
|
5486 | href?: string;
|
5487 | target?: string;
|
5488 | }
|
5489 |
|
5490 | interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> {
|
5491 | cite?: string;
|
5492 | }
|
5493 |
|
5494 | interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
|
5495 | autoFocus?: boolean;
|
5496 | disabled?: boolean;
|
5497 | form?: string;
|
5498 | formAction?: string;
|
5499 | formEncType?: string;
|
5500 | formMethod?: string;
|
5501 | formNoValidate?: boolean;
|
5502 | formTarget?: string;
|
5503 | name?: string;
|
5504 | type?: 'submit' | 'reset' | 'button';
|
5505 | value?: string | ReadonlyArray<string> | number;
|
5506 | }
|
5507 |
|
5508 | interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
|
5509 | height?: number | string;
|
5510 | width?: number | string;
|
5511 | }
|
5512 |
|
5513 | interface ColHTMLAttributes<T> extends HTMLAttributes<T> {
|
5514 | span?: number;
|
5515 | width?: number | string;
|
5516 | }
|
5517 |
|
5518 | interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> {
|
5519 | span?: number;
|
5520 | }
|
5521 |
|
5522 | interface DataHTMLAttributes<T> extends HTMLAttributes<T> {
|
5523 | value?: string | ReadonlyArray<string> | number;
|
5524 | }
|
5525 |
|
5526 | interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
|
5527 | open?: boolean;
|
5528 | onToggle?: ReactEventHandler<T>;
|
5529 | }
|
5530 |
|
5531 | interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
|
5532 | cite?: string;
|
5533 | dateTime?: string;
|
5534 | }
|
5535 |
|
5536 | interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
|
5537 | open?: boolean;
|
5538 | }
|
5539 |
|
5540 | interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {
|
5541 | height?: number | string;
|
5542 | src?: string;
|
5543 | type?: string;
|
5544 | width?: number | string;
|
5545 | }
|
5546 |
|
5547 | interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> {
|
5548 | disabled?: boolean;
|
5549 | form?: string;
|
5550 | name?: string;
|
5551 | }
|
5552 |
|
5553 | interface FormHTMLAttributes<T> extends HTMLAttributes<T> {
|
5554 | acceptCharset?: string;
|
5555 | action?: string;
|
5556 | autoComplete?: string;
|
5557 | encType?: string;
|
5558 | method?: string;
|
5559 | name?: string;
|
5560 | noValidate?: boolean;
|
5561 | target?: string;
|
5562 | }
|
5563 |
|
5564 | interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> {
|
5565 | manifest?: string;
|
5566 | }
|
5567 |
|
5568 | interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {
|
5569 | allow?: string;
|
5570 | allowFullScreen?: boolean;
|
5571 | allowTransparency?: boolean;
|
5572 | frameBorder?: number | string;
|
5573 | height?: number | string;
|
5574 | marginHeight?: number;
|
5575 | marginWidth?: number;
|
5576 | name?: string;
|
5577 | referrerPolicy?: string;
|
5578 | sandbox?: string;
|
5579 | scrolling?: string;
|
5580 | seamless?: boolean;
|
5581 | src?: string;
|
5582 | srcDoc?: string;
|
5583 | width?: number | string;
|
5584 | }
|
5585 |
|
5586 | interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
|
5587 | alt?: string;
|
5588 | crossOrigin?: "anonymous" | "use-credentials" | "";
|
5589 | decoding?: "async" | "auto" | "sync";
|
5590 | height?: number | string;
|
5591 | loading?: "eager" | "lazy";
|
5592 | referrerPolicy?: "no-referrer" | "origin" | "unsafe-url";
|
5593 | sizes?: string;
|
5594 | src?: string;
|
5595 | srcSet?: string;
|
5596 | useMap?: string;
|
5597 | width?: number | string;
|
5598 | }
|
5599 |
|
5600 | interface InsHTMLAttributes<T> extends HTMLAttributes<T> {
|
5601 | cite?: string;
|
5602 | dateTime?: string;
|
5603 | }
|
5604 |
|
5605 | interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
|
5606 | accept?: string;
|
5607 | alt?: string;
|
5608 | autoComplete?: string;
|
5609 | autoFocus?: boolean;
|
5610 | capture?: boolean | string; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute
|
5611 | checked?: boolean;
|
5612 | crossOrigin?: string;
|
5613 | disabled?: boolean;
|
5614 | form?: string;
|
5615 | formAction?: string;
|
5616 | formEncType?: string;
|
5617 | formMethod?: string;
|
5618 | formNoValidate?: boolean;
|
5619 | formTarget?: string;
|
5620 | height?: number | string;
|
5621 | list?: string;
|
5622 | max?: number | string;
|
5623 | maxLength?: number;
|
5624 | min?: number | string;
|
5625 | minLength?: number;
|
5626 | multiple?: boolean;
|
5627 | name?: string;
|
5628 | pattern?: string;
|
5629 | placeholder?: string;
|
5630 | readOnly?: boolean;
|
5631 | required?: boolean;
|
5632 | size?: number;
|
5633 | src?: string;
|
5634 | step?: number | string;
|
5635 | type?: string;
|
5636 | value?: string | ReadonlyArray<string> | number;
|
5637 | width?: number | string;
|
5638 |
|
5639 | onChange?: ChangeEventHandler<T>;
|
5640 | }
|
5641 |
|
5642 | interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
|
5643 | autoFocus?: boolean;
|
5644 | challenge?: string;
|
5645 | disabled?: boolean;
|
5646 | form?: string;
|
5647 | keyType?: string;
|
5648 | keyParams?: string;
|
5649 | name?: string;
|
5650 | }
|
5651 |
|
5652 | interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
|
5653 | form?: string;
|
5654 | htmlFor?: string;
|
5655 | }
|
5656 |
|
5657 | interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
|
5658 | value?: string | ReadonlyArray<string> | number;
|
5659 | }
|
5660 |
|
5661 | interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
|
5662 | as?: string;
|
5663 | crossOrigin?: string;
|
5664 | href?: string;
|
5665 | hrefLang?: string;
|
5666 | integrity?: string;
|
5667 | media?: string;
|
5668 | rel?: string;
|
5669 | sizes?: string;
|
5670 | type?: string;
|
5671 | charSet?: string;
|
5672 | }
|
5673 |
|
5674 | interface MapHTMLAttributes<T> extends HTMLAttributes<T> {
|
5675 | name?: string;
|
5676 | }
|
5677 |
|
5678 | interface MenuHTMLAttributes<T> extends HTMLAttributes<T> {
|
5679 | type?: string;
|
5680 | }
|
5681 |
|
5682 | interface MediaHTMLAttributes<T> extends HTMLAttributes<T> {
|
5683 | autoPlay?: boolean;
|
5684 | controls?: boolean;
|
5685 | controlsList?: string;
|
5686 | crossOrigin?: string;
|
5687 | loop?: boolean;
|
5688 | mediaGroup?: string;
|
5689 | muted?: boolean;
|
5690 | playsInline?: boolean;
|
5691 | preload?: string;
|
5692 | src?: string;
|
5693 | }
|
5694 |
|
5695 | interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {
|
5696 | charSet?: string;
|
5697 | content?: string;
|
5698 | httpEquiv?: string;
|
5699 | name?: string;
|
5700 | }
|
5701 |
|
5702 | interface MeterHTMLAttributes<T> extends HTMLAttributes<T> {
|
5703 | form?: string;
|
5704 | high?: number;
|
5705 | low?: number;
|
5706 | max?: number | string;
|
5707 | min?: number | string;
|
5708 | optimum?: number;
|
5709 | value?: string | ReadonlyArray<string> | number;
|
5710 | }
|
5711 |
|
5712 | interface QuoteHTMLAttributes<T> extends HTMLAttributes<T> {
|
5713 | cite?: string;
|
5714 | }
|
5715 |
|
5716 | interface ObjectHTMLAttributes<T> extends HTMLAttributes<T> {
|
5717 | classID?: string;
|
5718 | data?: string;
|
5719 | form?: string;
|
5720 | height?: number | string;
|
5721 | name?: string;
|
5722 | type?: string;
|
5723 | useMap?: string;
|
5724 | width?: number | string;
|
5725 | wmode?: string;
|
5726 | }
|
5727 |
|
5728 | interface OlHTMLAttributes<T> extends HTMLAttributes<T> {
|
5729 | reversed?: boolean;
|
5730 | start?: number;
|
5731 | type?: '1' | 'a' | 'A' | 'i' | 'I';
|
5732 | }
|
5733 |
|
5734 | interface OptgroupHTMLAttributes<T> extends HTMLAttributes<T> {
|
5735 | disabled?: boolean;
|
5736 | label?: string;
|
5737 | }
|
5738 |
|
5739 | interface OptionHTMLAttributes<T> extends HTMLAttributes<T> {
|
5740 | disabled?: boolean;
|
5741 | label?: string;
|
5742 | selected?: boolean;
|
5743 | value?: string | ReadonlyArray<string> | number;
|
5744 | }
|
5745 |
|
5746 | interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
|
5747 | form?: string;
|
5748 | htmlFor?: string;
|
5749 | name?: string;
|
5750 | }
|
5751 |
|
5752 | interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
|
5753 | name?: string;
|
5754 | value?: string | ReadonlyArray<string> | number;
|
5755 | }
|
5756 |
|
5757 | interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> {
|
5758 | max?: number | string;
|
5759 | value?: string | ReadonlyArray<string> | number;
|
5760 | }
|
5761 |
|
5762 | interface SlotHTMLAttributes<T> extends HTMLAttributes<T> {
|
5763 | name?: string;
|
5764 | }
|
5765 |
|
5766 | interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> {
|
5767 | async?: boolean;
|
5768 | charSet?: string;
|
5769 | crossOrigin?: string;
|
5770 | defer?: boolean;
|
5771 | integrity?: string;
|
5772 | noModule?: boolean;
|
5773 | nonce?: string;
|
5774 | src?: string;
|
5775 | type?: string;
|
5776 | }
|
5777 |
|
5778 | interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
|
5779 | autoComplete?: string;
|
5780 | autoFocus?: boolean;
|
5781 | disabled?: boolean;
|
5782 | form?: string;
|
5783 | multiple?: boolean;
|
5784 | name?: string;
|
5785 | required?: boolean;
|
5786 | size?: number;
|
5787 | value?: string | ReadonlyArray<string> | number;
|
5788 | onChange?: ChangeEventHandler<T>;
|
5789 | }
|
5790 |
|
5791 | interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
|
5792 | media?: string;
|
5793 | sizes?: string;
|
5794 | src?: string;
|
5795 | srcSet?: string;
|
5796 | type?: string;
|
5797 | }
|
5798 |
|
5799 | interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
|
5800 | media?: string;
|
5801 | nonce?: string;
|
5802 | scoped?: boolean;
|
5803 | type?: string;
|
5804 | }
|
5805 |
|
5806 | interface TableHTMLAttributes<T> extends HTMLAttributes<T> {
|
5807 | cellPadding?: number | string;
|
5808 | cellSpacing?: number | string;
|
5809 | summary?: string;
|
5810 | width?: number | string;
|
5811 | }
|
5812 |
|
5813 | interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
|
5814 | autoComplete?: string;
|
5815 | autoFocus?: boolean;
|
5816 | cols?: number;
|
5817 | dirName?: string;
|
5818 | disabled?: boolean;
|
5819 | form?: string;
|
5820 | maxLength?: number;
|
5821 | minLength?: number;
|
5822 | name?: string;
|
5823 | placeholder?: string;
|
5824 | readOnly?: boolean;
|
5825 | required?: boolean;
|
5826 | rows?: number;
|
5827 | value?: string | ReadonlyArray<string> | number;
|
5828 | wrap?: string;
|
5829 |
|
5830 | onChange?: ChangeEventHandler<T>;
|
5831 | }
|
5832 |
|
5833 | interface TdHTMLAttributes<T> extends HTMLAttributes<T> {
|
5834 | align?: "left" | "center" | "right" | "justify" | "char";
|
5835 | colSpan?: number;
|
5836 | headers?: string;
|
5837 | rowSpan?: number;
|
5838 | scope?: string;
|
5839 | abbr?: string;
|
5840 | height?: number | string;
|
5841 | width?: number | string;
|
5842 | valign?: "top" | "middle" | "bottom" | "baseline";
|
5843 | }
|
5844 |
|
5845 | interface ThHTMLAttributes<T> extends HTMLAttributes<T> {
|
5846 | align?: "left" | "center" | "right" | "justify" | "char";
|
5847 | colSpan?: number;
|
5848 | headers?: string;
|
5849 | rowSpan?: number;
|
5850 | scope?: string;
|
5851 | abbr?: string;
|
5852 | }
|
5853 |
|
5854 | interface TimeHTMLAttributes<T> extends HTMLAttributes<T> {
|
5855 | dateTime?: string;
|
5856 | }
|
5857 |
|
5858 | interface TrackHTMLAttributes<T> extends HTMLAttributes<T> {
|
5859 | default?: boolean;
|
5860 | kind?: string;
|
5861 | label?: string;
|
5862 | src?: string;
|
5863 | srcLang?: string;
|
5864 | }
|
5865 |
|
5866 | interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> {
|
5867 | height?: number | string;
|
5868 | playsInline?: boolean;
|
5869 | poster?: string;
|
5870 | width?: number | string;
|
5871 | disablePictureInPicture?: boolean;
|
5872 | }
|
5873 |
|
5874 | // this list is "complete" in that it contains every SVG attribute
|
5875 | // that React supports, but the types can be improved.
|
5876 | // Full list here: https://facebook.github.io/react/docs/dom-elements.html
|
5877 | //
|
5878 | // The three broad type categories are (in order of restrictiveness):
|
5879 | // - "number | string"
|
5880 | // - "string"
|
5881 | // - union of string literals
|
5882 | interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
|
5883 | // Attributes which also defined in HTMLAttributes
|
5884 | // See comment in SVGDOMPropertyConfig.js
|
5885 | className?: string;
|
5886 | color?: string;
|
5887 | height?: number | string;
|
5888 | id?: string;
|
5889 | lang?: string;
|
5890 | max?: number | string;
|
5891 | media?: string;
|
5892 | method?: string;
|
5893 | min?: number | string;
|
5894 | name?: string;
|
5895 | style?: CSSProperties;
|
5896 | target?: string;
|
5897 | type?: string;
|
5898 | width?: number | string;
|
5899 |
|
5900 | // Other HTML properties supported by SVG elements in browsers
|
5901 | role?: string;
|
5902 | tabIndex?: number;
|
5903 | crossOrigin?: "anonymous" | "use-credentials" | "";
|
5904 |
|
5905 | // SVG Specific attributes
|
5906 | accentHeight?: number | string;
|
5907 | accumulate?: "none" | "sum";
|
5908 | additive?: "replace" | "sum";
|
5909 | alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" |
|
5910 | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit";
|
5911 | allowReorder?: "no" | "yes";
|
5912 | alphabetic?: number | string;
|
5913 | amplitude?: number | string;
|
5914 | arabicForm?: "initial" | "medial" | "terminal" | "isolated";
|
5915 | ascent?: number | string;
|
5916 | attributeName?: string;
|
5917 | attributeType?: string;
|
5918 | autoReverse?: Booleanish;
|
5919 | azimuth?: number | string;
|
5920 | baseFrequency?: number | string;
|
5921 | baselineShift?: number | string;
|
5922 | baseProfile?: number | string;
|
5923 | bbox?: number | string;
|
5924 | begin?: number | string;
|
5925 | bias?: number | string;
|
5926 | by?: number | string;
|
5927 | calcMode?: number | string;
|
5928 | capHeight?: number | string;
|
5929 | clip?: number | string;
|
5930 | clipPath?: string;
|
5931 | clipPathUnits?: number | string;
|
5932 | clipRule?: number | string;
|
5933 | colorInterpolation?: number | string;
|
5934 | colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit";
|
5935 | colorProfile?: number | string;
|
5936 | colorRendering?: number | string;
|
5937 | contentScriptType?: number | string;
|
5938 | contentStyleType?: number | string;
|
5939 | cursor?: number | string;
|
5940 | cx?: number | string;
|
5941 | cy?: number | string;
|
5942 | d?: string;
|
5943 | decelerate?: number | string;
|
5944 | descent?: number | string;
|
5945 | diffuseConstant?: number | string;
|
5946 | direction?: number | string;
|
5947 | display?: number | string;
|
5948 | divisor?: number | string;
|
5949 | dominantBaseline?: number | string;
|
5950 | dur?: number | string;
|
5951 | dx?: number | string;
|
5952 | dy?: number | string;
|
5953 | edgeMode?: number | string;
|
5954 | elevation?: number | string;
|
5955 | enableBackground?: number | string;
|
5956 | end?: number | string;
|
5957 | exponent?: number | string;
|
5958 | externalResourcesRequired?: Booleanish;
|
5959 | fill?: string;
|
5960 | fillOpacity?: number | string;
|
5961 | fillRule?: "nonzero" | "evenodd" | "inherit";
|
5962 | filter?: string;
|
5963 | filterRes?: number | string;
|
5964 | filterUnits?: number | string;
|
5965 | floodColor?: number | string;
|
5966 | floodOpacity?: number | string;
|
5967 | focusable?: Booleanish | "auto";
|
5968 | fontFamily?: string;
|
5969 | fontSize?: number | string;
|
5970 | fontSizeAdjust?: number | string;
|
5971 | fontStretch?: number | string;
|
5972 | fontStyle?: number | string;
|
5973 | fontVariant?: number | string;
|
5974 | fontWeight?: number | string;
|
5975 | format?: number | string;
|
5976 | from?: number | string;
|
5977 | fx?: number | string;
|
5978 | fy?: number | string;
|
5979 | g1?: number | string;
|
5980 | g2?: number | string;
|
5981 | glyphName?: number | string;
|
5982 | glyphOrientationHorizontal?: number | string;
|
5983 | glyphOrientationVertical?: number | string;
|
5984 | glyphRef?: number | string;
|
5985 | gradientTransform?: string;
|
5986 | gradientUnits?: string;
|
5987 | hanging?: number | string;
|
5988 | horizAdvX?: number | string;
|
5989 | horizOriginX?: number | string;
|
5990 | href?: string;
|
5991 | ideographic?: number | string;
|
5992 | imageRendering?: number | string;
|
5993 | in2?: number | string;
|
5994 | in?: string;
|
5995 | intercept?: number | string;
|
5996 | k1?: number | string;
|
5997 | k2?: number | string;
|
5998 | k3?: number | string;
|
5999 | k4?: number | string;
|
6000 | k?: number | string;
|
6001 | kernelMatrix?: number | string;
|
6002 | kernelUnitLength?: number | string;
|
6003 | kerning?: number | string;
|
6004 | keyPoints?: number | string;
|
6005 | keySplines?: number | string;
|
6006 | keyTimes?: number | string;
|
6007 | lengthAdjust?: number | string;
|
6008 | letterSpacing?: number | string;
|
6009 | lightingColor?: number | string;
|
6010 | limitingConeAngle?: number | string;
|
6011 | local?: number | string;
|
6012 | markerEnd?: string;
|
6013 | markerHeight?: number | string;
|
6014 | markerMid?: string;
|
6015 | markerStart?: string;
|
6016 | markerUnits?: number | string;
|
6017 | markerWidth?: number | string;
|
6018 | mask?: string;
|
6019 | maskContentUnits?: number | string;
|
6020 | maskUnits?: number | string;
|
6021 | mathematical?: number | string;
|
6022 | mode?: number | string;
|
6023 | numOctaves?: number | string;
|
6024 | offset?: number | string;
|
6025 | opacity?: number | string;
|
6026 | operator?: number | string;
|
6027 | order?: number | string;
|
6028 | orient?: number | string;
|
6029 | orientation?: number | string;
|
6030 | origin?: number | string;
|
6031 | overflow?: number | string;
|
6032 | overlinePosition?: number | string;
|
6033 | overlineThickness?: number | string;
|
6034 | paintOrder?: number | string;
|
6035 | panose1?: number | string;
|
6036 | path?: string;
|
6037 | pathLength?: number | string;
|
6038 | patternContentUnits?: string;
|
6039 | patternTransform?: number | string;
|
6040 | patternUnits?: string;
|
6041 | pointerEvents?: number | string;
|
6042 | points?: string;
|
6043 | pointsAtX?: number | string;
|
6044 | pointsAtY?: number | string;
|
6045 | pointsAtZ?: number | string;
|
6046 | preserveAlpha?: Booleanish;
|
6047 | preserveAspectRatio?: string;
|
6048 | primitiveUnits?: number | string;
|
6049 | r?: number | string;
|
6050 | radius?: number | string;
|
6051 | refX?: number | string;
|
6052 | refY?: number | string;
|
6053 | renderingIntent?: number | string;
|
6054 | repeatCount?: number | string;
|
6055 | repeatDur?: number | string;
|
6056 | requiredExtensions?: number | string;
|
6057 | requiredFeatures?: number | string;
|
6058 | restart?: number | string;
|
6059 | result?: string;
|
6060 | rotate?: number | string;
|
6061 | rx?: number | string;
|
6062 | ry?: number | string;
|
6063 | scale?: number | string;
|
6064 | seed?: number | string;
|
6065 | shapeRendering?: number | string;
|
6066 | slope?: number | string;
|
6067 | spacing?: number | string;
|
6068 | specularConstant?: number | string;
|
6069 | specularExponent?: number | string;
|
6070 | speed?: number | string;
|
6071 | spreadMethod?: string;
|
6072 | startOffset?: number | string;
|
6073 | stdDeviation?: number | string;
|
6074 | stemh?: number | string;
|
6075 | stemv?: number | string;
|
6076 | stitchTiles?: number | string;
|
6077 | stopColor?: string;
|
6078 | stopOpacity?: number | string;
|
6079 | strikethroughPosition?: number | string;
|
6080 | strikethroughThickness?: number | string;
|
6081 | string?: number | string;
|
6082 | stroke?: string;
|
6083 | strokeDasharray?: string | number;
|
6084 | strokeDashoffset?: string | number;
|
6085 | strokeLinecap?: "butt" | "round" | "square" | "inherit";
|
6086 | strokeLinejoin?: "miter" | "round" | "bevel" | "inherit";
|
6087 | strokeMiterlimit?: number | string;
|
6088 | strokeOpacity?: number | string;
|
6089 | strokeWidth?: number | string;
|
6090 | surfaceScale?: number | string;
|
6091 | systemLanguage?: number | string;
|
6092 | tableValues?: number | string;
|
6093 | targetX?: number | string;
|
6094 | targetY?: number | string;
|
6095 | textAnchor?: string;
|
6096 | textDecoration?: number | string;
|
6097 | textLength?: number | string;
|
6098 | textRendering?: number | string;
|
6099 | to?: number | string;
|
6100 | transform?: string;
|
6101 | u1?: number | string;
|
6102 | u2?: number | string;
|
6103 | underlinePosition?: number | string;
|
6104 | underlineThickness?: number | string;
|
6105 | unicode?: number | string;
|
6106 | unicodeBidi?: number | string;
|
6107 | unicodeRange?: number | string;
|
6108 | unitsPerEm?: number | string;
|
6109 | vAlphabetic?: number | string;
|
6110 | values?: string;
|
6111 | vectorEffect?: number | string;
|
6112 | version?: string;
|
6113 | vertAdvY?: number | string;
|
6114 | vertOriginX?: number | string;
|
6115 | vertOriginY?: number | string;
|
6116 | vHanging?: number | string;
|
6117 | vIdeographic?: number | string;
|
6118 | viewBox?: string;
|
6119 | viewTarget?: number | string;
|
6120 | visibility?: number | string;
|
6121 | vMathematical?: number | string;
|
6122 | widths?: number | string;
|
6123 | wordSpacing?: number | string;
|
6124 | writingMode?: number | string;
|
6125 | x1?: number | string;
|
6126 | x2?: number | string;
|
6127 | x?: number | string;
|
6128 | xChannelSelector?: string;
|
6129 | xHeight?: number | string;
|
6130 | xlinkActuate?: string;
|
6131 | xlinkArcrole?: string;
|
6132 | xlinkHref?: string;
|
6133 | xlinkRole?: string;
|
6134 | xlinkShow?: string;
|
6135 | xlinkTitle?: string;
|
6136 | xlinkType?: string;
|
6137 | xmlBase?: string;
|
6138 | xmlLang?: string;
|
6139 | xmlns?: string;
|
6140 | xmlnsXlink?: string;
|
6141 | xmlSpace?: string;
|
6142 | y1?: number | string;
|
6143 | y2?: number | string;
|
6144 | y?: number | string;
|
6145 | yChannelSelector?: string;
|
6146 | z?: number | string;
|
6147 | zoomAndPan?: string;
|
6148 | }
|
6149 |
|
6150 | interface WebViewHTMLAttributes<T> extends HTMLAttributes<T> {
|
6151 | allowFullScreen?: boolean;
|
6152 | allowpopups?: boolean;
|
6153 | autoFocus?: boolean;
|
6154 | autosize?: boolean;
|
6155 | blinkfeatures?: string;
|
6156 | disableblinkfeatures?: string;
|
6157 | disableguestresize?: boolean;
|
6158 | disablewebsecurity?: boolean;
|
6159 | guestinstance?: string;
|
6160 | httpreferrer?: string;
|
6161 | nodeintegration?: boolean;
|
6162 | partition?: string;
|
6163 | plugins?: boolean;
|
6164 | preload?: string;
|
6165 | src?: string;
|
6166 | useragent?: string;
|
6167 | webpreferences?: string;
|
6168 | }
|
6169 |
|
6170 | //
|
6171 | // React.DOM
|
6172 | // ----------------------------------------------------------------------
|
6173 |
|
6174 | interface ReactHTML {
|
6175 | a: DetailedHTMLFactory<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
|
6176 | abbr: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6177 | address: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6178 | area: DetailedHTMLFactory<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>;
|
6179 | article: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6180 | aside: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6181 | audio: DetailedHTMLFactory<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>;
|
6182 | b: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6183 | base: DetailedHTMLFactory<BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>;
|
6184 | bdi: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6185 | bdo: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6186 | big: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6187 | blockquote: DetailedHTMLFactory<BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>;
|
6188 | body: DetailedHTMLFactory<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
|
6189 | br: DetailedHTMLFactory<HTMLAttributes<HTMLBRElement>, HTMLBRElement>;
|
6190 | button: DetailedHTMLFactory<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
|
6191 | canvas: DetailedHTMLFactory<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>;
|
6192 | caption: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6193 | cite: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6194 | code: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6195 | col: DetailedHTMLFactory<ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>;
|
6196 | colgroup: DetailedHTMLFactory<ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>;
|
6197 | data: DetailedHTMLFactory<DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>;
|
6198 | datalist: DetailedHTMLFactory<HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>;
|
6199 | dd: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6200 | del: DetailedHTMLFactory<DelHTMLAttributes<HTMLElement>, HTMLElement>;
|
6201 | details: DetailedHTMLFactory<DetailsHTMLAttributes<HTMLElement>, HTMLElement>;
|
6202 | dfn: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6203 | dialog: DetailedHTMLFactory<DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>;
|
6204 | div: DetailedHTMLFactory<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
6205 | dl: DetailedHTMLFactory<HTMLAttributes<HTMLDListElement>, HTMLDListElement>;
|
6206 | dt: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6207 | em: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6208 | embed: DetailedHTMLFactory<EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>;
|
6209 | fieldset: DetailedHTMLFactory<FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>;
|
6210 | figcaption: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6211 | figure: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6212 | footer: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6213 | form: DetailedHTMLFactory<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
|
6214 | h1: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
6215 | h2: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
6216 | h3: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
6217 | h4: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
6218 | h5: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
6219 | h6: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
6220 | head: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLHeadElement>;
|
6221 | header: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6222 | hgroup: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6223 | hr: DetailedHTMLFactory<HTMLAttributes<HTMLHRElement>, HTMLHRElement>;
|
6224 | html: DetailedHTMLFactory<HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>;
|
6225 | i: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6226 | iframe: DetailedHTMLFactory<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>;
|
6227 | img: DetailedHTMLFactory<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
|
6228 | input: DetailedHTMLFactory<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
6229 | ins: DetailedHTMLFactory<InsHTMLAttributes<HTMLModElement>, HTMLModElement>;
|
6230 | kbd: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6231 | keygen: DetailedHTMLFactory<KeygenHTMLAttributes<HTMLElement>, HTMLElement>;
|
6232 | label: DetailedHTMLFactory<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
|
6233 | legend: DetailedHTMLFactory<HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>;
|
6234 | li: DetailedHTMLFactory<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
|
6235 | link: DetailedHTMLFactory<LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>;
|
6236 | main: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6237 | map: DetailedHTMLFactory<MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>;
|
6238 | mark: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6239 | menu: DetailedHTMLFactory<MenuHTMLAttributes<HTMLElement>, HTMLElement>;
|
6240 | menuitem: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6241 | meta: DetailedHTMLFactory<MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>;
|
6242 | meter: DetailedHTMLFactory<MeterHTMLAttributes<HTMLElement>, HTMLElement>;
|
6243 | nav: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6244 | noscript: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6245 | object: DetailedHTMLFactory<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>;
|
6246 | ol: DetailedHTMLFactory<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>;
|
6247 | optgroup: DetailedHTMLFactory<OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>;
|
6248 | option: DetailedHTMLFactory<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
|
6249 | output: DetailedHTMLFactory<OutputHTMLAttributes<HTMLElement>, HTMLElement>;
|
6250 | p: DetailedHTMLFactory<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
|
6251 | param: DetailedHTMLFactory<ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement>;
|
6252 | picture: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6253 | pre: DetailedHTMLFactory<HTMLAttributes<HTMLPreElement>, HTMLPreElement>;
|
6254 | progress: DetailedHTMLFactory<ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>;
|
6255 | q: DetailedHTMLFactory<QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>;
|
6256 | rp: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6257 | rt: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6258 | ruby: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6259 | s: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6260 | samp: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6261 | slot: DetailedHTMLFactory<SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement>;
|
6262 | script: DetailedHTMLFactory<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>;
|
6263 | section: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6264 | select: DetailedHTMLFactory<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
|
6265 | small: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6266 | source: DetailedHTMLFactory<SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>;
|
6267 | span: DetailedHTMLFactory<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
|
6268 | strong: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6269 | style: DetailedHTMLFactory<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>;
|
6270 | sub: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6271 | summary: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6272 | sup: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6273 | table: DetailedHTMLFactory<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
|
6274 | template: DetailedHTMLFactory<HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement>;
|
6275 | tbody: DetailedHTMLFactory<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
|
6276 | td: DetailedHTMLFactory<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>;
|
6277 | textarea: DetailedHTMLFactory<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
|
6278 | tfoot: DetailedHTMLFactory<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
|
6279 | th: DetailedHTMLFactory<ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>;
|
6280 | thead: DetailedHTMLFactory<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
|
6281 | time: DetailedHTMLFactory<TimeHTMLAttributes<HTMLElement>, HTMLElement>;
|
6282 | title: DetailedHTMLFactory<HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>;
|
6283 | tr: DetailedHTMLFactory<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>;
|
6284 | track: DetailedHTMLFactory<TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>;
|
6285 | u: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6286 | ul: DetailedHTMLFactory<HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
|
6287 | "var": DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6288 | video: DetailedHTMLFactory<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
|
6289 | wbr: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
|
6290 | webview: DetailedHTMLFactory<WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>;
|
6291 | }
|
6292 |
|
6293 | interface ReactSVG {
|
6294 | animate: SVGFactory;
|
6295 | circle: SVGFactory;
|
6296 | clipPath: SVGFactory;
|
6297 | defs: SVGFactory;
|
6298 | desc: SVGFactory;
|
6299 | ellipse: SVGFactory;
|
6300 | feBlend: SVGFactory;
|
6301 | feColorMatrix: SVGFactory;
|
6302 | feComponentTransfer: SVGFactory;
|
6303 | feComposite: SVGFactory;
|
6304 | feConvolveMatrix: SVGFactory;
|
6305 | feDiffuseLighting: SVGFactory;
|
6306 | feDisplacementMap: SVGFactory;
|
6307 | feDistantLight: SVGFactory;
|
6308 | feDropShadow: SVGFactory;
|
6309 | feFlood: SVGFactory;
|
6310 | feFuncA: SVGFactory;
|
6311 | feFuncB: SVGFactory;
|
6312 | feFuncG: SVGFactory;
|
6313 | feFuncR: SVGFactory;
|
6314 | feGaussianBlur: SVGFactory;
|
6315 | feImage: SVGFactory;
|
6316 | feMerge: SVGFactory;
|
6317 | feMergeNode: SVGFactory;
|
6318 | feMorphology: SVGFactory;
|
6319 | feOffset: SVGFactory;
|
6320 | fePointLight: SVGFactory;
|
6321 | feSpecularLighting: SVGFactory;
|
6322 | feSpotLight: SVGFactory;
|
6323 | feTile: SVGFactory;
|
6324 | feTurbulence: SVGFactory;
|
6325 | filter: SVGFactory;
|
6326 | foreignObject: SVGFactory;
|
6327 | g: SVGFactory;
|
6328 | image: SVGFactory;
|
6329 | line: SVGFactory;
|
6330 | linearGradient: SVGFactory;
|
6331 | marker: SVGFactory;
|
6332 | mask: SVGFactory;
|
6333 | metadata: SVGFactory;
|
6334 | path: SVGFactory;
|
6335 | pattern: SVGFactory;
|
6336 | polygon: SVGFactory;
|
6337 | polyline: SVGFactory;
|
6338 | radialGradient: SVGFactory;
|
6339 | rect: SVGFactory;
|
6340 | stop: SVGFactory;
|
6341 | svg: SVGFactory;
|
6342 | switch: SVGFactory;
|
6343 | symbol: SVGFactory;
|
6344 | text: SVGFactory;
|
6345 | textPath: SVGFactory;
|
6346 | tspan: SVGFactory;
|
6347 | use: SVGFactory;
|
6348 | view: SVGFactory;
|
6349 | }
|
6350 |
|
6351 | interface ReactDOM extends ReactHTML, ReactSVG { }
|
6352 |
|
6353 | //
|
6354 | // React.PropTypes
|
6355 | // ----------------------------------------------------------------------
|
6356 |
|
6357 | type Validator<T> = PropTypes.Validator<T>;
|
6358 |
|
6359 | type Requireable<T> = PropTypes.Requireable<T>;
|
6360 |
|
6361 | type ValidationMap<T> = PropTypes.ValidationMap<T>;
|
6362 |
|
6363 | type WeakValidationMap<T> = {
|
6364 | [K in keyof T]?: null extends T[K]
|
6365 | ? Validator<T[K] | null | undefined>
|
6366 | : undefined extends T[K]
|
6367 | ? Validator<T[K] | null | undefined>
|
6368 | : Validator<T[K]>
|
6369 | };
|
6370 |
|
6371 | interface ReactPropTypes {
|
6372 | any: typeof PropTypes.any;
|
6373 | array: typeof PropTypes.array;
|
6374 | bool: typeof PropTypes.bool;
|
6375 | func: typeof PropTypes.func;
|
6376 | number: typeof PropTypes.number;
|
6377 | object: typeof PropTypes.object;
|
6378 | string: typeof PropTypes.string;
|
6379 | node: typeof PropTypes.node;
|
6380 | element: typeof PropTypes.element;
|
6381 | instanceOf: typeof PropTypes.instanceOf;
|
6382 | oneOf: typeof PropTypes.oneOf;
|
6383 | oneOfType: typeof PropTypes.oneOfType;
|
6384 | arrayOf: typeof PropTypes.arrayOf;
|
6385 | objectOf: typeof PropTypes.objectOf;
|
6386 | shape: typeof PropTypes.shape;
|
6387 | exact: typeof PropTypes.exact;
|
6388 | }
|
6389 |
|
6390 | //
|
6391 | // React.Children
|
6392 | // ----------------------------------------------------------------------
|
6393 |
|
6394 | interface ReactChildren {
|
6395 | map<T, C>(children: C | C[], fn: (child: C, index: number) => T):
|
6396 | C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>;
|
6397 | forEach<C>(children: C | C[], fn: (child: C, index: number) => void): void;
|
6398 | count(children: any): number;
|
6399 | only<C>(children: C): C extends any[] ? never : C;
|
6400 | toArray(children: ReactNode | ReactNode[]): Array<Exclude<ReactNode, boolean | null | undefined>>;
|
6401 | }
|
6402 |
|
6403 | //
|
6404 | // Browser Interfaces
|
6405 | // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
|
6406 | // ----------------------------------------------------------------------
|
6407 |
|
6408 | interface AbstractView {
|
6409 | styleMedia: StyleMedia;
|
6410 | document: Document;
|
6411 | }
|
6412 |
|
6413 | interface Touch {
|
6414 | identifier: number;
|
6415 | target: EventTarget;
|
6416 | screenX: number;
|
6417 | screenY: number;
|
6418 | clientX: number;
|
6419 | clientY: number;
|
6420 | pageX: number;
|
6421 | pageY: number;
|
6422 | }
|
6423 |
|
6424 | interface TouchList {
|
6425 | [index: number]: Touch;
|
6426 | length: number;
|
6427 | item(index: number): Touch;
|
6428 | identifiedTouch(identifier: number): Touch;
|
6429 | }
|
6430 |
|
6431 | //
|
6432 | // Error Interfaces
|
6433 | // ----------------------------------------------------------------------
|
6434 | interface ErrorInfo {
|
6435 | /**
|
6436 | * Captures which component contained the exception, and its ancestors.
|
6437 | */
|
6438 | componentStack: string;
|
6439 | }
|
6440 | }
|
6441 |
|
6442 | /**
|
6443 | * Define accessibility options for a tree. Can be used to force the tree into Reduced Motion mode,
|
6444 | * or disable device detection.
|
6445 | *
|
6446 | * @internal
|
6447 | */
|
6448 | export declare function ReducedMotion({ children, enabled }: Props): JSX.Element;
|
6449 |
|
6450 | /**
|
6451 | * @public
|
6452 | */
|
6453 | export declare interface RelayoutInfo {
|
6454 | delta: {
|
6455 | x: number;
|
6456 | y: number;
|
6457 | width: number;
|
6458 | height: number;
|
6459 | };
|
6460 | }
|
6461 |
|
6462 | declare type RenderComponent<P = {}> = (Component: string | React.ComponentType<P>, props: MotionProps, visualElement: VisualElement) => any;
|
6463 |
|
6464 | /**
|
6465 | * @public
|
6466 | */
|
6467 | export declare type ResolvedKeyframesTarget = [null, ...number[]] | number[] | [null, ...string[]] | string[];
|
6468 |
|
6469 | /**
|
6470 | * @public
|
6471 | */
|
6472 | export declare type ResolvedSingleTarget = string | number;
|
6473 |
|
6474 | /**
|
6475 | * A generic set of string/number values
|
6476 | */
|
6477 | declare interface ResolvedValues {
|
6478 | [key: string]: string | number;
|
6479 | }
|
6480 |
|
6481 | /**
|
6482 | * @public
|
6483 | */
|
6484 | export declare type ResolvedValueTarget = ResolvedSingleTarget | ResolvedKeyframesTarget;
|
6485 |
|
6486 | /**
|
6487 | * @public
|
6488 | */
|
6489 | export declare type ResolveLayoutTransition = (info: RelayoutInfo) => Transition | boolean;
|
6490 |
|
6491 | /**
|
6492 | * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
|
6493 | *
|
6494 | * TODO: Remove and move to library
|
6495 | *
|
6496 | * @internal
|
6497 | */
|
6498 | export declare function resolveMotionValue(value?: string | number | CustomValueType | MotionValue): string | number;
|
6499 |
|
6500 | declare type SafeToRemove = () => void;
|
6501 |
|
6502 | declare type ScaleCorrection = (latest: string | number, viewportBox: AxisBox2D, delta: BoxDelta, treeScale: Point2D) => string | number;
|
6503 |
|
6504 | declare interface ScaleCorrectionDefinition {
|
6505 | process: ScaleCorrection;
|
6506 | applyTo?: string[];
|
6507 | }
|
6508 |
|
6509 | declare type ScaleCorrectionDefinitionMap = {
|
6510 | [key: string]: ScaleCorrectionDefinition;
|
6511 | };
|
6512 |
|
6513 | declare interface ScaleMotionValues {
|
6514 | scaleX: MotionValue<number>;
|
6515 | scaleY: MotionValue<number>;
|
6516 | }
|
6517 |
|
6518 | /**
|
6519 | * defined in scheduler/tracing
|
6520 | */
|
6521 | declare interface SchedulerInteraction {
|
6522 | id: number;
|
6523 | name: string;
|
6524 | timestamp: number;
|
6525 | }
|
6526 |
|
6527 | /**
|
6528 | * @public
|
6529 | */
|
6530 | export declare interface ScrollMotionValues {
|
6531 | scrollX: MotionValue<number>;
|
6532 | scrollY: MotionValue<number>;
|
6533 | scrollXProgress: MotionValue<number>;
|
6534 | scrollYProgress: MotionValue<number>;
|
6535 | }
|
6536 |
|
6537 | declare interface SharedLayoutAnimationConfig {
|
6538 | visibilityAction?: VisibilityAction;
|
6539 | originBox?: AxisBox2D;
|
6540 | targetBox?: AxisBox2D;
|
6541 | transition?: Transition;
|
6542 | crossfadeOpacity?: MotionValue<number>;
|
6543 | }
|
6544 |
|
6545 | export declare interface SharedLayoutProps {
|
6546 | /**
|
6547 | * @public
|
6548 | */
|
6549 | children: React_2.ReactNode;
|
6550 | /**
|
6551 | * When combined with `AnimatePresence`, `SharedLayoutProps` can customise how to visually switch
|
6552 | * between `layoutId` components as new ones enter and leave the tree.
|
6553 | *
|
6554 | * - "switch" (default): The old `layoutId` component will be hidden instantly when a new one enters, and
|
6555 | * the new one will perform the full transition. When the newest one is removed, it will perform
|
6556 | * the full exit transition and then the old component will be shown instantly.
|
6557 | * - "crossfade": The root shared components will crossfade as `layoutId` children of both perform
|
6558 | * the same transition.
|
6559 | *
|
6560 | * @public
|
6561 | */
|
6562 | type?: "switch" | "crossfade";
|
6563 | /**
|
6564 | * `transition` settings to use for the animate animation. Currently, only one transition
|
6565 | * can be defined for every animating value and every animating component.
|
6566 | *
|
6567 | * @internal
|
6568 | */
|
6569 | _transition?: Transition;
|
6570 | /**
|
6571 | * By default, `SharedLayoutProps` will run a animate animation on all children every time
|
6572 | * it renders.
|
6573 | *
|
6574 | * To improve performance we can pass a variable to `dependency`, like a piece of state or a URL.
|
6575 | * `SharedLayoutProps` will only run animate animations when this dependency changes.
|
6576 | *
|
6577 | * TODO: Potentially replace this with a shouldAnimate
|
6578 | *
|
6579 | * @internal
|
6580 | */
|
6581 | _dependency?: any;
|
6582 | /**
|
6583 | * Currently, transforms intefere with Magic Motion measurements. There may be a future
|
6584 | * iteration where `translate` and `scale` are measured and incorporated as these
|
6585 | * can be reverse-applied to a measured bounding box.
|
6586 | *
|
6587 | * `rotate` is different in that it can't easily be reverse engineered from a measured bounding box.
|
6588 | * Setting `supportRotate` to `true` adds another write cycle to Magic Motion before the origin
|
6589 | * snapshot that resets rotate to `0`. It's then read from `style={{ rotate }}` and animated seperately.
|
6590 | *
|
6591 | * This isn't for general consumption and is only intended for use within Framer where the
|
6592 | * rotate control is prominent.
|
6593 | *
|
6594 | * @internal
|
6595 | */
|
6596 | _supportRotate?: boolean;
|
6597 | }
|
6598 |
|
6599 | /**
|
6600 | * Extra API methods available to children if they're a descendant of AnimateSharedLayout
|
6601 | */
|
6602 | declare interface SharedLayoutSyncMethods extends SyncLayoutBatcher {
|
6603 | syncUpdate: (force?: boolean) => void;
|
6604 | forceUpdate: () => void;
|
6605 | register: (child: HTMLVisualElement) => void;
|
6606 | remove: (child: HTMLVisualElement) => void;
|
6607 | }
|
6608 |
|
6609 | /**
|
6610 | * @public
|
6611 | */
|
6612 | export declare type SingleTarget = ResolvedSingleTarget | CustomValueType;
|
6613 |
|
6614 | declare interface Snapshot {
|
6615 | isDragging?: boolean;
|
6616 | cursorProgress?: Point2D;
|
6617 | latestMotionValues: ResolvedValues;
|
6618 | boundingBox?: AxisBox2D;
|
6619 | }
|
6620 |
|
6621 | /**
|
6622 | * An animation that simulates spring physics for realistic motion.
|
6623 | * This is the default animation for physical values like `x`, `y`, `scale` and `rotate`.
|
6624 | *
|
6625 | * @public
|
6626 | */
|
6627 | export declare interface Spring {
|
6628 | /**
|
6629 | * Set `type` to `"spring"` to animate using spring physics for natural
|
6630 | * movement. Type is set to `"spring"` by default.
|
6631 | *
|
6632 | * @library
|
6633 | *
|
6634 | * ```jsx
|
6635 | * const transition = {
|
6636 | * type: "spring"
|
6637 | * }
|
6638 | *
|
6639 | * <Frame
|
6640 | * animate={{ rotate: 180 }}
|
6641 | * transition={transition}
|
6642 | * />
|
6643 | * ```
|
6644 | *
|
6645 | * @motion
|
6646 | *
|
6647 | * ```jsx
|
6648 | * <motion.div
|
6649 | * animate={{ rotate: 180 }}
|
6650 | * transition={{ type: 'spring' }}
|
6651 | * />
|
6652 | * ```
|
6653 | *
|
6654 | * @public
|
6655 | */
|
6656 | type: "spring";
|
6657 | /**
|
6658 | * Stiffness of the spring. Higher values will create more sudden movement.
|
6659 | * Set to `100` by default.
|
6660 | *
|
6661 | * @library
|
6662 | *
|
6663 | * ```jsx
|
6664 | * const transition = {
|
6665 | * type: "spring",
|
6666 | * stiffness: 50
|
6667 | * }
|
6668 | *
|
6669 | * <Frame
|
6670 | * animate={{ rotate: 180 }}
|
6671 | * transition={transition}
|
6672 | * />
|
6673 | * ```
|
6674 | *
|
6675 | * @motion
|
6676 | *
|
6677 | * ```jsx
|
6678 | * <motion.section
|
6679 | * animate={{ rotate: 180 }}
|
6680 | * transition={{ type: 'spring', stiffness: 50 }}
|
6681 | * />
|
6682 | * ```
|
6683 | *
|
6684 | * @public
|
6685 | */
|
6686 | stiffness?: number;
|
6687 | /**
|
6688 | * Strength of opposing force. If set to 0, spring will oscillate
|
6689 | * indefinitely. Set to `10` by default.
|
6690 | *
|
6691 | * @library
|
6692 | *
|
6693 | * ```jsx
|
6694 | * const transition = {
|
6695 | * type: "spring",
|
6696 | * damping: 300
|
6697 | * }
|
6698 | *
|
6699 | * <Frame
|
6700 | * animate={{ rotate: 180 }}
|
6701 | * transition={transition}
|
6702 | * />
|
6703 | * ```
|
6704 | *
|
6705 | * @motion
|
6706 | *
|
6707 | * ```jsx
|
6708 | * <motion.a
|
6709 | * animate={{ rotate: 180 }}
|
6710 | * transition={{ type: 'spring', damping: 300 }}
|
6711 | * />
|
6712 | * ```
|
6713 | *
|
6714 | * @public
|
6715 | */
|
6716 | damping?: number;
|
6717 | /**
|
6718 | * Mass of the moving object. Higher values will result in more lethargic
|
6719 | * movement. Set to `1` by default.
|
6720 | *
|
6721 | * @library
|
6722 | *
|
6723 | * ```jsx
|
6724 | * const transition = {
|
6725 | * type: "spring",
|
6726 | * mass: 0.5
|
6727 | * }
|
6728 | *
|
6729 | * <Frame
|
6730 | * animate={{ rotate: 180 }}
|
6731 | * transition={transition}
|
6732 | * />
|
6733 | * ```
|
6734 | *
|
6735 | * @motion
|
6736 | *
|
6737 | * ```jsx
|
6738 | * <motion.feTurbulence
|
6739 | * animate={{ baseFrequency: 0.5 } as any}
|
6740 | * transition={{ type: "spring", mass: 0.5 }}
|
6741 | * />
|
6742 | * ```
|
6743 | *
|
6744 | * @public
|
6745 | */
|
6746 | mass?: number;
|
6747 | /**
|
6748 | * End animation if absolute speed (in units per second) drops below this
|
6749 | * value and delta is smaller than `restDelta`. Set to `0.01` by default.
|
6750 | *
|
6751 | * @library
|
6752 | *
|
6753 | * ```jsx
|
6754 | * const transition = {
|
6755 | * type: "spring",
|
6756 | * restSpeed: 0.5
|
6757 | * }
|
6758 | *
|
6759 | * <Frame
|
6760 | * animate={{ rotate: 180 }}
|
6761 | * transition={transition}
|
6762 | * />
|
6763 | * ```
|
6764 | *
|
6765 | * @motion
|
6766 | *
|
6767 | * ```jsx
|
6768 | * <motion.div
|
6769 | * animate={{ rotate: 180 }}
|
6770 | * transition={{ type: 'spring', restSpeed: 0.5 }}
|
6771 | * />
|
6772 | * ```
|
6773 | *
|
6774 | * @public
|
6775 | */
|
6776 | restSpeed?: number;
|
6777 | /**
|
6778 | * End animation if distance is below this value and speed is below
|
6779 | * `restSpeed`. When animation ends, spring gets “snapped” to. Set to
|
6780 | * `0.01` by default.
|
6781 | *
|
6782 | * @library
|
6783 | *
|
6784 | * ```jsx
|
6785 | * const transition = {
|
6786 | * type: "spring",
|
6787 | * restDelta: 0.5
|
6788 | * }
|
6789 | *
|
6790 | * <Frame
|
6791 | * animate={{ rotate: 180 }}
|
6792 | * transition={transition}
|
6793 | * />
|
6794 | * ```
|
6795 | *
|
6796 | * @motion
|
6797 | *
|
6798 | * ```jsx
|
6799 | * <motion.div
|
6800 | * animate={{ rotate: 180 }}
|
6801 | * transition={{ type: 'spring', restDelta: 0.5 }}
|
6802 | * />
|
6803 | * ```
|
6804 | *
|
6805 | * @public
|
6806 | */
|
6807 | restDelta?: number;
|
6808 | /**
|
6809 | * The value to animate from.
|
6810 | * By default, this is the initial state of the animating value.
|
6811 | *
|
6812 | * @library
|
6813 | *
|
6814 | * ```jsx
|
6815 | * const transition = {
|
6816 | * type: "spring",
|
6817 | * from: 90
|
6818 | * }
|
6819 | *
|
6820 | * <Frame
|
6821 | * animate={{ rotate: 180 }}
|
6822 | * transition={transition}
|
6823 | * />
|
6824 | * ```
|
6825 | *
|
6826 | * @motion
|
6827 | *
|
6828 | * ```jsx
|
6829 | * <motion.div
|
6830 | * animate={{ rotate: 180 }}
|
6831 | * transition={{ type: 'spring', from: 90 }}
|
6832 | * />
|
6833 | * ```
|
6834 | *
|
6835 | * @public
|
6836 | */
|
6837 | from?: number | string;
|
6838 | /**
|
6839 | * @internal
|
6840 | */
|
6841 | to?: number | string | ValueTarget;
|
6842 | /**
|
6843 | * The initial velocity of the spring. By default this is the current velocity of the component.
|
6844 | *
|
6845 | * @library
|
6846 | *
|
6847 | * ```jsx
|
6848 | * const transition = {
|
6849 | * type: "spring",
|
6850 | * velocity: 2
|
6851 | * }
|
6852 | *
|
6853 | * <Frame
|
6854 | * animate={{ rotate: 180 }}
|
6855 | * transition={transition}
|
6856 | * />
|
6857 | * ```
|
6858 | *
|
6859 | * @motion
|
6860 | *
|
6861 | * ```jsx
|
6862 | * <motion.div
|
6863 | * animate={{ rotate: 180 }}
|
6864 | * transition={{ type: 'spring', velocity: 2 }}
|
6865 | * />
|
6866 | * ```
|
6867 | *
|
6868 | * @public
|
6869 | */
|
6870 | velocity?: number;
|
6871 | /**
|
6872 | * @internal
|
6873 | */
|
6874 | delay?: number;
|
6875 | }
|
6876 |
|
6877 | declare type StartAnimation = (complete: () => void) => () => void;
|
6878 |
|
6879 | /**
|
6880 | * @public
|
6881 | */
|
6882 | export declare type Subscriber<T> = (v: T) => void;
|
6883 |
|
6884 | /**
|
6885 | * Blanket-accept any SVG attribute as a `MotionValue`
|
6886 | * @public
|
6887 | */
|
6888 | export declare type SVGAttributesAsMotionValues<T> = MakeMotion<SVGAttributesWithoutMotionProps<T>>;
|
6889 |
|
6890 | declare interface SVGAttributesWithoutMotionProps<T> extends Pick<SVGAttributes<T>, Exclude<keyof SVGAttributes<T>, keyof MotionProps>> {
|
6891 | }
|
6892 |
|
6893 | declare type SVGElements = UnionStringArray<typeof svgElements>;
|
6894 |
|
6895 | /**
|
6896 | * @internal
|
6897 | */
|
6898 | declare const svgElements: readonly ["animate", "circle", "clipPath", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "switch", "symbol", "text", "textPath", "tspan", "use", "view"];
|
6899 |
|
6900 | /**
|
6901 | * Motion-optimised versions of React's SVG components.
|
6902 | *
|
6903 | * @public
|
6904 | */
|
6905 | declare type SVGMotionComponents = {
|
6906 | [K in SVGElements]: ForwardRefComponent<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>, SVGMotionProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>>>;
|
6907 | };
|
6908 |
|
6909 | /**
|
6910 | * @public
|
6911 | */
|
6912 | export declare interface SVGMotionProps<T> extends SVGAttributesAsMotionValues<T>, MotionProps {
|
6913 | }
|
6914 |
|
6915 | /**
|
6916 | * @public
|
6917 | */
|
6918 | declare interface SVGPathProperties {
|
6919 | pathLength?: number;
|
6920 | pathOffset?: number;
|
6921 | pathSpacing?: number;
|
6922 | }
|
6923 |
|
6924 | /**
|
6925 | * The exposed API for children to add themselves to the batcher and to flush it.
|
6926 | */
|
6927 | declare interface SyncLayoutBatcher {
|
6928 | add: (child: HTMLVisualElement) => void;
|
6929 | flush: (handler?: SyncLayoutLifecycles) => void;
|
6930 | }
|
6931 |
|
6932 | /**
|
6933 | * Handlers for batching sync layout lifecycles. We batches these processes to cut
|
6934 | * down on layout thrashing
|
6935 | */
|
6936 | declare interface SyncLayoutLifecycles {
|
6937 | measureLayout: (child: HTMLVisualElement) => void;
|
6938 | layoutReady: (child: HTMLVisualElement) => void;
|
6939 | }
|
6940 |
|
6941 | /**
|
6942 | * @public
|
6943 | */
|
6944 | export declare interface TapHandlers {
|
6945 | /**
|
6946 | * Callback when the tap gesture successfully ends on this element.
|
6947 | *
|
6948 | * @library
|
6949 | *
|
6950 | * ```jsx
|
6951 | * function onTap(event, info) {
|
6952 | * console.log(info.point.x, info.point.y)
|
6953 | * }
|
6954 | *
|
6955 | * <Frame onTap={onTap} />
|
6956 | * ```
|
6957 | *
|
6958 | * @motion
|
6959 | *
|
6960 | * ```jsx
|
6961 | * function onTap(event, info) {
|
6962 | * console.log(info.point.x, info.point.y)
|
6963 | * }
|
6964 | *
|
6965 | * <motion.div onTap={onTap} />
|
6966 | * ```
|
6967 | *
|
6968 | * @param event - The originating pointer event.
|
6969 | * @param info - An {@link TapInfo} object containing `x` and `y` values for the `point` relative to the device or page.
|
6970 | */
|
6971 | onTap?(event: MouseEvent | TouchEvent | PointerEvent, info: TapInfo): void;
|
6972 | /**
|
6973 | * Callback when the tap gesture starts on this element.
|
6974 | *
|
6975 | * @library
|
6976 | *
|
6977 | * ```jsx
|
6978 | * function onTapStart(event, info) {
|
6979 | * console.log(info.point.x, info.point.y)
|
6980 | * }
|
6981 | *
|
6982 | * <Frame onTapStart={onTapStart} />
|
6983 | * ```
|
6984 | *
|
6985 | * @motion
|
6986 | *
|
6987 | * ```jsx
|
6988 | * function onTapStart(event, info) {
|
6989 | * console.log(info.point.x, info.point.y)
|
6990 | * }
|
6991 | *
|
6992 | * <motion.div onTapStart={onTapStart} />
|
6993 | * ```
|
6994 | *
|
6995 | * @param event - The originating pointer event.
|
6996 | * @param info - An {@link TapInfo} object containing `x` and `y` values for the `point` relative to the device or page.
|
6997 | */
|
6998 | onTapStart?(event: MouseEvent | TouchEvent | PointerEvent, info: TapInfo): void;
|
6999 | /**
|
7000 | * Callback when the tap gesture ends outside this element.
|
7001 | *
|
7002 | * @library
|
7003 | *
|
7004 | * ```jsx
|
7005 | * function onTapCancel(event, info) {
|
7006 | * console.log(info.point.x, info.point.y)
|
7007 | * }
|
7008 | *
|
7009 | * <Frame onTapCancel={onTapCancel} />
|
7010 | * ```
|
7011 | *
|
7012 | * @motion
|
7013 | *
|
7014 | * ```jsx
|
7015 | * function onTapCancel(event, info) {
|
7016 | * console.log(info.point.x, info.point.y)
|
7017 | * }
|
7018 | *
|
7019 | * <motion.div onTapCancel={onTapCancel} />
|
7020 | * ```
|
7021 | *
|
7022 | * @param event - The originating pointer event.
|
7023 | * @param info - An {@link TapInfo} object containing `x` and `y` values for the `point` relative to the device or page.
|
7024 | */
|
7025 | onTapCancel?(event: MouseEvent | TouchEvent | PointerEvent, info: TapInfo): void;
|
7026 | /**
|
7027 | * Properties or variant label to animate to while the component is pressed.
|
7028 | *
|
7029 | * @library
|
7030 | *
|
7031 | * ```jsx
|
7032 | * <Frame whileTap={{ scale: 0.8 }} />
|
7033 | * ```
|
7034 | *
|
7035 | * @motion
|
7036 | *
|
7037 | * ```jsx
|
7038 | * <motion.div whileTap={{ scale: 0.8 }} />
|
7039 | * ```
|
7040 | */
|
7041 | whileTap?: string | TargetAndTransition;
|
7042 | }
|
7043 |
|
7044 | /**
|
7045 | * Passed in to tap event handlers like `onTap` the `TapInfo` object contains
|
7046 | * information about the tap gesture such as it‘s location.
|
7047 | *
|
7048 | * @library
|
7049 | *
|
7050 | * ```jsx
|
7051 | * function onTap(event, info) {
|
7052 | * console.log(info.point.x, info.point.y)
|
7053 | * }
|
7054 | *
|
7055 | * <Frame onTap={onTap} />
|
7056 | * ```
|
7057 | *
|
7058 | * @motion
|
7059 | *
|
7060 | * ```jsx
|
7061 | * function onTap(event, info) {
|
7062 | * console.log(info.point.x, info.point.y)
|
7063 | * }
|
7064 | *
|
7065 | * <motion.div onTap={onTap} />
|
7066 | * ```
|
7067 | *
|
7068 | * @public
|
7069 | */
|
7070 | export declare interface TapInfo {
|
7071 | /**
|
7072 | * Contains `x` and `y` values for the tap gesture relative to the
|
7073 | * device or page.
|
7074 | *
|
7075 | * @library
|
7076 | *
|
7077 | * ```jsx
|
7078 | * function onTapStart(event, info) {
|
7079 | * console.log(info.point.x, info.point.y)
|
7080 | * }
|
7081 | *
|
7082 | * <Frame onTapStart={onTapStart} />
|
7083 | * ```
|
7084 | *
|
7085 | * @motion
|
7086 | *
|
7087 | * ```jsx
|
7088 | * function onTapStart(event, info) {
|
7089 | * console.log(info.point.x, info.point.y)
|
7090 | * }
|
7091 | *
|
7092 | * <motion.div onTapStart={onTapStart} />
|
7093 | * ```
|
7094 | *
|
7095 | * @public
|
7096 | */
|
7097 | point: Point;
|
7098 | }
|
7099 |
|
7100 | declare type Target = MakeCustomValueType<TargetProperties>;
|
7101 |
|
7102 | /**
|
7103 | * An object that specifies values to animate to. Each value may be set either as
|
7104 | * a single value, or an array of values.
|
7105 | *
|
7106 | * It may also option contain these properties:
|
7107 | *
|
7108 | * - `transition`: Specifies transitions for all or individual values.
|
7109 | * - `transitionEnd`: Specifies values to set when the animation finishes.
|
7110 | *
|
7111 | * ```jsx
|
7112 | * const target = {
|
7113 | * x: "0%",
|
7114 | * opacity: 0,
|
7115 | * transition: { duration: 1 },
|
7116 | * transitionEnd: { display: "none" }
|
7117 | * }
|
7118 | * ```
|
7119 | *
|
7120 | * @public
|
7121 | */
|
7122 | export declare type TargetAndTransition = TargetWithKeyframes & {
|
7123 | transition?: Transition;
|
7124 | transitionEnd?: Target;
|
7125 | };
|
7126 |
|
7127 | declare type TargetProperties = CSSPropertiesWithoutTransitionOrSingleTransforms & SVGAttributes<SVGElement> & TransformProperties & CustomStyles;
|
7128 |
|
7129 | declare type TargetResolver = (custom: any, current: Target, velocity: Target) => TargetAndTransition;
|
7130 |
|
7131 | declare type TargetWithKeyframes = MakeKeyframes<Target>;
|
7132 |
|
7133 | /**
|
7134 | * Transforms numbers into other values by mapping them from an input range to an output range.
|
7135 | * Returns the type of the input provided.
|
7136 | *
|
7137 | * @remarks
|
7138 | *
|
7139 | * Given an input range of `[0, 200]` and an output range of
|
7140 | * `[0, 1]`, this function will return a value between `0` and `1`.
|
7141 | * The input range must be a linear series of numbers. The output range
|
7142 | * can be any supported value type, such as numbers, colors, shadows, arrays, objects and more.
|
7143 | * Every value in the output range must be of the same type and in the same format.
|
7144 | *
|
7145 | * @library
|
7146 | *
|
7147 | * ```jsx
|
7148 | * import * as React from "react"
|
7149 | * import { Frame, transform } from "framer"
|
7150 | *
|
7151 | * export function MyComponent() {
|
7152 | * const inputRange = [0, 200]
|
7153 | * const outputRange = [0, 1]
|
7154 | * const output = transform(100, inputRange, outputRange)
|
7155 | *
|
7156 | *
|
7157 | * return <Frame>{output}</Frame>
|
7158 | * }
|
7159 | * ```
|
7160 | *
|
7161 | * @motion
|
7162 | *
|
7163 | * ```jsx
|
7164 | * import * as React from "react"
|
7165 | * import { transform } from "framer-motion"
|
7166 | *
|
7167 | * export function MyComponent() {
|
7168 | * const inputRange = [0, 200]
|
7169 | * const outputRange = [0, 1]
|
7170 | * const output = transform(100, inputRange, outputRange)
|
7171 | *
|
7172 | *
|
7173 | * return <div>{output}</div>
|
7174 | * }
|
7175 | * ```
|
7176 | *
|
7177 | * @param inputValue - A number to transform between the input and output ranges.
|
7178 | * @param inputRange - A linear series of numbers (either all increasing or decreasing).
|
7179 | * @param outputRange - A series of numbers, colors, strings, or arrays/objects of those. Must be the same length as `inputRange`.
|
7180 | * @param options - Clamp: Clamp values to within the given range. Defaults to `true`.
|
7181 | *
|
7182 | * @public
|
7183 | */
|
7184 | export declare function transform<T>(inputValue: number, inputRange: number[], outputRange: T[], options?: TransformOptions<T>): T;
|
7185 |
|
7186 | /**
|
7187 | * @library
|
7188 | *
|
7189 | * For improved performance, `transform` can pre-calculate the function that will transform a value between two ranges.
|
7190 | * Returns a function.
|
7191 | *
|
7192 | * ```jsx
|
7193 | * import * as React from "react"
|
7194 | * import { Frame, transform } from "framer"
|
7195 | *
|
7196 | * export function MyComponent() {
|
7197 | * const inputRange = [-200, -100, 100, 200]
|
7198 | * const outputRange = [0, 1, 1, 0]
|
7199 | * const convertRange = transform(inputRange, outputRange)
|
7200 | * const output = convertRange(-150)
|
7201 | *
|
7202 | *
|
7203 | * return <Frame>{output}</Frame>
|
7204 | * }
|
7205 | *
|
7206 | * ```
|
7207 | *
|
7208 | * @motion
|
7209 | *
|
7210 | * Transforms numbers into other values by mapping them from an input range to an output range.
|
7211 | *
|
7212 | * Given an input range of `[0, 200]` and an output range of
|
7213 | * `[0, 1]`, this function will return a value between `0` and `1`.
|
7214 | * The input range must be a linear series of numbers. The output range
|
7215 | * can be any supported value type, such as numbers, colors, shadows, arrays, objects and more.
|
7216 | * Every value in the output range must be of the same type and in the same format.
|
7217 | *
|
7218 | * ```jsx
|
7219 | * import * as React from "react"
|
7220 | * import { Frame, transform } from "framer"
|
7221 | *
|
7222 | * export function MyComponent() {
|
7223 | * const inputRange = [-200, -100, 100, 200]
|
7224 | * const outputRange = [0, 1, 1, 0]
|
7225 | * const convertRange = transform(inputRange, outputRange)
|
7226 | * const output = convertRange(-150)
|
7227 | *
|
7228 | *
|
7229 | * return <div>{output}</div>
|
7230 | * }
|
7231 | *
|
7232 | * ```
|
7233 | *
|
7234 | * @param inputRange - A linear series of numbers (either all increasing or decreasing).
|
7235 | * @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
|
7236 | * @param options - Clamp: clamp values to within the given range. Defaults to `true`.
|
7237 | *
|
7238 | * @public
|
7239 | */
|
7240 | export declare function transform<T>(inputRange: number[], outputRange: T[], options?: TransformOptions<T>): (inputValue: number) => T;
|
7241 |
|
7242 | declare type Transformer<T> = (v: any) => T;
|
7243 |
|
7244 | /**
|
7245 | * @public
|
7246 | */
|
7247 | declare interface TransformOptions<T> {
|
7248 | /**
|
7249 | * Clamp values to within the given range. Defaults to `true`
|
7250 | *
|
7251 | * @public
|
7252 | */
|
7253 | clamp?: boolean;
|
7254 | /**
|
7255 | * Easing functions to use on the interpolations between each value in the input and output ranges.
|
7256 | *
|
7257 | * If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition **between** each.
|
7258 | *
|
7259 | * @public
|
7260 | */
|
7261 | ease?: Easing_2 | Easing_2[];
|
7262 | /**
|
7263 | * @internal
|
7264 | */
|
7265 | mixer?: (from: T, to: T) => (v: number) => any;
|
7266 | }
|
7267 |
|
7268 | declare interface TransformOrigin {
|
7269 | originX?: number;
|
7270 | originY?: number;
|
7271 | originZ?: number;
|
7272 | }
|
7273 |
|
7274 | /**
|
7275 | * A function that accepts a two-dimensional point and returns a new one.
|
7276 | *
|
7277 | * @public
|
7278 | */
|
7279 | export declare type TransformPoint2D = (point: Point2D) => Point2D;
|
7280 |
|
7281 | declare interface TransformProperties {
|
7282 | x?: string | number;
|
7283 | y?: string | number;
|
7284 | z?: string | number;
|
7285 | translateX?: string | number;
|
7286 | translateY?: string | number;
|
7287 | translateZ?: string | number;
|
7288 | rotate?: string | number;
|
7289 | rotateX?: string | number;
|
7290 | rotateY?: string | number;
|
7291 | rotateZ?: string | number;
|
7292 | scale?: string | number;
|
7293 | scaleX?: string | number;
|
7294 | scaleY?: string | number;
|
7295 | scaleZ?: string | number;
|
7296 | skew?: string | number;
|
7297 | skewX?: string | number;
|
7298 | skewY?: string | number;
|
7299 | originX?: string | number;
|
7300 | originY?: string | number;
|
7301 | originZ?: string | number;
|
7302 | perspective?: string | number;
|
7303 | }
|
7304 |
|
7305 | /**
|
7306 | * Transition props
|
7307 | *
|
7308 | * @public
|
7309 | */
|
7310 | export declare type Transition = (Orchestration & TransitionDefinition) | (Orchestration & TransitionMap);
|
7311 |
|
7312 | /**
|
7313 | * @public
|
7314 | */
|
7315 | declare type TransitionDefinition = Tween | Spring | Keyframes | Inertia | Just | None | PermissiveTransitionDefinition;
|
7316 |
|
7317 | declare type TransitionMap = Orchestration & {
|
7318 | [key: string]: TransitionDefinition;
|
7319 | };
|
7320 |
|
7321 | /**
|
7322 | * An animation that animates between two or more values over a specific duration of time.
|
7323 | * This is the default animation for non-physical values like `color` and `opacity`.
|
7324 | *
|
7325 | * @public
|
7326 | */
|
7327 | export declare interface Tween {
|
7328 | /**
|
7329 | * Set `type` to `"tween"` to use a duration-based tween animation.
|
7330 | * If any non-orchestration `transition` values are set without a `type` property,
|
7331 | * this is used as the default animation.
|
7332 | *
|
7333 | * @library
|
7334 | *
|
7335 | * ```jsx
|
7336 | * <Frame
|
7337 | * animate={{ opacity: 0 }}
|
7338 | * transition={{ duration: 2, type: "tween" }}
|
7339 | * />
|
7340 | * ```
|
7341 | *
|
7342 | * @motion
|
7343 | *
|
7344 | * ```jsx
|
7345 | * <motion.path
|
7346 | * animate={{ pathLength: 1 }}
|
7347 | * transition={{ duration: 2, type: "tween" }}
|
7348 | * />
|
7349 | * ```
|
7350 | *
|
7351 | * @public
|
7352 | */
|
7353 | type?: "tween";
|
7354 | /**
|
7355 | * The duration of the tween animation. Set to `0.3` by default, 0r `0.8` if animating a series of keyframes.
|
7356 | *
|
7357 | * @library
|
7358 | *
|
7359 | * ```jsx
|
7360 | * <Frame
|
7361 | * animate={{ opacity: 0 }}
|
7362 | * transition={{ duration: 2 }}
|
7363 | * />
|
7364 | * ```
|
7365 | *
|
7366 | * @motion
|
7367 | *
|
7368 | * ```jsx
|
7369 | * const variants = {
|
7370 | * visible: {
|
7371 | * opacity: 1,
|
7372 | * transition: { duration: 2 }
|
7373 | * }
|
7374 | * }
|
7375 | * ```
|
7376 | *
|
7377 | * @public
|
7378 | */
|
7379 | duration?: number;
|
7380 | /**
|
7381 | * The easing function to use. Set as one of the below.
|
7382 | *
|
7383 | * - The name of an existing easing function.
|
7384 | * - An array of four numbers to define a cubic bezier curve.
|
7385 | * - An easing function, that accepts and returns a value `0-1`.
|
7386 | *
|
7387 | * If the animating value is set as an array of multiple values for a keyframes
|
7388 | * animation, `ease` can be set as an array of easing functions to set different easings between
|
7389 | * each of those values.
|
7390 | *
|
7391 | * @library
|
7392 | *
|
7393 | * ```jsx
|
7394 | * const transition = {
|
7395 | * ease: [0.17, 0.67, 0.83, 0.67]
|
7396 | * }
|
7397 | *
|
7398 | * <Frame
|
7399 | * animate={{ opacity: 0 }}
|
7400 | * transition={transition}
|
7401 | * />
|
7402 | * ```
|
7403 | *
|
7404 | * @motion
|
7405 | *
|
7406 | * ```jsx
|
7407 | * <motion.div
|
7408 | * animate={{ opacity: 0 }}
|
7409 | * transition={{ ease: [0.17, 0.67, 0.83, 0.67] }}
|
7410 | * />
|
7411 | * ```
|
7412 | *
|
7413 | * @public
|
7414 | */
|
7415 | ease?: Easing | Easing[];
|
7416 | /**
|
7417 | * The duration of time already elapsed in the animation. Set to `0` by
|
7418 | * default.
|
7419 | *
|
7420 | * @internal
|
7421 | */
|
7422 | elapsed?: number;
|
7423 | /**
|
7424 | * When animating keyframes, `times` can be used to determine where in the animation each keyframe is reached.
|
7425 | * Each value in `times` is a value between `0` and `1`, representing `duration`.
|
7426 | *
|
7427 | * There must be the same number of `times` as there are keyframes.
|
7428 | * Defaults to an array of evenly-spread durations.
|
7429 | *
|
7430 | * @library
|
7431 | *
|
7432 | * ```jsx
|
7433 | * const transition = {
|
7434 | * times: [0, 0.1, 0.9, 1]
|
7435 | * }
|
7436 | *
|
7437 | * <Frame
|
7438 | * animate={{ scale: [0, 1, 0.5, 1] }}
|
7439 | * transition={transition}
|
7440 | * />
|
7441 | * ```
|
7442 | *
|
7443 | * @motion
|
7444 | *
|
7445 | * ```jsx
|
7446 | * <motion.div
|
7447 | * animate={{ scale: [0, 1, 0.5, 1] }}
|
7448 | * transition={{ times: [0, 0.1, 0.9, 1] }}
|
7449 | * />
|
7450 | * ```
|
7451 | *
|
7452 | * @public
|
7453 | */
|
7454 | times?: number[];
|
7455 | /**
|
7456 | * When animating keyframes, `easings` can be used to define easing functions between each keyframe. This array should be one item fewer than the number of keyframes, as these easings apply to the transitions between the keyframes.
|
7457 | *
|
7458 | * @library
|
7459 | *
|
7460 | * ```jsx
|
7461 | * const transition = {
|
7462 | * easings: ["easeIn", "easeOut"]
|
7463 | * }
|
7464 | *
|
7465 | * <Frame
|
7466 | * animate={{ backgroundColor: ["#0f0", "#00f", "#f00"] }}
|
7467 | * transition={transition}
|
7468 | * />
|
7469 | * ```
|
7470 | *
|
7471 | * @motion
|
7472 | *
|
7473 | * ```jsx
|
7474 | * <motion.div
|
7475 | * animate={{ backgroundColor: ["#0f0", "#00f", "#f00"] }}
|
7476 | * transition={{ easings: ["easeIn", "easeOut"] }}
|
7477 | * />
|
7478 | * ```
|
7479 | *
|
7480 | * @public
|
7481 | */
|
7482 | easings?: Easing[];
|
7483 | /**
|
7484 | * The number of times to loop the animation.
|
7485 | * Set to `Infinity` for perpetual looping.
|
7486 | *
|
7487 | * @library
|
7488 | *
|
7489 | * ```jsx
|
7490 | * const transition = {
|
7491 | * loop: Infinity,
|
7492 | * ease: "linear",
|
7493 | * duration: 2
|
7494 | * }
|
7495 | *
|
7496 | * <Frame
|
7497 | * animate={{ rotate: 360 }}
|
7498 | * transition={transition}
|
7499 | * />
|
7500 | * ```
|
7501 | *
|
7502 | * @motion
|
7503 | *
|
7504 | * ```jsx
|
7505 | * <motion.div
|
7506 | * animate={{ rotate: 360 }}
|
7507 | * transition={{
|
7508 | * loop: Infinity,
|
7509 | * ease: "linear",
|
7510 | * duration: 2
|
7511 | * }}
|
7512 | * />
|
7513 | * ```
|
7514 | *
|
7515 | * @public
|
7516 | */
|
7517 | loop?: number;
|
7518 | /**
|
7519 | * The number of times to flip the animation by swapping the `to` and `from` values.
|
7520 | * Set to `Infinity` for perpetual flipping.
|
7521 | *
|
7522 | * @library
|
7523 | *
|
7524 | * ```jsx
|
7525 | * const transition = {
|
7526 | * flip: Infinity,
|
7527 | * duration: 2
|
7528 | * }
|
7529 | *
|
7530 | * <Frame
|
7531 | * animate={{ opacity: 0 }}
|
7532 | * transition={transition}
|
7533 | * />
|
7534 | * ```
|
7535 | *
|
7536 | * @motion
|
7537 | *
|
7538 | * ```jsx
|
7539 | * <motion.div
|
7540 | * animate={{ opacity: 0 }}
|
7541 | * transition={{ flip: Infinity, duration: 2 }}
|
7542 | * />
|
7543 | * ```
|
7544 | *
|
7545 | * @public
|
7546 | */
|
7547 | flip?: number;
|
7548 | /**
|
7549 | * The number of times to reverse the animation.
|
7550 | * Set to `Infinity` for perpetual reversing.
|
7551 | *
|
7552 | * @library
|
7553 | *
|
7554 | * ```jsx
|
7555 | * const transition = {
|
7556 | * yoyo: Infinity,
|
7557 | * duration: 2
|
7558 | * }
|
7559 | *
|
7560 | * <Frame
|
7561 | * animate={{ rotate: 180 }}
|
7562 | * transition={transition}
|
7563 | * />
|
7564 | * ```
|
7565 | *
|
7566 | * @motion
|
7567 | *
|
7568 | * ```jsx
|
7569 | * <motion.div
|
7570 | * animate={{ rotate: 180 }}
|
7571 | * transition={{ yoyo: Infinity, duration: 2 }}
|
7572 | * />
|
7573 | * ```
|
7574 | *
|
7575 | * @public
|
7576 | */
|
7577 | yoyo?: number;
|
7578 | /**
|
7579 | * When repeating an animation using `loop`, `flip`, or `yoyo`, `repeatDelay` can set the
|
7580 | * duration of the time to wait, in seconds, between each repetition.
|
7581 | *
|
7582 | * @library
|
7583 | *
|
7584 | * ```jsx
|
7585 | * const transition = {
|
7586 | * yoyo: Infinity,
|
7587 | * repeatDelay: 1
|
7588 | * }
|
7589 | *
|
7590 | * <Frame
|
7591 | * animate={{ rotate: 180 }}
|
7592 | * transition={transition}
|
7593 | * />
|
7594 | * ```
|
7595 | *
|
7596 | * @motion
|
7597 | *
|
7598 | * ```jsx
|
7599 | * <motion.div
|
7600 | * animate={{ rotate: 180 }}
|
7601 | * transition={{ yoyo: Infinity, repeatDelay: 1 }}
|
7602 | * />
|
7603 | * ```
|
7604 | *
|
7605 | *
|
7606 | * @public
|
7607 | */
|
7608 | repeatDelay?: number;
|
7609 | /**
|
7610 | * The value to animate from.
|
7611 | * By default, this is the current state of the animating value.
|
7612 | *
|
7613 | * @library
|
7614 | *
|
7615 | * ```jsx
|
7616 | * const transition = {
|
7617 | * from: 90,
|
7618 | * duration: 2
|
7619 | * }
|
7620 | *
|
7621 | * <Frame
|
7622 | * animate={{ rotate: 180 }}
|
7623 | * transition={transition}
|
7624 | * />
|
7625 | * ```
|
7626 | *
|
7627 | * @motion
|
7628 | *
|
7629 | * ```jsx
|
7630 | * <motion.div
|
7631 | * animate={{ rotate: 180 }}
|
7632 | * transition={{ from: 90, duration: 2 }}
|
7633 | * />
|
7634 | * ```
|
7635 | *
|
7636 | * @public
|
7637 | */
|
7638 | from?: number | string;
|
7639 | /**
|
7640 | * @internal
|
7641 | */
|
7642 | to?: number | string | ValueTarget;
|
7643 | /**
|
7644 | * @internal
|
7645 | */
|
7646 | velocity?: number;
|
7647 | /**
|
7648 | * @internal
|
7649 | */
|
7650 | delay?: number;
|
7651 | }
|
7652 |
|
7653 | declare type UnionStringArray<T extends Readonly<string[]>> = T[number];
|
7654 |
|
7655 | /**
|
7656 | * Support for React component props
|
7657 | */
|
7658 | declare type UnwrapFactoryAttributes<F> = F extends DetailedHTMLFactory<infer P, any> ? P : never;
|
7659 |
|
7660 | declare type UnwrapFactoryElement<F> = F extends DetailedHTMLFactory<any, infer P> ? P : never;
|
7661 |
|
7662 | declare type UnwrapSVGFactoryElement<F> = F extends React_2.SVGProps<infer P> ? P : never;
|
7663 |
|
7664 | /**
|
7665 | * This is not an officially supported API and may be removed
|
7666 | * on any version.
|
7667 | * @internal
|
7668 | */
|
7669 | export declare function useAnimatedState(initialState: any): any[];
|
7670 |
|
7671 | /**
|
7672 | * Creates `AnimationControls`, which can be used to manually start, stop
|
7673 | * and sequence animations on one or more components.
|
7674 | *
|
7675 | * The returned `AnimationControls` should be passed to the `animate` property
|
7676 | * of the components you want to animate.
|
7677 | *
|
7678 | * These components can then be animated with the `start` method.
|
7679 | *
|
7680 | * @library
|
7681 | *
|
7682 | * ```jsx
|
7683 | * import * as React from 'react'
|
7684 | * import { Frame, useAnimation } from 'framer'
|
7685 | *
|
7686 | * export function MyComponent(props) {
|
7687 | * const controls = useAnimation()
|
7688 | *
|
7689 | * controls.start({
|
7690 | * x: 100,
|
7691 | * transition: { duration: 0.5 },
|
7692 | * })
|
7693 | *
|
7694 | * return <Frame animate={controls} />
|
7695 | * }
|
7696 | * ```
|
7697 | *
|
7698 | * @motion
|
7699 | *
|
7700 | * ```jsx
|
7701 | * import * as React from 'react'
|
7702 | * import { motion, useAnimation } from 'framer-motion'
|
7703 | *
|
7704 | * export function MyComponent(props) {
|
7705 | * const controls = useAnimation()
|
7706 | *
|
7707 | * controls.start({
|
7708 | * x: 100,
|
7709 | * transition: { duration: 0.5 },
|
7710 | * })
|
7711 | *
|
7712 | * return <motion.div animate={controls} />
|
7713 | * }
|
7714 | * ```
|
7715 | *
|
7716 | * @returns Animation controller with `start` and `stop` methods
|
7717 | *
|
7718 | * @public
|
7719 | */
|
7720 | export declare function useAnimation(): AnimationControls;
|
7721 |
|
7722 | /**
|
7723 | * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
|
7724 | *
|
7725 | * @library
|
7726 | *
|
7727 | * ```jsx
|
7728 | * import * as React from "react"
|
7729 | * import { Frame, useCycle } from "framer"
|
7730 | *
|
7731 | * export function MyComponent() {
|
7732 | * const [x, cycleX] = useCycle(0, 50, 100)
|
7733 | *
|
7734 | * return (
|
7735 | * <Frame
|
7736 | * animate={{ x: x }}
|
7737 | * onTap={() => cycleX()}
|
7738 | * />
|
7739 | * )
|
7740 | * }
|
7741 | * ```
|
7742 | *
|
7743 | * @motion
|
7744 | *
|
7745 | * An index value can be passed to the returned `cycle` function to cycle to a specific index.
|
7746 | *
|
7747 | * ```jsx
|
7748 | * import * as React from "react"
|
7749 | * import { motion, useCycle } from "framer-motion"
|
7750 | *
|
7751 | * export const MyComponent = () => {
|
7752 | * const [x, cycleX] = useCycle(0, 50, 100)
|
7753 | *
|
7754 | * return (
|
7755 | * <motion.div
|
7756 | * animate={{ x: x }}
|
7757 | * onTap={() => cycleX()}
|
7758 | * />
|
7759 | * )
|
7760 | * }
|
7761 | * ```
|
7762 | *
|
7763 | * @param items - items to cycle through
|
7764 | * @returns [currentState, cycleState]
|
7765 | *
|
7766 | * @public
|
7767 | */
|
7768 | export declare function useCycle<T>(...items: T[]): CycleState<T>;
|
7769 |
|
7770 | /**
|
7771 | * Attaches an event listener directly to the provided DOM element.
|
7772 | *
|
7773 | * Bypassing React's event system can be desirable, for instance when attaching non-passive
|
7774 | * event handlers.
|
7775 | *
|
7776 | * ```jsx
|
7777 | * const ref = useRef(null)
|
7778 | *
|
7779 | * useDomEvent(ref, 'wheel', onWheel, { passive: false })
|
7780 | *
|
7781 | * return <div ref={ref} />
|
7782 | * ```
|
7783 | *
|
7784 | * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
|
7785 | * @param eventName - Name of the event you want listen for.
|
7786 | * @param handler - Function to fire when receiving the event.
|
7787 | * @param options - Options to pass to `Event.addEventListener`.
|
7788 | *
|
7789 | * @public
|
7790 | */
|
7791 | export declare function useDomEvent(ref: RefObject<Element>, eventName: string, handler?: EventListener | undefined, options?: AddEventListenerOptions): void;
|
7792 |
|
7793 | /**
|
7794 | * Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
|
7795 | * and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
|
7796 | * might want to initiate that dragging from a different component than the draggable one.
|
7797 | *
|
7798 | * By creating a `dragControls` using the `useDragControls` hook, we can pass this into
|
7799 | * the draggable component's `dragControls` prop. It exposes a `start` method
|
7800 | * that can start dragging from pointer events on other components.
|
7801 | *
|
7802 | * @library
|
7803 | *
|
7804 | * ```jsx
|
7805 | * const dragControls = useDragControls()
|
7806 | *
|
7807 | * function startDrag(event) {
|
7808 | * dragControls.start(event, { snapToCursor: true })
|
7809 | * }
|
7810 | *
|
7811 | * return (
|
7812 | * <>
|
7813 | * <Frame onTapStart={startDrag} />
|
7814 | * <Frame drag="x" dragControls={dragControls} />
|
7815 | * </>
|
7816 | * )
|
7817 | * ```
|
7818 | *
|
7819 | * @motion
|
7820 | *
|
7821 | * ```jsx
|
7822 | * const dragControls = useDragControls()
|
7823 | *
|
7824 | * function startDrag(event) {
|
7825 | * dragControls.start(event, { snapToCursor: true })
|
7826 | * }
|
7827 | *
|
7828 | * return (
|
7829 | * <>
|
7830 | * <div onMouseDown={startDrag} />
|
7831 | * <motion.div drag="x" dragControls={dragControls} />
|
7832 | * </>
|
7833 | * )
|
7834 | * ```
|
7835 | *
|
7836 | * @public
|
7837 | */
|
7838 | export declare function useDragControls(): DragControls;
|
7839 |
|
7840 | /**
|
7841 | * Returns MotionValues that update when the provided element scrolls:
|
7842 | *
|
7843 | * - `scrollX` — Horizontal scroll distance in pixels.
|
7844 | * - `scrollY` — Vertical scroll distance in pixels.
|
7845 | * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
|
7846 | * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
|
7847 | *
|
7848 | * This element must be set to `overflow: scroll` on either or both axes to report scroll offset.
|
7849 | *
|
7850 | * @library
|
7851 | *
|
7852 | * ```jsx
|
7853 | * import * as React from "react"
|
7854 | * import {
|
7855 | * Frame,
|
7856 | * useElementScroll,
|
7857 | * useTransform
|
7858 | * } from "framer"
|
7859 | *
|
7860 | * export function MyComponent() {
|
7861 | * const ref = React.useRef()
|
7862 | * const { scrollYProgress } = useElementScroll(ref)
|
7863 | *
|
7864 | * return (
|
7865 | * <Frame ref={ref}>
|
7866 | * <Frame scaleX={scrollYProgress} />
|
7867 | * </Frame>
|
7868 | * )
|
7869 | * }
|
7870 | * ```
|
7871 | *
|
7872 | * @motion
|
7873 | *
|
7874 | * ```jsx
|
7875 | * export const MyComponent = () => {
|
7876 | * const ref = useRef()
|
7877 | * const { scrollYProgress } = useElementScroll(ref)
|
7878 | *
|
7879 | * return (
|
7880 | * <div ref={ref}>
|
7881 | * <motion.div style={{ scaleX: scrollYProgress }} />
|
7882 | * </div>
|
7883 | * )
|
7884 | * }
|
7885 | * ```
|
7886 | *
|
7887 | * @public
|
7888 | */
|
7889 | export declare function useElementScroll(ref: RefObject<HTMLElement>): ScrollMotionValues;
|
7890 |
|
7891 | /**
|
7892 | * Uses the ref that is passed in, or creates a new one
|
7893 | * @param external - External ref
|
7894 | * @internal
|
7895 | */
|
7896 | export declare function useExternalRef<E = Element>(externalRef?: Ref<E>): RefObject<E>;
|
7897 |
|
7898 | /**
|
7899 | * Add pan and tap gesture recognition to an element.
|
7900 | *
|
7901 | * @param props - Gesture event handlers
|
7902 | * @param ref - React `ref` containing a DOM `Element`
|
7903 | * @public
|
7904 | */
|
7905 | export declare function useGestures<GestureHandlers>(props: GestureHandlers, ref: VisualElement): void;
|
7906 |
|
7907 | /**
|
7908 | * Returns a `MotionValue` each for `scaleX` and `scaleY` that update with the inverse
|
7909 | * of their respective parent scales.
|
7910 | *
|
7911 | * This is useful for undoing the distortion of content when scaling a parent component.
|
7912 | *
|
7913 | * By default, `useInvertedScale` will automatically fetch `scaleX` and `scaleY` from the nearest parent.
|
7914 | * By passing other `MotionValue`s in as `useInvertedScale({ scaleX, scaleY })`, it will invert the output
|
7915 | * of those instead.
|
7916 | *
|
7917 | * @motion
|
7918 | *
|
7919 | * ```jsx
|
7920 | * const MyComponent = () => {
|
7921 | * const { scaleX, scaleY } = useInvertedScale()
|
7922 | * return <motion.div style={{ scaleX, scaleY }} />
|
7923 | * }
|
7924 | * ```
|
7925 | *
|
7926 | * @library
|
7927 | *
|
7928 | * ```jsx
|
7929 | * function MyComponent() {
|
7930 | * const { scaleX, scaleY } = useInvertedScale()
|
7931 | * return <Frame scaleX={scaleX} scaleY={scaleY} />
|
7932 | * }
|
7933 | * ```
|
7934 | *
|
7935 | * @public
|
7936 | */
|
7937 | export declare function useInvertedScale(scale?: Partial<ScaleMotionValues>): ScaleMotionValues;
|
7938 |
|
7939 | /**
|
7940 | * @public
|
7941 | */
|
7942 | export declare function useIsPresent(): boolean;
|
7943 |
|
7944 | /**
|
7945 | * Creates a `MotionValue` to track the state and velocity of a value.
|
7946 | *
|
7947 | * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
|
7948 | *
|
7949 | * @library
|
7950 | *
|
7951 | * ```jsx
|
7952 | * export function MyComponent() {
|
7953 | * const scale = useMotionValue(1)
|
7954 | *
|
7955 | * return <Frame scale={scale} />
|
7956 | * }
|
7957 | * ```
|
7958 | *
|
7959 | * @motion
|
7960 | *
|
7961 | * ```jsx
|
7962 | * export const MyComponent = () => {
|
7963 | * const scale = useMotionValue(1)
|
7964 | *
|
7965 | * return <motion.div style={{ scale }} />
|
7966 | * }
|
7967 | * ```
|
7968 | *
|
7969 | * @param initial - The initial state.
|
7970 | *
|
7971 | * @public
|
7972 | */
|
7973 | export declare function useMotionValue<T>(initial: T): MotionValue<T>;
|
7974 |
|
7975 | /**
|
7976 | *
|
7977 | * @param handlers -
|
7978 | * @param ref -
|
7979 | *
|
7980 | * @internalremarks
|
7981 | * Currently this sets new pan gesture functions every render. The memo route has been explored
|
7982 | * in the past but ultimately we're still creating new functions every render. An optimisation
|
7983 | * to explore is creating the pan gestures and loading them into a `ref`.
|
7984 | *
|
7985 | * @internal
|
7986 | */
|
7987 | export declare function usePanGesture({ onPan, onPanStart, onPanEnd, onPanSessionStart }: PanHandlers, ref: RefObject<Element> | VisualElement): void;
|
7988 |
|
7989 | /**
|
7990 | * When a component is the child of `AnimatePresence`, it can use `usePresence`
|
7991 | * to access information about whether it's still present in the React tree.
|
7992 | *
|
7993 | * ```jsx
|
7994 | * import { usePresence } from "framer-motion"
|
7995 | *
|
7996 | * export const Component = () => {
|
7997 | * const [isPresent, safeToRemove] = usePresence()
|
7998 | *
|
7999 | * useEffect(() => {
|
8000 | * !isPresent setTimeout(safeToRemove, 1000)
|
8001 | * }, [isPresent])
|
8002 | *
|
8003 | * return <div />
|
8004 | * }
|
8005 | * ```
|
8006 | *
|
8007 | * If `isPresent` is `false`, it means that a component has been removed the tree, but
|
8008 | * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
|
8009 | *
|
8010 | * @public
|
8011 | */
|
8012 | export declare function usePresence(): AlwaysPresent | Present | NotPresent;
|
8013 |
|
8014 | /**
|
8015 | * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
|
8016 | *
|
8017 | * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
|
8018 | * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
|
8019 | *
|
8020 | * It will actively respond to changes and re-render your components with the latest setting.
|
8021 | *
|
8022 | * ```jsx
|
8023 | * export function Sidebar({ isOpen }) {
|
8024 | * const shouldReduceMotion = useReducedMotion()
|
8025 | * const closedX = shouldReduceMotion ? 0 : "-100%"
|
8026 | *
|
8027 | * return (
|
8028 | * <motion.div animate={{
|
8029 | * opacity: isOpen ? 1 : 0,
|
8030 | * x: isOpen ? 0 : closedX
|
8031 | * }} />
|
8032 | * )
|
8033 | * }
|
8034 | * ```
|
8035 | *
|
8036 | * @return boolean
|
8037 | *
|
8038 | * @public
|
8039 | */
|
8040 | export declare function useReducedMotion(): boolean;
|
8041 |
|
8042 | /**
|
8043 | * Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.
|
8044 | *
|
8045 | * It can either work as a stand-alone `MotionValue` by initialising it with a value, or as a subscriber
|
8046 | * to another `MotionValue`.
|
8047 | *
|
8048 | * @remarks
|
8049 | *
|
8050 | * ```jsx
|
8051 | * const x = useSpring(0, { stiffness: 300 })
|
8052 | * const y = useSpring(x, { damping: 10 })
|
8053 | * ```
|
8054 | *
|
8055 | * @param inputValue - `MotionValue` or number. If provided a `MotionValue`, when the input `MotionValue` changes, the created `MotionValue` will spring towards that value.
|
8056 | * @param springConfig - Configuration options for the spring.
|
8057 | * @returns `MotionValue`
|
8058 | *
|
8059 | * @public
|
8060 | */
|
8061 | export declare function useSpring(source: MotionValue | number, config?: SpringProps): MotionValue<any>;
|
8062 |
|
8063 | /**
|
8064 | * @param handlers -
|
8065 | * @internal
|
8066 | */
|
8067 | export declare function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, controls, }: TapHandlers & ControlsProp, ref: RefObject<Element>): void;
|
8068 |
|
8069 | /**
|
8070 | * Create a `MotionValue` that transforms the output of another `MotionValue` through a function.
|
8071 | * In this example, `y` will always be double `x`.
|
8072 | *
|
8073 | * @library
|
8074 | *
|
8075 | * ```jsx
|
8076 | * import * as React from "react"
|
8077 | * import { Frame, useMotionValue, useTransform } from "framer"
|
8078 | *
|
8079 | * export function MyComponent() {
|
8080 | * const x = useMotionValue(10)
|
8081 | * const y = useTransform(x, value => value * 2)
|
8082 | *
|
8083 | * return <Frame x={x} y={y} />
|
8084 | * }
|
8085 | * ```
|
8086 | *
|
8087 | * @motion
|
8088 | *
|
8089 | * ```jsx
|
8090 | * export const MyComponent = () => {
|
8091 | * const x = useMotionValue(10)
|
8092 | * const y = useTransform(x, value => value * 2)
|
8093 | *
|
8094 | * return <motion.div style={{ x, y }} />
|
8095 | * }
|
8096 | * ```
|
8097 | *
|
8098 | * @param value - The `MotionValue` to transform the output of.
|
8099 | * @param transform - Function that accepts the output of `value` and returns a new value.
|
8100 | * @returns `MotionValue`
|
8101 | *
|
8102 | * @public
|
8103 | */
|
8104 | export declare function useTransform<T>(parent: MotionValue, transform: Transformer<T>): MotionValue;
|
8105 |
|
8106 | /**
|
8107 | * Create a `MotionValue` that transforms the output of another `MotionValue` by mapping it from one range of values into another.
|
8108 | *
|
8109 | * @remarks
|
8110 | *
|
8111 | * Given an input range of `[-200, -100, 100, 200]` and an output range of
|
8112 | * `[0, 1, 1, 0]`, the returned `MotionValue` will:
|
8113 | *
|
8114 | * - When provided a value between `-200` and `-100`, will return a value between `0` and `1`.
|
8115 | * - When provided a value between `-100` and `100`, will return `1`.
|
8116 | * - When provided a value between `100` and `200`, will return a value between `1` and `0`
|
8117 | *
|
8118 | *
|
8119 | * The input range must be a linear series of numbers. The output range
|
8120 | * can be any value type supported by Framer Motion: numbers, colors, shadows, etc.
|
8121 | *
|
8122 | * Every value in the output range must be of the same type and in the same format.
|
8123 | *
|
8124 | * @library
|
8125 | *
|
8126 | * ```jsx
|
8127 | * export function MyComponent() {
|
8128 | * const x = useMotionValue(0)
|
8129 | * const xRange = [-200, -100, 100, 200]
|
8130 | * const opacityRange = [0, 1, 1, 0]
|
8131 | * const opacity = useTransform(x, xRange, opacityRange)
|
8132 | *
|
8133 | * return <Frame drag="x" x={x} opacity={opacity} />
|
8134 | * }
|
8135 | * ```
|
8136 | *
|
8137 | * @motion
|
8138 | *
|
8139 | * ```jsx
|
8140 | * export const MyComponent = () => {
|
8141 | * const x = useMotionValue(0)
|
8142 | * const xRange = [-200, -100, 100, 200]
|
8143 | * const opacityRange = [0, 1, 1, 0]
|
8144 | * const opacity = useTransform(x, xRange, opacityRange)
|
8145 | *
|
8146 | * return <motion.div drag="x" style={{ opacity, x }} />
|
8147 | * }
|
8148 | * ```
|
8149 | *
|
8150 | * @param inputValue - `MotionValue`
|
8151 | * @param inputRange - A linear series of numbers (either all increasing or decreasing)
|
8152 | * @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
|
8153 | * @param options -
|
8154 | *
|
8155 | * - clamp: boolean - Clamp values to within the given range. Defaults to `true`
|
8156 | * - ease: EasingFunction[] - Easing functions to use on the interpolations between each value in the input and output ranges. If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition **between** each.
|
8157 | *
|
8158 | * @returns `MotionValue`
|
8159 | *
|
8160 | * @public
|
8161 | */
|
8162 | export declare function useTransform<T>(parent: MotionValue<number>, from: number[], to: T[], options?: TransformOptions<T>): MotionValue<T>;
|
8163 |
|
8164 | /**
|
8165 | * Returns MotionValues that update when the viewport scrolls:
|
8166 | *
|
8167 | * - `scrollX` — Horizontal scroll distance in pixels.
|
8168 | * - `scrollY` — Vertical scroll distance in pixels.
|
8169 | * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
|
8170 | * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
|
8171 | *
|
8172 | * @library
|
8173 | *
|
8174 | * ```jsx
|
8175 | * import * as React from "react"
|
8176 | * import {
|
8177 | * Frame,
|
8178 | * useViewportScroll,
|
8179 | * useTransform
|
8180 | * } from "framer"
|
8181 | *
|
8182 | * export function MyComponent() {
|
8183 | * const { scrollYProgress } = useViewportScroll()
|
8184 | * return <Frame scaleX={scrollYProgress} />
|
8185 | * }
|
8186 | * ```
|
8187 | *
|
8188 | * @motion
|
8189 | *
|
8190 | * ```jsx
|
8191 | * export const MyComponent = () => {
|
8192 | * const { scrollYProgress } = useViewportScroll()
|
8193 | * return <motion.div style={{ scaleX: scrollYProgress }} />
|
8194 | * }
|
8195 | * ```
|
8196 | *
|
8197 | * @public
|
8198 | */
|
8199 | export declare function useViewportScroll(): ScrollMotionValues;
|
8200 |
|
8201 | /**
|
8202 | * A generic function type that will return a specific VisualElement,
|
8203 | * for instance useDomVisualElement will return either an SVGVisualElement
|
8204 | * or a HTMLVisualElement.
|
8205 | */
|
8206 | declare type UseVisualElement<E, P = MotionProps> = (Component: string | React_2.ComponentType<P>, props: MotionProps & P, parent?: VisualElement, isStatic?: boolean, ref?: Ref<E>) => VisualElement;
|
8207 |
|
8208 | /**
|
8209 | * @public
|
8210 | */
|
8211 | export declare type ValueTarget = SingleTarget | KeyframesTarget;
|
8212 |
|
8213 | /**
|
8214 | * @public
|
8215 | */
|
8216 | export declare type Variant = TargetAndTransition | TargetResolver;
|
8217 |
|
8218 | /**
|
8219 | * Either a string, or array of strings, that reference variants defined via the `variants` prop.
|
8220 | * @public
|
8221 | */
|
8222 | export declare type VariantLabels = string | string[];
|
8223 |
|
8224 | /**
|
8225 | * @public
|
8226 | */
|
8227 | export declare type Variants = {
|
8228 | [key: string]: Variant;
|
8229 | };
|
8230 |
|
8231 | declare enum VisibilityAction {
|
8232 | Hide = 0,
|
8233 | Show = 1
|
8234 | }
|
8235 |
|
8236 | /**
|
8237 | * VisualElement is an abstract class that provides a generic animation-optimised interface to the
|
8238 | * underlying renderer.
|
8239 | *
|
8240 | * Currently many features interact directly with HTMLVisualElement/SVGVisualElement
|
8241 | * but the idea is we can create, for instance, a ThreeVisualElement that extends
|
8242 | * VisualElement and we can quickly offer all the same features.
|
8243 | */
|
8244 | declare abstract class VisualElement<E = any> {
|
8245 | parent?: VisualElement<E>;
|
8246 | rootParent: VisualElement<E>;
|
8247 | children: Set<VisualElement<E>>;
|
8248 | prevSnapshot?: Snapshot;
|
8249 | private removeFromParent?;
|
8250 | protected element: E;
|
8251 | protected latest: ResolvedValues;
|
8252 | private values;
|
8253 | private valueSubscriptions;
|
8254 | private externalRef?;
|
8255 | protected treePath: VisualElement[];
|
8256 | protected config: VisualElementConfig;
|
8257 | isPresenceRoot?: boolean;
|
8258 | current: E;
|
8259 | readonly depth: number;
|
8260 | constructor(parent?: VisualElement<E>, ref?: Ref<E>);
|
8261 | subscribe(child: VisualElement<E>): () => boolean;
|
8262 | hasValue(key: string): boolean;
|
8263 | addValue(key: string, value: MotionValue): void;
|
8264 | removeValue(key: string): void;
|
8265 | getValue<Value>(key: string): MotionValue<Value> | undefined;
|
8266 | getValue<Value>(key: string, defaultValue: Value): MotionValue<Value>;
|
8267 | forEachValue(callback: (value: MotionValue, key: string) => void): void;
|
8268 | getInstance(): E;
|
8269 | updateConfig(config?: VisualElementConfig): void;
|
8270 | private update;
|
8271 | abstract render(): void;
|
8272 | abstract build(isReactRender: boolean): void;
|
8273 | abstract clean(): void;
|
8274 | abstract readNativeValue(key: string): string | number;
|
8275 | abstract getBoundingBox(): AxisBox2D;
|
8276 | abstract updateLayoutDelta(): void;
|
8277 | private setSingleStaticValue;
|
8278 | setStaticValues(values: string | ResolvedValues, value?: string | number): void;
|
8279 | triggerRender: () => void;
|
8280 | scheduleRender: () => import("framesync").Process;
|
8281 | scheduleUpdateLayoutDelta(): void;
|
8282 | private subscribeToValue;
|
8283 | protected mount(element: E): void;
|
8284 | private unmount;
|
8285 | ref: (element: E | null) => void;
|
8286 | }
|
8287 |
|
8288 | /**
|
8289 | * Control animations for a single component
|
8290 | *
|
8291 | * @internal
|
8292 | */
|
8293 | export declare class VisualElementAnimationControls<P extends {} = {}, V extends {} = {}> {
|
8294 | private visualElement;
|
8295 | /**
|
8296 | * A reference to the component's latest props. We could probably ditch this in
|
8297 | * favour to a reference to the `custom` prop now we don't send all props through
|
8298 | * to target resolvers.
|
8299 | */
|
8300 | private props;
|
8301 | /**
|
8302 | * The default transition to use for `Target`s without any `transition` prop.
|
8303 | */
|
8304 | private defaultTransition?;
|
8305 | /**
|
8306 | * The component's variants, as provided by `variants`
|
8307 | */
|
8308 | private variants;
|
8309 | /**
|
8310 | * A set of values that we animate back to when a value is cleared of all overrides.
|
8311 | */
|
8312 | private baseTarget;
|
8313 | /**
|
8314 | * A series of target overrides that we can animate to/from when overrides are set/cleared.
|
8315 | */
|
8316 | private overrides;
|
8317 | /**
|
8318 | * A series of target overrides as they were originally resolved.
|
8319 | */
|
8320 | private resolvedOverrides;
|
8321 | /**
|
8322 | * A Set of currently active override indexes
|
8323 | */
|
8324 | private activeOverrides;
|
8325 | /**
|
8326 | * A Set of children component controls for variant propagation.
|
8327 | */
|
8328 | private children?;
|
8329 | /**
|
8330 | * A Set of value keys that are currently animating.
|
8331 | */
|
8332 | private isAnimating;
|
8333 | /**
|
8334 | * A chance
|
8335 | */
|
8336 | private makeTargetAnimatable;
|
8337 | constructor(visualElement: VisualElement, { makeTargetAnimatable }: AnimationControlsConfig);
|
8338 | /**
|
8339 | * Set the reference to the component's props.
|
8340 | * @param props -
|
8341 | */
|
8342 | setProps(props: P & MotionProps): void;
|
8343 | /**
|
8344 | * Set the reference to the component's variants
|
8345 | * @param variants -
|
8346 | */
|
8347 | setVariants(variants?: Variants): void;
|
8348 | /**
|
8349 | * Set the component's default transition
|
8350 | * @param transition -
|
8351 | */
|
8352 | setDefaultTransition(transition?: Transition): void;
|
8353 | /**
|
8354 | * Set motion values without animation.
|
8355 | *
|
8356 | * @param definition -
|
8357 | * @param isActive -
|
8358 | */
|
8359 | private setValues;
|
8360 | /**
|
8361 | * Allows `transformValues` to be set by a component that allows us to
|
8362 | * transform the values in a given `Target`. This allows Framer Library
|
8363 | * to extend Framer Motion to animate `Color` variables etc. Currently we have
|
8364 | * to manually support these extended types here in Framer Motion.
|
8365 | *
|
8366 | * @param values -
|
8367 | */
|
8368 | private transformValues;
|
8369 | /**
|
8370 | * Check a `Target` for new values we haven't animated yet, and add them
|
8371 | * to the `MotionValueMap`.
|
8372 | *
|
8373 | * Currently there's functionality here that is DOM-specific, we should allow
|
8374 | * this functionality to be injected by the factory that creates DOM-specific
|
8375 | * components.
|
8376 | *
|
8377 | * @param target -
|
8378 | */
|
8379 | private checkForNewValues;
|
8380 | /**
|
8381 | * Check if the associated `VisualElement` has a key with the provided string.
|
8382 | * Pre-bound to the class so we can provide directly to the `filter` in `checkForNewValues`.
|
8383 | */
|
8384 | private hasValue;
|
8385 | /**
|
8386 | * Resolve a variant from its label or resolver into an actual `Target` we can animate to.
|
8387 | * @param variant -
|
8388 | */
|
8389 | private resolveVariant;
|
8390 | /**
|
8391 | * Get the highest active override priority index
|
8392 | */
|
8393 | private getHighestPriority;
|
8394 | /**
|
8395 | * Set an override. We add this layer of indirection so if, for instance, a tap gesture
|
8396 | * starts and overrides a hover gesture, when we clear the tap gesture and fallback to the
|
8397 | * hover gesture, if that hover gesture has changed in the meantime we can go to that rather
|
8398 | * than the one that was resolved when the hover gesture animation started.
|
8399 | *
|
8400 | * @param definition -
|
8401 | * @param overrideIndex -
|
8402 | */
|
8403 | setOverride(definition: AnimationDefinition, overrideIndex: number): void;
|
8404 | /**
|
8405 | * Start an override animation.
|
8406 | * @param overrideIndex -
|
8407 | */
|
8408 | startOverride(overrideIndex: number): Promise<void> | undefined;
|
8409 | /**
|
8410 | * Clear an override. We check every value we animated to in this override to see if
|
8411 | * its present on any lower-priority overrides. If not, we animate it back to its base target.
|
8412 | * @param overrideIndex -
|
8413 | */
|
8414 | clearOverride(overrideIndex: number): void;
|
8415 | /**
|
8416 | * Apply a target/variant without any animation
|
8417 | */
|
8418 | apply(definition: AnimationDefinition): void;
|
8419 | /**
|
8420 | * Apply variant labels without animation
|
8421 | */
|
8422 | private applyVariantLabels;
|
8423 | start(definition: AnimationDefinition, opts?: AnimationOptions): Promise<void>;
|
8424 | private animate;
|
8425 | private animateVariantLabels;
|
8426 | private animateVariant;
|
8427 | private animateChildren;
|
8428 | private onStart;
|
8429 | private onComplete;
|
8430 | private checkOverrideIsAnimating;
|
8431 | private resetIsAnimating;
|
8432 | stop(): void;
|
8433 | /**
|
8434 | * Add the controls of a child component.
|
8435 | * @param controls -
|
8436 | */
|
8437 | addChild(controls: VisualElementAnimationControls): void;
|
8438 | removeChild(controls: VisualElementAnimationControls): void;
|
8439 | resetChildren(): void;
|
8440 | }
|
8441 |
|
8442 | /**
|
8443 | * Base config for all VisualElements
|
8444 | */
|
8445 | declare interface VisualElementConfig {
|
8446 | /**
|
8447 | * Optional, will be called once per frame on update if provided via props.
|
8448 | */
|
8449 | onUpdate?: MotionProps["onUpdate"];
|
8450 | }
|
8451 |
|
8452 | declare class VisualElementDragControls {
|
8453 | /**
|
8454 | * Track whether we're currently dragging.
|
8455 | *
|
8456 | * @internal
|
8457 | */
|
8458 | isDragging: boolean;
|
8459 | /**
|
8460 | * The current direction of drag, or `null` if both.
|
8461 | *
|
8462 | * @internal
|
8463 | */
|
8464 | private currentDirection;
|
8465 | /**
|
8466 | * The permitted boundaries of travel, in pixels.
|
8467 | *
|
8468 | * @internal
|
8469 | */
|
8470 | private constraints;
|
8471 | /**
|
8472 | * A reference to the host component's latest props.
|
8473 | *
|
8474 | * @internal
|
8475 | */
|
8476 | private props;
|
8477 | /**
|
8478 | * @internal
|
8479 | */
|
8480 | private visualElement;
|
8481 | /**
|
8482 | * Track the initial position of the cursor relative to the dragging element
|
8483 | * when dragging starts as a value of 0-1 on each axis. We then use this to calculate
|
8484 | * an ideal bounding box for the VisualElement renderer to project into every frame.
|
8485 | *
|
8486 | * @internal
|
8487 | */
|
8488 | cursorProgress: Point2D;
|
8489 | private openGlobalLock;
|
8490 | /**
|
8491 | * @internal
|
8492 | */
|
8493 | private panSession;
|
8494 | /**
|
8495 | * A reference to the measured constraints bounding box
|
8496 | */
|
8497 | private constraintsBox?;
|
8498 | constructor({ visualElement }: DragControlConfig);
|
8499 | /**
|
8500 | * Instantiate a PanSession for the drag gesture
|
8501 | *
|
8502 | * @public
|
8503 | */
|
8504 | start(originEvent: AnyPointerEvent, { snapToCursor, cursorProgress }?: DragControlOptions): void;
|
8505 | /**
|
8506 | * Ensure the component's layout and target bounding boxes are up-to-date.
|
8507 | */
|
8508 | prepareBoundingBox(): void;
|
8509 | resolveDragConstraints(): void;
|
8510 | resolveRefConstraints(layoutBox: AxisBox2D, constraints: RefObject<Element>): {
|
8511 | x: {
|
8512 | min: number;
|
8513 | max: number;
|
8514 | };
|
8515 | y: {
|
8516 | min: number;
|
8517 | max: number;
|
8518 | };
|
8519 | };
|
8520 | cancelDrag(): void;
|
8521 | stop(event: AnyPointerEvent, info: PanInfo): void;
|
8522 | snapToCursor(event: AnyPointerEvent): void;
|
8523 | /**
|
8524 | * Update the specified axis with the latest pointer information.
|
8525 | */
|
8526 | updateAxis(axis: DragDirection, event: AnyPointerEvent): void;
|
8527 | updateProps({ drag, dragDirectionLock, dragPropagation, dragConstraints, dragElastic, dragMomentum, ...remainingProps }: DragControlsProps): void;
|
8528 | private animateDragEnd;
|
8529 | stopMotion(): void;
|
8530 | scalePoint(): void;
|
8531 | mount(visualElement: HTMLVisualElement): () => void;
|
8532 | }
|
8533 |
|
8534 | export { }
|
8535 |
|
\ | No newline at end of file |