@jsonforms/material-renderers 3.0.0-beta.4 → 3.0.0-beta.5

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 (20) hide show
  1. package/docs/assets/js/search.json +1 -1
  2. package/docs/globals.html +89 -8
  3. package/docs/index.html +9 -0
  4. package/docs/interfaces/inputref.html +168 -0
  5. package/lib/jsonforms-react-material.cjs.js +39 -12
  6. package/lib/jsonforms-react-material.cjs.js.map +1 -1
  7. package/lib/jsonforms-react-material.esm.js +43 -9
  8. package/lib/jsonforms-react-material.esm.js.map +1 -1
  9. package/lib/util/datejs.d.ts +17 -1
  10. package/package.json +6 -6
  11. package/src/controls/MaterialDateControl.tsx +23 -6
  12. package/src/controls/MaterialDateTimeControl.tsx +23 -6
  13. package/src/controls/MaterialTimeControl.tsx +24 -7
  14. package/src/mui-controls/MuiAutocomplete.tsx +1 -0
  15. package/src/util/datejs.tsx +73 -0
  16. package/stats.html +1 -1
  17. package/test/renderers/MaterialDateControl.test.tsx +27 -0
  18. package/test/renderers/MaterialDateTimeControl.test.tsx +27 -0
  19. package/test/renderers/MaterialTimeControl.test.tsx +27 -0
  20. package/src/util/datejs.ts +0 -32
package/docs/globals.html CHANGED
@@ -85,6 +85,7 @@
85
85
  <li class="tsd-kind-interface"><a href="interfaces/dispatchpropsofexpandpanel.html" class="tsd-kind-icon">Dispatch<wbr>Props<wbr>OfExpand<wbr>Panel</a></li>
86
86
  <li class="tsd-kind-interface"><a href="interfaces/emptytableprops.html" class="tsd-kind-icon">Empty<wbr>Table<wbr>Props</a></li>
87
87
  <li class="tsd-kind-interface"><a href="interfaces/expandpanelprops.html" class="tsd-kind-icon">Expand<wbr>Panel<wbr>Props</a></li>
88
+ <li class="tsd-kind-interface"><a href="interfaces/inputref.html" class="tsd-kind-icon">Input<wbr>Ref</a></li>
88
89
  <li class="tsd-kind-interface"><a href="interfaces/jsonformstheme.html" class="tsd-kind-icon">Json<wbr>Forms<wbr>Theme</a></li>
89
90
  <li class="tsd-kind-interface"><a href="interfaces/materialcategorizationlayoutrendererprops.html" class="tsd-kind-icon">Material<wbr>Categorization<wbr>Layout<wbr>Renderer<wbr>Props</a></li>
90
91
  <li class="tsd-kind-interface"><a href="interfaces/materialcategorizationstepperlayoutrendererprops.html" class="tsd-kind-icon">Material<wbr>Categorization<wbr>Stepper<wbr>Layout<wbr>Renderer<wbr>Props</a></li>
@@ -106,6 +107,12 @@
106
107
  <li class="tsd-kind-interface"><a href="interfaces/withoptionlabel.html" class="tsd-kind-icon">With<wbr>Option<wbr>Label</a></li>
107
108
  </ul>
108
109
  </section>
110
+ <section class="tsd-index-section ">
111
+ <h3>Type aliases</h3>
112
+ <ul class="tsd-index-list">
113
+ <li class="tsd-kind-type-alias"><a href="globals.html#resettabletextfieldprops" class="tsd-kind-icon">Resettable<wbr>Text<wbr>Field<wbr>Props</a></li>
114
+ </ul>
115
+ </section>
109
116
  <section class="tsd-index-section ">
110
117
  <h3>Variables</h3>
111
118
  <ul class="tsd-index-list">
@@ -228,6 +235,7 @@
228
235
  <li class="tsd-kind-function"><a href="globals.html#nobordertablecell" class="tsd-kind-icon">No<wbr>Border<wbr>Table<wbr>Cell</a></li>
229
236
  <li class="tsd-kind-function"><a href="globals.html#nonemptycell" class="tsd-kind-icon">Non<wbr>Empty<wbr>Cell</a></li>
230
237
  <li class="tsd-kind-function"><a href="globals.html#nonemptyrowcomponent" class="tsd-kind-icon">Non<wbr>Empty<wbr>Row<wbr>Component</a></li>
