@dxc-technology/halstack-react 0.0.0-42c3aef → 0.0.0-459df48

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 (300) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/V3Select/V3Select.js +455 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/V3Textarea/V3Textarea.js +260 -0
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/accordion/Accordion.js +289 -0
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +46 -18
  10. package/accordion-group/index.d.ts +16 -0
  11. package/alert/Alert.d.ts +4 -0
  12. package/alert/Alert.js +290 -0
  13. package/alert/types.d.ts +49 -0
  14. package/alert/types.js +5 -0
  15. package/badge/Badge.js +59 -0
  16. package/{dist/box → box}/Box.js +35 -30
  17. package/box/index.d.ts +25 -0
  18. package/button/Button.d.ts +4 -0
  19. package/button/Button.js +182 -0
  20. package/button/Button.stories.tsx +293 -0
  21. package/button/types.d.ts +57 -0
  22. package/button/types.js +5 -0
  23. package/card/Card.js +200 -0
  24. package/card/index.d.ts +22 -0
  25. package/checkbox/Checkbox.d.ts +4 -0
  26. package/checkbox/Checkbox.js +253 -0
  27. package/checkbox/types.d.ts +61 -0
  28. package/checkbox/types.js +5 -0
  29. package/{dist/chip → chip}/Chip.js +74 -76
  30. package/chip/index.d.ts +22 -0
  31. package/{dist/common → common}/OpenSans.css +0 -0
  32. package/{dist/common → common}/RequiredComponent.js +3 -11
  33. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  37. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  38. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  39. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  40. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  41. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  42. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  43. package/common/utils.js +22 -0
  44. package/common/variables.js +1569 -0
  45. package/{dist/date → date}/Date.js +71 -53
  46. package/date/index.d.ts +27 -0
  47. package/date-input/DateInput.d.ts +4 -0
  48. package/date-input/DateInput.js +361 -0
  49. package/date-input/types.d.ts +100 -0
  50. package/date-input/types.js +5 -0
  51. package/{dist/dialog → dialog}/Dialog.js +50 -71
  52. package/dialog/index.d.ts +18 -0
  53. package/dropdown/Dropdown.js +450 -0
  54. package/dropdown/index.d.ts +26 -0
  55. package/file-input/FileInput.js +532 -0
  56. package/file-input/FileItem.js +193 -0
  57. package/file-input/index.d.ts +81 -0
  58. package/footer/Footer.js +297 -0
  59. package/footer/Icons.js +77 -0
  60. package/footer/index.d.ts +25 -0
  61. package/header/Header.js +326 -0
  62. package/header/Icons.js +59 -0
  63. package/header/index.d.ts +25 -0
  64. package/heading/Heading.js +176 -0
  65. package/heading/index.d.ts +17 -0
  66. package/input-text/Icons.js +22 -0
  67. package/input-text/InputText.js +611 -0
  68. package/input-text/index.d.ts +36 -0
  69. package/{dist/layout → layout}/ApplicationLayout.js +38 -134
  70. package/layout/Icons.js +55 -0
  71. package/link/Link.js +183 -0
  72. package/link/index.d.ts +23 -0
  73. package/main.d.ts +44 -0
  74. package/{dist/main.js → main.js} +125 -65
  75. package/number-input/NumberInput.js +128 -0
  76. package/number-input/NumberInputContext.js +16 -0
  77. package/number-input/index.d.ts +113 -0
  78. package/package.json +32 -23
  79. package/paginator/Icons.js +66 -0
  80. package/paginator/Paginator.d.ts +4 -0
  81. package/paginator/Paginator.js +198 -0
  82. package/paginator/types.d.ts +38 -0
  83. package/paginator/types.js +5 -0
  84. package/password-input/PasswordInput.js +199 -0
  85. package/password-input/PasswordInput.stories.jsx +131 -0
  86. package/password-input/index.d.ts +94 -0
  87. package/progress-bar/ProgressBar.js +188 -0
  88. package/progress-bar/index.d.ts +18 -0
  89. package/{dist/radio → radio}/Radio.js +37 -34
  90. package/radio/index.d.ts +23 -0
  91. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +80 -137
  92. package/resultsetTable/index.d.ts +19 -0
  93. package/select/Select.js +865 -0
  94. package/select/index.d.ts +131 -0
  95. package/sidenav/Sidenav.js +145 -0
  96. package/sidenav/index.d.ts +13 -0
  97. package/slider/Slider.js +340 -0
  98. package/slider/index.d.ts +29 -0
  99. package/spinner/Spinner.js +267 -0
  100. package/spinner/index.d.ts +17 -0
  101. package/switch/Switch.d.ts +4 -0
  102. package/switch/Switch.js +179 -0
  103. package/switch/types.d.ts +58 -0
  104. package/switch/types.js +5 -0
  105. package/table/Table.js +118 -0
  106. package/table/index.d.ts +13 -0
  107. package/{dist/tabs → tabs}/Tabs.js +62 -126
  108. package/tabs/index.d.ts +19 -0
  109. package/tag/Tag.js +208 -0
  110. package/tag/index.d.ts +24 -0
  111. package/text-input/TextInput.js +825 -0
  112. package/text-input/index.d.ts +135 -0
  113. package/textarea/Textarea.js +317 -0
  114. package/textarea/index.d.ts +117 -0
  115. package/{dist/toggle → toggle}/Toggle.js +15 -51
  116. package/toggle/index.d.ts +21 -0
  117. package/toggle-group/ToggleGroup.js +243 -0
  118. package/toggle-group/index.d.ts +21 -0
  119. package/{dist/upload → upload}/Upload.js +11 -19
  120. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  121. package/upload/buttons-upload/Icons.js +40 -0
  122. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  123. package/upload/dragAndDropArea/Icons.js +39 -0
  124. package/upload/file-upload/FileToUpload.js +115 -0
  125. package/upload/file-upload/Icons.js +66 -0
  126. package/{dist/upload → upload}/files-upload/FilesToUpload.js +14 -30
  127. package/upload/index.d.ts +15 -0
  128. package/upload/transaction/Icons.js +160 -0
  129. package/upload/transaction/Transaction.js +104 -0
  130. package/upload/transactions/Transactions.js +94 -0
  131. package/{dist/useTheme.js → useTheme.js} +0 -0
  132. package/wizard/Icons.js +65 -0
  133. package/wizard/Wizard.js +271 -0
  134. package/wizard/index.d.ts +18 -0
  135. package/README.md +0 -66
  136. package/babel.config.js +0 -8
  137. package/dist/ThemeContext.js +0 -185
  138. package/dist/accordion/Accordion.js +0 -278
  139. package/dist/accordion/Accordion.stories.js +0 -207
  140. package/dist/accordion/readme.md +0 -96
  141. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  142. package/dist/accordion-group/readme.md +0 -70
  143. package/dist/alert/Alert.js +0 -310
  144. package/dist/alert/Alert.stories.js +0 -158
  145. package/dist/alert/close.svg +0 -4
  146. package/dist/alert/error.svg +0 -4
  147. package/dist/alert/info.svg +0 -4
  148. package/dist/alert/readme.md +0 -43
  149. package/dist/alert/success.svg +0 -4
  150. package/dist/alert/warning.svg +0 -4
  151. package/dist/badge/Badge.js +0 -42
  152. package/dist/button/Button.js +0 -213
  153. package/dist/button/Button.stories.js +0 -224
  154. package/dist/button/readme.md +0 -93
  155. package/dist/card/Card.js +0 -219
  156. package/dist/checkbox/Checkbox.js +0 -235
  157. package/dist/checkbox/Checkbox.stories.js +0 -144
  158. package/dist/checkbox/readme.md +0 -116
  159. package/dist/common/services/example-service.js +0 -10
  160. package/dist/common/services/example-service.test.js +0 -12
  161. package/dist/common/utils.js +0 -42
  162. package/dist/common/variables.js +0 -431
  163. package/dist/date/Date.stories.js +0 -205
  164. package/dist/date/calendar.svg +0 -1
  165. package/dist/date/calendar_dark.svg +0 -1
  166. package/dist/date/readme.md +0 -73
  167. package/dist/dialog/Dialog.stories.js +0 -217
  168. package/dist/dialog/readme.md +0 -32
  169. package/dist/dropdown/Dropdown.js +0 -456
  170. package/dist/dropdown/Dropdown.stories.js +0 -249
  171. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  172. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  173. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  174. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  175. package/dist/dropdown/readme.md +0 -69
  176. package/dist/footer/Footer.js +0 -377
  177. package/dist/footer/Footer.stories.js +0 -94
  178. package/dist/footer/dxc_logo_wht.png +0 -0
  179. package/dist/footer/readme.md +0 -41
  180. package/dist/header/Header.js +0 -379
  181. package/dist/header/Header.stories.js +0 -176
  182. package/dist/header/close_icon.svg +0 -1
  183. package/dist/header/dxc_logo_black.png +0 -0
  184. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  185. package/dist/header/dxc_logo_white.png +0 -0
  186. package/dist/header/hamb_menu_black.svg +0 -1
  187. package/dist/header/hamb_menu_white.svg +0 -1
  188. package/dist/header/readme.md +0 -33
  189. package/dist/heading/Heading.js +0 -155
  190. package/dist/input-text/InputText.js +0 -597
  191. package/dist/input-text/InputText.stories.js +0 -209
  192. package/dist/input-text/error.svg +0 -1
  193. package/dist/input-text/readme.md +0 -91
  194. package/dist/layout/facebook.svg +0 -45
  195. package/dist/layout/linkedin.svg +0 -50
  196. package/dist/layout/twitter.svg +0 -53
  197. package/dist/link/Link.js +0 -193
  198. package/dist/link/readme.md +0 -51
  199. package/dist/paginator/Paginator.js +0 -261
  200. package/dist/paginator/images/next.svg +0 -3
  201. package/dist/paginator/images/nextPage.svg +0 -3
  202. package/dist/paginator/images/previous.svg +0 -3
  203. package/dist/paginator/images/previousPage.svg +0 -3
  204. package/dist/paginator/readme.md +0 -50
  205. package/dist/progress-bar/ProgressBar.js +0 -190
  206. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  207. package/dist/progress-bar/readme.md +0 -63
  208. package/dist/radio/Radio.stories.js +0 -166
  209. package/dist/radio/readme.md +0 -70
  210. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  211. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  212. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  213. package/dist/select/Select.js +0 -490
  214. package/dist/select/Select.stories.js +0 -235
  215. package/dist/select/readme.md +0 -72
  216. package/dist/sidenav/Sidenav.js +0 -127
  217. package/dist/slider/Slider.js +0 -267
  218. package/dist/slider/Slider.stories.js +0 -241
  219. package/dist/slider/readme.md +0 -64
  220. package/dist/spinner/Spinner.js +0 -196
  221. package/dist/spinner/Spinner.stories.js +0 -183
  222. package/dist/spinner/readme.md +0 -65
  223. package/dist/switch/Switch.js +0 -196
  224. package/dist/switch/Switch.stories.js +0 -134
  225. package/dist/switch/readme.md +0 -133
  226. package/dist/table/Table.js +0 -96
  227. package/dist/tabs/Tabs.stories.js +0 -130
  228. package/dist/tabs/readme.md +0 -78
  229. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  230. package/dist/tabs-for-sections/readme.md +0 -78
  231. package/dist/tag/Tag.js +0 -257
  232. package/dist/textarea/Textarea.js +0 -238
  233. package/dist/toggle/Toggle.stories.js +0 -297
  234. package/dist/toggle/readme.md +0 -80
  235. package/dist/toggle-group/ToggleGroup.js +0 -217
  236. package/dist/toggle-group/readme.md +0 -82
  237. package/dist/upload/Upload.stories.js +0 -72
  238. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -123
  239. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  240. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  241. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -289
  242. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  243. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  244. package/dist/upload/file-upload/FileToUpload.js +0 -162
  245. package/dist/upload/file-upload/audio-icon.svg +0 -4
  246. package/dist/upload/file-upload/close.svg +0 -4
  247. package/dist/upload/file-upload/file-icon.svg +0 -4
  248. package/dist/upload/file-upload/video-icon.svg +0 -4
  249. package/dist/upload/readme.md +0 -37
  250. package/dist/upload/transaction/Transaction.js +0 -154
  251. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  252. package/dist/upload/transaction/audio-icon.svg +0 -4
  253. package/dist/upload/transaction/error-icon.svg +0 -4
  254. package/dist/upload/transaction/file-icon-err.svg +0 -4
  255. package/dist/upload/transaction/file-icon.svg +0 -4
  256. package/dist/upload/transaction/image-icon-err.svg +0 -4
  257. package/dist/upload/transaction/image-icon.svg +0 -4
  258. package/dist/upload/transaction/success-icon.svg +0 -4
  259. package/dist/upload/transaction/video-icon-err.svg +0 -4
  260. package/dist/upload/transaction/video-icon.svg +0 -4
  261. package/dist/upload/transactions/Transactions.js +0 -122
  262. package/dist/wizard/Wizard.js +0 -343
  263. package/dist/wizard/invalid_icon.svg +0 -6
  264. package/dist/wizard/valid_icon.svg +0 -6
  265. package/dist/wizard/validation-wrong.svg +0 -6
  266. package/test/Accordion.test.js +0 -33
  267. package/test/AccordionGroup.test.js +0 -109
  268. package/test/Alert.test.js +0 -53
  269. package/test/Box.test.js +0 -10
  270. package/test/Button.test.js +0 -18
  271. package/test/Card.test.js +0 -30
  272. package/test/Checkbox.test.js +0 -45
  273. package/test/Chip.test.js +0 -25
  274. package/test/Date.test.js +0 -393
  275. package/test/Dialog.test.js +0 -23
  276. package/test/Dropdown.test.js +0 -130
  277. package/test/Footer.test.js +0 -99
  278. package/test/Header.test.js +0 -39
  279. package/test/Heading.test.js +0 -35
  280. package/test/InputText.test.js +0 -240
  281. package/test/Link.test.js +0 -42
  282. package/test/Paginator.test.js +0 -177
  283. package/test/ProgressBar.test.js +0 -35
  284. package/test/Radio.test.js +0 -37
  285. package/test/ResultsetTable.test.js +0 -330
  286. package/test/Select.test.js +0 -192
  287. package/test/Sidenav.test.js +0 -45
  288. package/test/Slider.test.js +0 -82
  289. package/test/Spinner.test.js +0 -27
  290. package/test/Switch.test.js +0 -45
  291. package/test/Table.test.js +0 -36
  292. package/test/Tabs.test.js +0 -109
  293. package/test/TabsForSections.test.js +0 -34
  294. package/test/Tag.test.js +0 -32
  295. package/test/TextArea.test.js +0 -52
  296. package/test/ToggleGroup.test.js +0 -81
  297. package/test/Upload.test.js +0 -60
  298. package/test/Wizard.test.js +0 -130
  299. package/test/mocks/pngMock.js +0 -1
  300. package/test/mocks/svgMock.js +0 -1
