@dxc-technology/halstack-react 0.0.0-d4fec82 → 0.0.0-d53af68

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 (160) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +3941 -0
  3. package/dist/index.d.ts +3941 -0
  4. package/dist/index.js +14233 -0
  5. package/dist/index.mjs +14145 -0
  6. package/package.json +86 -69
  7. package/BackgroundColorContext.js +0 -50
  8. package/ThemeContext.js +0 -246
  9. package/V3Select/V3Select.js +0 -455
  10. package/V3Select/index.d.ts +0 -27
  11. package/V3Textarea/V3Textarea.js +0 -260
  12. package/V3Textarea/index.d.ts +0 -27
  13. package/accordion/Accordion.d.ts +0 -4
  14. package/accordion/Accordion.js +0 -258
  15. package/accordion/types.d.ts +0 -68
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -170
  19. package/accordion-group/types.d.ts +0 -72
  20. package/accordion-group/types.js +0 -5
  21. package/alert/Alert.d.ts +0 -4
  22. package/alert/Alert.js +0 -290
  23. package/alert/types.d.ts +0 -49
  24. package/alert/types.js +0 -5
  25. package/badge/Badge.js +0 -59
  26. package/box/Box.js +0 -152
  27. package/box/Box.stories.jsx +0 -132
  28. package/box/index.d.ts +0 -25
  29. package/button/Button.d.ts +0 -4
  30. package/button/Button.js +0 -182
  31. package/button/Button.stories.tsx +0 -293
  32. package/button/types.d.ts +0 -57
  33. package/button/types.js +0 -5
  34. package/card/Card.d.ts +0 -4
  35. package/card/Card.js +0 -165
  36. package/card/types.d.ts +0 -69
  37. package/card/types.js +0 -5
  38. package/checkbox/Checkbox.d.ts +0 -4
  39. package/checkbox/Checkbox.js +0 -253
  40. package/checkbox/types.d.ts +0 -60
  41. package/checkbox/types.js +0 -5
  42. package/chip/Chip.js +0 -221
  43. package/chip/index.d.ts +0 -22
  44. package/common/OpenSans.css +0 -81
  45. package/common/RequiredComponent.js +0 -32
  46. package/common/fonts/OpenSans-Bold.ttf +0 -0
  47. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  48. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  49. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  50. package/common/fonts/OpenSans-Italic.ttf +0 -0
  51. package/common/fonts/OpenSans-Light.ttf +0 -0
  52. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  53. package/common/fonts/OpenSans-Regular.ttf +0 -0
  54. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  55. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  56. package/common/utils.js +0 -22
  57. package/common/variables.js +0 -1569
  58. package/date/Date.js +0 -373
  59. package/date/index.d.ts +0 -27
  60. package/date-input/DateInput.d.ts +0 -4
  61. package/date-input/DateInput.js +0 -361
  62. package/date-input/types.d.ts +0 -100
  63. package/date-input/types.js +0 -5
  64. package/dialog/Dialog.js +0 -184
  65. package/dialog/index.d.ts +0 -18
  66. package/dropdown/Dropdown.d.ts +0 -4
  67. package/dropdown/Dropdown.js +0 -417
  68. package/dropdown/types.d.ts +0 -89
  69. package/dropdown/types.js +0 -5
  70. package/file-input/FileInput.js +0 -532
  71. package/file-input/FileItem.js +0 -193
  72. package/file-input/index.d.ts +0 -81
  73. package/footer/Footer.d.ts +0 -4
  74. package/footer/Footer.js +0 -266
  75. package/footer/Icons.js +0 -77
  76. package/footer/types.d.ts +0 -61
  77. package/footer/types.js +0 -5
  78. package/header/Header.js +0 -326
  79. package/header/Icons.js +0 -59
  80. package/header/index.d.ts +0 -25
  81. package/heading/Heading.js +0 -176
  82. package/heading/index.d.ts +0 -17
  83. package/input-text/Icons.js +0 -22
  84. package/input-text/InputText.js +0 -611
  85. package/input-text/index.d.ts +0 -36
  86. package/layout/ApplicationLayout.js +0 -235
  87. package/layout/Icons.js +0 -55
  88. package/link/Link.js +0 -183
  89. package/link/index.d.ts +0 -23
  90. package/main.d.ts +0 -44
  91. package/main.js +0 -363
  92. package/number-input/NumberInput.js +0 -128
  93. package/number-input/NumberInput.stories.jsx +0 -115
  94. package/number-input/NumberInputContext.js +0 -16
  95. package/number-input/index.d.ts +0 -113
  96. package/paginator/Icons.js +0 -66
  97. package/paginator/Paginator.d.ts +0 -4
  98. package/paginator/Paginator.js +0 -198
  99. package/paginator/types.d.ts +0 -38
  100. package/paginator/types.js +0 -5
  101. package/password-input/PasswordInput.js +0 -199
  102. package/password-input/PasswordInput.stories.jsx +0 -131
  103. package/password-input/index.d.ts +0 -94
  104. package/progress-bar/ProgressBar.d.ts +0 -4
  105. package/progress-bar/ProgressBar.js +0 -170
  106. package/progress-bar/types.d.ts +0 -37
  107. package/progress-bar/types.js +0 -5
  108. package/radio/Radio.d.ts +0 -4
  109. package/radio/Radio.js +0 -174
  110. package/radio/types.d.ts +0 -54
  111. package/radio/types.js +0 -5
  112. package/resultsetTable/ResultsetTable.js +0 -274
  113. package/resultsetTable/index.d.ts +0 -19
  114. package/select/Select.js +0 -865
  115. package/select/index.d.ts +0 -131
  116. package/sidenav/Sidenav.js +0 -145
  117. package/sidenav/index.d.ts +0 -13
  118. package/slider/Slider.d.ts +0 -4
  119. package/slider/Slider.js +0 -306
  120. package/slider/types.d.ts +0 -83
  121. package/slider/types.js +0 -5
  122. package/spinner/Spinner.js +0 -267
  123. package/spinner/index.d.ts +0 -17
  124. package/switch/Switch.d.ts +0 -4
  125. package/switch/Switch.js +0 -179
  126. package/switch/types.d.ts +0 -58
  127. package/switch/types.js +0 -5
  128. package/table/Table.js +0 -118
  129. package/table/index.d.ts +0 -13
  130. package/tabs/Tabs.d.ts +0 -4
  131. package/tabs/Tabs.js +0 -211
  132. package/tabs/types.d.ts +0 -71
  133. package/tabs/types.js +0 -5
  134. package/tag/Tag.js +0 -208
  135. package/tag/index.d.ts +0 -24
  136. package/text-input/TextInput.js +0 -825
  137. package/text-input/index.d.ts +0 -135
  138. package/textarea/Textarea.js +0 -317
  139. package/textarea/Textarea.stories.jsx +0 -135
  140. package/textarea/index.d.ts +0 -117
  141. package/toggle/Toggle.js +0 -186
  142. package/toggle/index.d.ts +0 -21
  143. package/toggle-group/ToggleGroup.js +0 -243
  144. package/toggle-group/index.d.ts +0 -21
  145. package/upload/Upload.js +0 -201
  146. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  147. package/upload/buttons-upload/Icons.js +0 -40
  148. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  149. package/upload/dragAndDropArea/Icons.js +0 -39
  150. package/upload/file-upload/FileToUpload.js +0 -115
  151. package/upload/file-upload/Icons.js +0 -66
  152. package/upload/files-upload/FilesToUpload.js +0 -109
  153. package/upload/index.d.ts +0 -15
  154. package/upload/transaction/Icons.js +0 -160
  155. package/upload/transaction/Transaction.js +0 -104
  156. package/upload/transactions/Transactions.js +0 -94
  157. package/useTheme.js +0 -22
  158. package/wizard/Icons.js +0 -65
  159. package/wizard/Wizard.js +0 -271
  160. package/wizard/index.d.ts +0 -18
