@dxc-technology/halstack-react 3.2.0 → 4.0.0

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 (265) hide show
  1. package/BackgroundColorContext.js +46 -0
  2. package/ThemeContext.js +250 -0
  3. package/V3Select/V3Select.js +549 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/V3Textarea/V3Textarea.js +264 -0
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +119 -50
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +33 -1
  10. package/accordion-group/index.d.ts +16 -0
  11. package/alert/Alert.js +403 -0
  12. package/alert/index.d.ts +51 -0
  13. package/badge/Badge.js +63 -0
  14. package/{dist/box → box}/Box.js +27 -18
  15. package/box/index.d.ts +25 -0
  16. package/button/Button.js +238 -0
  17. package/button/Button.stories.js +27 -0
  18. package/button/index.d.ts +24 -0
  19. package/{dist/card → card}/Card.js +16 -9
  20. package/card/index.d.ts +22 -0
  21. package/{dist/checkbox → checkbox}/Checkbox.js +89 -23
  22. package/checkbox/index.d.ts +24 -0
  23. package/{dist/chip → chip}/Chip.js +63 -21
  24. package/chip/index.d.ts +22 -0
  25. package/{dist/common → common}/OpenSans.css +0 -0
  26. package/{dist/common → common}/RequiredComponent.js +0 -0
  27. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  28. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  29. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  30. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  31. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  37. package/common/utils.js +22 -0
  38. package/common/variables.js +1567 -0
  39. package/{dist/date → date}/Date.js +60 -38
  40. package/date/index.d.ts +27 -0
  41. package/date-input/DateInput.js +400 -0
  42. package/date-input/index.d.ts +95 -0
  43. package/{dist/dialog → dialog}/Dialog.js +44 -29
  44. package/dialog/index.d.ts +18 -0
  45. package/{dist/dropdown → dropdown}/Dropdown.js +162 -74
  46. package/dropdown/index.d.ts +26 -0
  47. package/file-input/FileInput.js +644 -0
  48. package/file-input/FileItem.js +287 -0
  49. package/file-input/index.d.ts +81 -0
  50. package/{dist/footer → footer}/Footer.js +79 -37
  51. package/footer/Icons.js +77 -0
  52. package/footer/index.d.ts +25 -0
  53. package/{dist/header → header}/Header.js +157 -72
  54. package/header/Icons.js +59 -0
  55. package/header/index.d.ts +25 -0
  56. package/heading/Heading.js +230 -0
  57. package/heading/index.d.ts +17 -0
  58. package/input-text/Icons.js +22 -0
  59. package/{dist/input-text → input-text}/InputText.js +162 -66
  60. package/input-text/index.d.ts +36 -0
  61. package/{dist/layout → layout}/ApplicationLayout.js +7 -11
  62. package/layout/Icons.js +55 -0
  63. package/{dist/link → link}/Link.js +76 -39
  64. package/link/index.d.ts +23 -0
  65. package/main.d.ts +40 -0
  66. package/{dist/main.js → main.js} +71 -15
  67. package/number-input/NumberInput.js +136 -0
  68. package/number-input/NumberInputContext.js +16 -0
  69. package/number-input/index.d.ts +113 -0
  70. package/package.json +25 -19
  71. package/paginator/Icons.js +66 -0
  72. package/{dist/paginator → paginator}/Paginator.js +86 -42
  73. package/paginator/index.d.ts +20 -0
  74. package/password-input/PasswordInput.js +203 -0
  75. package/password-input/index.d.ts +94 -0
  76. package/{dist/progress-bar → progress-bar}/ProgressBar.js +88 -38
  77. package/progress-bar/index.d.ts +18 -0
  78. package/{dist/radio → radio}/Radio.js +28 -9
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +65 -40
  81. package/resultsetTable/index.d.ts +19 -0
  82. package/select/Select.js +1138 -0
  83. package/select/index.d.ts +131 -0
  84. package/{dist/sidenav → sidenav}/Sidenav.js +47 -23
  85. package/sidenav/index.d.ts +13 -0
  86. package/slider/Slider.js +404 -0
  87. package/slider/index.d.ts +29 -0
  88. package/spinner/Spinner.js +381 -0
  89. package/spinner/index.d.ts +17 -0
  90. package/{dist/switch → switch}/Switch.js +42 -14
  91. package/switch/index.d.ts +24 -0
  92. package/{dist/table → table}/Table.js +45 -11
  93. package/table/index.d.ts +13 -0
  94. package/{dist/tabs → tabs}/Tabs.js +37 -19
  95. package/tabs/index.d.ts +19 -0
  96. package/{dist/tag → tag}/Tag.js +50 -36
  97. package/tag/index.d.ts +24 -0
  98. package/text-input/TextInput.js +992 -0
  99. package/text-input/index.d.ts +135 -0
  100. package/textarea/Textarea.js +369 -0
  101. package/textarea/index.d.ts +117 -0
  102. package/{dist/toggle → toggle}/Toggle.js +0 -0
  103. package/toggle/index.d.ts +21 -0
  104. package/toggle-group/ToggleGroup.js +327 -0
  105. package/toggle-group/index.d.ts +21 -0
  106. package/{dist/upload → upload}/Upload.js +1 -5
  107. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +28 -16
  108. package/upload/buttons-upload/Icons.js +40 -0
  109. package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +61 -25
  110. package/upload/dragAndDropArea/Icons.js +39 -0
  111. package/{dist/upload → upload}/file-upload/FileToUpload.js +52 -25
  112. package/upload/file-upload/Icons.js +66 -0
  113. package/{dist/upload → upload}/files-upload/FilesToUpload.js +3 -3
  114. package/upload/index.d.ts +15 -0
  115. package/upload/transaction/Icons.js +160 -0
  116. package/{dist/upload → upload}/transaction/Transaction.js +37 -41
  117. package/{dist/upload → upload}/transactions/Transactions.js +24 -8
  118. package/{dist/useTheme.js → useTheme.js} +0 -0
  119. package/wizard/Icons.js +65 -0
  120. package/{dist/wizard → wizard}/Wizard.js +106 -56
  121. package/wizard/index.d.ts +18 -0
  122. package/README.md +0 -66
  123. package/babel.config.js +0 -8
  124. package/dist/ThemeContext.js +0 -201
  125. package/dist/accordion/Accordion.stories.js +0 -207
  126. package/dist/accordion/readme.md +0 -96
  127. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  128. package/dist/accordion-group/readme.md +0 -70
  129. package/dist/alert/Alert.js +0 -318
  130. package/dist/alert/Alert.stories.js +0 -158
  131. package/dist/alert/close.svg +0 -4
  132. package/dist/alert/error.svg +0 -4
  133. package/dist/alert/info.svg +0 -4
  134. package/dist/alert/readme.md +0 -43
  135. package/dist/alert/success.svg +0 -4
  136. package/dist/alert/warning.svg +0 -4
  137. package/dist/badge/Badge.js +0 -40
  138. package/dist/button/Button.js +0 -219
  139. package/dist/button/Button.stories.js +0 -224
  140. package/dist/button/readme.md +0 -93
  141. package/dist/checkbox/Checkbox.stories.js +0 -144
  142. package/dist/checkbox/readme.md +0 -116
  143. package/dist/common/utils.js +0 -42
  144. package/dist/common/variables.js +0 -523
  145. package/dist/date/Date.stories.js +0 -205
  146. package/dist/date/calendar.svg +0 -1
  147. package/dist/date/calendar_dark.svg +0 -1
  148. package/dist/date/readme.md +0 -73
  149. package/dist/dialog/Dialog.stories.js +0 -217
  150. package/dist/dialog/readme.md +0 -32
  151. package/dist/dropdown/Dropdown.stories.js +0 -249
  152. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  153. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  154. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  155. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  156. package/dist/dropdown/readme.md +0 -69
  157. package/dist/footer/Footer.stories.js +0 -94
  158. package/dist/footer/dxc_logo_wht.png +0 -0
  159. package/dist/footer/readme.md +0 -41
  160. package/dist/header/Header.stories.js +0 -176
  161. package/dist/header/close_icon.svg +0 -1
  162. package/dist/header/dxc_logo_black.png +0 -0
  163. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  164. package/dist/header/dxc_logo_white.png +0 -0
  165. package/dist/header/hamb_menu_black.svg +0 -1
  166. package/dist/header/hamb_menu_white.svg +0 -1
  167. package/dist/header/readme.md +0 -33
  168. package/dist/heading/Heading.js +0 -163
  169. package/dist/input-text/InputText.stories.js +0 -209
  170. package/dist/input-text/error.svg +0 -1
  171. package/dist/input-text/readme.md +0 -91
  172. package/dist/layout/facebook.svg +0 -45
  173. package/dist/layout/linkedin.svg +0 -50
  174. package/dist/layout/twitter.svg +0 -53
  175. package/dist/link/readme.md +0 -51
  176. package/dist/paginator/images/next.svg +0 -3
  177. package/dist/paginator/images/nextPage.svg +0 -3
  178. package/dist/paginator/images/previous.svg +0 -3
  179. package/dist/paginator/images/previousPage.svg +0 -3
  180. package/dist/paginator/readme.md +0 -50
  181. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  182. package/dist/progress-bar/readme.md +0 -63
  183. package/dist/radio/Radio.stories.js +0 -166
  184. package/dist/radio/readme.md +0 -70
  185. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  186. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  187. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  188. package/dist/select/Select.js +0 -490
  189. package/dist/select/Select.stories.js +0 -235
  190. package/dist/select/readme.md +0 -72
  191. package/dist/slider/Slider.js +0 -267
  192. package/dist/slider/Slider.stories.js +0 -241
  193. package/dist/slider/readme.md +0 -64
  194. package/dist/spinner/Spinner.js +0 -198
  195. package/dist/spinner/Spinner.stories.js +0 -183
  196. package/dist/spinner/readme.md +0 -65
  197. package/dist/switch/Switch.stories.js +0 -134
  198. package/dist/switch/readme.md +0 -133
  199. package/dist/tabs/Tabs.stories.js +0 -130
  200. package/dist/tabs/readme.md +0 -78
  201. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  202. package/dist/tabs-for-sections/readme.md +0 -78
  203. package/dist/textarea/Textarea.js +0 -238
  204. package/dist/toggle/Toggle.stories.js +0 -297
  205. package/dist/toggle/readme.md +0 -80
  206. package/dist/toggle-group/ToggleGroup.js +0 -223
  207. package/dist/toggle-group/readme.md +0 -82
  208. package/dist/upload/Upload.stories.js +0 -72
  209. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  210. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  211. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  212. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  213. package/dist/upload/file-upload/audio-icon.svg +0 -4
  214. package/dist/upload/file-upload/close.svg +0 -4
  215. package/dist/upload/file-upload/file-icon.svg +0 -4
  216. package/dist/upload/file-upload/video-icon.svg +0 -4
  217. package/dist/upload/readme.md +0 -37
  218. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  219. package/dist/upload/transaction/audio-icon.svg +0 -4
  220. package/dist/upload/transaction/error-icon.svg +0 -4
  221. package/dist/upload/transaction/file-icon-err.svg +0 -4
  222. package/dist/upload/transaction/file-icon.svg +0 -4
  223. package/dist/upload/transaction/image-icon-err.svg +0 -4
  224. package/dist/upload/transaction/image-icon.svg +0 -4
  225. package/dist/upload/transaction/success-icon.svg +0 -4
  226. package/dist/upload/transaction/video-icon-err.svg +0 -4
  227. package/dist/upload/transaction/video-icon.svg +0 -4
  228. package/dist/wizard/invalid_icon.svg +0 -6
  229. package/dist/wizard/valid_icon.svg +0 -6
  230. package/dist/wizard/validation-wrong.svg +0 -6
  231. package/test/Accordion.test.js +0 -33
  232. package/test/AccordionGroup.test.js +0 -125
  233. package/test/Alert.test.js +0 -53
  234. package/test/Box.test.js +0 -10
  235. package/test/Button.test.js +0 -18
  236. package/test/Card.test.js +0 -30
  237. package/test/Checkbox.test.js +0 -45
  238. package/test/Chip.test.js +0 -25
  239. package/test/Date.test.js +0 -393
  240. package/test/Dialog.test.js +0 -23
  241. package/test/Dropdown.test.js +0 -130
  242. package/test/Footer.test.js +0 -99
  243. package/test/Header.test.js +0 -39
  244. package/test/Heading.test.js +0 -35
  245. package/test/InputText.test.js +0 -240
  246. package/test/Link.test.js +0 -42
  247. package/test/Paginator.test.js +0 -177
  248. package/test/ProgressBar.test.js +0 -35
  249. package/test/Radio.test.js +0 -37
  250. package/test/ResultsetTable.test.js +0 -330
  251. package/test/Select.test.js +0 -192
  252. package/test/Sidenav.test.js +0 -45
  253. package/test/Slider.test.js +0 -82
  254. package/test/Spinner.test.js +0 -27
  255. package/test/Switch.test.js +0 -45
  256. package/test/Table.test.js +0 -36
  257. package/test/Tabs.test.js +0 -109
  258. package/test/TabsForSections.test.js +0 -34
  259. package/test/Tag.test.js +0 -32
  260. package/test/TextArea.test.js +0 -52
  261. package/test/ToggleGroup.test.js +0 -81
  262. package/test/Upload.test.js +0 -60
  263. package/test/Wizard.test.js +0 -130
  264. package/test/mocks/pngMock.js +0 -1
  265. package/test/mocks/svgMock.js +0 -1
