@khanacademy/wonder-blocks-clickable 2.4.5 → 2.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/components/clickable-behavior.d.ts +248 -0
  3. package/dist/components/clickable-behavior.js.flow +296 -0
  4. package/dist/components/clickable.d.ts +150 -0
  5. package/dist/components/clickable.js.flow +176 -0
  6. package/dist/es/index.js +147 -147
  7. package/dist/index.d.ts +7 -0
  8. package/dist/index.js +169 -171
  9. package/dist/index.js.flow +18 -2
  10. package/dist/util/get-clickable-behavior.d.ts +25 -0
  11. package/dist/util/get-clickable-behavior.js.flow +19 -0
  12. package/dist/util/is-client-side-url.d.ts +7 -0
  13. package/dist/util/is-client-side-url.js.flow +14 -0
  14. package/package.json +5 -5
  15. package/src/components/__tests__/{clickable-behavior.test.js → clickable-behavior.test.tsx} +138 -82
  16. package/src/components/__tests__/{clickable.test.js → clickable.test.tsx} +27 -26
  17. package/src/components/{clickable-behavior.js → clickable-behavior.ts} +63 -78
  18. package/src/components/{clickable.js → clickable.tsx} +107 -124
  19. package/src/{index.js → index.ts} +0 -1
  20. package/src/util/__tests__/{get-clickable-behavior.test.js → get-clickable-behavior.test.tsx} +0 -1
  21. package/src/util/__tests__/{is-client-side-url.js.test.js → is-client-side-url.js.test.ts} +2 -3
  22. package/src/util/{get-clickable-behavior.js → get-clickable-behavior.ts} +9 -3
  23. package/src/util/{is-client-side-url.js → is-client-side-url.ts} +0 -1
  24. package/tsconfig.json +12 -0
  25. package/tsconfig.tsbuildinfo +1 -0
  26. package/src/components/__docs__/accessibility.stories.mdx +0 -152
  27. package/src/components/__docs__/clickable-behavior.argtypes.js +0 -64
  28. package/src/components/__docs__/clickable-behavior.stories.js +0 -178
  29. package/src/components/__docs__/clickable.argtypes.js +0 -237
  30. package/src/components/__docs__/clickable.stories.js +0 -307
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-clickable",
3
- "version": "2.4.5",
3
+ "version": "2.4.7",
4
4
  "design": "v1",
5
5
  "description": "Clickable component for Wonder-Blocks.",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/es/index.js",
8
- "source": "src/index.js",
8
+ "types": "dist/index.d.ts",
9
9
  "scripts": {
10
10
  "test": "echo \"Error: no test specified\" && exit 1"
11
11
  },
@@ -16,8 +16,8 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.18.6",
19
- "@khanacademy/wonder-blocks-color": "^1.2.1",
20
- "@khanacademy/wonder-blocks-core": "^4.7.0"
19
+ "@khanacademy/wonder-blocks-color": "^1.2.2",
20
+ "@khanacademy/wonder-blocks-core": "^4.9.0"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "aphrodite": "^1.2.5",
@@ -27,6 +27,6 @@
27
27
  "react-router-dom": "5.3.0"
28
28
  },
29
29
  "devDependencies": {
30
- "wb-dev-build-settings": "^0.7.1"
30
+ "wb-dev-build-settings": "^0.7.3"
31
31
  }
32
32
  }
package/src/components/__tests__/{clickable-behavior.test.js → clickable-behavior.test.tsx} RENAMED
@@ -1,6 +1,5 @@
1
1
  /* eslint-disable testing-library/prefer-user-event */
2
2
  /* eslint-disable max-lines */
3
- // @flow
4
3
  import * as React from "react";
5
4
  import {render, screen, fireEvent, waitFor} from "@testing-library/react";
6
5
  import {MemoryRouter, Switch, Route} from "react-router-dom";
@@ -14,10 +13,10 @@ const keyCodes = {
14
13
  tab: 9,
15
14
  enter: 13,
16
15
  space: 32,
17
- };
16
+ } as const;
18
17
 