@@ -1,361 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
- var _react = _interopRequireWildcard(require("react"));
17
-
18
- var _pickers = require("@material-ui/pickers");
19
-
20
- var _core = require("@material-ui/core");
21
-
22
- var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
23
-
24
- var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));
25
-
26
- var _moment = _interopRequireDefault(require("moment"));
27
-
28
- var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
29
-
30
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
31
-
32
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
33
-
34
- var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
35
-
36
- var _templateObject;
37
-
38
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
39
-
40
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
41
-
42
- var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
43
- var _ref$label = _ref.label,
44
- label = _ref$label === void 0 ? "" : _ref$label,
45
- _ref$name = _ref.name,
46
- name = _ref$name === void 0 ? "" : _ref$name,
47
- value = _ref.value,
48
- _ref$format = _ref.format,
49
- format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
50
- _ref$helperText = _ref.helperText,
51
- helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
52
- _ref$placeholder = _ref.placeholder,
53
- placeholder = _ref$placeholder === void 0 ? false : _ref$placeholder,
54
- _ref$clearable = _ref.clearable,
55
- clearable = _ref$clearable === void 0 ? false : _ref$clearable,
56
- _ref$disabled = _ref.disabled,
57
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
58
- _ref$optional = _ref.optional,
59
- optional = _ref$optional === void 0 ? false : _ref$optional,
60
- onChange = _ref.onChange,
61
- onBlur = _ref.onBlur,
62
- _ref$error = _ref.error,
63
- error = _ref$error === void 0 ? "" : _ref$error,
64
- _ref$autocomplete = _ref.autocomplete,
65
- autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
66
- margin = _ref.margin,
67
- _ref$size = _ref.size,
68
- size = _ref$size === void 0 ? "medium" : _ref$size,
69
- _ref$tabIndex = _ref.tabIndex,
70
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
71
-
72
- var _useState = (0, _react.useState)(""),
73
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
74
- innerValue = _useState2[0],
75
- setInnerValue = _useState2[1];
76
-
77
- var _useState3 = (0, _react.useState)(false),
78
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
79
- isOpen = _useState4[0],
80
- setIsOpen = _useState4[1];
81
-
82
- var _useState5 = (0, _react.useState)(null),
83
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
84
- anchorEl = _useState6[0],
85
- setAnchorEl = _useState6[1];
86
-
87
- var colorsTheme = (0, _useTheme["default"])();
88
-
89
- var handleCalendarOnKeyDown = function handleCalendarOnKeyDown(event) {
90
- switch (event.keyCode) {
91
- case 27:
92
- // Esc
93
- event.preventDefault();
94
- setIsOpen(false);
95
- break;
96
- }
97
- };
98
-
99
- var handleCalendarOnClick = function handleCalendarOnClick(newDate) {
100
- var newValue = (0, _moment["default"])(newDate).format(format.toUpperCase());
101
- value !== null && value !== void 0 ? value : setInnerValue(newValue);
102
- onChange === null || onChange === void 0 ? void 0 : onChange({
103
- value: newValue,
104
- error: null,
105
- date: newDate !== null && newDate !== void 0 && newDate.toJSON() ? newDate : null
106
- });
107
- };
108
-
109
- var handleIOnChange = function handleIOnChange(_ref2) {
110
- var newValue = _ref2.value,
111
- inputError = _ref2.error;
112
- value !== null && value !== void 0 ? value : setInnerValue(newValue);
113
- var momentDate = (0, _moment["default"])(newValue, format.toUpperCase(), true);
114
- var invalidDateMessage = newValue !== "" && !momentDate.isValid() ? "Invalid date." : null;
115
- onChange === null || onChange === void 0 ? void 0 : onChange({
116
- value: newValue,
117
- error: inputError || invalidDateMessage,
118
- date: momentDate.isValid() ? momentDate.toDate() : null
119
- });
120
- };
121
-
122
- var handleIOnBlur = function handleIOnBlur(_ref3) {
123
- var value = _ref3.value,
124
- inputError = _ref3.error;
125
- var momentDate = (0, _moment["default"])(value, format.toUpperCase(), true);
126
- var invalidDateMessage = value !== "" && !momentDate.isValid() ? "Invalid date." : null;
127
- onBlur === null || onBlur === void 0 ? void 0 : onBlur({
128
- value: value,
129
- error: inputError || invalidDateMessage,
130
- date: momentDate.isValid() ? momentDate.toDate() : null
131
- });
132
- };
133
-
134
- var getValueForPicker = function getValueForPicker() {
135
- return (0, _moment["default"])(value !== null && value !== void 0 ? value : innerValue, format.toUpperCase(), true).format();
136
- };
137
-
138
- var openCalendar = function openCalendar(event) {
139
- if (event) {
140
- setIsOpen(!isOpen);
141
- setAnchorEl(event.currentTarget);
142
- }
143
- };
144
-
145
- var closeCalendar = function closeCalendar() {
146
- setIsOpen(false);
147
- };
148
-
149
- var calendarAction = {
150
- onClick: openCalendar,
151
- icon: /*#__PURE__*/_react["default"].createElement("svg", {
152
- xmlns: "http://www.w3.org/2000/svg",
153
- height: "24",
154
- viewBox: "0 0 24 24",
155
- width: "24",
156
- fill: "currentColor"
157
- }, /*#__PURE__*/_react["default"].createElement("path", {
158
- d: "M0 0h24v24H0z",
159
- fill: "none"
160
- }), /*#__PURE__*/_react["default"].createElement("path", {
161
- d: "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"
162
- }))
163
- };
164
- var dateTheme = (0, _core.createMuiTheme)({
165
- overrides: {
166
- MuiTypography: {
167
- root: {
168
- fontFamily: "".concat(colorsTheme.dateInput.pickerFontFamily, " !important")
169
- }
170
- },
171
- MuiPickersYearSelection: {
172
- container: {
173
- color: colorsTheme.dateInput.pickerYearFontColor,
174
- "&::-webkit-scrollbar": {
175
- width: "3px"
176
- },
177
- "&::-webkit-scrollbar-track": {
178
- backgroundColor: "#D9D9D9",
179
- borderRadius: "3px"
180
- },
181
- "&::-webkit-scrollbar-thumb": {
182
- backgroundColor: "#666666",
183
- borderRadius: "3px"
184
- }
185
- }
186
- },
187
- MuiPickersToolbar: {
188
- toolbar: {
189
- backgroundColor: colorsTheme.dateInput.pickerBackgroundColor,
190
- color: colorsTheme.dateInput.pickerDayFontColor
191
- }
192
- },
193
- MuiIconButton: {
194
- root: {
195
- height: "36px",
196
- width: "36px",
197
- padding: "0px"
198
- }
199
- },
200
- MuiTouchRipple: {
201
- child: {
202
- opacity: "0"
203
- }
204
- },
205
- MuiButtonBase: {
206
- root: {
207
- "&:focus": {
208
- outline: colorsTheme.dateInput.pickerFocusColor + " solid 2px"
209
- }
210
- }
211
- },
212
- MuiPickersBasePicker: {
213
- pickerView: {
214
- minWidth: "unset",
215
- maxWidth: "unset",
216
- minHeight: "unset",
217
- padding: "0px 10px",
218
- height: colorsTheme.dateInput.pickerHeight,
219
- width: colorsTheme.dateInput.pickerWidth,
220
- backgroundColor: colorsTheme.dateInput.pickerBackgroundColor,
221
- fontFamily: colorsTheme.dateInput.pickerFontFamily
222
- }
223
- },
224
- MuiPickersToolbarText: {
225
- toolbarTxt: {
226
- color: colorsTheme.dateInput.pickerActualDateFontColor,
227
- fontFamily: colorsTheme.dateInput.pickerFontFamily,
228
- fontSize: "2rem"
229
- },
230
- toolbarBtnSelected: {
231
- color: colorsTheme.dateInput.pickerActualDateFontColor
232
- }
233
- },
234
- MuiPickersCalendarHeader: {
235
- transitionContainer: {
236
- color: colorsTheme.dateInput.pickerMonthFontColor
237
- },
238
- dayLabel: {
239
- color: colorsTheme.dateInput.pickerWeekFontColor,
240
- fontFamily: colorsTheme.dateInput.pickerFontFamily
241
- },
242
- switchHeader: {
243
- backgroundColor: "#ffffff",
244
- color: colorsTheme.dateInput.pickerDayFontColor
245
- },
246
- iconButton: {
247
- backgroundColor: colorsTheme.dateInput.pickerMonthArrowsBackgroundColor,
248
- "&:hover": {
249
- backgroundColor: colorsTheme.dateInput.pickerMonthArrowsBackgroundColor
250
- }
251
- }
252
- },
253
- MuiPickersCalendar: {
254
- week: {
255
- marginBottom: "2px"
256
- }
257
- },
258
- MuiPickersDay: {
259
- current: {
260
- color: colorsTheme.dateInput.pickerDayFontColor
261
- },
262
- day: {
263
- fontFamily: colorsTheme.dateInput.pickerFontFamily,
264
- color: colorsTheme.dateInput.pickerDayFontColor,
265
- "&:hover": {
266
- backgroundColor: colorsTheme.dateInput.pickerHoverDateBackgroundColor,
267
- color: colorsTheme.dateInput.pickerHoverDateFontColor
268
- }
269
- },
270
- daySelected: {
271
- backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
272
- color: colorsTheme.dateInput.pickerSelectedDateColor,
273
- "&:hover": {
274
- backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
275
- color: colorsTheme.dateInput.pickerSelectedDateColor,
276
- opacity: "1"
277
- }
278
- }
279
- },
280
- MuiPickersYear: {
281
- yearSelected: {
282
- color: colorsTheme.dateInput.pickerSelectedDateColor,
283
- backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
284
- margin: "0px 100px",
285
- borderRadius: "20px"
286
- },
287
- root: {
288
- "&:focus": {
289
- color: colorsTheme.dateInput.pickerHoverDateFontColor,
290
- backgroundColor: colorsTheme.dateInput.pickerHoverDateBackgroundColor
291
- }
292
- }
293
- },
294
- MuiPickersModal: {
295
- dialogAction: {
296
- color: "pink"
297
- }
298
- }
299
- }
300
- });
301
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
302
- theme: colorsTheme
303
- }, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
304
- theme: dateTheme
305
- }, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
306
- utils: _dateFns["default"]
307
- }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
308
- label: label,
309
- name: name,
310
- value: value !== null && value !== void 0 ? value : innerValue,
311
- helperText: helperText,
312
- placeholder: placeholder ? format.toUpperCase() : null,
313
- action: calendarAction,
314
- clearable: clearable,
315
- disabled: disabled,
316
- optional: optional,
317
- onChange: handleIOnChange,
318
- onBlur: handleIOnBlur,
319
- error: error,
320
- autocomplete: autocomplete,
321
- margin: margin,
322
- size: size,
323
- tabIndex: tabIndex,
324
- ref: ref
325
- }), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
326
- onKeyDown: handleCalendarOnKeyDown,
327
- open: isOpen,
328
- anchorEl: anchorEl,
329
- anchorOrigin: {
330
- vertical: "bottom",
331
- horizontal: "left"
332
- },
333
- transformOrigin: {
334
- vertical: "top",
335
- horizontal: "center"
336
- },
337
- PaperProps: {
338
- style: {
339
- marginTop: "10px"
340
- }
341
- }
342
- }, /*#__PURE__*/_react["default"].createElement(_ClickAwayListener["default"], {
343
- onClickAway: closeCalendar
344
- }, /*#__PURE__*/_react["default"].createElement(_core.Paper, {
345
- role: "dialog",
346
- "aria-modal": "true"
347
- }, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
348
- variant: "static",
349
- value: getValueForPicker(),
350
- onChange: function onChange(date) {
351
- return handleCalendarOnClick(date);
352
- },
353
- format: format,
354
- disabled: disabled
355
- }))))))));
356
- });
357
-
358
- var StyledDPicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
359
-
360
- var _default = DxcDateInput;
361
- exports["default"] = _default;
@@ -1,100 +0,0 @@
1
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
- declare type Margin = {
3
- top?: Space;
4
- bottom?: Space;
5
- left?: Space;
6
- right?: Space;
7
- };
8
- declare type Props = {
9
- /**
10
- * Text to be placed above the date.
11
- */
12
- label?: string;
13
- /**
14
- * Name attribute of the input element.
15
- */
16
- name?: string;
17
- /**
18
- * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
19
- */
20
- value?: string;
21
- /**
22
- * The format in which the date value will be displayed. User must use this format when editing the value or it will be considered as an invalid date.
23
- */
24
- format?: string;
25
- /**
26
- * Helper text to be placed above the date.
27
- */
28
- helperText?: string;
29
- /**
30
- * If true, the date format will appear as placeholder in the field.
31
- */
32
- placeholder?: boolean;
33
- /**
34
- * If true, the date input will have an action to clear the entered value.
35
- */
36
- clearable?: boolean;
37
- /**
38
- * If true, the component will be disabled.
39
- */
40
- disabled?: boolean;
41
- /**
42
- * If true, the date will be optional, showing '(Optional)'
43
- * next to the label. Otherwise, the field will be considered required and an error will be
44
- * passed as a parameter to the OnBlur and onChange functions when it has
45
- * not been filled.
46
- */
47
- optional?: boolean;
48
- /**
49
- * This function will be called when the user types within the input
50
- * element of the component. An object including the string value, the
51
- * error and the date value will be passed to this function.
52
- * If the string value is a valid date, error will
53
- * be null. Also, if the string value is not a valid date, date will be null.
54
- */
55
- onChange?: (val: {
56
- value: string;
57
- error: string | null;
58
- date: Date | null;
59
- }) => void;
60
- /**
61
- * This function will be called when the input element loses the focus.
62
- * An object including the string value, the error and the date value
63
- * will be passed to this function. If the string value is a valid date, error will
64
- * be null. Also, if the string value is not a valid date, date will be null.
65
- */
66
- onBlur?: (val: {
67
- value: string;
68
- error: string | null;
69
- date: Date | null;
70
- }) => void;
71
- /**
72
- * If it is defined, the component will change its appearance, showing
73
- * the error below the date input component. If it is not defined, the error
74
- * messages will be managed internally, but never displayed on its own.
75
- */
76
- error?: string;
77
- /**
78
- * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
79
- * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
80
- */
81
- autocomplete?: string;
82
- /**
83
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
84
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
85
- */
86
- margin?: Space | Margin;
87
- /**
88
- * Size of the component.
89
- */
90
- size?: "medium" | "large" | "fillParent";
91
- /**
92
- * Value of the tabindex attribute.
93
- */
94
- tabIndex?: number;
95
- };
96
- /**
97
- * Reference to the component.
98
- */
99
- export declare type RefType = HTMLDivElement;
100
- export default Props;
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
package/dialog/Dialog.js DELETED
@@ -1,184 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof3 = require("@babel/runtime/helpers/typeof");
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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
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 _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
- var _variables = require("../common/variables.js");
29
-
30
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
31
-
32
- var _BackgroundColorContext = require("../BackgroundColorContext.js");
33
-
34
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
35
-
36
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
37
-
38
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
39
-
40
- var DxcDialog = function DxcDialog(_ref) {
41
- var _ref$isCloseVisible = _ref.isCloseVisible,
42
- isCloseVisible = _ref$isCloseVisible === void 0 ? true : _ref$isCloseVisible,
43
- onCloseClick = _ref.onCloseClick,
44
- children = _ref.children,
45
- _ref$overlay = _ref.overlay,
46
- overlay = _ref$overlay === void 0 ? true : _ref$overlay,
47
- onBackgroundClick = _ref.onBackgroundClick,
48
- padding = _ref.padding,
49
- _ref$tabIndex = _ref.tabIndex,
50
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
51
-
52
- var _useState = (0, _react.useState)(),
53
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
54
- isResponsive = _useState2[0],
55
- setIsResponsive = _useState2[1];
56
-
57
- var colorsTheme = (0, _useTheme["default"])();
58
-
59
- var handleClose = function handleClose() {
60
- typeof onCloseClick === "function" && onCloseClick();
61
- };
62
-
63
- var handleOverlayClick = function handleOverlayClick() {
64
- typeof onBackgroundClick === "function" && onBackgroundClick();
65
- };
66
-
67
- var handleResize = function handleResize(width) {
68
- width && width <= _variables.responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false);
69
- };
70
-
71
- var handleEventListener = function handleEventListener() {
72
- handleResize(window.innerWidth);
73
- };
74
-
75
- (0, _react.useEffect)(function () {
76
- window.addEventListener("resize", handleEventListener);
77
- handleResize(window.innerWidth);
78
- return function () {
79
- window.removeEventListener("resize", handleEventListener);
80
- };
81
- }, []);
82
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
83
- theme: colorsTheme.dialog
84
- }, /*#__PURE__*/_react["default"].createElement(DialogContainer, {
85
- open: true,
86
- isCloseVisible: isCloseVisible,
87
- onClose: handleOverlayClick,
88
- overlay: overlay,
89
- padding: padding,
90
- isResponsive: isResponsive
91
- }, isCloseVisible && /*#__PURE__*/_react["default"].createElement(CloseIconContainer, {
92
- onClick: handleClose,
93
- tabIndex: tabIndex
94
- }, /*#__PURE__*/_react["default"].createElement(CloseIcon, {
95
- xmlns: "http://www.w3.org/2000/svg",
96
- width: "24",
97
- height: "24",
98
- viewBox: "0 0 24 24",
99
- fill: "currentColor"
100
- }, /*#__PURE__*/_react["default"].createElement("path", {
101
- d: "M0 0h24v24H0V0z",
102
- fill: "none"
103
- }), /*#__PURE__*/_react["default"].createElement("path", {
104
- d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
105
- }))), /*#__PURE__*/_react["default"].createElement(Children, null, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
106
- color: colorsTheme.dialog.backgroundColor
107
- }, children))));
108
- };
109
-
110
- var DialogContainer = (0, _styledComponents["default"])(_Dialog["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n overflow: unset;\n font-family: ", ";\n\n .MuiBackdrop-root {\n background-color: ", ";\n opacity: ", " !important;\n }\n .MuiDialog-paperWidthSm {\n background-color: ", ";\n max-width: ", ";\n min-width: ", ";\n box-sizing: border-box;\n min-height: ", ";\n box-shadow: ", ";\n\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n }\n"])), function (props) {
111
- return props.theme.fontFamily;
112
- }, function (props) {
113
- return props.overlay === true ? props.theme.overlayColor : "transparent";
114
- }, function (props) {
115
- return props.overlay === true && props.theme.overlayOpacity;
116
- }, function (props) {
117
- return props.theme.backgroundColor;
118
- }, function (props) {
119
- return props.isResponsive ? "92%" : "80%";
120
- }, function (props) {
121
- return props.isResponsive ? "92%" : "800px";
122
- }, function (props) {
123
- return props.isCloseVisible ? "72px" : "";
124
- }, function (props) {
125
- return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
126
- }, function (props) {
127
- return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : _variables.spaces["small"];
128
- }, function (props) {
129
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
130
- }, function (props) {
131
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
132
- }, function (props) {
133
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
134
- }, function (props) {
135
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
136
- });
137
-
138
- var Children = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
139
-
140
- var CloseIconContainer = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: ", ";\n right: ", ";\n cursor: pointer;\n padding: 0;\n margin: 0;\n background: none;\n color: ", ";\n width: ", ";\n height: ", ";\n border: none;\n"])), function (props) {
141
- return props.theme.closeIconTopPosition;
142
- }, function (props) {
143
- return props.theme.closeIconRightPosition;
144
- }, function (props) {
145
- return props.theme.closeIconColor;
146
- }, function (props) {
147
- return props.theme.closeIconWidth;
148
- }, function (props) {
149
- return props.theme.closeIconHeight;
150
- });
151
-
152
- var CloseIcon = _styledComponents["default"].svg(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n"])), function (props) {
153
- return props.theme.closeIconBackgroundColor;
154
- }, function (props) {
155
- return props.theme.closeIconWidth;
156
- }, function (props) {
157
- return props.theme.closeIconHeight;
158
- }, function (props) {
159
- return props.theme.closeIconBorderRadius;
160
- }, function (props) {
161
- return props.theme.closeIconBorderThickness;
162
- }, function (props) {
163
- return props.theme.closeIconBorderStyle;
164
- }, function (props) {
165
- return props.theme.closeIconBorderColor;
166
- });
167
-
168
- DxcDialog.propTypes = {
169
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
170
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
171
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
172
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
173
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
174
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
175
- isVisible: _propTypes["default"].bool,
176
- isCloseVisible: _propTypes["default"].bool,
177
- onClose: _propTypes["default"].func,
178
- onCloseClick: _propTypes["default"].func,
179
- onBackgroundClick: _propTypes["default"].func,
180
- overlay: _propTypes["default"].bool,
181
- tabIndex: _propTypes["default"].number
182
- };
183
- var _default = DxcDialog;
184
- exports["default"] = _default;
package/dialog/index.d.ts DELETED
@@ -1,18 +0,0 @@
1
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
- type Padding = {
3
- top?: Space;
4
- bottom?: Space;
5
- left?: Space;
6
- right?: Space;
7
- };
8
-
9
- type Props = {
10
- isCloseVisible?: boolean;
11
- onCloseClick?: void;
12
- overlay?: boolean;
13
- onBackgroundClick?: void;
14
- padding?: Padding,
15
- tabIndex?: number;
16
- };
17
-
18
- export default function DxcDialog(props: Props): JSX.Element;
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import DropdownPropsType from "./types";
3
- declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconSrc, iconPosition, label, caretHidden, onSelectOption, expandOnHover, margin, size, tabIndex, disabled, }: DropdownPropsType) => JSX.Element;
4
- export default DxcDropdown;