@dxc-technology/halstack-react 0.0.0-522074c → 0.0.0-52f9f99

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 (154) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6683 -0
  3. package/dist/index.d.ts +6683 -0
  4. package/dist/index.js +1 -0
  5. package/dist/index.mjs +1 -0
  6. package/package.json +69 -66
  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/index.d.ts +0 -25
  28. package/button/Button.d.ts +0 -4
  29. package/button/Button.js +0 -182
  30. package/button/Button.stories.tsx +0 -293
  31. package/button/types.d.ts +0 -57
  32. package/button/types.js +0 -5
  33. package/card/Card.d.ts +0 -4
  34. package/card/Card.js +0 -165
  35. package/card/types.d.ts +0 -69
  36. package/card/types.js +0 -5
  37. package/checkbox/Checkbox.d.ts +0 -4
  38. package/checkbox/Checkbox.js +0 -253
  39. package/checkbox/types.d.ts +0 -60
  40. package/checkbox/types.js +0 -5
  41. package/chip/Chip.js +0 -221
  42. package/chip/index.d.ts +0 -22
  43. package/common/OpenSans.css +0 -81
  44. package/common/RequiredComponent.js +0 -32
  45. package/common/fonts/OpenSans-Bold.ttf +0 -0
  46. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  47. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  48. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  49. package/common/fonts/OpenSans-Italic.ttf +0 -0
  50. package/common/fonts/OpenSans-Light.ttf +0 -0
  51. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  52. package/common/fonts/OpenSans-Regular.ttf +0 -0
  53. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  54. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  55. package/common/utils.js +0 -22
  56. package/common/variables.js +0 -1569
  57. package/date/Date.js +0 -373
  58. package/date/index.d.ts +0 -27
  59. package/date-input/DateInput.d.ts +0 -4
  60. package/date-input/DateInput.js +0 -361
  61. package/date-input/types.d.ts +0 -100
  62. package/date-input/types.js +0 -5
  63. package/dialog/Dialog.js +0 -184
  64. package/dialog/index.d.ts +0 -18
  65. package/dropdown/Dropdown.d.ts +0 -4
  66. package/dropdown/Dropdown.js +0 -417
  67. package/dropdown/types.d.ts +0 -89
  68. package/dropdown/types.js +0 -5
  69. package/file-input/FileInput.js +0 -532
  70. package/file-input/FileItem.js +0 -193
  71. package/file-input/index.d.ts +0 -81
  72. package/footer/Footer.js +0 -297
  73. package/footer/Icons.js +0 -77
  74. package/footer/index.d.ts +0 -25
  75. package/header/Header.js +0 -326
  76. package/header/Icons.js +0 -59
  77. package/header/index.d.ts +0 -25
  78. package/heading/Heading.js +0 -176
  79. package/heading/index.d.ts +0 -17
  80. package/input-text/Icons.js +0 -22
  81. package/input-text/InputText.js +0 -611
  82. package/input-text/index.d.ts +0 -36
  83. package/layout/ApplicationLayout.js +0 -235
  84. package/layout/Icons.js +0 -55
  85. package/link/Link.js +0 -183
  86. package/link/index.d.ts +0 -23
  87. package/main.d.ts +0 -44
  88. package/main.js +0 -363
  89. package/number-input/NumberInput.js +0 -128
  90. package/number-input/NumberInputContext.js +0 -16
  91. package/number-input/index.d.ts +0 -113
  92. package/paginator/Icons.js +0 -66
  93. package/paginator/Paginator.d.ts +0 -4
  94. package/paginator/Paginator.js +0 -198
  95. package/paginator/types.d.ts +0 -38
  96. package/paginator/types.js +0 -5
  97. package/password-input/PasswordInput.js +0 -199
  98. package/password-input/PasswordInput.stories.jsx +0 -131
  99. package/password-input/index.d.ts +0 -94
  100. package/progress-bar/ProgressBar.d.ts +0 -4
  101. package/progress-bar/ProgressBar.js +0 -170
  102. package/progress-bar/types.d.ts +0 -37
  103. package/progress-bar/types.js +0 -5
  104. package/radio/Radio.d.ts +0 -4
  105. package/radio/Radio.js +0 -174
  106. package/radio/types.d.ts +0 -54
  107. package/radio/types.js +0 -5
  108. package/resultsetTable/ResultsetTable.js +0 -274
  109. package/resultsetTable/index.d.ts +0 -19
  110. package/select/Select.js +0 -865
  111. package/select/index.d.ts +0 -131
  112. package/sidenav/Sidenav.js +0 -145
  113. package/sidenav/index.d.ts +0 -13
  114. package/slider/Slider.d.ts +0 -4
  115. package/slider/Slider.js +0 -306
  116. package/slider/types.d.ts +0 -83
  117. package/slider/types.js +0 -5
  118. package/spinner/Spinner.js +0 -267
  119. package/spinner/index.d.ts +0 -17
  120. package/switch/Switch.d.ts +0 -4
  121. package/switch/Switch.js +0 -179
  122. package/switch/types.d.ts +0 -58
  123. package/switch/types.js +0 -5
  124. package/table/Table.js +0 -118
  125. package/table/index.d.ts +0 -13
  126. package/tabs/Tabs.js +0 -259
  127. package/tabs/index.d.ts +0 -19
  128. package/tag/Tag.js +0 -208
  129. package/tag/index.d.ts +0 -24
  130. package/text-input/TextInput.js +0 -825
  131. package/text-input/index.d.ts +0 -135
  132. package/textarea/Textarea.js +0 -317
  133. package/textarea/Textarea.stories.jsx +0 -135
  134. package/textarea/index.d.ts +0 -117
  135. package/toggle/Toggle.js +0 -186
  136. package/toggle/index.d.ts +0 -21
  137. package/toggle-group/ToggleGroup.js +0 -243
  138. package/toggle-group/index.d.ts +0 -21
  139. package/upload/Upload.js +0 -201
  140. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  141. package/upload/buttons-upload/Icons.js +0 -40
  142. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  143. package/upload/dragAndDropArea/Icons.js +0 -39
  144. package/upload/file-upload/FileToUpload.js +0 -115
  145. package/upload/file-upload/Icons.js +0 -66
  146. package/upload/files-upload/FilesToUpload.js +0 -109
  147. package/upload/index.d.ts +0 -15
  148. package/upload/transaction/Icons.js +0 -160
  149. package/upload/transaction/Transaction.js +0 -104
  150. package/upload/transactions/Transactions.js +0 -94
  151. package/useTheme.js +0 -22
  152. package/wizard/Icons.js +0 -65
  153. package/wizard/Wizard.js +0 -271
  154. 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;