@dxc-technology/halstack-react 0.0.0-fc652e4 → 0.0.0-fc73d3b

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 (184) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +3955 -0
  3. package/dist/index.d.ts +3955 -0
  4. package/dist/index.js +14558 -0
  5. package/dist/index.mjs +14470 -0
  6. package/package.json +92 -67
  7. package/babel.config.js +0 -8
  8. package/dist/BackgroundColorContext.js +0 -46
  9. package/dist/ThemeContext.js +0 -241
  10. package/dist/accordion/Accordion.js +0 -353
  11. package/dist/accordion-group/AccordionGroup.js +0 -188
  12. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  13. package/dist/accordion-group/readme.md +0 -70
  14. package/dist/alert/Alert.js +0 -403
  15. package/dist/badge/Badge.js +0 -63
  16. package/dist/box/Box.js +0 -156
  17. package/dist/button/Button.js +0 -238
  18. package/dist/card/Card.js +0 -254
  19. package/dist/checkbox/Checkbox.js +0 -300
  20. package/dist/checkbox/Checkbox.stories.js +0 -144
  21. package/dist/checkbox/readme.md +0 -116
  22. package/dist/chip/Chip.js +0 -265
  23. package/dist/common/OpenSans.css +0 -81
  24. package/dist/common/RequiredComponent.js +0 -40
  25. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  26. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  27. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  28. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  29. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  30. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  31. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  32. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  33. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  34. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  35. package/dist/common/utils.js +0 -22
  36. package/dist/common/variables.js +0 -1367
  37. package/dist/date/Date.js +0 -381
  38. package/dist/date/Date.stories.js +0 -205
  39. package/dist/date/readme.md +0 -73
  40. package/dist/dialog/Dialog.js +0 -218
  41. package/dist/dropdown/Dropdown.js +0 -549
  42. package/dist/footer/Footer.js +0 -395
  43. package/dist/footer/Footer.stories.js +0 -94
  44. package/dist/footer/dxc_logo.svg +0 -15
  45. package/dist/footer/readme.md +0 -41
  46. package/dist/header/Header.js +0 -403
  47. package/dist/header/Header.stories.js +0 -176
  48. package/dist/header/close_icon.svg +0 -1
  49. package/dist/header/dxc_logo_black.svg +0 -8
  50. package/dist/header/hamb_menu_black.svg +0 -1
  51. package/dist/header/hamb_menu_white.svg +0 -1
  52. package/dist/header/readme.md +0 -33
  53. package/dist/heading/Heading.js +0 -218
  54. package/dist/input-text/InputText.js +0 -707
  55. package/dist/input-text/InputText.stories.js +0 -209
  56. package/dist/input-text/error.svg +0 -1
  57. package/dist/input-text/readme.md +0 -91
  58. package/dist/layout/ApplicationLayout.js +0 -331
  59. package/dist/layout/facebook.svg +0 -45
  60. package/dist/layout/linkedin.svg +0 -50
  61. package/dist/layout/twitter.svg +0 -53
  62. package/dist/link/Link.js +0 -241
  63. package/dist/link/readme.md +0 -51
  64. package/dist/main.js +0 -351
  65. package/dist/new-date/NewDate.js +0 -403
  66. package/dist/new-input-text/NewInputText.js +0 -961
  67. package/dist/new-textarea/NewTextarea.js +0 -346
  68. package/dist/number/Number.js +0 -138
  69. package/dist/number/NumberContext.js +0 -16
  70. package/dist/paginator/Paginator.js +0 -289
  71. package/dist/paginator/images/next.svg +0 -3
  72. package/dist/paginator/images/nextPage.svg +0 -3
  73. package/dist/paginator/images/previous.svg +0 -3
  74. package/dist/paginator/images/previousPage.svg +0 -3
  75. package/dist/paginator/readme.md +0 -50
  76. package/dist/password/Password.js +0 -200
  77. package/dist/password/styles.css +0 -3
  78. package/dist/progress-bar/ProgressBar.js +0 -242
  79. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  80. package/dist/progress-bar/readme.md +0 -63
  81. package/dist/radio/Radio.js +0 -209
  82. package/dist/radio/Radio.stories.js +0 -166
  83. package/dist/radio/readme.md +0 -70
  84. package/dist/resultsetTable/ResultsetTable.js +0 -358
  85. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  86. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  87. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  88. package/dist/select/Select.js +0 -585
  89. package/dist/select/Select.stories.js +0 -235
  90. package/dist/select/readme.md +0 -72
  91. package/dist/sidenav/Sidenav.js +0 -177
  92. package/dist/slider/Slider.js +0 -319
  93. package/dist/slider/Slider.stories.js +0 -241
  94. package/dist/slider/readme.md +0 -64
  95. package/dist/spinner/Spinner.js +0 -218
  96. package/dist/spinner/Spinner.stories.js +0 -183
  97. package/dist/spinner/readme.md +0 -65
  98. package/dist/switch/Switch.js +0 -222
  99. package/dist/switch/Switch.stories.js +0 -134
  100. package/dist/switch/readme.md +0 -133
  101. package/dist/table/Table.js +0 -132
  102. package/dist/tabs/Tabs.js +0 -343
  103. package/dist/tabs/Tabs.stories.js +0 -130
  104. package/dist/tabs/readme.md +0 -78
  105. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  106. package/dist/tabs-for-sections/readme.md +0 -78
  107. package/dist/tag/Tag.js +0 -288
  108. package/dist/textarea/Textarea.js +0 -264
  109. package/dist/toggle/Toggle.js +0 -220
  110. package/dist/toggle/Toggle.stories.js +0 -297
  111. package/dist/toggle/readme.md +0 -80
  112. package/dist/toggle-group/ToggleGroup.js +0 -223
  113. package/dist/upload/Upload.js +0 -205
  114. package/dist/upload/Upload.stories.js +0 -72
  115. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  116. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  117. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  118. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  119. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  120. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  121. package/dist/upload/file-upload/FileToUpload.js +0 -184
  122. package/dist/upload/file-upload/audio-icon.svg +0 -4
  123. package/dist/upload/file-upload/close.svg +0 -4
  124. package/dist/upload/file-upload/file-icon.svg +0 -4
  125. package/dist/upload/file-upload/video-icon.svg +0 -4
  126. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  127. package/dist/upload/readme.md +0 -37
  128. package/dist/upload/transaction/Transaction.js +0 -175
  129. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  130. package/dist/upload/transaction/audio-icon.svg +0 -4
  131. package/dist/upload/transaction/error-icon.svg +0 -4
  132. package/dist/upload/transaction/file-icon-err.svg +0 -4
  133. package/dist/upload/transaction/file-icon.svg +0 -4
  134. package/dist/upload/transaction/image-icon-err.svg +0 -4
  135. package/dist/upload/transaction/image-icon.svg +0 -4
  136. package/dist/upload/transaction/success-icon.svg +0 -4
  137. package/dist/upload/transaction/video-icon-err.svg +0 -4
  138. package/dist/upload/transaction/video-icon.svg +0 -4
  139. package/dist/upload/transactions/Transactions.js +0 -138
  140. package/dist/useTheme.js +0 -22
  141. package/dist/wizard/Wizard.js +0 -411
  142. package/dist/wizard/invalid_icon.svg +0 -5
  143. package/dist/wizard/valid_icon.svg +0 -5
  144. package/dist/wizard/validation-wrong.svg +0 -6
  145. package/test/Accordion.test.js +0 -33
  146. package/test/AccordionGroup.test.js +0 -125
  147. package/test/Alert.test.js +0 -53
  148. package/test/Box.test.js +0 -10
  149. package/test/Button.test.js +0 -18
  150. package/test/Card.test.js +0 -30
  151. package/test/Checkbox.test.js +0 -45
  152. package/test/Chip.test.js +0 -25
  153. package/test/Date.test.js +0 -393
  154. package/test/Dialog.test.js +0 -23
  155. package/test/Dropdown.test.js +0 -145
  156. package/test/Footer.test.js +0 -99
  157. package/test/Header.test.js +0 -39
  158. package/test/Heading.test.js +0 -35
  159. package/test/InputText.test.js +0 -240
  160. package/test/Link.test.js +0 -43
  161. package/test/NewDate.test.js +0 -203
  162. package/test/NewInputText.test.js +0 -817
  163. package/test/NewTextarea.test.js +0 -201
  164. package/test/Number.test.js +0 -241
  165. package/test/Paginator.test.js +0 -177
  166. package/test/Password.test.js +0 -76
  167. package/test/ProgressBar.test.js +0 -35
  168. package/test/Radio.test.js +0 -37
  169. package/test/ResultsetTable.test.js +0 -330
  170. package/test/Select.test.js +0 -189
  171. package/test/Sidenav.test.js +0 -45
  172. package/test/Slider.test.js +0 -82
  173. package/test/Spinner.test.js +0 -27
  174. package/test/Switch.test.js +0 -45
  175. package/test/Table.test.js +0 -36
  176. package/test/Tabs.test.js +0 -109
  177. package/test/TabsForSections.test.js +0 -34
  178. package/test/Tag.test.js +0 -32
  179. package/test/TextArea.test.js +0 -52
  180. package/test/ToggleGroup.test.js +0 -81
  181. package/test/Upload.test.js +0 -60
  182. package/test/Wizard.test.js +0 -130
  183. package/test/mocks/pngMock.js +0 -1
  184. package/test/mocks/svgMock.js +0 -1