@@ -1,597 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
25
-
26
- var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
27
-
28
- var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
29
-
30
- var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
31
-
32
- var _propTypes = _interopRequireDefault(require("prop-types"));
33
-
34
- require("../common/OpenSans.css");
35
-
36
- var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
37
-
38
- var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
39
-
40
- var _variables = require("../common/variables.js");
41
-
42
- var _utils = require("../common/utils.js");
43
-
44
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
45
-
46
- var _error = _interopRequireDefault(require("./error.svg"));
47
-
48
- function _templateObject9() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n display: inline-block;\n position: relative;\n height: auto;\n width: ", ";\n .MuiTextField-root {\n width: 100%;\n font-family: ", ";\n .MuiFormHelperText-root {\n font-family: ", ";\n margin-top: 6px;\n }\n .MuiFormLabel-root {\n font-size: ", ";\n \n color: ", ";\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n padding-left: ", ";\n &.Mui-focused {\n color: ", ";\n &.MuiInputLabel-shrink {\n transform: ", ";\n }\n }\n &.MuiInputLabel-shrink {\n font-family: ", ";\n\n transform: ", ";\n }\n &.Mui-error {\n color: ", ";\n }\n\n &:not(.MuiInputLabel-shrink) {\n font-family: ", ";\n\n color: ", ";\n & + div,\n & + div + p {\n color: ", ";\n }\n }\n\n &.MuiInputLabel-shrink {\n & + div::before {\n border-color: ", ";\n }\n & + div + p {\n color: ", ";\n }\n }\n }\n .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n font-family: ", ";\n\n &::before {\n border-bottom: ", ";\n }\n &:not(.Mui-error)::before,\n &:not(&.Mui-focused)::before {\n border-bottom: ", ";\n }\n &::after {\n border-bottom: ", ";\n }\n\n &.Mui-error {\n &::before {\n border-width: 1px;\n border-color: ", ";\n }\n &::after {\n transform: scaleX(0);\n }\n }\n\n &.Mui-focused {\n &::after {\n border-width: 2px;\n border-color: ", ";\n transform: scaleX(1);\n }\n\n &.Mui-error::after {\n border-color: ", ";\n }\n }\n\n &.Mui-disabled {\n cursor: not-allowed;\n\n &::before {\n border-bottom: ", ";\n border-bottom-style: solid;\n }\n }\n .MuiInputBase-input {\n padding-left: ", ";\n color: ", ";\n text-overflow: ellipsis;\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n .MuiInputAdornment-root {\n height: 20px;\n color: ", ";\n &.MuiInputAdornment-positionEnd {\n & > p {\n font-family: ", ";\n\n color: ", ";\n margin-right: 8px;\n margin-bottom: 1px;\n }\n }\n &.Mui-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n }\n\n &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n border-bottom: ", ";\n }\n }\n\n & > p {\n &.Mui-error {\n color: ", " !important;\n }\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n }\n"]);
50
-
51
- _templateObject9 = function _templateObject9() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject8() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n"]);
60
-
61
- _templateObject8 = function _templateObject8() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- function _templateObject7() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n top: 23px;\n left: 0;\n max-height: 20px;\n max-width: 20px;\n margin-right: 8px;\n width: 20px;\n opacity: ", ";\n ", ";\n overflow: hidden;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
70
-
71
- _templateObject7 = function _templateObject7() {
72
- return data;
73
- };
74
-
75
- return data;
76
- }
77
-
78
- function _templateObject6() {
79
- var data = (0, _taggedTemplateLiteral2["default"])(["\n top: 23px;\n left: 0;\n max-height: 20px;\n max-width: 20px;\n margin-right: 8px;\n width: 20px;\n opacity: ", ";\n ", ";\n"]);
80
-
81
- _templateObject6 = function _templateObject6() {
82
- return data;
83
- };
84
-
85
- return data;
86
- }
87
-
88
- function _templateObject5() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: 20px;\n left: 0px;\n font-family: ", ";\n\n color: ", ";\n max-height: 20px;\n max-width: 20px;\n opacity: ", ";\n z-index: 1;\n ", ";\n"]);
90
-
91
- _templateObject5 = function _templateObject5() {
92
- return data;
93
- };
94
-
95
- return data;
96
- }
97
-
98
- function _templateObject4() {
99
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: 20px;\n left: 0px;\n width: 20px;\n max-height: 20px;\n max-width: 20px;\n z-index: 1;\n opacity: ", ";\n ", ";\n overflow: hidden;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
100
-
101
- _templateObject4 = function _templateObject4() {
102
- return data;
103
- };
104
-
105
- return data;
106
- }
107
-
108
- function _templateObject3() {
109
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: 20px;\n left: 0px;\n width: 20px;\n max-height: 20px;\n max-width: 20px;\n z-index: 1;\n opacity: ", ";\n ", ";\n"]);
110
-
111
- _templateObject3 = function _templateObject3() {
112
- return data;
113
- };
114
-
115
- return data;
116
- }
117
-
118
- function _templateObject2() {
119
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n .MuiPaper-root {\n max-height: 250px;\n overflow: auto;\n ::-webkit-scrollbar {\n width: 3px;\n }\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n li {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n }\n }\n"]);
120
-
121
- _templateObject2 = function _templateObject2() {
122
- return data;
123
- };
124
-
125
- return data;
126
- }
127
-
128
- function _templateObject() {
129
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding-left: 12px;\n"]);
130
-
131
- _templateObject = function _templateObject() {
132
- return data;
133
- };
134
-
135
- return data;
136
- }
137
-
138
- var makeCancelable = function makeCancelable(promise) {
139
- var hasCanceled_ = false;
140
- var wrappedPromise = new Promise(function (resolve, reject) {
141
- promise.then(function (val) {
142
- return hasCanceled_ ? reject({
143
- isCanceled: true
144
- }) : resolve(val);
145
- }, function (promiseError) {
146
- return hasCanceled_ ? reject({
147
- isCanceled: true
148
- }) : reject(promiseError);
149
- });
150
- });
151
- return {
152
- promise: wrappedPromise,
153
- cancel: function cancel() {
154
- hasCanceled_ = true;
155
- }
156
- };
157
- };
158
-
159
- var DxcInputText = function DxcInputText(_ref) {
160
- var _ref$label = _ref.label,
161
- label = _ref$label === void 0 ? " " : _ref$label,
162
- _ref$name = _ref.name,
163
- name = _ref$name === void 0 ? "" : _ref$name,
164
- value = _ref.value,
165
- _ref$assistiveText = _ref.assistiveText,
166
- assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
167
- _ref$disabled = _ref.disabled,
168
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
169
- _ref$prefix = _ref.prefix,
170
- prefix = _ref$prefix === void 0 ? "" : _ref$prefix,
171
- _ref$suffix = _ref.suffix,
172
- suffix = _ref$suffix === void 0 ? "" : _ref$suffix,
173
- prefixIcon = _ref.prefixIcon,
174
- suffixIcon = _ref.suffixIcon,
175
- _ref$prefixIconSrc = _ref.prefixIconSrc,
176
- prefixIconSrc = _ref$prefixIconSrc === void 0 ? "" : _ref$prefixIconSrc,
177
- _ref$suffixIconSrc = _ref.suffixIconSrc,
178
- suffixIconSrc = _ref$suffixIconSrc === void 0 ? "" : _ref$suffixIconSrc,
179
- onClickPrefix = _ref.onClickPrefix,
180
- onClickSuffix = _ref.onClickSuffix,
181
- _ref$onChange = _ref.onChange,
182
- onChange = _ref$onChange === void 0 ? "" : _ref$onChange,
183
- _ref$onBlur = _ref.onBlur,
184
- onBlur = _ref$onBlur === void 0 ? "" : _ref$onBlur,
185
- _ref$invalid = _ref.invalid,
186
- invalid = _ref$invalid === void 0 ? false : _ref$invalid,
187
- _ref$required = _ref.required,
188
- required = _ref$required === void 0 ? false : _ref$required,
189
- _ref$isMasked = _ref.isMasked,
190
- isMasked = _ref$isMasked === void 0 ? false : _ref$isMasked,
191
- _ref$placeholder = _ref.placeholder,
192
- placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
193
- margin = _ref.margin,
194
- _ref$size = _ref.size,
195
- size = _ref$size === void 0 ? "medium" : _ref$size,
196
- autocompleteOptions = _ref.autocompleteOptions,
197
- _ref$tabIndex = _ref.tabIndex,
198
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
199
-
200
- var _useState = (0, _react.useState)(""),
201
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
202
- innerValue = _useState2[0],
203
- setInnerValue = _useState2[1];
204
-
205
- var _useState3 = (0, _react.useState)(false),
206
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
207
- isOpen = _useState4[0],
208
- changeIsOpen = _useState4[1];
209
-
210
- var _useState5 = (0, _react.useState)(null),
211
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
212
- anchorEl = _useState6[0],
213
- setAnchorEl = _useState6[1];
214
-
215
- var _useState7 = (0, _react.useState)([]),
216
- _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
217
- filteredOptions = _useState8[0],
218
- changeFilteredOptions = _useState8[1];
219
-
220
- var _useState9 = (0, _react.useState)(false),
221
- _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
222
- isSearching = _useState10[0],
223
- changeIsSearching = _useState10[1];
224
-
225
- var _useState11 = (0, _react.useState)(false),
226
- _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
227
- isError = _useState12[0],
228
- changeIsError = _useState12[1];
229
-
230
- var colorsTheme = (0, _useTheme["default"])();
231
-
232
- var changeValue = function changeValue(newValue) {
233
- if (value === null || value === undefined) {
234
- if (typeof onChange === "function") {
235
- setInnerValue(newValue);
236
- onChange(newValue);
237
- } else {
238
- setInnerValue(newValue);
239
- }
240
- } else if (onChange !== "") {
241
- if (typeof onChange === "function") {
242
- onChange(newValue);
243
- } else {
244
- setInnerValue(newValue);
245
- }
246
- }
247
- };
248
-
249
- (0, _react.useEffect)(function () {
250
- if (typeof autocompleteOptions === "function") {
251
- changeIsSearching(true);
252
- changeIsError(false);
253
- changeFilteredOptions([]);
254
- var cancelablePromise = makeCancelable(autocompleteOptions(value || innerValue));
255
- cancelablePromise.promise.then(function (promiseResponse) {
256
- changeIsSearching(false);
257
- changeIsError(false);
258
- changeFilteredOptions(promiseResponse);
259
- })["catch"](function (err) {
260
- if (!err.isCanceled) {
261
- changeIsSearching(false);
262
- changeIsError(true);
263
- }
264
- });
265
- return function () {
266
- cancelablePromise.cancel();
267
- };
268
- }
269
-
270
- if (autocompleteOptions && autocompleteOptions.length) {
271
- changeFilteredOptions(autocompleteOptions.filter(function (option) {
272
- return option.toUpperCase().includes((value || innerValue).toUpperCase());
273
- }));
274
- }
275
- }, [value, innerValue, autocompleteOptions]);
276
-
277
- var handlerInputChange = function handlerInputChange(event) {
278
- if (autocompleteOptions) {
279
- changeIsError(false);
280
- setAnchorEl(event.currentTarget);
281
- changeIsOpen(true);
282
- }
283
-
284
- changeValue(event.target.value);
285
- };
286
-
287
- var handlerSuggestionClicked = function handlerSuggestionClicked(suggestion) {
288
- changeIsOpen(false);
289
- changeValue(suggestion);
290
- };
291
-
292
- var handlerInputBlur = function handlerInputBlur(event) {
293
- changeIsOpen(false);
294
- setInnerValue(event.target.value);
295
-
296
- if (onBlur) {
297
- onBlur(event.target.value);
298
- }
299
- };
300
-
301
- var getFocus = function getFocus(event) {
302
- setAnchorEl(event.currentTarget);
303
-
304
- if (autocompleteOptions) {
305
- changeIsOpen(true);
306
- }
307
- };
308
-
309
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
310
- theme: colorsTheme.inputText
311
- }, _react["default"].createElement(TextContainer, {
312
- prefixIcon: prefixIcon,
313
- prefixIconSrc: prefixIconSrc,
314
- prefix: prefix,
315
- required: required,
316
- assistiveText: assistiveText,
317
- margin: margin,
318
- size: size
319
- }, prefixIcon ? _react["default"].createElement(PrefixIconContainer, {
320
- tabIndex: typeof onClickPrefix === "function" && !disabled ? tabIndex : -1,
321
- disabled: disabled,
322
- onClick: !disabled ? onClickPrefix : null,
323
- interactuable: typeof onClickPrefix === "function" && !disabled
324
- }, (0, _typeof2["default"])(prefixIcon) === "object" ? prefixIcon : _react["default"].createElement(prefixIcon)) : prefixIconSrc && _react["default"].createElement(PrefixIcon, {
325
- tabIndex: typeof onClickPrefix === "function" && !disabled ? tabIndex : -1,
326
- src: prefixIconSrc,
327
- disabled: disabled,
328
- onClick: !disabled ? onClickPrefix : null,
329
- interactuable: typeof onClickPrefix === "function" && !disabled
330
- }) || prefix && _react["default"].createElement(PrefixLabel, {
331
- tabIndex: typeof onClickPrefix === "function" && !disabled ? tabIndex : -1,
332
- disabled: disabled,
333
- onClick: !disabled ? onClickPrefix : null,
334
- interactuable: typeof onClickPrefix === "function" && !disabled
335
- }, prefix), _react["default"].createElement(_TextField["default"], {
336
- error: invalid,
337
- value: value != null ? value : innerValue,
338
- name: name,
339
- disabled: disabled,
340
- label: required ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_RequiredComponent["default"], null), label) : label,
341
- helperText: assistiveText,
342
- onChange: function onChange(event) {
343
- return handlerInputChange(event);
344
- },
345
- onBlur: handlerInputBlur,
346
- onFocus: function onFocus(event) {
347
- return getFocus(event);
348
- },
349
- placeholder: placeholder,
350
- type: isMasked ? "password" : "text",
351
- InputProps: {
352
- endAdornment: (suffix || suffixIconSrc || suffixIcon) && _react["default"].createElement(_InputAdornment["default"], {
353
- position: "end"
354
- }, suffixIcon ? _react["default"].createElement(SuffixIconContainer, {
355
- tabIndex: typeof onClickSuffix === "function" && !disabled ? tabIndex : -1,
356
- disabled: disabled,
357
- onClick: onClickSuffix,
358
- interactuable: typeof onClickSuffix === "function" && !disabled
359
- }, (0, _typeof2["default"])(suffixIcon) === "object" ? suffixIcon : _react["default"].createElement(suffixIcon)) : suffixIconSrc && _react["default"].createElement(SuffixIcon, {
360
- tabIndex: typeof onClickSuffix === "function" && !disabled ? tabIndex : -1,
361
- disabled: disabled,
362
- src: suffixIconSrc,
363
- onClick: onClickSuffix,
364
- interactuable: typeof onClickSuffix === "function" && !disabled
365
- }) || _react["default"].createElement(SuffixLabel, {
366
- tabIndex: typeof onClickSuffix === "function" && !disabled ? tabIndex : -1,
367
- onClick: onClickSuffix,
368
- disabled: disabled,
369
- interactuable: typeof onClickSuffix === "function" && !disabled
370
- }, suffix))
371
- },
372
- inputProps: {
373
- tabIndex: tabIndex
374
- }
375
- })), _react["default"].createElement(_Popper["default"], {
376
- open: isOpen,
377
- anchorEl: anchorEl,
378
- anchororigin: {
379
- vertical: "bottom",
380
- horizontal: "left"
381
- },
382
- paperprops: {
383
- style: {
384
- marginTop: "0px"
385
- }
386
- }
387
- }, _react["default"].createElement(SuggestionsContainer, {
388
- margin: margin,
389
- size: size
390
- }, _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Paper["default"], null, isOpen && !isSearching && !isError && filteredOptions.length === 0 && _react["default"].createElement(_MenuItem["default"], null, "No matches found."), isOpen && !isSearching && filteredOptions.length > 0 && filteredOptions.map(function (suggestion) {
391
- return _react["default"].createElement(_MenuItem["default"], {
392
- key: suggestion,
393
- onMouseDown: function onMouseDown(event) {
394
- return event.preventDefault();
395
- },
396
- onClick: function onClick() {
397
- return handlerSuggestionClicked(suggestion);
398
- }
399
- }, suggestion);
400
- }), isSearching && _react["default"].createElement(_MenuItem["default"], null, "Searching..."), isError && _react["default"].createElement(_MenuItem["default"], null, "Error fetching data", _react["default"].createElement(ErrorIcon, {
401
- src: _error["default"]
402
- })))))));
403
- };
404
-
405
- var sizes = {
406
- small: "42px",
407
- medium: "240px",
408
- large: "480px",
409
- fillParent: "100%"
410
- };
411
-
412
- var ErrorIcon = _styledComponents["default"].img(_templateObject());
413
-
414
- var calculateWidth = function calculateWidth(margin, size) {
415
- if (size === "fillParent") {
416
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
417
- }
418
-
419
- return sizes[size];
420
- };
421
-
422
- var getCursor = function getCursor(interactuable, disabled) {
423
- if (disabled) {
424
- return "cursor:not-allowed;";
425
- }
426
-
427
- if (interactuable) {
428
- return "cursor:pointer;";
429
- }
430
-
431
- return "cursor:default; outline:none;";
432
- };
433
-
434
- var SuggestionsContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
435
- return calculateWidth(props.margin, props.size);
436
- }, function (props) {
437
- return props.theme.scrollBarTrackColor;
438
- }, function (props) {
439
- return props.theme.scrollBarThumbColor;
440
- }, function (props) {
441
- return props.theme.hoverOptionColor;
442
- }, function (props) {
443
- return props.theme.selectedOptionBackgroundColor;
444
- });
445
-
446
- var PrefixIcon = _styledComponents["default"].img(_templateObject3(), function (props) {
447
- return props.disabled && 0.5 || 1;
448
- }, function (props) {
449
- return getCursor(props.interactuable, props.disabled);
450
- });
451
-
452
- var PrefixIconContainer = _styledComponents["default"].div(_templateObject4(), function (props) {
453
- return props.disabled && 0.5 || 1;
454
- }, function (props) {
455
- return getCursor(props.interactuable, props.disabled);
456
- });
457
-
458
- var PrefixLabel = _styledComponents["default"].span(_templateObject5(), function (props) {
459
- return props.theme.fontFamily;
460
- }, function (props) {
461
- return props.theme.fontColor;
462
- }, function (props) {
463
- return props.disabled && 0.5 || 1;
464
- }, function (props) {
465
- return getCursor(props.interactuable, props.disabled);
466
- });
467
-
468
- var SuffixIcon = _styledComponents["default"].img(_templateObject6(), function (props) {
469
- return props.disabled && 0.5 || 1;
470
- }, function (props) {
471
- return getCursor(props.interactuable, props.disabled);
472
- });
473
-
474
- var SuffixIconContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
475
- return props.disabled && 0.5 || 1;
476
- }, function (props) {
477
- return getCursor(props.interactuable, props.disabled);
478
- });
479
-
480
- var SuffixLabel = _styledComponents["default"].span(_templateObject8(), function (props) {
481
- return getCursor(props.interactuable, props.disabled);
482
- });
483
-
484
- var TextContainer = _styledComponents["default"].div(_templateObject9(), function (props) {
485
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
486
- }, function (props) {
487
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
488
- }, function (props) {
489
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
490
- }, function (props) {
491
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
492
- }, function (props) {
493
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
494
- }, function (props) {
495
- return calculateWidth(props.margin, props.size);
496
- }, function (props) {
497
- return props.theme.fontFamily;
498
- }, function (props) {
499
- return props.theme.fontFamily;
500
- }, function (props) {
501
- return props.theme.fontSize;
502
- }, function (props) {
503
- return props.theme.fontColor;
504
- }, function (props) {
505
- return props.theme.disabledFontColor;
506
- }, function (props) {
507
- return (props.prefixIconSrc || props.prefix || props.prefixIcon) && "32px" || "inherit";
508
- }, function (props) {
509
- return props.theme.fontColor;
510
- }, function (props) {
511
- return props.prefixIconSrc || props.prefixIcon || (props.prefix || props.suffix) && "translate(8px, 1.5px) scale(0.75);" || "translate(0, 1.5px) scale(0.75);";
512
- }, function (props) {
513
- return props.theme.fontFamily;
514
- }, function (props) {
515
- return props.prefixIcon && "translate(8px, 1.5px) scale(0.75);" || props.prefixIconSrc && "translate(8px, 1.5px) scale(0.75);" || props.prefix && "translate(8px, 1.5px) scale(0.75);" || "translate(0, 1.5px) scale(0.75);";
516
- }, function (props) {
517
- return props.theme.error;
518
- }, function (props) {
519
- return props.theme.fontFamily;
520
- }, function (props) {
521
- return props.theme.fontColor;
522
- }, function (props) {
523
- return props.theme.fontColor;
524
- }, function (props) {
525
- return props.theme.fontColor;
526
- }, function (props) {
527
- return props.theme.fontColor;
528
- }, function (props) {
529
- return props.theme.fontFamily;
530
- }, function (props) {
531
- return "1px solid ".concat(props.theme.fontColor);
532
- }, function (props) {
533
- return "1px solid ".concat(props.theme.fontColor);
534
- }, function (props) {
535
- return "2px solid ".concat(props.theme.fontColor);
536
- }, function (props) {
537
- return props.theme.error;
538
- }, function (props) {
539
- return props.theme.fontColor;
540
- }, function (props) {
541
- return props.theme.error;
542
- }, function (props) {
543
- return "1px solid ".concat(props.theme.disabledFontColor, " !important");
544
- }, function (props) {
545
- return (props.prefixIconSrc || props.prefix || props.prefixIcon) && "32px" || "inherit";
546
- }, function (props) {
547
- return props.theme.fontColor;
548
- }, function (props) {
549
- return props.theme.disabledFontColor;
550
- }, function (props) {
551
- return props.theme.fontColor;
552
- }, function (props) {
553
- return props.theme.fontFamily;
554
- }, function (props) {
555
- return props.theme.fontColor;
556
- }, function (props) {
557
- return props.theme.fontColor;
558
- }, function (props) {
559
- return props.theme.error;
560
- }, function (props) {
561
- return props.theme.disabledFontColor;
562
- });
563
-
564
- DxcInputText.propTypes = {
565
- label: _propTypes["default"].string,
566
- name: _propTypes["default"].string,
567
- value: _propTypes["default"].string,
568
- theme: _propTypes["default"].oneOf(["light", "dark", ""]),
569
- assistiveText: _propTypes["default"].string,
570
- disabled: _propTypes["default"].bool,
571
- prefix: _propTypes["default"].string,
572
- suffix: _propTypes["default"].string,
573
- prefixIcon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
574
- suffixIcon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
575
- prefixIconSrc: _propTypes["default"].string,
576
- suffixIconSrc: _propTypes["default"].string,
577
- required: _propTypes["default"].bool,
578
- invalid: _propTypes["default"].bool,
579
- placeholder: _propTypes["default"].string,
580
- isMasked: _propTypes["default"].bool,
581
- onClickIcon: _propTypes["default"].func,
582
- onClickPrefix: _propTypes["default"].func,
583
- onClickSuffix: _propTypes["default"].func,
584
- onChange: _propTypes["default"].func,
585
- onBlur: _propTypes["default"].func,
586
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
587
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
588
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
589
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
590
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
591
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
592
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
593
- autocompleteOptions: _propTypes["default"].any,
594
- tabIndex: _propTypes["default"].number
595
- };
596
- var _default = DxcInputText;
597
- exports["default"] = _default;