19
18
  const labelForState = (state: ClickableState): string => {
20
- const labels = [];
19
+ const labels: Array<any> = [];
21
20
  if (state.hovered) {
22
21
  labels.push("hovered");
23
22
  }
@@ -34,21 +33,28 @@ describe("ClickableBehavior", () => {
34
33
  beforeEach(() => {
35
34
  // Note: window.location.assign and window.open need mock functions in
36
35
  // the testing environment
36
+ // @ts-expect-error [FEI-5019] - TS2790 - The operand of a 'delete' operator must be optional.
37
37
  delete window.location;
38
+ // @ts-expect-error [FEI-5019] - TS2740 - Type '{ assign: Mock<any, any, any>; }' is missing the following properties from type 'Location': ancestorOrigins, hash, host, hostname, and 8 more.
38
39
  window.location = {assign: jest.fn()};
39
40
  window.open = jest.fn();
40
41
  });
41
42
 
42
43
  afterEach(() => {
44
+ // @ts-expect-error [FEI-5019] - TS2339 - Property 'mockClear' does not exist on type '(url: string | URL) => void'.
43
45
  window.location.assign.mockClear();
46
+ // @ts-expect-error [FEI-5019] - TS2339 - Property 'mockClear' does not exist on type '((url?: string | URL | undefined, target?: string | undefined, features?: string | undefined) => Window | null) & ((url?: string | URL | undefined, target?: string | undefined, features?: string | undefined) => Window | null)'.
44
47
  window.open.mockClear();
45
48
  });
46
49
 
47
50
  it("renders a label", () => {
48
51
  const onClick = jest.fn();
49
52
  render(
50
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
51
- {(state, childrenProps) => {
53
+ <ClickableBehavior
54
+ disabled={false}
55
+ onClick={(e: any) => onClick(e)}
56
+ >
57
+ {(state: any, childrenProps: any) => {
52
58
  return <button {...childrenProps}>Label</button>;
53
59
  }}
54
60
  </ClickableBehavior>,
@@ -61,8 +67,11 @@ describe("ClickableBehavior", () => {
61
67
  it("changes hovered state on mouse enter/leave", () => {
62
68
  const onClick = jest.fn();
63
69
  render(
64
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
65
- {(state, childrenProps) => {
70
+ <ClickableBehavior
71
+ disabled={false}
72
+ onClick={(e: any) => onClick(e)}
73
+ >
74
+ {(state: any, childrenProps: any) => {
66
75
  const label = labelForState(state);
67
76
  return <button {...childrenProps}>{label}</button>;
68
77
  }}
@@ -79,8 +88,11 @@ describe("ClickableBehavior", () => {
79
88
  it("changes hovered state on mouse enter while dragging", () => {
80
89
  const onClick = jest.fn();
81
90
  render(
82
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
83
- {(state, childrenProps) => {
91
+ <ClickableBehavior
92
+ disabled={false}
93
+ onClick={(e: any) => onClick(e)}
94
+ >
95
+ {(state: any, childrenProps: any) => {
84
96
  const label = labelForState(state);
85
97
  return <button {...childrenProps}>{label}</button>;
86
98
  }}
@@ -98,8 +110,11 @@ describe("ClickableBehavior", () => {
98
110
  it("changes pressed and hover states on mouse leave while dragging", () => {
99
111
  const onClick = jest.fn();
100
112
  render(
101
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
102
- {(state, childrenProps) => {
113
+ <ClickableBehavior
114
+ disabled={false}
115
+ onClick={(e: any) => onClick(e)}
116
+ >
117
+ {(state: any, childrenProps: any) => {
103
118
  const label = labelForState(state);
104
119
  return <button {...childrenProps}>{label}</button>;
105
120
  }}
@@ -120,8 +135,11 @@ describe("ClickableBehavior", () => {
120
135
  it("changes pressed state on mouse down/up", () => {
121
136
  const onClick = jest.fn();
122
137
  render(
123
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
124
- {(state, childrenProps) => {
138
+ <ClickableBehavior
139
+ disabled={false}
140
+ onClick={(e: any) => onClick(e)}
141
+ >
142
+ {(state: any, childrenProps: any) => {
125
143
  const label = labelForState(state);
126
144
  return <button {...childrenProps}>{label}</button>;
127
145
  }}
@@ -138,8 +156,11 @@ describe("ClickableBehavior", () => {
138
156
  it("changes pressed state on touch start/end/cancel", () => {
139
157
  const onClick = jest.fn();
140
158
  render(
141
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
142
- {(state, childrenProps) => {
159
+ <ClickableBehavior
160
+ disabled={false}
161
+ onClick={(e: any) => onClick(e)}
162
+ >
163
+ {(state: any, childrenProps: any) => {
143
164
  const label = labelForState(state);
144
165
  return <button {...childrenProps}>{label}</button>;
145
166
  }}
@@ -162,8 +183,11 @@ describe("ClickableBehavior", () => {
162
183
  it("enters focused state on key press after click", () => {
163
184
  const onClick = jest.fn();
164
185
  render(
165
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
166
- {(state, childrenProps) => {
186
+ <ClickableBehavior
187
+ disabled={false}
188
+ onClick={(e: any) => onClick(e)}
189
+ >
190
+ {(state: any, childrenProps: any) => {
167
191
  const label = labelForState(state);
168
192
  return <button {...childrenProps}>{label}</button>;
169
193
  }}
@@ -183,8 +207,11 @@ describe("ClickableBehavior", () => {
183
207
  const onClick = jest.fn();
184
208
 
185
209
  render(
186
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
187
- {(state, childrenProps) => {
210
+ <ClickableBehavior
211
+ disabled={false}
212
+ onClick={(e: any) => onClick(e)}
213
+ >
214
+ {(state: any, childrenProps: any) => {
188
215
  const label = labelForState(state);
189
216
  return <button {...childrenProps}>{label}</button>;
190
217
  }}
@@ -205,8 +232,11 @@ describe("ClickableBehavior", () => {
205
232
  it("changes pressed state on space/enter key down/up if <button>", () => {
206
233
  const onClick = jest.fn();
207
234
  render(
208
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
209
- {(state, childrenProps) => {
235
+ <ClickableBehavior
236
+ disabled={false}
237
+ onClick={(e: any) => onClick(e)}
238
+ >
239
+ {(state: any, childrenProps: any) => {
210
240
  const label = labelForState(state);
211
241
  return <button {...childrenProps}>{label}</button>;
212
242
  }}
@@ -231,11 +261,11 @@ describe("ClickableBehavior", () => {
231
261
  render(
232
262
  <ClickableBehavior
233
263
  disabled={false}
234
- onClick={(e) => onClick(e)}
264
+ onClick={(e: any) => onClick(e)}
235
265
  href="https://www.khanacademy.org"
236
266
  role="link"
237
267
  >
238
- {(state, childrenProps) => {
268
+ {(state: any, childrenProps: any) => {
239
269
  const label = labelForState(state);
240
270
  return (
241
271
  <a
@@ -264,8 +294,11 @@ describe("ClickableBehavior", () => {
264
294
  it("gains focused state on focus event", () => {
265
295
  const onClick = jest.fn();
266
296
  render(
267
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
268
- {(state, childrenProps) => {
297
+ <ClickableBehavior
298
+ disabled={false}
299
+ onClick={(e: any) => onClick(e)}
300
+ >
301
+ {(state: any, childrenProps: any) => {
269
302
  const label = labelForState(state);
270
303
  return <button {...childrenProps}>{label}</button>;
271
304
  }}
@@ -279,8 +312,11 @@ describe("ClickableBehavior", () => {
279
312
  it("changes focused state on blur", () => {
280
313
  const onClick = jest.fn();
281
314
  render(
282
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
283
- {(state, childrenProps) => {
315
+ <ClickableBehavior
316
+ disabled={false}
317
+ onClick={(e: any) => onClick(e)}
318
+ >
319
+ {(state: any, childrenProps: any) => {
284
320
  const label = labelForState(state);
285
321
  return <button {...childrenProps}>{label}</button>;
286
322
  }}
@@ -296,8 +332,8 @@ describe("ClickableBehavior", () => {
296
332
  // Arrange
297
333
  // Act
298
334
  render(
299
- <ClickableBehavior disabled={false} onClick={(e) => {}}>
300
- {(state, childrenProps) => {
335
+ <ClickableBehavior disabled={false} onClick={(e: any) => {}}>
336
+ {(state: any, childrenProps: any) => {
301
337
  return (
302
338
  <button data-test-id="test-button-1" {...childrenProps}>
303
339
  Label
@@ -318,10 +354,10 @@ describe("ClickableBehavior", () => {
318
354
  render(
319
355
  <ClickableBehavior
320
356
  disabled={false}
321
- onClick={(e) => {}}
357
+ onClick={(e: any) => {}}
322
358
  tabIndex={1}
323
359
  >
324
- {(state, childrenProps) => {
360
+ {(state: any, childrenProps: any) => {
325
361
  return (
326
362
  <button data-test-id="test-button-2" {...childrenProps}>
327
363
  Label
@@ -340,8 +376,12 @@ describe("ClickableBehavior", () => {
340
376
  // Arrange
341
377
  // Act
342
378
  render(
343
- <ClickableBehavior disabled={true} onClick={(e) => {}} tabIndex={1}>
344
- {(state, childrenProps) => {
379
+ <ClickableBehavior
380
+ disabled={true}
381
+ onClick={(e: any) => {}}
382
+ tabIndex={1}
383
+ >
384
+ {(state: any, childrenProps: any) => {
345
385
  return (
346
386
  <button data-test-id="test-button-3" {...childrenProps}>
347
387
  Label
@@ -361,10 +401,10 @@ describe("ClickableBehavior", () => {
361
401
  render(
362
402
  <ClickableBehavior
363
403
  disabled={false}
364
- onClick={(e) => {}}
404
+ onClick={(e: any) => {}}
365
405
  tabIndex={1}
366
406
  >
367
- {(state, childrenProps) => {
407
+ {(state: any, childrenProps: any) => {
368
408
  return (
369
409
  <div data-test-id="test-div-1" {...childrenProps}>
370
410
  Label
@@ -385,8 +425,8 @@ describe("ClickableBehavior", () => {
385
425
  it("does not change state if disabled", () => {
386
426
  const onClick = jest.fn();
387
427
  render(
388
- <ClickableBehavior disabled={true} onClick={(e) => onClick(e)}>
389
- {(state, childrenProps) => {
428
+ <ClickableBehavior disabled={true} onClick={(e: any) => onClick(e)}>
429
+ {(state: any, childrenProps: any) => {
390
430
  const label = labelForState(state);
391
431
  return <button {...childrenProps}>{label}</button>;
392
432
  }}
@@ -446,7 +486,7 @@ describe("ClickableBehavior", () => {
446
486
  disabled={true}
447
487
  href="https://www.khanacademy.org"
448
488
  >
449
- {(state, childrenProps) => {
489
+ {(state: any, childrenProps: any) => {
450
490
  return (
451
491
  <a
452
492
  href="https://www.khanacademy.org"
@@ -470,8 +510,11 @@ describe("ClickableBehavior", () => {
470
510
  it("has onClick triggered just once per click by various means", () => {
471
511
  const onClick = jest.fn();
472
512
  render(
473
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
474
- {(state, childrenProps) => {
513
+ <ClickableBehavior
514
+ disabled={false}
515
+ onClick={(e: any) => onClick(e)}
516
+ >
517
+ {(state: any, childrenProps: any) => {
475
518
  return <button {...childrenProps}>Label</button>;
476
519
  }}
477
520
  </ClickableBehavior>,
@@ -499,8 +542,11 @@ describe("ClickableBehavior", () => {
499
542
  it("resets state when set to disabled", () => {
500
543
  const onClick = jest.fn();
501
544
  const {rerender} = render(
502
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
503
- {(state, childrenProps) => {
545
+ <ClickableBehavior
546
+ disabled={false}
547
+ onClick={(e: any) => onClick(e)}
548
+ >
549
+ {(state: any, childrenProps: any) => {
504
550
  const label = labelForState(state);
505
551
  return <button {...childrenProps}>{label}</button>;
506
552
  }}
@@ -511,8 +557,8 @@ describe("ClickableBehavior", () => {
511
557
  userEvent.hover(button);
512
558
 
513
559
  rerender(
514
- <ClickableBehavior disabled={true} onClick={(e) => onClick(e)}>
515
- {(state, childrenProps) => {
560
+ <ClickableBehavior disabled={true} onClick={(e: any) => onClick(e)}>
561
+ {(state: any, childrenProps: any) => {
516
562
  const label = labelForState(state);
517
563
  return <button {...childrenProps}>{label}</button>;
518
564
  }}
@@ -533,10 +579,10 @@ describe("ClickableBehavior", () => {
533
579
  render(
534
580
  <ClickableBehavior
535
581
  href="https://khanacademy.org/"
536
- onClick={(e) => onClick(e)}
582
+ onClick={(e: any) => onClick(e)}
537
583
  role="link"
538
584
  >
539
- {(state, childrenProps) => {
585
+ {(state: any, childrenProps: any) => {
540
586
  // The base element here doesn't matter in this testing
541
587
  // environment, but the simulated events in the test are in
542
588
  // line with what browsers do for this element.
@@ -583,7 +629,7 @@ describe("ClickableBehavior", () => {
583
629
  safeWithNav={() => Promise.resolve()}
584
630
  role="link"
585
631
  >
586
- {(state, childrenProps) => {
632
+ {(state: any, childrenProps: any) => {
587
633
  // The base element here doesn't matter in this testing
588
634
  // environment, but the simulated events in the test are in
589
635
  // line with what browsers do for this element.
@@ -617,7 +663,7 @@ describe("ClickableBehavior", () => {
617
663
  safeWithNav={() => Promise.resolve()}
618
664
  role="link"
619
665
  >
620
- {(state, childrenProps) => {
666
+ {(state: any, childrenProps: any) => {
621
667
  // The base element here doesn't matter in this testing
622
668
  // environment, but the simulated events in the test are in
623
669
  // line with what browsers do for this element.
@@ -646,10 +692,10 @@ describe("ClickableBehavior", () => {
646
692
  render(
647
693
  <ClickableBehavior
648
694
  href="/foo"
649
- onClick={(e) => e.preventDefault()}
695
+ onClick={(e: any) => e.preventDefault()}
650
696
  role="checkbox"
651
697
  >
652
- {(state, childrenProps) => {
698
+ {(state: any, childrenProps: any) => {
653
699
  // The base element here doesn't matter in this testing
654
700
  // environment, but the simulated events in the test are in
655
701
  // line with what browsers do for this element.
@@ -672,8 +718,8 @@ describe("ClickableBehavior", () => {
672
718
  // Use mount instead of a shallow render to trigger event defaults
673
719
  render(
674
720
  // triggerOnEnter may be false for some elements e.g. checkboxes
675
- <ClickableBehavior onClick={(e) => onClick(e)} role="checkbox">
676
- {(state, childrenProps) => {
721
+ <ClickableBehavior onClick={(e: any) => onClick(e)} role="checkbox">
722
+ {(state: any, childrenProps: any) => {
677
723
  // The base element here doesn't matter in this testing
678
724
  // environment, but the simulated events in the test are in
679
725
  // line with what browsers do for this element.
@@ -699,8 +745,8 @@ describe("ClickableBehavior", () => {
699
745
  const onClick = jest.fn();
700
746
  // Use mount instead of a shallow render to trigger event defaults
701
747
  render(
702
- <ClickableBehavior onClick={(e) => onClick(e)}>
703
- {(state, childrenProps) => {
748
+ <ClickableBehavior onClick={(e: any) => onClick(e)}>
749
+ {(state: any, childrenProps: any) => {
704
750
  // The base element here doesn't matter in this testing
705
751
  // environment, but the simulated events in the test are in
706
752
  // line with what browsers do for this element.
@@ -730,8 +776,8 @@ describe("ClickableBehavior", () => {
730
776
  const onClick = jest.fn();
731
777
  // Use mount instead of a shallow render to trigger event defaults
732
778
  const {container} = render(
733
- <ClickableBehavior onClick={(e) => onClick(e)}>
734
- {(state, childrenProps) => {
779
+ <ClickableBehavior onClick={(e: any) => onClick(e)}>
780
+ {(state: any, childrenProps: any) => {
735
781
  // The base element here doesn't matter in this testing
736
782
  // environment, but the simulated events in the test are in
737
783
  // line with what browsers do for this element.
@@ -787,8 +833,11 @@ describe("ClickableBehavior", () => {
787
833
  it("does not call onClick on mouseup when the mouse presses inside and drags away", () => {
788
834
  const onClick = jest.fn();
789
835
  render(
790
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
791
- {(state, childrenProps) => {
836
+ <ClickableBehavior
837
+ disabled={false}
838
+ onClick={(e: any) => onClick(e)}
839
+ >
840
+ {(state: any, childrenProps: any) => {
792
841
  return <button {...childrenProps}>Label</button>;
793
842
  }}
794
843
  </ClickableBehavior>,
@@ -804,8 +853,11 @@ describe("ClickableBehavior", () => {
804
853
  it("does not call onClick on mouseup when the mouse presses outside and drags in", () => {
805
854
  const onClick = jest.fn();
806
855
  render(
807
- <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
808
- {(state, childrenProps) => {
856
+ <ClickableBehavior
857
+ disabled={false}
858
+ onClick={(e: any) => onClick(e)}
859
+ >
860
+ {(state: any, childrenProps: any) => {
809
861
  return <button {...childrenProps}>Label</button>;
810
862
  }}
811
863
  </ClickableBehavior>,
@@ -821,8 +873,8 @@ describe("ClickableBehavior", () => {
821
873
  const onClick = jest.fn();
822
874
  // Use mount instead of a shallow render to trigger event defaults
823
875
  render(
824
- <ClickableBehavior onClick={(e) => onClick(e)} role="checkbox">
825
- {(state, childrenProps) => {
876
+ <ClickableBehavior onClick={(e: any) => onClick(e)} role="checkbox">
877
+ {(state: any, childrenProps: any) => {
826
878
  // The base element here doesn't matter in this testing
827
879
  // environment, but the simulated events in the test are in
828
880
  // line with what browsers do for this element.
@@ -854,10 +906,10 @@ describe("ClickableBehavior", () => {
854
906
  <div>
855
907
  <ClickableBehaviorWithRouter
856
908
  href="/foo"
857
- onClick={(e) => {}}
909
+ onClick={(e: any) => {}}
858
910
  role="checkbox"
859
911
  >
860
- {(state, childrenProps) => {
912
+ {(state: any, childrenProps: any) => {
861
913
  // The base element here doesn't matter in this testing
862
914
  // environment, but the simulated events in the test are in
863
915
  // line with what browsers do for this element.
@@ -890,11 +942,11 @@ describe("ClickableBehavior", () => {
890
942
  <div>
891
943
  <ClickableBehaviorWithRouter
892
944
  href="/foo"
893
- onClick={(e) => {}}
945
+ onClick={(e: any) => {}}
894
946
  role="checkbox"
895
947
  beforeNav={() => Promise.resolve()}
896
948
  >
897
- {(state, childrenProps) => {
949
+ {(state: any, childrenProps: any) => {
898
950
  // The base element here doesn't matter in this testing
899
951
  // environment, but the simulated events in the test are in
900
952
  // line with what browsers do for this element.
@@ -934,11 +986,11 @@ describe("ClickableBehavior", () => {
934
986
  <div>
935
987
  <ClickableBehaviorWithRouter
936
988
  href="/foo"
937
- onClick={(e) => {}}
989
+ onClick={(e: any) => {}}
938
990
  role="checkbox"
939
991
  beforeNav={() => Promise.resolve()}
940
992
  >
941
- {(state, childrenProps) => {
993
+ {(state: any, childrenProps: any) => {
942
994
  // The base element here doesn't matter in this testing
943
995
  // environment, but the simulated events in the test are in
944
996
  // line with what browsers do for this element.
@@ -974,11 +1026,11 @@ describe("ClickableBehavior", () => {
974
1026
  <div>
975
1027
  <ClickableBehaviorWithRouter
976
1028
  href="/foo"
977
- onClick={(e) => {}}
1029
+ onClick={(e: any) => {}}
978
1030
  role="checkbox"
979
1031
  beforeNav={() => Promise.reject()}
980
1032
  >
981
- {(state, childrenProps) => {
1033
+ {(state: any, childrenProps: any) => {
982
1034
  // The base element here doesn't matter in this testing
983
1035
  // environment, but the simulated events in the test are in
984
1036
  // line with what browsers do for this element.
@@ -1015,12 +1067,12 @@ describe("ClickableBehavior", () => {
1015
1067
  <div>
1016
1068
  <ClickableBehaviorWithRouter
1017
1069
  href="/foo"
1018
- onClick={(e) => {}}
1070
+ onClick={(e: any) => {}}
1019
1071
  role="checkbox"
1020
1072
  beforeNav={() => Promise.resolve()}
1021
1073
  safeWithNav={safeWithNavMock}
1022
1074
  >
1023
- {(state, childrenProps) => {
1075
+ {(state: any, childrenProps: any) => {
1024
1076
  // The base element here doesn't matter in this testing
1025
1077
  // environment, but the simulated events in the test are in
1026
1078
  // line with what browsers do for this element.
@@ -1059,11 +1111,11 @@ describe("ClickableBehavior", () => {
1059
1111
  <div>
1060
1112
  <ClickableBehaviorWithRouter
1061
1113
  href="/foo"
1062
- onClick={(e) => {}}
1114
+ onClick={(e: any) => {}}
1063
1115
  role="checkbox"
1064
1116
  safeWithNav={() => Promise.resolve()}
1065
1117
  >
1066
- {(state, childrenProps) => {
1118
+ {(state: any, childrenProps: any) => {
1067
1119
  // The base element here doesn't matter in this testing
1068
1120
  // environment, but the simulated events in the test are in
1069
1121
  // line with what browsers do for this element.
@@ -1095,10 +1147,10 @@ describe("ClickableBehavior", () => {
1095
1147
  <div>
1096
1148
  <ClickableBehaviorWithRouter
1097
1149
  href="/foo"
1098
- onClick={(e) => e.preventDefault()}
1150
+ onClick={(e: any) => e.preventDefault()}
1099
1151
  role="checkbox"
1100
1152
  >
1101
- {(state, childrenProps) => {
1153
+ {(state: any, childrenProps: any) => {
1102
1154
  // The base element here doesn't matter in this testing
1103
1155
  // environment, but the simulated events in the test are in
1104
1156
  // line with what browsers do for this element.
@@ -1134,7 +1186,7 @@ describe("ClickableBehavior", () => {
1134
1186
  role="link"
1135
1187
  target="_blank"
1136
1188
  >
1137
- {(state, childrenProps) => {
1189
+ {(state: any, childrenProps: any) => {
1138
1190
  return (
1139
1191
  <a
1140
1192
  href="https://www.khanacademy.org"
@@ -1159,6 +1211,7 @@ describe("ClickableBehavior", () => {
1159
1211
 
1160
1212
  it("opens a new tab when using 'safeWithNav'", () => {
1161
1213
  // Arrange
1214
+ // @ts-expect-error [FEI-5019] - TS2554 - Expected 1 arguments, but got 0.
1162
1215
  const safeWithNavMock = jest.fn().mockResolvedValue();
1163
1216
  render(
1164
1217
  <ClickableBehavior
@@ -1168,7 +1221,7 @@ describe("ClickableBehavior", () => {
1168
1221
  target="_blank"
1169
1222
  safeWithNav={safeWithNavMock}
1170
1223
  >
1171
- {(state, childrenProps) => {
1224
+ {(state: any, childrenProps: any) => {
1172
1225
  return (
1173
1226
  <a
1174
1227
  href="https://www.khanacademy.org"
@@ -1193,6 +1246,7 @@ describe("ClickableBehavior", () => {
1193
1246
 
1194
1247
  it("calls 'safeWithNav'", () => {
1195
1248
  // Arrange
1249
+ // @ts-expect-error [FEI-5019] - TS2554 - Expected 1 arguments, but got 0.
1196
1250
  const safeWithNavMock = jest.fn().mockResolvedValue();
1197
1251
  render(
1198
1252
  <ClickableBehavior
@@ -1202,7 +1256,7 @@ describe("ClickableBehavior", () => {
1202
1256
  target="_blank"
1203
1257
  safeWithNav={safeWithNavMock}
1204
1258
  >
1205
- {(state, childrenProps) => {
1259
+ {(state: any, childrenProps: any) => {
1206
1260
  return (
1207
1261
  <a
1208
1262
  href="https://www.khanacademy.org"
@@ -1232,7 +1286,7 @@ describe("ClickableBehavior", () => {
1232
1286
  role="link"
1233
1287
  target="_blank"
1234
1288
  >
1235
- {(state, childrenProps) => {
1289
+ {(state: any, childrenProps: any) => {
1236
1290
  return (
1237
1291
  <a
1238
1292
  href="https://www.khanacademy.org"
@@ -1258,6 +1312,7 @@ describe("ClickableBehavior", () => {
1258
1312
 
1259
1313
  it("opens a new tab when using 'safeWithNav' inside a router", () => {
1260
1314
  // Arrange
1315
+ // @ts-expect-error [FEI-5019] - TS2554 - Expected 1 arguments, but got 0.
1261
1316
  const safeWithNavMock = jest.fn().mockResolvedValue();
1262
1317
  render(
1263
1318
  <MemoryRouter initialEntries={["/"]}>
@@ -1268,7 +1323,7 @@ describe("ClickableBehavior", () => {
1268
1323
  target="_blank"
1269
1324
  safeWithNav={safeWithNavMock}
1270
1325
  >
1271
- {(state, childrenProps) => {
1326
+ {(state: any, childrenProps: any) => {
1272
1327
  return (
1273
1328
  <a
1274
1329
  href="https://www.khanacademy.org"
@@ -1294,6 +1349,7 @@ describe("ClickableBehavior", () => {
1294
1349
 
1295
1350
  it("calls 'safeWithNav' inside a router", () => {
1296
1351
  // Arrange
1352
+ // @ts-expect-error [FEI-5019] - TS2554 - Expected 1 arguments, but got 0.
1297
1353
  const safeWithNavMock = jest.fn().mockResolvedValue();
1298
1354
  render(
1299
1355
  <MemoryRouter initialEntries={["/"]}>
@@ -1304,7 +1360,7 @@ describe("ClickableBehavior", () => {
1304
1360
  target="_blank"
1305
1361
  safeWithNav={safeWithNavMock}
1306
1362
  >
1307
- {(state, childrenProps) => {
1363
+ {(state: any, childrenProps: any) => {
1308
1364
  return (
1309
1365
  <a
1310
1366
  href="https://www.khanacademy.org"