@@ -1,549 +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 _propTypes = _interopRequireDefault(require("prop-types"));
25
-
26
- var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
27
-
28
- var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
29
-
30
- var _core = require("@material-ui/core");
31
-
32
- var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
33
-
34
- var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
35
-
36
- var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
37
-
38
- var _variables = require("../common/variables.js");
39
-
40
- var _utils = require("../common/utils.js");
41
-
42
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
43
-
44
- function _templateObject10() {
45
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: ", ";\n width: ", ";\n height: ", ";\n margin-left: ", ";\n color: ", ";\n\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
46
-
47
- _templateObject10 = function _templateObject10() {
48
- return data;
49
- };
50
-
51
- return data;
52
- }
53
-
54
- function _templateObject9() {
55
- var data = (0, _taggedTemplateLiteral2["default"])(["\n overflow: hidden;\n width: ", ";\n height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n color: ", ";\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
56
-
57
- _templateObject9 = function _templateObject9() {
58
- return data;
59
- };
60
-
61
- return data;
62
- }
63
-
64
- function _templateObject8() {
65
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n"]);
66
-
67
- _templateObject8 = function _templateObject8() {
68
- return data;
69
- };
70
-
71
- return data;
72
- }
73
-
74
- function _templateObject7() {
75
- var data = (0, _taggedTemplateLiteral2["default"])(["\n overflow: hidden;\n width: ", ";\n height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n color: ", ";\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
76
-
77
- _templateObject7 = function _templateObject7() {
78
- return data;
79
- };
80
-
81
- return data;
82
- }
83
-
84
- function _templateObject6() {
85
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n"]);
86
-
87
- _templateObject6 = function _templateObject6() {
88
- return data;
89
- };
90
-
91
- return data;
92
- }
93
-
94
- function _templateObject5() {
95
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n flex-direction: ", ";\n margin-left: 0px;\n margin-right: 0px;\n width: ", ";\n white-space: nowrap;\n"]);
96
-
97
- _templateObject5 = function _templateObject5() {
98
- return data;
99
- };
100
-
101
- return data;
102
- }
103
-
104
- function _templateObject4() {
105
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-align: left;\n text-overflow: ellipsis;\n overflow: hidden;\n"]);
106
-
107
- _templateObject4 = function _templateObject4() {
108
- return data;
109
- };
110
-
111
- return data;
112
- }
113
-
114
- function _templateObject3() {
115
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n height: auto;\n min-height: 40px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n min-width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n background-color: ", ";\n color: ", ";\n border-bottom-right-radius: ", ";\n border-bottom-left-radius: ", ";\n\n ", ";\n"]);
116
-
117
- _templateObject3 = function _templateObject3() {
118
- return data;
119
- };
120
-
121
- return data;
122
- }
123
-
124
- function _templateObject2() {
125
- var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 1;\n\n .MuiMenuItem-gutters {\n width: ", ";\n }\n .MuiMenuItem-root {\n min-height: 36px;\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n height: auto;\n }\n .MuiPaper-root {\n min-width: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n max-height: 230px;\n overflow-y: auto;\n\n ::-webkit-scrollbar {\n width: 3px;\n }\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n\n .MuiList-padding {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n .MuiListItem-button {\n display: flex;\n flex-direction: ", ";\n justify-content: ", ";\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n cursor: pointer;\n }\n .MuiListItem-button:focus {\n outline: ", " solid 2px;\n outline-offset: -2px;\n }\n .MuiListItem-button:hover {\n background-color: ", ";\n }\n .MuiListItem-button:active {\n background-color: ", ";\n outline: ", " solid 2px;\n outline-offset: -2px;\n }\n }\n"]);
126
-
127
- _templateObject2 = function _templateObject2() {
128
- return data;
129
- };
130
-
131
- return data;
132
- }
133
-
134
- function _templateObject() {
135
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n display: inline-block;\n"]);
136
-
137
- _templateObject = function _templateObject() {
138
- return data;
139
- };
140
-
141
- return data;
142
- }
143
-
144
- var DxcDropdown = function DxcDropdown(_ref) {
145
- var _ref$options = _ref.options,
146
- options = _ref$options === void 0 ? [] : _ref$options,
147
- _ref$optionsIconPosit = _ref.optionsIconPosition,
148
- optionsIconPosition = _ref$optionsIconPosit === void 0 ? "before" : _ref$optionsIconPosit,
149
- icon = _ref.icon,
150
- _ref$iconSrc = _ref.iconSrc,
151
- iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
152
- _ref$iconPosition = _ref.iconPosition,
153
- iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
154
- _ref$label = _ref.label,
155
- label = _ref$label === void 0 ? "" : _ref$label,
156
- _ref$disabled = _ref.disabled,
157
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
158
- _ref$caretHidden = _ref.caretHidden,
159
- caretHidden = _ref$caretHidden === void 0 ? false : _ref$caretHidden,
160
- onSelectOption = _ref.onSelectOption,
161
- margin = _ref.margin,
162
- _ref$size = _ref.size,
163
- size = _ref$size === void 0 ? "fitContent" : _ref$size,
164
- _ref$expandOnHover = _ref.expandOnHover,
165
- expandOnHover = _ref$expandOnHover === void 0 ? false : _ref$expandOnHover,
166
- _ref$tabIndex = _ref.tabIndex,
167
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
168
-
169
- var _useState = (0, _react.useState)(),
170
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
171
- width = _useState2[0],
172
- setWidth = _useState2[1];
173
-
174
- var colorsTheme = (0, _useTheme["default"])();
175
- var ref = (0, _react.useRef)(null);
176
-
177
- var handleResize = function handleResize() {
178
- if (ref.current) setWidth(ref.current.offsetWidth);
179
- };
180
-
181
- (0, _react.useEffect)(function () {
182
- if (ref.current) {
183
- ref.current.addEventListener("resize", handleResize);
184
- handleResize();
185
- }
186
-
187
- return function () {
188
- if (ref.current) ref.current.removeEventListener("resize", handleResize);
189
- };
190
- }, []);
191
-
192
- var _useState3 = (0, _react.useState)(null),
193
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
194
- anchorEl = _useState4[0],
195
- setAnchorEl = _useState4[1];
196
-
197
- function handleClickListItem(event) {
198
- setAnchorEl(event.currentTarget);
199
- }
200
-
201
- function handleMenuItemClick(option) {
202
- setAnchorEl(null);
203
-
204
- if (typeof onSelectOption === "function") {
205
- onSelectOption(option.value);
206
- }
207
- }
208
-
209
- function handleClose() {
210
- setAnchorEl(null);
211
- }
212
-
213
- var handleCloseOver = expandOnHover ? handleClose : undefined;
214
-
215
- var UpArrowIcon = function UpArrowIcon() {
216
- return _react["default"].createElement("svg", {
217
- xmlns: "http://www.w3.org/2000/svg",
218
- width: "24",
219
- height: "24",
220
- viewBox: "0 0 24 24",
221
- fill: "currentColor"
222
- }, _react["default"].createElement("path", {
223
- d: "M7 14l5-5 5 5z"
224
- }), _react["default"].createElement("path", {
225
- d: "M0 0h24v24H0z",
226
- fill: "none"
227
- }));
228
- };
229
-
230
- var DownArrowIcon = function DownArrowIcon() {
231
- return _react["default"].createElement("svg", {
232
- xmlns: "http://www.w3.org/2000/svg",
233
- width: "24",
234
- height: "24",
235
- viewBox: "0 0 24 24",
236
- fill: "currentColor"
237
- }, _react["default"].createElement("path", {
238
- d: "M7 10l5 5 5-5z"
239
- }), _react["default"].createElement("path", {
240
- d: "M0 0h24v24H0z",
241
- fill: "none"
242
- }));
243
- };
244
-
245
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
246
- theme: colorsTheme.dropdown
247
- }, _react["default"].createElement(DXCDropdownContainer, {
248
- margin: margin,
249
- size: size,
250
- disabled: disabled
251
- }, _react["default"].createElement("div", {
252
- onMouseOver: expandOnHover && !disabled ? handleClickListItem : undefined,
253
- onMouseOut: handleCloseOver,
254
- onFocus: handleCloseOver,
255
- onBlur: handleCloseOver
256
- }, _react["default"].createElement(DropdownTrigger, {
257
- opened: anchorEl === null ? false : true,
258
- onClick: handleClickListItem,
259
- disabled: disabled,
260
- label: label,
261
- caretHidden: caretHidden,
262
- margin: margin,
263
- size: size,
264
- ref: ref,
265
- tabIndex: tabIndex
266
- }, _react["default"].createElement(DropdownTriggerContainer, {
267
- iconPosition: iconPosition,
268
- caretHidden: caretHidden
269
- }, icon ? _react["default"].createElement(ButtonIconContainer, {
270
- label: label,
271
- iconPosition: iconPosition,
272
- disabled: disabled
273
- }, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : iconSrc && _react["default"].createElement(ButtonIcon, {
274
- label: label,
275
- src: iconSrc,
276
- iconPosition: iconPosition
277
- }), _react["default"].createElement(DropdownTriggerLabel, {
278
- iconPosition: iconPosition,
279
- label: label
280
- }, label)), _react["default"].createElement(CaretIconContainer, {
281
- disabled: disabled
282
- }, caretHidden !== true && (anchorEl === null ? _react["default"].createElement(DownArrowIcon, {
283
- caretHidden: caretHidden,
284
- margin: margin
285
- }) : _react["default"].createElement(UpArrowIcon, {
286
- caretHidden: caretHidden,
287
- margin: margin
288
- })))), _react["default"].createElement(DXCMenu, {
289
- anchorEl: anchorEl,
290
- open: Boolean(anchorEl),
291
- onClose: handleClose,
292
- getContentAnchorEl: null,
293
- anchorOrigin: {
294
- vertical: "bottom",
295
- horizontal: "left"
296
- },
297
- transformOrigin: {
298
- vertical: "top",
299
- horizontal: "left"
300
- },
301
- optionsIconPosition: optionsIconPosition,
302
- size: size,
303
- width: width,
304
- role: undefined,
305
- transition: true,
306
- disablePortal: true,
307
- placement: "bottom-start"
308
- }, function (_ref2) {
309
- var TransitionProps = _ref2.TransitionProps;
310
- return _react["default"].createElement(_Grow["default"], TransitionProps, _react["default"].createElement(_Paper["default"], null, _react["default"].createElement(_core.ClickAwayListener, {
311
- onClickAway: handleClose
312
- }, _react["default"].createElement(_MenuList["default"], {
313
- autoFocusItem: Boolean(anchorEl),
314
- id: "menu-list-grow"
315
- }, options.map(function (option) {
316
- return _react["default"].createElement(_MenuItem["default"], {
317
- key: option.value,
318
- value: option.value,
319
- disableRipple: true,
320
- onClick: function onClick(event) {
321
- return handleMenuItemClick(option);
322
- }
323
- }, option.icon ? _react["default"].createElement(ListIconContainer, {
324
- label: option.label,
325
- iconPosition: optionsIconPosition
326
- }, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : _react["default"].createElement(option.icon)) : option.iconSrc && _react["default"].createElement(ListIcon, {
327
- label: option.label,
328
- src: option.iconSrc,
329
- iconPosition: optionsIconPosition
330
- }), _react["default"].createElement("span", {
331
- className: "optionLabel"
332
- }, option.label));
333
- })))));
334
- }))));
335
- };
336
-
337
- var sizes = {
338
- small: "60px",
339
- medium: "240px",
340
- large: "480px",
341
- fillParent: "100%",
342
- fitContent: "unset"
343
- };
344
-
345
- var calculateWidth = function calculateWidth(margin, size) {
346
- if (size === "fillParent") {
347
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
348
- }
349
-
350
- return sizes[size];
351
- };
352
-
353
- var DXCDropdownContainer = _styledComponents["default"].div(_templateObject(), function (props) {
354
- return calculateWidth(props.margin, props.size);
355
- }, function (props) {
356
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
357
- }, function (props) {
358
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
359
- }, function (props) {
360
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
361
- }, function (props) {
362
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
363
- }, function (props) {
364
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
365
- });
366
-
367
- var DXCMenu = (0, _styledComponents["default"])(_Popper["default"])(_templateObject2(), function (props) {
368
- return calculateWidth(props.margin, props.size);
369
- }, function (props) {
370
- return props.theme.optionPaddingTop;
371
- }, function (props) {
372
- return props.theme.optionPaddingBottom;
373
- }, function (props) {
374
- return props.theme.optionPaddingLeft;
375
- }, function (props) {
376
- return props.theme.optionPaddingRight;
377
- }, function (props) {
378
- return "".concat(props.width, "px");
379
- }, function (props) {
380
- return props.theme.borderThickness;
381
- }, function (props) {
382
- return props.theme.borderStyle;
383
- }, function (props) {
384
- return props.theme.borderColor;
385
- }, function (props) {
386
- return props.theme.borderRadius;
387
- }, function (props) {
388
- return props.theme.borderRadius;
389
- }, function (props) {
390
- return props.theme.scrollBarTrackColor;
391
- }, function (props) {
392
- return props.theme.scrollBarThumbColor;
393
- }, function (props) {
394
- return props.optionsIconPosition === "after" && "row-reverse" || "row";
395
- }, function (props) {
396
- return props.optionsIconPosition === "after" && "flex-end" || "";
397
- }, function (props) {
398
- return props.theme.optionBackgroundColor;
399
- }, function (props) {
400
- return props.theme.optionFontFamily;
401
- }, function (props) {
402
- return props.theme.optionFontSize;
403
- }, function (props) {
404
- return props.theme.optionFontStyle;
405
- }, function (props) {
406
- return props.theme.optionFontWeight;
407
- }, function (props) {
408
- return props.theme.optionFontColor;
409
- }, function (props) {
410
- return props.theme.focusColor;
411
- }, function (props) {
412
- return props.theme.hoverOptionBackgroundColor;
413
- }, function (props) {
414
- return props.theme.activeOptionBackgroundColor;
415
- }, function (props) {
416
- return props.theme.focusColor;
417
- });
418
-
419
- var DropdownTrigger = _styledComponents["default"].button(_templateObject3(), function (props) {
420
- return props.disabled ? "not-allowed" : "pointer";
421
- }, function (props) {
422
- return props.theme.buttonFontFamily;
423
- }, function (props) {
424
- return props.theme.buttonFontSize;
425
- }, function (props) {
426
- return props.theme.buttonFontStyle;
427
- }, function (props) {
428
- return props.theme.buttonFontWeight;
429
- }, function (props) {
430
- return props.theme.borderRadius;
431
- }, function (props) {
432
- return props.theme.borderThickness;
433
- }, function (props) {
434
- return props.theme.borderStyle;
435
- }, function (props) {
436
- return props.disabled ? props.theme.disabledBorderColor : props.theme.borderColor;
437
- }, function (props) {
438
- return props.label === "" ? "0px" : calculateWidth(props.margin, props.size);
439
- }, function (props) {
440
- return props.theme.buttonPaddingTop;
441
- }, function (props) {
442
- return props.theme.buttonPaddingBottom;
443
- }, function (props) {
444
- return props.theme.buttonPaddingLeft;
445
- }, function (props) {
446
- return props.theme.buttonPaddingRight;
447
- }, function (props) {
448
- return props.disabled ? props.theme.disabledButtonBackgroundColor : props.theme.buttonBackgroundColor;
449
- }, function (props) {
450
- return props.disabled ? props.theme.disabledColor : props.theme.buttonFontColor;
451
- }, function (props) {
452
- return props.opened ? "0px" : props.theme.borderRadius;
453
- }, function (props) {
454
- return props.opened ? "0px" : props.theme.borderRadius;
455
- }, function (props) {
456
- return !props.disabled && " \n &:focus {\n outline: none;\n }\n &:focus-visible {\n outline: ".concat(props.theme.focusColor, " solid 2px;\n outline-offset: -2px;\n }\n &:hover {\n background-color: ").concat(props.theme.hoverButtonBackgroundColor, ";\n }\n &:active {\n background-color: ").concat(props.theme.activeButtonBackgroundColor, ";\n }\n ");
457
- });
458
-
459
- var DropdownTriggerLabel = _styledComponents["default"].span(_templateObject4());
460
-
461
- var DropdownTriggerContainer = _styledComponents["default"].span(_templateObject5(), function (props) {
462
- return props.iconPosition === "after" && "row-reverse" || "row";
463
- }, function (props) {
464
- return props.caretHidden ? "100%" : "calc(100% - 36px)";
465
- });
466
-
467
- var ButtonIcon = _styledComponents["default"].img(_templateObject6(), function (props) {
468
- return props.theme.buttonIconSize;
469
- }, function (props) {
470
- return props.theme.buttonIconSize;
471
- }, function (props) {
472
- return props.iconPosition === "after" && props.label !== "" && props.theme.buttonIconSpacing || "0px";
473
- }, function (props) {
474
- return props.iconPosition === "before" && props.label !== "" && props.theme.buttonIconSpacing || "0px";
475
- });
476
-
477
- var ButtonIconContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
478
- return props.theme.buttonIconSize;
479
- }, function (props) {
480
- return props.theme.buttonIconSize;
481
- }, function (props) {
482
- return props.iconPosition === "after" && props.label !== "" && props.theme.buttonIconSpacing || "0px";
483
- }, function (props) {
484
- return props.iconPosition === "before" && props.label !== "" && props.theme.buttonIconSpacing || "0px";
485
- }, function (props) {
486
- return props.disabled ? props.theme.disabledColor : props.theme.buttonIconColor;
487
- });
488
-
489
- var ListIcon = _styledComponents["default"].img(_templateObject8(), function (props) {
490
- return props.theme.optionIconSize;
491
- }, function (props) {
492
- return props.theme.optionIconSize;
493
- }, function (props) {
494
- return props.iconPosition === "after" && props.label !== "" && props.theme.optionIconSpacing || "0px";
495
- }, function (props) {
496
- return props.iconPosition === "before" && props.label !== "" && props.theme.optionIconSpacing || "0px";
497
- });
498
-
499
- var ListIconContainer = _styledComponents["default"].div(_templateObject9(), function (props) {
500
- return props.theme.optionIconSize;
501
- }, function (props) {
502
- return props.theme.optionIconSize;
503
- }, function (props) {
504
- return props.iconPosition === "after" && props.label !== "" && props.theme.optionIconSpacing || "0px";
505
- }, function (props) {
506
- return props.iconPosition === "before" && props.label !== "" && props.theme.optionIconSpacing || "0px";
507
- }, function (props) {
508
- return props.theme.optionIconColor;
509
- });
510
-
511
- var CaretIconContainer = _styledComponents["default"].div(_templateObject10(), function (props) {
512
- return props.caretHidden === true ? "none" : "inline-flex";
513
- }, function (props) {
514
- return props.theme.caretIconSize;
515
- }, function (props) {
516
- return props.theme.caretIconSize;
517
- }, function (props) {
518
- return props.theme.caretIconSpacing;
519
- }, function (props) {
520
- return props.disabled ? props.theme.disabledColor : props.theme.caretIconColor;
521
- });
522
-
523
- DxcDropdown.propTypes = {
524
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
525
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
526
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
527
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
528
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
529
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
530
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
531
- optionsIconPosition: _propTypes["default"].oneOf(["after", "before", ""]),
532
- icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
533
- iconSrc: _propTypes["default"].string,
534
- iconPosition: _propTypes["default"].oneOf(["after", "before", ""]),
535
- label: _propTypes["default"].string,
536
- caretHidden: _propTypes["default"].bool,
537
- disabled: _propTypes["default"].bool,
538
- expandOnHover: _propTypes["default"].bool,
539
- onSelectOption: _propTypes["default"].func,
540
- options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
541
- value: _propTypes["default"].any.isRequired,
542
- label: _propTypes["default"].any.isRequired,
543
- icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
544
- iconSrc: _propTypes["default"].string
545
- })),
546
- tabIndex: _propTypes["default"].number
547
- };
548
- var _default = DxcDropdown;
549
- exports["default"] = _default;