238
+ <li class="tsd-kind-function"><a href="globals.html#resettabletextfield" class="tsd-kind-icon">Resettable<wbr>Text<wbr>Field</a></li>
231
239
  <li class="tsd-kind-function"><a href="globals.html#tablerows" class="tsd-kind-icon">Table<wbr>Rows</a></li>
232
240
  <li class="tsd-kind-function"><a href="globals.html#validationicon" class="tsd-kind-icon">Validation<wbr>Icon</a></li>
233
241
  <li class="tsd-kind-function"><a href="globals.html#controlwithoutlabel" class="tsd-kind-icon">control<wbr>Without<wbr>Label</a></li>
@@ -266,6 +274,19 @@
266
274
  </div>
267
275
  </section>
268
276
  </section>
277
+ <section class="tsd-panel-group tsd-member-group ">
278
+ <h2>Type aliases</h2>
279
+ <section class="tsd-panel tsd-member tsd-kind-type-alias">
280
+ <a name="resettabletextfieldprops" class="tsd-anchor"></a>
281
+ <h3>Resettable<wbr>Text<wbr>Field<wbr>Props</h3>
282
+ <div class="tsd-signature tsd-kind-icon">Resettable<wbr>Text<wbr>Field<wbr>Props<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">TextFieldProps</span><span class="tsd-signature-symbol"> &amp; </span><span class="tsd-signature-symbol">{ </span>dayjsValueIsValid<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>focused<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>rawValue<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">; </span>valueInInputFormat<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></div>
283
+ <aside class="tsd-sources">
284
+ <ul>
285
+ <li>Defined in packages/material/src/util/datejs.tsx:42</li>
286
+ </ul>
287
+ </aside>
288
+ </section>
289
+ </section>
269
290
  <section class="tsd-panel-group tsd-member-group ">
270
291
  <h2>Variables</h2>
271
292
  <section class="tsd-panel tsd-member tsd-kind-variable">
@@ -624,7 +645,7 @@
624
645
  <div class="tsd-signature tsd-kind-icon">material<wbr>Date<wbr>Control<wbr>Tester<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">RankedTester</span><span class="tsd-signature-symbol"> = rankWith(4,isDateControl)</span></div>
625
646
  <aside class="tsd-sources">
626
647
  <ul>
627
- <li>Defined in packages/material/src/controls/MaterialDateControl.tsx:125</li>
648
+ <li>Defined in packages/material/src/controls/MaterialDateControl.tsx:142</li>
628
649
  </ul>
629
650
  </aside>
630
651
  </section>
@@ -634,7 +655,7 @@
634
655
  <div class="tsd-signature tsd-kind-icon">material<wbr>Date<wbr>Time<wbr>Control<wbr>Tester<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">RankedTester</span><span class="tsd-signature-symbol"> = rankWith(2,isDateTimeControl)</span></div>
635
656
  <aside class="tsd-sources">
636
657
  <ul>
637
- <li>Defined in packages/material/src/controls/MaterialDateTimeControl.tsx:128</li>
658
+ <li>Defined in packages/material/src/controls/MaterialDateTimeControl.tsx:145</li>
638
659
  </ul>
639
660
  </aside>
640
661
  </section>
@@ -919,7 +940,7 @@
919
940
  <div class="tsd-signature tsd-kind-icon">material<wbr>Time<wbr>Control<wbr>Tester<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">RankedTester</span><span class="tsd-signature-symbol"> = rankWith(4,isTimeControl)</span></div>
920
941
  <aside class="tsd-sources">
921
942
  <ul>
922
- <li>Defined in packages/material/src/controls/MaterialTimeControl.tsx:128</li>
943
+ <li>Defined in packages/material/src/controls/MaterialTimeControl.tsx:145</li>
923
944
  </ul>
924
945
  </aside>
925
946
  </section>
@@ -1473,7 +1494,7 @@
1473
1494
  <li class="tsd-description">
1474
1495
  <aside class="tsd-sources">
1475
1496
  <ul>
1476
- <li>Defined in packages/material/src/controls/MaterialDateControl.tsx:43</li>
1497
+ <li>Defined in packages/material/src/controls/MaterialDateControl.tsx:48</li>
1477
1498
  </ul>
1478
1499
  </aside>
1479
1500
  <h4 class="tsd-parameters-title">Parameters</h4>
@@ -1496,7 +1517,7 @@
1496
1517
  <li class="tsd-description">
1497
1518
  <aside class="tsd-sources">
1498
1519
  <ul>
1499
- <li>Defined in packages/material/src/controls/MaterialDateTimeControl.tsx:43</li>
1520
+ <li>Defined in packages/material/src/controls/MaterialDateTimeControl.tsx:48</li>
1500
1521
  </ul>