@@ -1,70 +0,0 @@
1
- # DXC Radio Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcRadio } from "@dxc-technology/halstack-react";
7
-
8
- <DxcRadio onChange={handleNewValue} label="Test Radio" checked={checked} />;
9
- ```
10
-
11
- ## Props
12
-
13
- <table>
14
- <tr style="background-color: grey">
15
- <td>Name</td>
16
- <td>Default</td>
17
- <td>Description</td>
18
- </tr>
19
- <tr>
20
- <td>checked: boolean</td>
21
- <td><code>false</code></td>
22
- <td>If true, the component is checked.</td>
23
- </tr>
24
- <tr>
25
- <td>value: any</td>
26
- <td></td>
27
- <td>Will be passed to the value attribute of the html input element. When inside a form, this value will be only submitted if the radio is checked </td>
28
- </tr>
29
- <tr>
30
- <td>label: string</td>
31
- <td></td>
32
- <td>Text to be placed next to the radio.</td>
33
- </tr>
34
- <tr>
35
- <td>labelPosition: 'before' | 'after'</td>
36
- <td><code>'before'</code></td>
37
- <td>Whether the label should appear after or before the radio.</td>
38
- </tr>
39
- <tr>
40
- <td>theme: 'light' | 'dark'</td>
41
- <td><code>'light'</code></td>
42
- <td>Uses one of the available component themes.</td>
43
- </tr>
44
- <tr>
45
- <td>name: string</td>
46
- <td></td>
47
- <td>Name attribute of the input element.</td>
48
- </tr>
49
- <tr>
50
- <td>disabled: boolean</td>
51
- <td><code>false</code></td>
52
- <td>If true, the component will be disabled.</td>
53
- </tr>
54
- <tr>
55
- <td>required: boolean</td>
56
- <td><code>false</code></td>
57
- <td>If true, a red asterisk will appear before the label to indicate to the user that the field is required.</td>
58
- </tr>
59
- <tr>
60
- <td>disableRipple: boolean</td>
61
- <td><code>false</code></td>
62
- <td>If true, the ripple effect will be disabled.</td>
63
- </tr>
64
- <tr>
65
- <td>onChange: function</td>
66
- <td></td>
67
- <td>This function will be called when the user clicks the radio. The event object will be passed as a parameter.<br>
68
- Current state can be accessed via event.target.checked</td>
69
- </tr>
70
- </table>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg>
@@ -1,490 +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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
19
-
20
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
21
-
22
- var _react = _interopRequireWildcard(require("react"));
23
-
24
- var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
25
-
26
- var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
27
-
28
- var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
29
-
30
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
31
-
32
- var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
33
-
34
- var _styles = require("@material-ui/core/styles");
35
-
36
- var _propTypes = _interopRequireDefault(require("prop-types"));
37
-
38
- var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox"));
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 _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
47
-
48
- function _templateObject8() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n display: inline-block;\n .MuiFormControl-root {\n width: 100%;\n }\n .MuiFormLabel-root {\n font-size: ", ";\n font-family: ", ";\n color: ", ";\n margin-top: -3px;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n height: 22px;\n display: flex;\n align-items: center;\n\n &.Mui-disabled {\n color: ", ";\n }\n &.Mui-focused {\n font-size: ", ";\n color: ", ";\n }\n }\n .MuiSelect-select.MuiSelect-select {\n padding-right: unset;\n }\n\n .MuiSelect-select {\n width: 100%;\n height: 20px;\n display: flex;\n padding-right: unset;\n color: ", ";\n align-items: center;\n :focus {\n background-color: transparent;\n }\n & > *:last-child::after {\n content: unset;\n }\n & > *:last-child::before {\n content: unset;\n }\n &.Mui-disabled {\n color: ", ";\n cursor: not-allowed;\n }\n }\n .MuiInputBase-root {\n width: 100%;\n &.Mui-focused {\n outline: ", " auto 1px;\n }\n &.Mui-disabled {\n opacity: ", ";\n cursor: not-allowed;\n &:focus {\n outline: none;\n }\n }\n }\n .MuiInput-underline {\n &:focus {\n border-bottom: ", ";\n border-bottom-color: ", ";\n }\n &.Mui-disabled:before {\n border-bottom-style: solid;\n }\n }\n .MuiInput-underline:hover:not(.Mui-disabled):before {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n }\n .MuiInput-underline:after {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n }\n .MuiInput-underline:before {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n }\n .MuiSelect-icon {\n color: ", ";\n }\n & label {\n text-overflow: ellipsis;\n overflow: hidden;\n width: calc(100% - 24px);\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 max-height: 20px;\n max-width: 20px;\n width: 20px;\n height: 20px;\n margin-left: ", ";\n margin-right: ", ";\n overflow: hidden;\n opacity: ", ";\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 max-height: 20px;\n max-width: 20px;\n width: 20px;\n height: 20px;\n margin-left: ", ";\n margin-right: ", ";\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 font-family: ", ";\n display: flex;\n align-items: center;\n flex-direction: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\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 font-family: ", ";\n margin-left: ", ";\n margin-right: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\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 display: flex;\n flex-direction: ", ";\n justify-content: ", ";\n margin-right: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n width: ", ";\n\n &::before {\n margin: 0 4px;\n ", ";\n }\n &::after {\n margin: 0 4px;\n ", ";\n }\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 overflow: hidden;\n text-overflow: ellipsis;\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 width: calc(100% - 24px);\n overflow: hidden;\n text-overflow: ellipsis;\n"]);
120
-
121
- _templateObject = function _templateObject() {
122
- return data;
123
- };
124
-
125
- return data;
126
- }
127
-
128
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
129
-
130
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
131
-
132
- var useStyles = (0, _styles.makeStyles)(function () {
133
- return {
134
- root: function root(props) {
135
- return {
136
- minWidth: props.width
137
- };
138
- },
139
- dropdownStyle: function dropdownStyle(props) {
140
- return {
141
- boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.3)",
142
- minWidth: props.width,
143
- width: props.width,
144
- maxHeight: "250px",
145
- "&::-webkit-scrollbar": {
146
- width: "3px",
147
- margin: "5px"
148
- },
149
- "&::-webkit-scrollbar-track": {
150
- borderRadius: "3px",
151
- backgroundColor: props.scrollBarTrackColor
152
- },
153
- "&::-webkit-scrollbar-thumb": {
154
- borderRadius: "3px",
155
- backgroundColor: props.scrollBarThumbColor
156
- },
157
- "& .MuiList-root": {
158
- width: "auto !important",
159
- paddingRight: "0 !important"
160
- }
161
- };
162
- },
163
- itemList: function itemList(props) {
164
- return {
165
- color: props.color,
166
- "&.MuiList-padding": {
167
- paddingBottom: "0px",
168
- paddingTop: "0px"
169
- },
170
- "& li": {
171
- fontSize: "16px",
172
- "&:hover": {
173
- backgroundColor: props.hoveredOptionBackgroundColor,
174
- color: props.color
175
- },
176
- "&:active": {
177
- backgroundColor: props.selectedOptionBackgroundColor + props.hoverOptionBackgroundColor,
178
- color: props.color
179
- },
180
- "&.MuiListItem-root.Mui-selected": {
181
- backgroundColor: props.selectedOptionBackgroundColor,
182
- color: props.color
183
- }
184
- }
185
- };
186
- }
187
- };
188
- });
189
-
190
- var DxcSelect = function DxcSelect(_ref) {
191
- var value = _ref.value,
192
- name = _ref.name,
193
- onChange = _ref.onChange,
194
- label = _ref.label,
195
- _ref$required = _ref.required,
196
- required = _ref$required === void 0 ? false : _ref$required,
197
- _ref$disabled = _ref.disabled,
198
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
199
- _ref$invalid = _ref.invalid,
200
- invalid = _ref$invalid === void 0 ? false : _ref$invalid,
201
- _ref$options = _ref.options,
202
- options = _ref$options === void 0 ? [] : _ref$options,
203
- _ref$iconPosition = _ref.iconPosition,
204
- iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
205
- _ref$multiple = _ref.multiple,
206
- multiple = _ref$multiple === void 0 ? false : _ref$multiple,
207
- margin = _ref.margin,
208
- _ref$size = _ref.size,
209
- size = _ref$size === void 0 ? "medium" : _ref$size,
210
- _ref$tabIndex = _ref.tabIndex,
211
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
212
- var colorsTheme = (0, _useTheme["default"])();
213
-
214
- var _useState = (0, _react.useState)(multiple && [] || ""),
215
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
216
- selectedValue = _useState2[0],
217
- setSelectedValue = _useState2[1];
218
-
219
- var selectValues = _objectSpread({
220
- width: "auto"
221
- }, colorsTheme.select);
222
-
223
- var classes = useStyles(selectValues);
224
-
225
- var handleSelectChange = function handleSelectChange(selectedOption) {
226
- if (multiple) {
227
- setSelectedValue(selectedOption.target.value);
228
-
229
- if (typeof onChange === "function") {
230
- onChange(selectedOption.target.value);
231
- }
232
- } else {
233
- setSelectedValue(selectedOption.target.value);
234
-
235
- if (typeof onChange === "function") {
236
- onChange(selectedOption.target.value);
237
- }
238
- }
239
- };
240
-
241
- var getLabelForSingleSelect = function getLabelForSingleSelect(selected) {
242
- var selectedItem = options.filter(function (option) {
243
- return option.value === selected;
244
- })[0];
245
- return _react["default"].createElement(SelectedIconContainer, {
246
- iconPosition: iconPosition,
247
- multiple: multiple,
248
- label: selectedItem && selectedItem.label,
249
- key: selectedItem && selectedItem.label
250
- }, selectedItem && selectedItem.icon ? _react["default"].createElement(ListIconContainer, {
251
- disabled: disabled
252
- }, (0, _typeof2["default"])(selectedItem.icon) === "object" ? selectedItem.icon : _react["default"].createElement(selectedItem.icon)) : selectedItem && selectedItem.iconSrc && _react["default"].createElement(ListIcon, {
253
- src: selectedItem && selectedItem.iconSrc
254
- }), selectedItem && selectedItem.label && _react["default"].createElement(SelectedLabelContainer, {
255
- iconSrc: selectedItem && selectedItem.iconSrc && selectedItem.icon,
256
- iconPosition: iconPosition,
257
- disabled: disabled
258
- }, selectedItem && selectedItem.label));
259
- };
260
-
261
- var getSelectedValuesWithLabel = function getSelectedValuesWithLabel(optionsList, selected) {
262
- return _react["default"].createElement(MultipleLabelSelected, null, optionsList.filter(function (x) {
263
- return selected.includes(x.value);
264
- }).map(function (optionToRender) {
265
- return optionToRender.label;
266
- }).join(", "));
267
- };
268
-
269
- var getSelectedValuesWithIcons = function getSelectedValuesWithIcons(optionsList, selected) {
270
- return options.filter(function (x) {
271
- return selected.includes(x.value);
272
- }).map(function (optionToRender) {
273
- return getLabelForSingleSelect(optionToRender.value);
274
- });
275
- };
276
-
277
- var labelForMultipleSelect = function labelForMultipleSelect(selected) {
278
- return options.findIndex(function (option) {
279
- return !option.label;
280
- }) !== -1 ? getSelectedValuesWithIcons(options, selected) : getSelectedValuesWithLabel(options, selected);
281
- };
282
-
283
- var getRenderValue = function getRenderValue(selected) {
284
- return multiple && labelForMultipleSelect(selected) || getLabelForSingleSelect(selected);
285
- };
286
-
287
- var isChecked = function isChecked(checkedValue, value, option) {
288
- if (value !== undefined) {
289
- var result = false;
290
- value.map(function (val) {
291
- if (val === option.value) {
292
- result = true;
293
- }
294
- });
295
- return result;
296
- } else if (checkedValue) {
297
- return checkedValue.findIndex(function (element) {
298
- return element === option.value;
299
- }) !== -1 || false;
300
- }
301
- };
302
-
303
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
304
- theme: colorsTheme.select
305
- }, _react["default"].createElement(SelectContainer, {
306
- margin: margin,
307
- size: size,
308
- invalid: invalid,
309
- disabled: disabled
310
- }, _react["default"].createElement(_FormControl["default"], null, _react["default"].createElement(_InputLabel["default"], {
311
- disabled: disabled
312
- }, required && _react["default"].createElement(_RequiredComponent["default"], null), label), _react["default"].createElement(_Select["default"], {
313
- name: name,
314
- multiple: multiple,
315
- renderValue: getRenderValue,
316
- onChange: handleSelectChange,
317
- value: value !== undefined ? value : selectedValue,
318
- disabled: disabled,
319
- MenuProps: {
320
- classes: {
321
- paper: classes.dropdownStyle,
322
- list: classes.itemList
323
- },
324
- getContentAnchorEl: null,
325
- anchorOrigin: {
326
- vertical: "bottom",
327
- horizontal: "left"
328
- }
329
- },
330
- inputProps: {
331
- tabIndex: disabled ? -1 : tabIndex
332
- }
333
- }, options.map(function (option) {
334
- return _react["default"].createElement(_MenuItem["default"], {
335
- id: option.value,
336
- value: option.value,
337
- disableRipple: true,
338
- key: option.value
339
- }, multiple && _react["default"].createElement(_Checkbox["default"], {
340
- size: "fitContent",
341
- checked: isChecked(selectedValue, value, option)
342
- }), _react["default"].createElement(OptionContainer, {
343
- iconPosition: iconPosition
344
- }, option.icon ? _react["default"].createElement(ListIconContainer, {
345
- label: option.label,
346
- iconPosition: iconPosition
347
- }, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : _react["default"].createElement(option.icon)) : option.iconSrc && _react["default"].createElement(ListIcon, {
348
- src: option.iconSrc,
349
- label: option.label,
350
- iconPosition: iconPosition
351
- }), " ", _react["default"].createElement(LabelCont, null, option.label)));
352
- })))));
353
- };
354
-
355
- var sizes = {
356
- small: "60px",
357
- medium: "240px",
358
- large: "480px",
359
- fillParent: "100%"
360
- };
361
-
362
- var calculateWidth = function calculateWidth(margin, size) {
363
- if (size === "fillParent") {
364
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
365
- }
366
-
367
- return sizes[size];
368
- };
369
-
370
- var MultipleLabelSelected = _styledComponents["default"].div(_templateObject());
371
-
372
- var LabelCont = _styledComponents["default"].span(_templateObject2());
373
-
374
- var SelectedIconContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
375
- return props.iconPosition === "before" && "row" || "row-reverse";
376
- }, function (props) {
377
- return props.iconPosition === "before" && "flex-start" || "flex-end";
378
- }, function (props) {
379
- return props.multiple && props.label && "15px" || "0px";
380
- }, function (props) {
381
- return !props.multiple && "calc(100% - 24px)" || "auto";
382
- }, function (props) {
383
- return props.iconPosition === "after" && (props.label !== "" || props.label === undefined) && "content:','";
384
- }, function (props) {
385
- return props.iconPosition === "before" && (props.label !== "" || props.label === undefined) && "content:','";
386
- });
387
-
388
- var SelectedLabelContainer = _styledComponents["default"].span(_templateObject4(), function (props) {
389
- return props.theme.fontFamily;
390
- }, function (props) {
391
- return (props.iconPosition === "after" || !props.iconSrc) && "0px" || "10px";
392
- }, function (props) {
393
- return (props.iconPosition === "before" || !props.iconSrc) && "0px" || "10px";
394
- });
395
-
396
- var OptionContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
397
- return props.theme.fontFamily;
398
- }, function (props) {
399
- return props.iconPosition === "before" && "row" || "row-reverse";
400
- });
401
-
402
- var ListIcon = _styledComponents["default"].img(_templateObject6(), function (props) {
403
- return props.iconPosition === "after" && props.label !== "" && "10px" || "0px";
404
- }, function (props) {
405
- return props.iconPosition === "before" && props.label !== "" && "10px" || "0px";
406
- });
407
-
408
- var ListIconContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
409
- return props.iconPosition === "after" && props.label !== "" && "10px" || "0px";
410
- }, function (props) {
411
- return props.iconPosition === "before" && props.label !== "" && "10px" || "0px";
412
- }, function (props) {
413
- return props.disabled && "0.34";
414
- });
415
-
416
- var SelectContainer = _styledComponents["default"].div(_templateObject8(), function (props) {
417
- return props.theme.fontSizeBase;
418
- }, function (props) {
419
- return calculateWidth(props.margin, props.size);
420
- }, function (props) {
421
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
422
- }, function (props) {
423
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
424
- }, function (props) {
425
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
426
- }, function (props) {
427
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
428
- }, function (props) {
429
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
430
- }, function (props) {
431
- return props.theme.fontSize;
432
- }, function (props) {
433
- return props.theme.fontFamily;
434
- }, function (props) {
435
- return props.invalid === true ? props.theme.error : props.theme.color;
436
- }, function (props) {
437
- return props.theme.disabledColor;
438
- }, function (props) {
439
- return props.theme.fontSize;
440
- }, function (props) {
441
- return props.invalid === true ? props.theme.error : props.theme.color;
442
- }, function (props) {
443
- return props.theme.color;
444
- }, function (props) {
445
- return props.theme.disabledColor;
446
- }, function (props) {
447
- return props.theme.focusColor;
448
- }, function (props) {
449
- return props.theme.disabled;
450
- }, function (props) {
451
- return props.disabled && "0px solid" || "2px solid";
452
- }, function (props) {
453
- return props.invalid === true && props.theme.error || props.disabled && props.theme.disabledColor || props.theme.color;
454
- }, function (props) {
455
- return props.invalid === true && props.theme.error || props.disabled && props.theme.disabledColor || props.theme.color;
456
- }, function (props) {
457
- return props.invalid === true ? props.theme.error : props.theme.color;
458
- }, function (props) {
459
- return props.invalid === true && props.theme.error || props.disabled && props.theme.disabledColor || props.theme.color;
460
- }, function (props) {
461
- return props.theme.color;
462
- });
463
-
464
- DxcSelect.propTypes = {
465
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
466
- label: _propTypes["default"].string,
467
- name: _propTypes["default"].string,
468
- value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]))]),
469
- disabled: _propTypes["default"].bool,
470
- required: _propTypes["default"].bool,
471
- invalid: _propTypes["default"].bool,
472
- iconPosition: _propTypes["default"].oneOf(["after", "before"]),
473
- onChange: _propTypes["default"].func,
474
- options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
475
- value: _propTypes["default"].any.isRequired,
476
- label: _propTypes["default"].string,
477
- icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
478
- iconSrc: _propTypes["default"].string
479
- })),
480
- multiple: _propTypes["default"].bool,
481
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
482
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
483
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
484
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
485
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
486
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
487
- tabIndex: _propTypes["default"].number
488
- };
489
- var _default = DxcSelect;
490
- exports["default"] = _default;