@dxc-technology/halstack-react 0.0.0-bfdc357 → 0.0.0-bfeb2b0

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 (248) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +1 -4
  3. package/ThemeContext.d.ts +10 -0
  4. package/ThemeContext.js +26 -29
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +13 -23
  7. package/accordion/Accordion.stories.tsx +307 -0
  8. package/accordion/Accordion.test.js +72 -0
  9. package/accordion/types.d.ts +8 -8
  10. package/accordion-group/AccordionGroup.d.ts +1 -1
  11. package/accordion-group/AccordionGroup.js +15 -17
  12. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  13. package/accordion-group/AccordionGroup.test.js +151 -0
  14. package/accordion-group/types.d.ts +8 -8
  15. package/alert/Alert.js +2 -2
  16. package/alert/Alert.test.js +92 -0
  17. package/alert/types.d.ts +1 -1
  18. package/badge/Badge.d.ts +4 -0
  19. package/badge/Badge.js +1 -1
  20. package/badge/types.d.ts +4 -0
  21. package/badge/types.js +5 -0
  22. package/bleed/Bleed.d.ts +3 -0
  23. package/bleed/Bleed.js +84 -0
  24. package/bleed/Bleed.stories.tsx +342 -0
  25. package/bleed/types.d.ts +37 -0
  26. package/bleed/types.js +5 -0
  27. package/box/Box.js +2 -2
  28. package/box/Box.test.js +18 -0
  29. package/button/Button.d.ts +1 -1
  30. package/button/Button.js +13 -19
  31. package/button/Button.stories.tsx +6 -8
  32. package/button/Button.test.js +35 -0
  33. package/button/types.d.ts +5 -9
  34. package/card/Card.js +1 -1
  35. package/card/Card.stories.tsx +201 -0
  36. package/card/Card.test.js +50 -0
  37. package/card/ice-cream.jpg +0 -0
  38. package/card/types.d.ts +4 -6
  39. package/checkbox/Checkbox.d.ts +1 -1
  40. package/checkbox/Checkbox.js +9 -15
  41. package/checkbox/Checkbox.stories.tsx +14 -14
  42. package/checkbox/Checkbox.test.js +78 -0
  43. package/checkbox/types.d.ts +6 -2
  44. package/chip/Chip.d.ts +4 -0
  45. package/chip/Chip.js +16 -76
  46. package/chip/Chip.stories.tsx +6 -8
  47. package/chip/Chip.test.js +56 -0
  48. package/chip/types.d.ts +45 -0
  49. package/chip/types.js +5 -0
  50. package/common/variables.js +56 -260
  51. package/date-input/DateInput.js +54 -46
  52. package/date-input/DateInput.stories.tsx +7 -7
  53. package/date-input/DateInput.test.js +479 -0
  54. package/date-input/types.d.ts +16 -9
  55. package/dialog/Dialog.js +4 -3
  56. package/dialog/Dialog.test.js +40 -0
  57. package/dropdown/Dropdown.d.ts +1 -1
  58. package/dropdown/Dropdown.js +13 -35
  59. package/dropdown/Dropdown.stories.tsx +249 -0
  60. package/dropdown/Dropdown.test.js +189 -0
  61. package/dropdown/types.d.ts +6 -15
  62. package/file-input/FileInput.d.ts +1 -1
  63. package/file-input/FileInput.js +160 -81
  64. package/file-input/FileInput.stories.tsx +507 -0
  65. package/file-input/FileInput.test.js +457 -0
  66. package/file-input/FileItem.js +8 -6
  67. package/file-input/types.d.ts +32 -7
  68. package/footer/Footer.d.ts +1 -1
  69. package/footer/Footer.js +28 -36
  70. package/footer/{Footer.stories.jsx → Footer.stories.tsx} +1 -22
  71. package/footer/Footer.test.js +109 -0
  72. package/footer/Icons.d.ts +2 -0
  73. package/footer/Icons.js +3 -3
  74. package/footer/types.d.ts +21 -17
  75. package/header/Header.js +2 -2
  76. package/header/Header.test.js +63 -0
  77. package/header/Icons.d.ts +2 -0
  78. package/header/types.d.ts +4 -2
  79. package/heading/Heading.js +1 -1
  80. package/heading/Heading.stories.tsx +54 -0
  81. package/heading/Heading.test.js +186 -0
  82. package/inset/Inset.d.ts +3 -0
  83. package/inset/Inset.js +84 -0
  84. package/inset/Inset.stories.tsx +229 -0
  85. package/inset/types.d.ts +37 -0
  86. package/inset/types.js +5 -0
  87. package/layout/ApplicationLayout.d.ts +10 -0
  88. package/layout/ApplicationLayout.js +17 -21
  89. package/layout/ApplicationLayout.stories.tsx +171 -0
  90. package/layout/types.d.ts +57 -0
  91. package/layout/types.js +5 -0
  92. package/link/Link.js +8 -16
  93. package/link/Link.stories.tsx +6 -1
  94. package/link/Link.test.js +91 -0
  95. package/link/types.d.ts +5 -9
  96. package/list/List.d.ts +4 -0
  97. package/list/List.js +47 -0
  98. package/list/List.stories.tsx +95 -0
  99. package/list/types.d.ts +7 -0
  100. package/list/types.js +5 -0
  101. package/main.d.ts +11 -8
  102. package/main.js +62 -38
  103. package/number-input/NumberInput.js +14 -24
  104. package/number-input/NumberInput.stories.tsx +5 -5
  105. package/number-input/NumberInput.test.js +508 -0
  106. package/number-input/NumberInputContext.d.ts +4 -0
  107. package/number-input/NumberInputContext.js +5 -2
  108. package/number-input/numberInputContextTypes.d.ts +19 -0
  109. package/number-input/numberInputContextTypes.js +5 -0
  110. package/number-input/types.d.ts +4 -0
  111. package/package.json +5 -2
  112. package/paginator/Paginator.js +2 -8
  113. package/paginator/Paginator.test.js +266 -0
  114. package/password-input/PasswordInput.js +19 -18
  115. package/password-input/PasswordInput.stories.tsx +3 -3
  116. package/password-input/PasswordInput.test.js +183 -0
  117. package/password-input/types.d.ts +17 -10
  118. package/progress-bar/ProgressBar.js +4 -4
  119. package/progress-bar/ProgressBar.test.js +65 -0
  120. package/quick-nav/QuickNav.d.ts +4 -0
  121. package/quick-nav/QuickNav.js +66 -0
  122. package/quick-nav/QuickNav.stories.tsx +237 -0
  123. package/quick-nav/types.d.ts +21 -0
  124. package/quick-nav/types.js +5 -0
  125. package/radio/Radio.js +2 -2
  126. package/radio/Radio.test.js +71 -0
  127. package/radio/types.d.ts +2 -2
  128. package/radio-group/Radio.d.ts +4 -0
  129. package/radio-group/Radio.js +141 -0
  130. package/radio-group/RadioGroup.d.ts +4 -0
  131. package/radio-group/RadioGroup.js +280 -0
  132. package/radio-group/RadioGroup.stories.tsx +100 -0
  133. package/radio-group/RadioGroup.test.js +695 -0
  134. package/radio-group/types.d.ts +114 -0
  135. package/radio-group/types.js +5 -0
  136. package/resultsetTable/ResultsetTable.d.ts +4 -0
  137. package/resultsetTable/ResultsetTable.js +9 -29
  138. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  139. package/resultsetTable/ResultsetTable.test.js +306 -0
  140. package/resultsetTable/types.d.ts +67 -0
  141. package/resultsetTable/types.js +5 -0
  142. package/row/Row.d.ts +3 -0
  143. package/row/Row.js +127 -0
  144. package/row/Row.stories.tsx +237 -0
  145. package/row/types.d.ts +28 -0
  146. package/row/types.js +5 -0
  147. package/select/Icons.d.ts +10 -0
  148. package/select/Icons.js +93 -0
  149. package/select/Option.d.ts +4 -0
  150. package/select/Option.js +110 -0
  151. package/select/Select.d.ts +4 -0
  152. package/select/Select.js +116 -249
  153. package/select/Select.stories.tsx +91 -81
  154. package/select/Select.test.js +2057 -0
  155. package/select/types.d.ts +194 -0
  156. package/select/types.js +5 -0
  157. package/sidenav/Sidenav.js +2 -2
  158. package/sidenav/Sidenav.stories.tsx +182 -0
  159. package/sidenav/Sidenav.test.js +56 -0
  160. package/slider/Slider.d.ts +1 -1
  161. package/slider/Slider.js +6 -5
  162. package/slider/Slider.stories.tsx +8 -8
  163. package/slider/Slider.test.js +150 -0
  164. package/slider/types.d.ts +4 -0
  165. package/spinner/Spinner.js +2 -2
  166. package/spinner/Spinner.stories.jsx +1 -0
  167. package/spinner/Spinner.test.js +64 -0
  168. package/stack/Stack.d.ts +3 -0
  169. package/stack/Stack.js +97 -0
  170. package/stack/Stack.stories.tsx +164 -0
  171. package/stack/types.d.ts +24 -0
  172. package/stack/types.js +5 -0
  173. package/switch/Switch.d.ts +1 -1
  174. package/switch/Switch.js +21 -8
  175. package/switch/Switch.stories.tsx +7 -7
  176. package/switch/Switch.test.js +98 -0
  177. package/switch/types.d.ts +4 -0
  178. package/table/Table.js +3 -3
  179. package/table/Table.stories.jsx +2 -1
  180. package/table/Table.test.js +26 -0
  181. package/tabs/Tabs.d.ts +1 -1
  182. package/tabs/Tabs.js +20 -20
  183. package/tabs/Tabs.stories.tsx +118 -0
  184. package/tabs/Tabs.test.js +140 -0
  185. package/tabs/types.d.ts +29 -18
  186. package/tag/Tag.d.ts +1 -1
  187. package/tag/Tag.js +16 -23
  188. package/tag/Tag.stories.tsx +26 -29
  189. package/tag/Tag.test.js +60 -0
  190. package/tag/types.d.ts +23 -14
  191. package/text/Text.d.ts +7 -0
  192. package/text/Text.js +30 -0
  193. package/text/Text.stories.tsx +19 -0
  194. package/text-input/TextInput.d.ts +4 -0
  195. package/text-input/TextInput.js +62 -89
  196. package/text-input/TextInput.stories.tsx +474 -0
  197. package/text-input/TextInput.test.js +1725 -0
  198. package/text-input/types.d.ts +163 -0
  199. package/text-input/types.js +5 -0
  200. package/textarea/Textarea.d.ts +4 -0
  201. package/textarea/Textarea.js +37 -68
  202. package/textarea/Textarea.stories.jsx +37 -15
  203. package/textarea/Textarea.test.js +437 -0
  204. package/textarea/types.d.ts +134 -0
  205. package/textarea/types.js +5 -0
  206. package/toggle-group/ToggleGroup.d.ts +4 -0
  207. package/toggle-group/ToggleGroup.js +18 -46
  208. package/toggle-group/ToggleGroup.stories.tsx +27 -32
  209. package/toggle-group/ToggleGroup.test.js +156 -0
  210. package/toggle-group/types.d.ts +105 -0
  211. package/toggle-group/types.js +5 -0
  212. package/useTheme.d.ts +2 -0
  213. package/useTheme.js +1 -1
  214. package/wizard/Wizard.d.ts +1 -1
  215. package/wizard/Wizard.js +73 -18
  216. package/wizard/{Wizard.stories.jsx → Wizard.stories.tsx} +13 -23
  217. package/wizard/Wizard.test.js +141 -0
  218. package/wizard/types.d.ts +9 -9
  219. package/V3Select/V3Select.js +0 -455
  220. package/V3Select/index.d.ts +0 -27
  221. package/V3Textarea/V3Textarea.js +0 -260
  222. package/V3Textarea/index.d.ts +0 -27
  223. package/chip/index.d.ts +0 -22
  224. package/date/Date.js +0 -373
  225. package/date/index.d.ts +0 -27
  226. package/input-text/Icons.js +0 -22
  227. package/input-text/InputText.js +0 -611
  228. package/input-text/index.d.ts +0 -36
  229. package/resultsetTable/index.d.ts +0 -19
  230. package/select/index.d.ts +0 -131
  231. package/text-input/index.d.ts +0 -135
  232. package/textarea/index.d.ts +0 -117
  233. package/toggle/Toggle.js +0 -186
  234. package/toggle/index.d.ts +0 -21
  235. package/toggle-group/index.d.ts +0 -21
  236. package/upload/Upload.js +0 -201
  237. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  238. package/upload/buttons-upload/Icons.js +0 -40
  239. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  240. package/upload/dragAndDropArea/Icons.js +0 -39
  241. package/upload/file-upload/FileToUpload.js +0 -115
  242. package/upload/file-upload/Icons.js +0 -66
  243. package/upload/files-upload/FilesToUpload.js +0 -109
  244. package/upload/index.d.ts +0 -15
  245. package/upload/transaction/Icons.js +0 -160
  246. package/upload/transaction/Transaction.js +0 -104
  247. package/upload/transactions/Transactions.js +0 -94
  248. package/wizard/Icons.js +0 -65