1501
1522
  </aside>
1502
1523
  <h4 class="tsd-parameters-title">Parameters</h4>
@@ -2347,7 +2368,7 @@
2347
2368
  <li class="tsd-description">
2348
2369
  <aside class="tsd-sources">
2349
2370
  <ul>
2350
- <li>Defined in packages/material/src/controls/MaterialTimeControl.tsx:43</li>
2371
+ <li>Defined in packages/material/src/controls/MaterialTimeControl.tsx:48</li>
2351
2372
  </ul>
2352
2373
  </aside>
2353
2374
  <h4 class="tsd-parameters-title">Parameters</h4>
@@ -2682,6 +2703,57 @@
2682
2703
  </li>
2683
2704
  </ul>
2684
2705
  </section>
2706
+ <section class="tsd-panel tsd-member tsd-kind-function">
2707
+ <a name="resettabletextfield" class="tsd-anchor"></a>
2708
+ <h3><span class="tsd-flag ts-flagConst">Const</span> Resettable<wbr>Text<wbr>Field</h3>
2709
+ <ul class="tsd-signatures tsd-kind-function">
2710
+ <li class="tsd-signature tsd-kind-icon">Resettable<wbr>Text<wbr>Field<span class="tsd-signature-symbol">(</span>__namedParameters<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>dayjsValueIsValid<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>focused<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>inputProps<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">InputBaseComponentProps</span><span class="tsd-signature-symbol">; </span>props<span class="tsd-signature-symbol">: </span><a href="" class="tsd-signature-type">props</a><span class="tsd-signature-symbol"> | </span><a href="" class="tsd-signature-type">props</a><span class="tsd-signature-symbol"> | </span><a href="" class="tsd-signature-type">props</a><span class="tsd-signature-symbol">; </span>rawValue<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">; </span>valueInInputFormat<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Element</span></li>
2711
+ </ul>
2712
+ <ul class="tsd-descriptions">
2713
+ <li class="tsd-description">
2714
+ <aside class="tsd-sources">
2715
+ <ul>
2716
+ <li>Defined in packages/material/src/util/datejs.tsx:55</li>
2717
+ </ul>
2718
+ </aside>
2719
+ <div class="tsd-comment tsd-typography">
2720
+ <div class="lead">
2721
+ <p>The dayjs formatter/parser is very lenient and for example ignores additional digits and/or characters.
2722
+ In these cases the input text can look vastly different than the actual value stored in the data.
2723
+ The &#39;ResettableTextField&#39; component adjusts the text field to reflect the actual value stored in the data
2724
+ once it&#39;s no longer &#39;focused&#39;, i.e. when the user stops editing.</p>
2725
+ </div>
2726
+ </div>
2727
+ <h4 class="tsd-parameters-title">Parameters</h4>
2728
+ <ul class="tsd-parameters">
2729
+ <li>
2730
+ <h5>__namedParameters: <span class="tsd-signature-symbol">{ </span>dayjsValueIsValid<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>focused<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>inputProps<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">InputBaseComponentProps</span><span class="tsd-signature-symbol">; </span>props<span class="tsd-signature-symbol">: </span><a href="" class="tsd-signature-type">props</a><span class="tsd-signature-symbol"> | </span><a href="" class="tsd-signature-type">props</a><span class="tsd-signature-symbol"> | </span><a href="" class="tsd-signature-type">props</a><span class="tsd-signature-symbol">; </span>rawValue<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">; </span>valueInInputFormat<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></h5>
2731
+ <ul class="tsd-parameters">
2732
+ <li class="tsd-parameter">
2733
+ <h5>dayjs<wbr>Value<wbr>IsValid<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></h5>
2734
+ </li>
2735
+ <li class="tsd-parameter">
2736
+ <h5>focused<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></h5>
2737
+ </li>
2738
+ <li class="tsd-parameter">
2739
+ <h5>input<wbr>Props<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">InputBaseComponentProps</span></h5>
2740
+ </li>
2741
+ <li class="tsd-parameter">
2742
+ <h5>props<span class="tsd-signature-symbol">: </span><a href="" class="tsd-signature-type">props</a><span class="tsd-signature-symbol"> | </span><a href="" class="tsd-signature-type">props</a><span class="tsd-signature-symbol"> | </span><a href="" class="tsd-signature-type">props</a></h5>
2743
+ </li>
2744
+ <li class="tsd-parameter">
2745
+ <h5>raw<wbr>Value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span></h5>
2746
+ </li>
2747
+ <li class="tsd-parameter">
2748
+ <h5>value<wbr>InInput<wbr>Format<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
2749
+ </li>
2750
+ </ul>
2751
+ </li>
2752
+ </ul>
2753
+ <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Element</span></h4>
2754
+ </li>
2755
+ </ul>
2756
+ </section>
2685
2757
  <section class="tsd-panel tsd-member tsd-kind-function">
2686
2758
  <a name="tablerows" class="tsd-anchor"></a>
2687
2759
  <h3><span class="tsd-flag ts-flagConst">Const</span> Table<wbr>Rows</h3>
@@ -2801,7 +2873,7 @@
2801
2873
  <li class="tsd-description">
2802
2874
  <aside class="tsd-sources">
2803
2875
  <ul>
2804
- <li>Defined in packages/material/src/util/datejs.ts:7</li>
2876
+ <li>Defined in packages/material/src/util/datejs.tsx:9</li>
2805
2877
  </ul>
2806
2878
  </aside>
2807
2879
  <h4 class="tsd-parameters-title">Parameters</h4>
@@ -3056,7 +3128,7 @@
3056
3128
  <li class="tsd-description">
3057
3129
  <aside class="tsd-sources">
3058
3130
  <ul>
3059
- <li>Defined in packages/material/src/util/datejs.ts:20</li>
3131
+ <li>Defined in packages/material/src/util/datejs.tsx:22</li>
3060
3132
  </ul>
3061
3133
  </aside>
3062
3134
  <h4 class="tsd-parameters-title">Parameters</h4>
@@ -3849,6 +3921,9 @@
3849
3921
  <li class=" tsd-kind-interface">
3850
3922
  <a href="interfaces/expandpanelprops.html" class="tsd-kind-icon">Expand<wbr>Panel<wbr>Props</a>
3851
3923
  </li>
3924
+ <li class=" tsd-kind-interface">
3925
+ <a href="interfaces/inputref.html" class="tsd-kind-icon">Input<wbr>Ref</a>
3926
+ </li>
3852
3927
  <li class=" tsd-kind-interface">
3853
3928
  <a href="interfaces/jsonformstheme.html" class="tsd-kind-icon">Json<wbr>Forms<wbr>Theme</a>
3854
3929
  </li>
@@ -3906,6 +3981,9 @@
3906
3981
  <li class=" tsd-kind-interface">
3907
3982
  <a href="interfaces/withoptionlabel.html" class="tsd-kind-icon">With<wbr>Option<wbr>Label</a>
3908
3983
  </li>
3984
+ <li class=" tsd-kind-type-alias">
3985
+ <a href="globals.html#resettabletextfieldprops" class="tsd-kind-icon">Resettable<wbr>Text<wbr>Field<wbr>Props</a>
3986
+ </li>
3909
3987
  <li class=" tsd-kind-variable">
3910
3988
  <a href="globals.html#arraylayouttoolbar" class="tsd-kind-icon">Array<wbr>Layout<wbr>Toolbar</a>
3911
3989
  </li>
@@ -4248,6 +4326,9 @@
4248
4326
  <li class=" tsd-kind-function">
4249
4327
  <a href="globals.html#nonemptyrowcomponent" class="tsd-kind-icon">Non<wbr>Empty<wbr>Row<wbr>Component</a>
4250
4328
  </li>
4329
+ <li class=" tsd-kind-function">
4330
+ <a href="globals.html#resettabletextfield" class="tsd-kind-icon">Resettable<wbr>Text<wbr>Field</a>
4331
+ </li>
4251
4332
  <li class=" tsd-kind-function">
4252
4333
  <a href="globals.html#tablerows" class="tsd-kind-icon">Table<wbr>Rows</a>
4253
4334
  </li>
package/docs/index.html CHANGED
@@ -222,6 +222,9 @@
222
222
  <li class=" tsd-kind-interface">
223
223
  <a href="interfaces/expandpanelprops.html" class="tsd-kind-icon">Expand<wbr>Panel<wbr>Props</a>
224
224
  </li>
225
+ <li class=" tsd-kind-interface">
226
+ <a href="interfaces/inputref.html" class="tsd-kind-icon">Input<wbr>Ref</a>
227
+ </li>
225
228
  <li class=" tsd-kind-interface">
226
229
  <a href="interfaces/jsonformstheme.html" class="tsd-kind-icon">Json<wbr>Forms<wbr>Theme</a>
227
230
  </li>
@@ -279,6 +282,9 @@
279
282
  <li class=" tsd-kind-interface">
280
283
  <a href="interfaces/withoptionlabel.html" class="tsd-kind-icon">With<wbr>Option<wbr>Label</a>
281
284
  </li>
285
+ <li class=" tsd-kind-type-alias">
286
+ <a href="globals.html#resettabletextfieldprops" class="tsd-kind-icon">Resettable<wbr>Text<wbr>Field<wbr>Props</a>
287
+ </li>
282
288
  <li class=" tsd-kind-variable">
283
289
  <a href="globals.html#arraylayouttoolbar" class="tsd-kind-icon">Array<wbr>Layout<wbr>Toolbar</a>
284
290
  </li>
@@ -621,6 +627,9 @@
621
627
  <li class=" tsd-kind-function">
622
628
  <a href="globals.html#nonemptyrowcomponent" class="tsd-kind-icon">Non<wbr>Empty<wbr>Row<wbr>Component</a>
623
629
  </li>
630
+ <li class=" tsd-kind-function">
631
+ <a href="globals.html#resettabletextfield" class="tsd-kind-icon">Resettable<wbr>Text<wbr>Field</a>
632
+ </li>
624
633
  <li class=" tsd-kind-function">
625
634
  <a href="globals.html#tablerows" class="tsd-kind-icon">Table<wbr>Rows</a>
626
635
  </li>
package/docs/interfaces/inputref.html ADDED
@@ -0,0 +1,168 @@
1
+ <!doctype html>
2
+ <html class="default no-js">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <title>InputRef | JSON Forms React Material Renderers</title>
7
+ <meta name="description" content="Documentation for JSON Forms React Material Renderers">
8
+ <meta name="viewport" content="width=device-width, initial-scale=1">
9
+ <link rel="stylesheet" href="../assets/css/main.css">
10
+ </head>
11
+ <body>
12
+ <header>
13
+ <div class="tsd-page-toolbar">
14
+ <div class="container">
15
+ <div class="table-wrap">
16
+ <div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
17
+ <div class="field">
18
+ <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
19
+ <input id="tsd-search-field" type="text" />
20
+ </div>
21
+ <ul class="results">
22
+ <li class="state loading">Preparing search index...</li>
23
+ <li class="state failure">The search index is not available</li>
24
+ </ul>
25
+ <a href="../index.html" class="title">JSON Forms React Material Renderers</a>
26
+ </div>
27
+ <div class="table-cell" id="tsd-widgets">
28
+ <div id="tsd-filter">
29
+ <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
30
+ <div class="tsd-filter-group">
31
+ <div class="tsd-select" id="tsd-filter-visibility">
32
+ <span class="tsd-select-label">All</span>
33
+ <ul class="tsd-select-list">
34
+ <li data-value="public">Public</li>
35
+ <li data-value="protected">Public/Protected</li>
36
+ <li data-value="private" class="selected">All</li>
37
+ </ul>
38
+ </div>
39
+ <input type="checkbox" id="tsd-filter-inherited" checked />
40
+ <label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
41
+ <input type="checkbox" id="tsd-filter-only-exported" />
42
+ <label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
43
+ </div>
44
+ </div>
45
+ <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ <div class="tsd-page-title">
51
+ <div class="container">
52
+ <ul class="tsd-breadcrumb">
53
+ <li>
54
+ <a href="../globals.html">Globals</a>
55
+ </li>
56
+ <li>
57
+ <a href="inputref.html">InputRef</a>
58
+ </li>
59
+ </ul>
60
+ <h1>Interface InputRef</h1>
61
+ </div>
62
+ </div>
63
+ </header>
64
+ <div class="container container-main">
65
+ <div class="row">
66
+ <div class="col-8 col-content">
67
+ <section class="tsd-panel tsd-hierarchy">
68
+ <h3>Hierarchy</h3>
69
+ <ul class="tsd-hierarchy">
70
+ <li>
71
+ <span class="target">InputRef</span>
72
+ </li>
73
+ </ul>
74
+ </section>
75
+ <section class="tsd-panel-group tsd-index-group">
76
+ <h2>Index</h2>
77
+ <section class="tsd-panel tsd-index-panel">
78
+ <div class="tsd-index-content">
79
+ <section class="tsd-index-section ">
80
+ <h3>Properties</h3>
81
+ <ul class="tsd-index-list">
82
+ <li class="tsd-kind-property tsd-parent-kind-interface"><a href="inputref.html#lastinput" class="tsd-kind-icon">last<wbr>Input</a></li>
83
+ <li class="tsd-kind-property tsd-parent-kind-interface"><a href="inputref.html#toshow" class="tsd-kind-icon">to<wbr>Show</a></li>
84
+ </ul>
85
+ </section>
86
+ </div>
87
+ </section>
88
+ </section>
89
+ <section class="tsd-panel-group tsd-member-group ">
90
+ <h2>Properties</h2>
91
+ <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
92
+ <a name="lastinput" class="tsd-anchor"></a>
93
+ <h3>last<wbr>Input</h3>
94
+ <div class="tsd-signature tsd-kind-icon">last<wbr>Input<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
95
+ <aside class="tsd-sources">
96
+ <ul>
97
+ <li>Defined in packages/material/src/util/datejs.tsx:38</li>
98
+ </ul>
99
+ </aside>
100
+ </section>
101
+ <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
102
+ <a name="toshow" class="tsd-anchor"></a>
103
+ <h3>to<wbr>Show</h3>
104
+ <div class="tsd-signature tsd-kind-icon">to<wbr>Show<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
105
+ <aside class="tsd-sources">
106
+ <ul>
107
+ <li>Defined in packages/material/src/util/datejs.tsx:39</li>
108
+ </ul>
109
+ </aside>
110
+ </section>
111
+ </section>
112
+ </div>
113
+ <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
114
+ <nav class="tsd-navigation primary">
115
+ <ul>
116
+ <li class="globals ">
117
+ <a href="../globals.html"><em>Globals</em></a>
118
+ </li>
119
+ </ul>
120
+ </nav>
121
+ <nav class="tsd-navigation secondary menu-sticky">
122
+ <ul class="before-current">
123
+ </ul>
124
+ <ul class="current">
125
+ <li class="current tsd-kind-interface">
126
+ <a href="inputref.html" class="tsd-kind-icon">Input<wbr>Ref</a>
127
+ <ul>
128
+ <li class=" tsd-kind-property tsd-parent-kind-interface">
129
+ <a href="inputref.html#lastinput" class="tsd-kind-icon">last<wbr>Input</a>
130
+ </li>
131
+ <li class=" tsd-kind-property tsd-parent-kind-interface">
132
+ <a href="inputref.html#toshow" class="tsd-kind-icon">to<wbr>Show</a>
133
+ </li>
134
+ </ul>
135
+ </li>
136
+ </ul>
137
+ <ul class="after-current">
138
+ </ul>
139
+ </nav>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ <footer class="with-border-bottom">
144
+ <div class="container">
145
+ <h2>Legend</h2>
146
+ <div class="tsd-legend-group">
147
+ <ul class="tsd-legend">
148
+ <li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
149
+ <li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
150
+ <li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
151
+ </ul>
152
+ <ul class="tsd-legend">
153
+ <li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
154
+ <li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
155
+ </ul>
156
+ <ul class="tsd-legend">
157
+ <li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
158
+ </ul>
159
+ </div>
160
+ </div>
161
+ </footer>
162
+ <div class="container tsd-generator">
163
+ <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
164
+ </div>
165
+ <div class="overlay"></div>
166
+ <script src="../assets/js/main.js"></script>
167
+ </body>
168
+ </html>
package/lib/jsonforms-react-material.cjs.js CHANGED
@@ -455,13 +455,13 @@ var MuiSelect = React__default["default"].memo(function (props) {
455
455
  });
456
456
 
457
457
  dayjs__default["default"].extend(customParsing__default["default"]);
458
- var createOnChangeHandler = function (path, handleChange, saveFormat) { return function (time) {
458
+ var createOnChangeHandler = function (path, handleChange, saveFormat) { return function (time, textInputValue) {
459
459
  if (!time) {
460
460
  handleChange(path, undefined);
461
461
  return;
462
462
  }
463
463
  var result = dayjs__default["default"](time).format(saveFormat);
464
- handleChange(path, result === 'Invalid Date' ? undefined : result);
464
+ handleChange(path, result === 'Invalid Date' ? textInputValue : result);
465
465
  }; };
466
466
  var getData = function (data, saveFormat) {
467
467
  if (!data) {
@@ -473,6 +473,23 @@ var getData = function (data, saveFormat) {
473
473
  }
474
474
  return dayjsData;
475
475
  };
476
+ var ResettableTextField = function (_a) {
477
+ var rawValue = _a.rawValue, dayjsValueIsValid = _a.dayjsValueIsValid, valueInInputFormat = _a.valueInInputFormat, focused = _a.focused, inputProps = _a.inputProps, props = __rest(_a, ["rawValue", "dayjsValueIsValid", "valueInInputFormat", "focused", "inputProps"]);
478
+ var value = React.useRef({ lastInput: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value, toShow: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value });
479
+ if (!focused) {
480
+ if (!dayjsValueIsValid) {
481
+ value.current.toShow = typeof rawValue === 'string' || rawValue === null || rawValue === undefined ? rawValue : JSON.stringify(rawValue);
482
+ }
483
+ else {
484
+ value.current.toShow = valueInInputFormat;
485
+ }
486
+ }
487
+ if (focused && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) !== value.current.lastInput) {
488
+ value.current.lastInput = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value;
489
+ value.current.toShow = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value;
490
+ }
491
+ return React__default["default"].createElement(material.TextField, __assign({}, props, { inputProps: __assign(__assign({}, inputProps), { value: value.current.toShow || '' }) }));
492
+ };
476
493
 
477
494
  var renderLayoutElements = function (elements, schema, path, enabled, renderers, cells) {
478
495
  return elements.map(function (child, index) { return (React__default["default"].createElement(material.Grid, { item: true, key: path + "-" + index, xs: true },
@@ -763,7 +780,7 @@ var MuiAutocomplete = function (props) {
763
780
  handleChange(path, newValue === null || newValue === void 0 ? void 0 : newValue.value);
764
781
  }, inputValue: inputValue, onInputChange: function (_event, newInputValue) {
765
782
  setInputValue(newInputValue);
766
- }, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || (function (option) { return option === null || option === void 0 ? void 0 : option.label; }), style: { marginTop: 16 }, renderInput: function (params) { return (React__default["default"].createElement(material.Input, { style: { width: '100%' }, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled })); }, renderOption: renderOption, filterOptions: filterOptions }));
783
+ }, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || (function (option) { return option === null || option === void 0 ? void 0 : option.label; }), freeSolo: false, style: { marginTop: 16 }, renderInput: function (params) { return (React__default["default"].createElement(material.Input, { style: { width: '100%' }, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled })); }, renderOption: renderOption, filterOptions: filterOptions }));
767
784
  };
768
785
 
769
786
  var MaterialEnumControl = function (props) {
@@ -790,14 +807,15 @@ var materialNativeControlTester = core.rankWith(2, core.or(core.isDateControl, c
790
807
  var MaterialNativeControl$1 = react.withJsonFormsControlProps(MaterialNativeControl);
791
808
 
792
809
  var MaterialDateControl = function (props) {
793
- var _a, _b;
794
- var _c = useFocus(), focused = _c[0], onFocus = _c[1], onBlur = _c[2];
810
+ var _a, _b, _c;
811
+ var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
795
812
  var description = props.description, id = props.id, errors = props.errors, label = props.label, uischema = props.uischema, visible = props.visible, enabled = props.enabled, required = props.required, path = props.path, handleChange = props.handleChange, data = props.data, config = props.config;
796
813
  var isValid = errors.length === 0;
797
814
  var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
798
815
  var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
799
816
  var format = (_a = appliedUiSchemaOptions.dateFormat) !== null && _a !== void 0 ? _a : 'YYYY-MM-DD';
800
817
  var saveFormat = (_b = appliedUiSchemaOptions.dateSaveFormat) !== null && _b !== void 0 ? _b : 'YYYY-MM-DD';
818
+ var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['year', 'day'];
801
819
  var firstFormHelperText = showDescription
802
820
  ? description
803
821
  : !isValid
@@ -805,9 +823,11 @@ var MaterialDateControl = function (props) {
805
823
  : null;
806
824
  var secondFormHelperText = showDescription && !isValid ? errors : null;
807
825
  var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
826
+ var value = getData(data, saveFormat);
827
+ var valueInInputFormat = value ? value.format(format) : '';
808
828
  return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
809
829
  React__default["default"].createElement(lab.LocalizationProvider, { dateAdapter: AdapterDayjs__default["default"] },
810
- React__default["default"].createElement(lab.DatePicker, { label: label, value: getData(data, saveFormat), clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: appliedUiSchemaOptions.views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(material.TextField, __assign({}, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
830
+ React__default["default"].createElement(lab.DatePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
811
831
  React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
812
832
  React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
813
833
  };
@@ -815,14 +835,15 @@ var materialDateControlTester = core.rankWith(4, core.isDateControl);
815
835
  var MaterialDateControl$1 = react.withJsonFormsControlProps(MaterialDateControl);
816
836
 
817
837
  var MaterialDateTimeControl = function (props) {
818
- var _a, _b;
819
- var _c = useFocus(), focused = _c[0], onFocus = _c[1], onBlur = _c[2];
838
+ var _a, _b, _c;
839
+ var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
820
840
  var id = props.id, description = props.description, errors = props.errors, label = props.label, uischema = props.uischema, visible = props.visible, enabled = props.enabled, required = props.required, path = props.path, handleChange = props.handleChange, data = props.data, config = props.config;
821
841
  var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
822
842
  var isValid = errors.length === 0;
823
843
  var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
824
844
  var format = (_a = appliedUiSchemaOptions.dateTimeFormat) !== null && _a !== void 0 ? _a : 'YYYY-MM-DD HH:mm';
825
845
  var saveFormat = (_b = appliedUiSchemaOptions.dateTimeSaveFormat) !== null && _b !== void 0 ? _b : undefined;
846
+ var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['year', 'day', 'hours', 'minutes'];
826
847
  var firstFormHelperText = showDescription
827
848
  ? description
828
849
  : !isValid
@@ -830,9 +851,11 @@ var MaterialDateTimeControl = function (props) {
830
851
  : null;
831
852
  var secondFormHelperText = showDescription && !isValid ? errors : null;
832
853
  var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
854
+ var value = getData(data, saveFormat);
855
+ var valueInInputFormat = value ? value.format(format) : '';
833
856
  return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
834
857
  React__default["default"].createElement(lab.LocalizationProvider, { dateAdapter: AdapterDayjs__default["default"] },
835
- React__default["default"].createElement(lab.DateTimePicker, { label: label, value: getData(data, saveFormat), clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: appliedUiSchemaOptions.views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(material.TextField, __assign({}, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
858
+ React__default["default"].createElement(lab.DateTimePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
836
859
  React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
837
860
  React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
838
861
  };
@@ -840,14 +863,15 @@ var materialDateTimeControlTester = core.rankWith(2, core.isDateTimeControl);
840
863
  var MaterialDateTimeControl$1 = react.withJsonFormsControlProps(MaterialDateTimeControl);
841
864
 
842
865
  var MaterialTimeControl = function (props) {
843
- var _a, _b;
844
- var _c = useFocus(), focused = _c[0], onFocus = _c[1], onBlur = _c[2];
866
+ var _a, _b, _c;
867
+ var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
845
868
  var id = props.id, description = props.description, errors = props.errors, label = props.label, uischema = props.uischema, visible = props.visible, enabled = props.enabled, required = props.required, path = props.path, handleChange = props.handleChange, data = props.data, config = props.config;
846
869
  var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
847
870
  var isValid = errors.length === 0;
848
871
  var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
849
872
  var format = (_a = appliedUiSchemaOptions.timeFormat) !== null && _a !== void 0 ? _a : 'HH:mm';
850
873
  var saveFormat = (_b = appliedUiSchemaOptions.timeSaveFormat) !== null && _b !== void 0 ? _b : 'HH:mm:ss';
874
+ var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['hours', 'minutes'];
851
875
  var firstFormHelperText = showDescription
852
876
  ? description
853
877
  : !isValid
@@ -855,9 +879,11 @@ var MaterialTimeControl = function (props) {
855
879
  : null;
856
880
  var secondFormHelperText = showDescription && !isValid ? errors : null;
857
881
  var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
882
+ var value = getData(data, saveFormat);
883
+ var valueInInputFormat = value ? value.format(format) : '';
858
884
  return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
859
885
  React__default["default"].createElement(lab.LocalizationProvider, { dateAdapter: AdapterDayjs__default["default"] },
860
- React__default["default"].createElement(lab.TimePicker, { label: label, value: getData(data, saveFormat), clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: appliedUiSchemaOptions.views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(material.TextField, __assign({}, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
886
+ React__default["default"].createElement(lab.TimePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
861
887
  React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
862
888
  React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
863
889
  };
@@ -1433,6 +1459,7 @@ exports.MuiInputNumberFormat = MuiInputNumberFormat;
1433
1459
  exports.MuiInputText = MuiInputText;
1434
1460
  exports.MuiInputTime = MuiInputTime;
1435
1461
  exports.MuiSelect = MuiSelect;
1462
+ exports.ResettableTextField = ResettableTextField;
1436
1463
  exports.Unwrapped = Unwrapped;
1437
1464
  exports.createOnChangeHandler = createOnChangeHandler;
1438
1465
  exports.getData = getData;