@dxc-technology/halstack-react 0.0.0-ff6151e → 0.0.0-ff99b25

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