@@ -1,16 +1,9 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
6
  exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.componentTokens = void 0;
9
-
10
- var _Icons = require("../header/Icons");
11
-
12
- var _Icons2 = _interopRequireDefault(require("../footer/Icons"));
13
-
14
7
  var globalTokens = {
15
8
  // Color
16
9
  inherit: "inherit",
@@ -99,7 +92,7 @@ var globalTokens = {
99
92
  type_sans: "Open Sans, sans-serif",
100
93
  type_scale_root: "16px",
101
94
  type_scale_08: "3.75rem",
102
- type_scale_07: "3rem",
95
+ type_scale_07: "2.5rem",
103
96
  type_scale_06: "2rem",
104
97
  type_scale_05: "1.5rem",
105
98
  type_scale_04: "1.25rem",
@@ -164,7 +157,6 @@ exports.globalTokens = globalTokens;
164
157
  var componentTokens = {
165
158
  accordion: {
166
159
  backgroundColor: globalTokens.hal_white,
167
- disabledBackgroundColor: globalTokens.transparent,
168
160
  hoverBackgroundColor: globalTokens.hal_purple_l_95,
169
161
  arrowColor: globalTokens.hal_purple_s_38,
170
162
  disabledArrowColor: globalTokens.hal_grey_l_60,
@@ -397,23 +389,6 @@ var componentTokens = {
397
389
  disabledIconColor: globalTokens.hal_grey_l_60,
398
390
  focusColor: globalTokens.hal_blue_l_50
399
391
  },
400
- date: {
401
- pickerSelectedDateBackgroundColor: globalTokens.purple,
402
- pickerSelectedDateColor: globalTokens.hal_white,
403
- pickerBackgroundColor: globalTokens.hal_white,
404
- pickerFontColor: globalTokens.hal_black,
405
- pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
406
- pickerHoverDateFontColor: globalTokens.hal_black,
407
- pickerActualDateColor: globalTokens.lightGrey,
408
- pickerYearColor: globalTokens.hal_black,
409
- pickerMonthColor: globalTokens.hal_black,
410
- pickerWeekLabelColor: globalTokens.hal_black,
411
- pickerBackgroundColorMonthArrows: globalTokens.transparent,
412
- focusColor: globalTokens.hal_blue_l_50,
413
- fontFamily: globalTokens.type_sans,
414
- pickerHeight: "316px",
415
- pickerWidth: "290px"
416
- },
417
392
  dateInput: {
418
393
  pickerFontFamily: globalTokens.type_sans,
419
394
  pickerBackgroundColor: globalTokens.hal_white,
@@ -535,17 +510,16 @@ var componentTokens = {
535
510
  errorMessageFontFamily: globalTokens.type_sans,
536
511
  errorMessageFontSize: globalTokens.type_scale_01,
537
512
  errorMessageFontWeight: globalTokens.type_regular,
538
- errorMessageLineHeight: globalTokens.type_scale_05,
513
+ errorMessageLineHeight: globalTokens.type_leading_normal,
539
514
  dropBorderThickness: globalTokens.border_width_1,
540
515
  dropBorderStyle: globalTokens.border_dashed,
541
516
  dropBorderRadius: globalTokens.border_radius_large,
542
517
  fileItemBorderThickness: globalTokens.border_width_1,
543
518
  fileItemBorderStyle: globalTokens.border_solid,
544
519
  fileItemBorderRadius: globalTokens.border_radius_medium,
545
- hoverDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_95,
546
- activeDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_80,
547
- errorHoverDeleteFileItemBackgroundColor: globalTokens.hal_red_l_95,
548
- errorActiveDeleteFileItemBackgroundColor: globalTokens.hal_red_s_41
520
+ hoverDeleteFileItemBackgroundColor: "#0000000d",
521
+ activeDeleteFileItemBackgroundColor: "#00000033",
522
+ focusActionBorderColor: globalTokens.hal_blue_l_50
549
523
  },
550
524
  footer: {
551
525
  height: "124px",
@@ -565,7 +539,7 @@ var componentTokens = {
565
539
  copyrightFontStyle: globalTokens.type_normal,
566
540
  copyrightFontWeight: globalTokens.type_regular,
567
541
  copyrightFontColor: globalTokens.hal_white,
568
- logo: _Icons2["default"],
542
+ logo: "",
569
543
  logoHeight: "32px",
570
544
  logoWidth: "auto",
571
545
  socialLinksSize: "24px",
@@ -583,8 +557,8 @@ var componentTokens = {
583
557
  hamburguerTextTransform: globalTokens.type_uppercase,
584
558
  hamburguerIconColor: globalTokens.hal_black,
585
559
  hamburguerHoverColor: globalTokens.mediumGreyBlack,
586
- logo: _Icons.dxcLogo,
587
- logoResponsive: _Icons.dxcLogo,
560
+ logo: "",
561
+ logoResponsive: "",
588
562
  logoHeight: "40px",
589
563
  logoWidth: "auto",
590
564
  menuBackgroundColor: globalTokens.hal_white,
@@ -608,99 +582,40 @@ var componentTokens = {
608
582
  heading: {
609
583
  level1FontColor: globalTokens.inherit,
610
584
  level1FontFamily: globalTokens.type_sans,
611
- level1FontSize: globalTokens.type_scale_08,
585
+ level1FontSize: globalTokens.type_scale_07,
612
586
  level1FontStyle: globalTokens.type_normal,
613
- level1FontWeight: globalTokens.type_regular,
587
+ level1FontWeight: globalTokens.type_semibold,
614
588
  level1LineHeight: globalTokens.type_leading_compact_01,
615
589
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
616
590
  level2FontColor: globalTokens.inherit,
617
591
  level2FontFamily: globalTokens.type_sans,
618
- level2FontSize: globalTokens.type_scale_07,
592
+ level2FontSize: globalTokens.type_scale_05,
619
593
  level2FontStyle: globalTokens.type_normal,
620
- level2FontWeight: globalTokens.type_regular,
594
+ level2FontWeight: globalTokens.type_semibold,
621
595
  level2LineHeight: globalTokens.type_leading_normal,
622
596
  level2LetterSpacing: globalTokens.type_spacing_normal,
623
597
  level3FontColor: globalTokens.inherit,
624
598
  level3FontFamily: globalTokens.type_sans,
625
- level3FontSize: globalTokens.type_scale_06,
599
+ level3FontSize: globalTokens.type_scale_04,
626
600
  level3FontStyle: globalTokens.type_normal,
627
- level3FontWeight: globalTokens.type_regular,
601
+ level3FontWeight: globalTokens.type_semibold,
628
602
  level3LineHeight: globalTokens.type_leading_compact_01,
629
603
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
630
604
  level4FontColor: globalTokens.inherit,
631
605
  level4FontFamily: globalTokens.type_sans,
632
- level4FontSize: globalTokens.type_scale_05,
606
+ level4FontSize: globalTokens.type_scale_03,
633
607
  level4FontStyle: globalTokens.type_normal,
634
- level4FontWeight: globalTokens.type_regular,
608
+ level4FontWeight: globalTokens.type_semibold,
635
609
  level4LineHeight: globalTokens.type_leading_normal,
636
610
  level4LetterSpacing: globalTokens.type_spacing_normal,
637
611
  level5FontColor: globalTokens.inherit,
638
612
  level5FontFamily: globalTokens.type_sans,
639
- level5FontSize: globalTokens.type_scale_04,
613
+ level5FontSize: globalTokens.type_scale_02,
640
614
  level5FontStyle: globalTokens.type_normal,
641
- level5FontWeight: globalTokens.type_regular,
615
+ level5FontWeight: globalTokens.type_semibold,
642
616
  level5LineHeight: globalTokens.type_leading_normal,
643
617
  level5LetterSpacing: globalTokens.type_spacing_wide_01
644
618
  },
645
- inputText: {
646
- fontFamily: globalTokens.type_sans,
647
- assistiveTextFontColor: globalTokens.black,
648
- assistiveTextFontColorOnDark: globalTokens.white,
649
- assistiveTextFontSize: globalTokens.type_scale_01,
650
- assistiveTextFontStyle: globalTokens.type_normal,
651
- assistiveTextFontWeight: globalTokens.type_regular,
652
- disabledColor: globalTokens.lighterBlack,
653
- disabledColorOnDark: "#575757",
654
- errorColor: globalTokens.red,
655
- errorColorOnDark: globalTokens.hal_red_l_60,
656
- optionBackgroundColor: globalTokens.white,
657
- optionBorderColor: globalTokens.black,
658
- optionBorderThickness: "0px",
659
- optionBorderStyle: "solid",
660
- optionFontColor: globalTokens.black,
661
- optionFontColorOnDark: globalTokens.white,
662
- optionFontSize: globalTokens.type_scale_03,
663
- optionFontStyle: globalTokens.type_normal,
664
- optionFontWeight: globalTokens.type_regular,
665
- optionPaddingBottom: "6px",
666
- optionPaddingTop: "6px",
667
- scrollBarThumbColor: globalTokens.darkGrey,
668
- scrollBarTrackColor: globalTokens.lightGrey,
669
- hoverOptionColor: globalTokens.black,
670
- hoverOptionBackgroundColor: globalTokens.lightWhite,
671
- hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
672
- selectedOptionBackgroundColor: globalTokens.lightGrey,
673
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
674
- labelFontColor: globalTokens.black,
675
- labelFontColorOnDark: globalTokens.white,
676
- labelFontSize: globalTokens.type_scale_03,
677
- labelFontStyle: globalTokens.type_normal,
678
- labelFontWeight: globalTokens.type_regular,
679
- valueFontColor: globalTokens.black,
680
- valueFontColorOnDark: globalTokens.white,
681
- valueFontSize: globalTokens.type_scale_03,
682
- valueFontStyle: globalTokens.type_normal,
683
- valueFontWeight: globalTokens.type_regular,
684
- prefixIconColor: globalTokens.black,
685
- prefixIconColorOnDark: globalTokens.white,
686
- prefixLabelFontColor: globalTokens.black,
687
- prefixLabelFontColorOnDark: globalTokens.white,
688
- prefixLabelFontSize: globalTokens.type_scale_03,
689
- prefixLabelFontStyle: globalTokens.type_normal,
690
- prefixLabelFontWeight: globalTokens.type_regular,
691
- suffixIconColor: globalTokens.black,
692
- suffixIconColorOnDark: globalTokens.white,
693
- suffixLabelFontColor: globalTokens.black,
694
- suffixLabelFontColorOnDark: globalTokens.white,
695
- suffixLabelFontSize: globalTokens.type_scale_03,
696
- suffixLabelFontStyle: globalTokens.type_normal,
697
- suffixLabelFontWeight: globalTokens.type_regular,
698
- underlineColor: globalTokens.black,
699
- underlineColorOnDark: globalTokens.white,
700
- underlineFocusColor: globalTokens.black,
701
- underlineFocusColorOnDark: globalTokens.white,
702
- underlineThickness: "1px"
703
- },
704
619
  textInput: {
705
620
  fontFamily: globalTokens.type_sans,
706
621
  enabledBorderColor: globalTokens.hal_black,
@@ -880,6 +795,44 @@ var componentTokens = {
880
795
  fontStyle: globalTokens.type_normal,
881
796
  fontWeight: globalTokens.type_regular
882
797
  },
798
+ radioGroup: {
799
+ fontFamily: globalTokens.type_sans,
800
+ radioInputColor: globalTokens.hal_blue_l_45,
801
+ hoverRadioInputColor: globalTokens.hal_blue_s_35,
802
+ focusBorderColor: globalTokens.hal_blue_l_50,
803
+ activeRadioInputColor: globalTokens.hal_blue_d_20,
804
+ errorRadioInputColor: globalTokens.hal_red_s_41,
805
+ hoverErrorRadioInputColor: globalTokens.hal_red_d_30,
806
+ activeErrorRadioInputColor: globalTokens.hal_red_d_20,
807
+ readonlyRadioInputColor: globalTokens.hal_grey_l_60,
808
+ hoverReadonlyRadioInputColor: globalTokens.color_grey_600,
809
+ activeReadonlyRadioInputColor: globalTokens.hal_grey_s_40,
810
+ disabledRadioInputColor: globalTokens.hal_grey_l_60,
811
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
812
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
813
+ disabledRadioInputLabelFontColor: globalTokens.hal_grey_l_60,
814
+ errorMessageColor: globalTokens.hal_red_s_41,
815
+ labelFontColor: globalTokens.hal_black,
816
+ labelFontSize: globalTokens.type_scale_02,
817
+ labelFontStyle: globalTokens.type_normal,
818
+ labelFontWeight: globalTokens.type_semibold,
819
+ labelLineHeight: globalTokens.type_leading_loose_01,
820
+ optionalLabelFontWeight: globalTokens.type_regular,
821
+ helperTextFontColor: globalTokens.hal_black,
822
+ helperTextFontSize: globalTokens.type_scale_01,
823
+ helperTextFontStyle: globalTokens.type_normal,
824
+ helperTextFontWeight: globalTokens.type_regular,
825
+ helperTextLineHeight: globalTokens.type_leading_normal,
826
+ radioInputLabelFontColor: globalTokens.hal_black,
827
+ radioInputLabelFontSize: globalTokens.type_scale_02,
828
+ radioInputLabelFontStyle: globalTokens.type_normal,
829
+ radioInputLabelFontWeight: globalTokens.type_regular,
830
+ radioInputLabelLineHeight: globalTokens.type_leading_loose_01,
831
+ groupLabelMargin: globalTokens.spacing_03,
832
+ radioInputLabelMargin: globalTokens.spacing_03,
833
+ groupVerticalGutter: globalTokens.spacing_02,
834
+ groupHorizontalGutter: globalTokens.spacing_07
835
+ },
883
836
  select: {
884
837
  fontFamily: globalTokens.type_sans,
885
838
  disabledColor: globalTokens.hal_grey_l_60,
@@ -947,65 +900,6 @@ var componentTokens = {
947
900
  activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
948
901
  activeSelectionIndicatorActionIconColor: globalTokens.hal_black
949
902
  },
950
- V3Select: {
951
- fontFamily: globalTokens.type_sans,
952
- assistiveTextFontColor: globalTokens.hal_black,
953
- assistiveTextFontColorOnDark: globalTokens.hal_white,
954
- assistiveTextFontSize: globalTokens.type_scale_01,
955
- assistiveTextFontStyle: globalTokens.type_normal,
956
- assistiveTextFontWeight: globalTokens.type_regular,
957
- labelFontColor: globalTokens.hal_black,
958
- labelFontColorOnDark: globalTokens.hal_white,
959
- labelFontSize: globalTokens.type_scale_03,
960
- labelFontStyle: globalTokens.type_normal,
961
- labelFontWeight: globalTokens.type_regular,
962
- disabledColor: globalTokens.lighterBlack,
963
- disabledColorOnDark: "#575757",
964
- errorColor: globalTokens.red,
965
- errorColorOnDark: globalTokens.hal_red_l_60,
966
- optionBackgroundColor: globalTokens.hal_white,
967
- optionBorderColor: globalTokens.hal_black,
968
- optionBorderThickness: "0px",
969
- optionBorderStyle: "solid",
970
- optionFontColor: globalTokens.hal_black,
971
- optionFontColorOnDark: globalTokens.hal_white,
972
- optionFontSize: globalTokens.type_scale_root,
973
- optionFontStyle: globalTokens.type_normal,
974
- optionFontWeight: globalTokens.type_regular,
975
- optionPaddingBottom: "6px",
976
- optionPaddingTop: "6px",
977
- scrollBarThumbColor: globalTokens.hal_grey_s_40,
978
- scrollBarTrackColor: globalTokens.lightGrey,
979
- optionIconColor: globalTokens.hal_black,
980
- optionIconColorOnDark: globalTokens.hal_white,
981
- optionIconSpacing: "12px",
982
- optionIconSize: "20px",
983
- optionCheckboxSpacing: "12px",
984
- hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
985
- hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
986
- activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
987
- activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
988
- selectedOptionBackgroundColor: globalTokens.lightGrey,
989
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
990
- underlineColor: globalTokens.hal_black,
991
- underlineColorOnDark: globalTokens.hal_white,
992
- underlineFocusColor: globalTokens.hal_black,
993
- underlineFocusColorOnDark: globalTokens.hal_white,
994
- underlineThickness: "1px",
995
- valueFontColor: globalTokens.hal_black,
996
- valueFontColorOnDark: globalTokens.hal_white,
997
- valueFontSize: globalTokens.type_scale_03,
998
- valueFontStyle: globalTokens.type_normal,
999
- valueFontWeight: globalTokens.type_regular,
1000
- valueIconColor: globalTokens.hal_black,
1001
- valueIconColorOnDark: globalTokens.hal_white,
1002
- valueIconSize: "20px",
1003
- valueIconSpacing: "12px",
1004
- arrowColor: globalTokens.hal_black,
1005
- arrowColorOnDark: globalTokens.hal_white,
1006
- focusColor: globalTokens.hal_blue_l_50,
1007
- focusColorOnDark: globalTokens.hal_blue_l_50
1008
- },
1009
903
  sidenav: {
1010
904
  backgroundColor: globalTokens.hal_grey_l_95,
1011
905
  arrowContainerColor: globalTokens.hal_grey_l_90,
@@ -1321,41 +1215,6 @@ var componentTokens = {
1321
1215
  disabledValueFontColor: globalTokens.hal_grey_l_60,
1322
1216
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1323
1217
  },
1324
- V3Textarea: {
1325
- fontFamily: globalTokens.type_sans,
1326
- assistiveTextFontSize: globalTokens.type_scale_01,
1327
- assistiveTextFontStyle: globalTokens.type_normal,
1328
- assistiveTextFontWeight: globalTokens.type_regular,
1329
- assistiveTextFontColor: globalTokens.black,
1330
- assistiveTextFontColorOnDark: globalTokens.white,
1331
- assistiveTextLetterSpacing: "0.03333em",
1332
- disabledColor: globalTokens.lighterBlack,
1333
- disabledColorOnDark: "#575757",
1334
- errorColor: globalTokens.red,
1335
- errorColorOnDark: globalTokens.hal_red_l_60,
1336
- scrollBarThumbColor: globalTokens.darkGrey,
1337
- scrollBarThumbColorOnDark: globalTokens.white,
1338
- scrollBarTrackColor: globalTokens.lightGrey,
1339
- scrollBarTrackColorOnDark: "#999999",
1340
- labelFontSize: globalTokens.type_scale_03,
1341
- labelFontStyle: globalTokens.type_normal,
1342
- labelFontWeight: globalTokens.type_regular,
1343
- labelFontColor: globalTokens.black,
1344
- labelFontColorOnDark: globalTokens.white,
1345
- labelLetterSpacing: "0.00938em",
1346
- valueFontSize: globalTokens.type_scale_03,
1347
- valueFontStyle: globalTokens.type_normal,
1348
- valueFontWeight: globalTokens.type_regular,
1349
- valueFontColor: globalTokens.black,
1350
- valueFontColorOnDark: globalTokens.white,
1351
- valueLetterSpacing: globalTokens.type_spacing_normal,
1352
- valueLineHeight: "1.1875em",
1353
- underlineColor: globalTokens.black,
1354
- underlineColorOnDark: globalTokens.white,
1355
- underlineFocusColor: globalTokens.black,
1356
- underlineFocusColorOnDark: globalTokens.white,
1357
- underlineThickness: "1px"
1358
- },
1359
1218
  toggleGroup: {
1360
1219
  containerBackgroundColor: globalTokens.color_grey_50,
1361
1220
  containerBorderColor: globalTokens.hal_grey_l_60,
@@ -1404,69 +1263,6 @@ var componentTokens = {
1404
1263
  containerBorderRadius: globalTokens.border_radius_large,
1405
1264
  optionFocusBorderThickness: globalTokens.border_width_2
1406
1265
  },
1407
- upload: {
1408
- fontFamily: globalTokens.type_sans,
1409
- shadowColor: globalTokens.lightWhite,
1410
- scrollBarThumbColor: globalTokens.darkGrey,
1411
- scrollBarTrackColor: globalTokens.lightGrey,
1412
- errorColor: globalTokens.red,
1413
- backgroundColor: globalTokens.white,
1414
- draggingStateBackgroundColor: globalTokens.lightWhite,
1415
- dragAndDropIconColor: globalTokens.black,
1416
- dragAndDropIconSize: "43.5px",
1417
- dragAndDropTitleFontSize: globalTokens.type_scale_04,
1418
- dragAndDropTitleFontStyle: globalTokens.type_normal,
1419
- dragAndDropTitleFontWeight: globalTokens.type_bold,
1420
- dragAndDropTitleFontTextTransform: "none",
1421
- dragAndDropTitleFontColor: globalTokens.black,
1422
- dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1423
- dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1424
- dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1425
- dragAndDropDescriptionFontTextTransform: "none",
1426
- dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1427
- dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1428
- dragAndDropDraggingStateIconSize: "74.5px",
1429
- dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1430
- dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1431
- dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1432
- dragAndDropDraggingStateFontTextTransform: "none",
1433
- dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1434
- dragAndDropAreaIconColor: globalTokens.darkGrey,
1435
- dragAndDropAreaIconSize: "24px",
1436
- dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1437
- dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1438
- dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1439
- dragAndDropAreaTextFontTextTransform: "none",
1440
- dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1441
- fileDeleteIconColor: globalTokens.black,
1442
- fileDeleteIconSize: "30px",
1443
- fileUnderlineColor: globalTokens.lightGrey,
1444
- fileUnderlineThickness: "1px",
1445
- fileNameFontSize: globalTokens.type_scale_03,
1446
- fileNameFontStyle: globalTokens.type_normal,
1447
- fileNameFontWeight: globalTokens.type_regular,
1448
- fileNameFontTextTransform: "none",
1449
- fileNameFontColor: globalTokens.black,
1450
- fileTypeFontSize: globalTokens.type_scale_01,
1451
- fileTypeFontStyle: globalTokens.type_normal,
1452
- fileTypeFontWeight: globalTokens.type_regular,
1453
- fileTypeFontTextTransform: globalTokens.type_uppercase,
1454
- fileTypeFontColor: globalTokens.darkGrey,
1455
- hoverFileColor: globalTokens.darkWhite,
1456
- uploadedFileIconColor: globalTokens.lightGrey,
1457
- uploadedFileIconSize: "24px",
1458
- uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1459
- uploadedFilesTitleFontStyle: globalTokens.type_normal,
1460
- uploadedFilesTitleFontWeight: globalTokens.type_regular,
1461
- uploadedFilesTitleFontTextTransform: "none",
1462
- uploadedFilesTitleFontColor: globalTokens.black,
1463
- uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1464
- uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1465
- uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1466
- uploadedFilesSubtitleFontTextTransform: "none",
1467
- uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1468
- uploadedFilesNumberFontWeight: globalTokens.type_bold
1469
- },
1470
1266
  wizard: {
1471
1267
  disabledBackgroundColor: globalTokens.lightGrey,
1472
1268
  disabledFontColor: globalTokens.darkGrey,
@@ -11,6 +11,8 @@ exports["default"] = void 0;
11
11
 
12
12
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
13
 
14
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
+
14
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
17
 
16
18
  var _react = _interopRequireWildcard(require("react"));
@@ -29,7 +31,7 @@ var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
29
31
 
30
32
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
31
33
 
32
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
34
+ var _useTheme = _interopRequireDefault(require("../useTheme"));
33
35
 
34
36
  var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
35
37
 
@@ -39,37 +41,37 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
39
41
 
40
42
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
41
43
 
44
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
45
+
46
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
47
+
48
+ var getValueForPicker = function getValueForPicker(value, format) {
49
+ return (0, _moment["default"])(value, format.toUpperCase(), true).format();
50
+ };
51
+
42
52
  var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
43
- var _ref$label = _ref.label,
44
- label = _ref$label === void 0 ? "" : _ref$label,
45
- _ref$name = _ref.name,
46
- name = _ref$name === void 0 ? "" : _ref$name,
53
+ var label = _ref.label,
54
+ name = _ref.name,
55
+ _ref$defaultValue = _ref.defaultValue,
56
+ defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
47
57
  value = _ref.value,
48
58
  _ref$format = _ref.format,
49
59
  format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
50
- _ref$helperText = _ref.helperText,
51
- helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
60
+ helperText = _ref.helperText,
52
61
  _ref$placeholder = _ref.placeholder,
53
62
  placeholder = _ref$placeholder === void 0 ? false : _ref$placeholder,
54
- _ref$clearable = _ref.clearable,
55
- clearable = _ref$clearable === void 0 ? false : _ref$clearable,
56
- _ref$disabled = _ref.disabled,
57
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
58
- _ref$optional = _ref.optional,
59
- optional = _ref$optional === void 0 ? false : _ref$optional,
63
+ clearable = _ref.clearable,
64
+ disabled = _ref.disabled,
65
+ optional = _ref.optional,
60
66
  onChange = _ref.onChange,
61
67
  onBlur = _ref.onBlur,
62
- _ref$error = _ref.error,
63
- error = _ref$error === void 0 ? "" : _ref$error,
64
- _ref$autocomplete = _ref.autocomplete,
65
- autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
68
+ error = _ref.error,
69
+ autocomplete = _ref.autocomplete,
66
70
  margin = _ref.margin,
67
- _ref$size = _ref.size,
68
- size = _ref$size === void 0 ? "medium" : _ref$size,
69
- _ref$tabIndex = _ref.tabIndex,
70
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
71
+ size = _ref.size,
72
+ tabIndex = _ref.tabIndex;
71
73
 
72
- var _useState = (0, _react.useState)(""),
74
+ var _useState = (0, _react.useState)(defaultValue),
73
75
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
74
76
  innerValue = _useState2[0],
75
77
  setInnerValue = _useState2[1];
@@ -85,6 +87,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
85
87
  setAnchorEl = _useState6[1];
86
88
 
87
89
  var colorsTheme = (0, _useTheme["default"])();
90
+ var refDate = ref || (0, _react.useRef)(null);
88
91
 
89
92
  var handleCalendarOnKeyDown = function handleCalendarOnKeyDown(event) {
90
93
  switch (event.keyCode) {
@@ -99,10 +102,11 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
99
102
  var handleCalendarOnClick = function handleCalendarOnClick(newDate) {
100
103
  var newValue = (0, _moment["default"])(newDate).format(format.toUpperCase());
101
104
  value !== null && value !== void 0 ? value : setInnerValue(newValue);
102
- onChange === null || onChange === void 0 ? void 0 : onChange({
105
+ newDate !== null && newDate !== void 0 && newDate.toJSON() ? onChange === null || onChange === void 0 ? void 0 : onChange({
103
106
  value: newValue,
104
- error: null,
105
- date: newDate !== null && newDate !== void 0 && newDate.toJSON() ? newDate : null
107
+ date: newDate
108
+ }) : onChange === null || onChange === void 0 ? void 0 : onChange({
109
+ value: newValue
106
110
  });
107
111
  };
108
112
 
@@ -111,35 +115,38 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
111
115
  inputError = _ref2.error;
112
116
  value !== null && value !== void 0 ? value : setInnerValue(newValue);
113
117
  var momentDate = (0, _moment["default"])(newValue, format.toUpperCase(), true);
114
- var invalidDateMessage = newValue !== "" && !momentDate.isValid() ? "Invalid date." : null;
115
- onChange === null || onChange === void 0 ? void 0 : onChange({
118
+ var invalidDateMessage = newValue !== "" && !momentDate.isValid() && "Invalid date.";
119
+ var callbackParams = inputError || invalidDateMessage ? {
116
120
  value: newValue,
117
- error: inputError || invalidDateMessage,
118
- date: momentDate.isValid() ? momentDate.toDate() : null
119
- });
121
+ error: inputError || invalidDateMessage
122
+ } : {
123
+ value: newValue
124
+ };
125
+ momentDate.isValid() ? onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, callbackParams), {}, {
126
+ date: momentDate.toDate()
127
+ })) : onChange === null || onChange === void 0 ? void 0 : onChange(callbackParams);
120
128
  };
121
129
 
122
130
  var handleIOnBlur = function handleIOnBlur(_ref3) {
123
131
  var value = _ref3.value,
124
132
  inputError = _ref3.error;
125
133
  var momentDate = (0, _moment["default"])(value, format.toUpperCase(), true);
126
- var invalidDateMessage = value !== "" && !momentDate.isValid() ? "Invalid date." : null;
127
- onBlur === null || onBlur === void 0 ? void 0 : onBlur({
134
+ var invalidDateMessage = value !== "" && !momentDate.isValid() && "Invalid date.";
135
+ var callbackParams = inputError || invalidDateMessage ? {
128
136
  value: value,
129
- error: inputError || invalidDateMessage,
130
- date: momentDate.isValid() ? momentDate.toDate() : null
131
- });
132
- };
133
-
134
- var getValueForPicker = function getValueForPicker() {
135
- return (0, _moment["default"])(value !== null && value !== void 0 ? value : innerValue, format.toUpperCase(), true).format();
137
+ error: inputError || invalidDateMessage
138
+ } : {
139
+ value: value
140
+ };
141
+ momentDate.isValid() ? onBlur === null || onBlur === void 0 ? void 0 : onBlur(_objectSpread(_objectSpread({}, callbackParams), {}, {
142
+ date: momentDate.toDate()
143
+ })) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(callbackParams);
136
144
  };
137
145
 
138
- var openCalendar = function openCalendar(event) {
139
- if (event) {
140
- setIsOpen(!isOpen);
141
- setAnchorEl(event.currentTarget);
142
- }
146
+ var openCalendar = function openCalendar() {
147
+ var dateBtn = refDate.current.getElementsByTagName("button")[0];
148
+ setIsOpen(!isOpen);
149
+ setAnchorEl(dateBtn);
143
150
  };
144
151
 
145
152
  var closeCalendar = function closeCalendar() {
@@ -307,6 +314,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
307
314
  }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
308
315
  label: label,
309
316
  name: name,
317
+ defaultValue: defaultValue,
310
318
  value: value !== null && value !== void 0 ? value : innerValue,
311
319
  helperText: helperText,
312
320
  placeholder: placeholder ? format.toUpperCase() : null,
@@ -321,7 +329,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
321
329
  margin: margin,
322
330
  size: size,
323
331
  tabIndex: tabIndex,
324
- ref: ref
332
+ ref: refDate
325
333
  }), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
326
334
  onKeyDown: handleCalendarOnKeyDown,
327
335
  open: isOpen,
@@ -346,7 +354,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
346
354
  "aria-modal": "true"
347
355
  }, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
348
356
  variant: "static",
349
- value: getValueForPicker(),
357
+ value: getValueForPicker(value !== null && value !== void 0 ? value : innerValue, format),
350
358
  onChange: function onChange(date) {
351
359
  return handleCalendarOnClick(date);
352
360
  },