@dxc-technology/halstack-react 0.0.0-8d998c7 → 0.0.0-8db6a95

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 (159) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6669 -0
  3. package/dist/index.d.ts +6669 -0
  4. package/dist/index.js +14523 -0
  5. package/dist/index.mjs +14465 -0
  6. package/package.json +69 -68
  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/NumberInputContext.js +0 -16
  94. package/number-input/index.d.ts +0 -113
  95. package/paginator/Icons.js +0 -66
  96. package/paginator/Paginator.d.ts +0 -4
  97. package/paginator/Paginator.js +0 -198
  98. package/paginator/types.d.ts +0 -38
  99. package/paginator/types.js +0 -5
  100. package/password-input/PasswordInput.js +0 -199
  101. package/password-input/PasswordInput.stories.jsx +0 -131
  102. package/password-input/index.d.ts +0 -94
  103. package/progress-bar/ProgressBar.d.ts +0 -4
  104. package/progress-bar/ProgressBar.js +0 -170
  105. package/progress-bar/types.d.ts +0 -37
  106. package/progress-bar/types.js +0 -5
  107. package/radio/Radio.d.ts +0 -4
  108. package/radio/Radio.js +0 -174
  109. package/radio/types.d.ts +0 -54
  110. package/radio/types.js +0 -5
  111. package/resultsetTable/ResultsetTable.js +0 -274
  112. package/resultsetTable/index.d.ts +0 -19
  113. package/select/Select.js +0 -865
  114. package/select/index.d.ts +0 -131
  115. package/sidenav/Sidenav.js +0 -145
  116. package/sidenav/index.d.ts +0 -13
  117. package/slider/Slider.d.ts +0 -4
  118. package/slider/Slider.js +0 -306
  119. package/slider/types.d.ts +0 -83
  120. package/slider/types.js +0 -5
  121. package/spinner/Spinner.js +0 -267
  122. package/spinner/index.d.ts +0 -17
  123. package/switch/Switch.d.ts +0 -4
  124. package/switch/Switch.js +0 -179
  125. package/switch/types.d.ts +0 -58
  126. package/switch/types.js +0 -5
  127. package/table/Table.js +0 -118
  128. package/table/index.d.ts +0 -13
  129. package/tabs/Tabs.d.ts +0 -4
  130. package/tabs/Tabs.js +0 -211
  131. package/tabs/types.d.ts +0 -71
  132. package/tabs/types.js +0 -5
  133. package/tag/Tag.js +0 -208
  134. package/tag/index.d.ts +0 -24
  135. package/text-input/TextInput.js +0 -825
  136. package/text-input/index.d.ts +0 -135
  137. package/textarea/Textarea.js +0 -317
  138. package/textarea/Textarea.stories.jsx +0 -135
  139. package/textarea/index.d.ts +0 -117
  140. package/toggle/Toggle.js +0 -186
  141. package/toggle/index.d.ts +0 -21
  142. package/toggle-group/ToggleGroup.js +0 -243
  143. package/toggle-group/index.d.ts +0 -21
  144. package/upload/Upload.js +0 -201
  145. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  146. package/upload/buttons-upload/Icons.js +0 -40
  147. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  148. package/upload/dragAndDropArea/Icons.js +0 -39
  149. package/upload/file-upload/FileToUpload.js +0 -115
  150. package/upload/file-upload/Icons.js +0 -66
  151. package/upload/files-upload/FilesToUpload.js +0 -109
  152. package/upload/index.d.ts +0 -15
  153. package/upload/transaction/Icons.js +0 -160
  154. package/upload/transaction/Transaction.js +0 -104
  155. package/upload/transactions/Transactions.js +0 -94
  156. package/useTheme.js +0 -22
  157. package/wizard/Icons.js +0 -65
  158. package/wizard/Wizard.js +0 -271
  159. 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;