@am92/react-design-system 2.5.4 → 2.5.6

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 (115) hide show
  1. package/dist/Components/index.d.ts +0 -1
  2. package/dist/Components/index.js +0 -1
  3. package/dist/Theme/componentOverrides.d.ts +286 -219
  4. package/dist/Theme/componentOverrides.js +4 -3
  5. package/dist/Theme/index.d.ts +1 -1
  6. package/dist/Theme/index.js +2 -2
  7. package/dist/index.d.ts +1 -0
  8. package/dist/index.js +1 -0
  9. package/dist/locale.d.ts +59 -1
  10. package/dist/locale.js +58 -1
  11. package/dist/x-datepicker/Components/DsDatePicker/DateCalenderHeader.d.ts +3 -0
  12. package/dist/x-datepicker/Components/DsDatePicker/DateCalenderHeader.js +27 -0
  13. package/dist/{Components → x-datepicker/Components}/DsDatePicker/DatePickerTextField.d.ts +4 -4
  14. package/dist/x-datepicker/Components/DsDatePicker/DatePickerTextField.js +13 -0
  15. package/dist/x-datepicker/Components/DsDatePicker/DefaultActionBar.d.ts +7 -0
  16. package/dist/x-datepicker/Components/DsDatePicker/DefaultActionBar.js +27 -0
  17. package/dist/x-datepicker/Components/DsDatePicker/DefaultToolbar.d.ts +5 -0
  18. package/dist/x-datepicker/Components/DsDatePicker/DefaultToolbar.js +25 -0
  19. package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Component.d.ts +3 -0
  20. package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Component.js +97 -0
  21. package/dist/{Components → x-datepicker/Components}/DsDatePicker/DsDatePicker.Overrides.d.ts +67 -0
  22. package/dist/{Components → x-datepicker/Components}/DsDatePicker/DsDatePicker.Overrides.js +8 -0
  23. package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Types.d.ts +17 -0
  24. package/dist/{Components → x-datepicker/Components}/DsDatePicker/DsDatePicker.Types.js +2 -5
  25. package/dist/{Components → x-datepicker/Components}/DsDatePicker/utils.js +24 -4
  26. package/dist/x-datepicker/Components/index.d.ts +1 -0
  27. package/dist/x-datepicker/Components/index.js +1 -0
  28. package/dist/x-datepicker/Locale/DsDatePickerLocaleBeBY.d.ts +68 -0
  29. package/dist/x-datepicker/Locale/DsDatePickerLocaleBeBY.js +15 -0
  30. package/dist/x-datepicker/Locale/DsDatePickerLocaleCaES.d.ts +68 -0
  31. package/dist/x-datepicker/Locale/DsDatePickerLocaleCaES.js +15 -0
  32. package/dist/x-datepicker/Locale/DsDatePickerLocaleCsCZ.d.ts +68 -0
  33. package/dist/x-datepicker/Locale/DsDatePickerLocaleCsCZ.js +15 -0
  34. package/dist/x-datepicker/Locale/DsDatePickerLocaleDaDK.d.ts +68 -0
  35. package/dist/x-datepicker/Locale/DsDatePickerLocaleDaDK.js +15 -0
  36. package/dist/x-datepicker/Locale/DsDatePickerLocaleDeDE.d.ts +68 -0
  37. package/dist/x-datepicker/Locale/DsDatePickerLocaleDeDE.js +15 -0
  38. package/dist/x-datepicker/Locale/DsDatePickerLocaleElGR.d.ts +68 -0
  39. package/dist/x-datepicker/Locale/DsDatePickerLocaleElGR.js +15 -0
  40. package/dist/x-datepicker/Locale/DsDatePickerLocaleEnUS.d.ts +68 -0
  41. package/dist/x-datepicker/Locale/DsDatePickerLocaleEnUS.js +15 -0
  42. package/dist/x-datepicker/Locale/DsDatePickerLocaleEsES.d.ts +68 -0
  43. package/dist/x-datepicker/Locale/DsDatePickerLocaleEsES.js +15 -0
  44. package/dist/x-datepicker/Locale/DsDatePickerLocaleEu.d.ts +68 -0
  45. package/dist/x-datepicker/Locale/DsDatePickerLocaleEu.js +15 -0
  46. package/dist/x-datepicker/Locale/DsDatePickerLocaleFaIR.d.ts +68 -0
  47. package/dist/x-datepicker/Locale/DsDatePickerLocaleFaIR.js +15 -0
  48. package/dist/x-datepicker/Locale/DsDatePickerLocaleFiFI.d.ts +68 -0
  49. package/dist/x-datepicker/Locale/DsDatePickerLocaleFiFI.js +15 -0
  50. package/dist/x-datepicker/Locale/DsDatePickerLocaleFrFR.d.ts +68 -0
  51. package/dist/x-datepicker/Locale/DsDatePickerLocaleFrFR.js +15 -0
  52. package/dist/x-datepicker/Locale/DsDatePickerLocaleHeIL.d.ts +68 -0
  53. package/dist/x-datepicker/Locale/DsDatePickerLocaleHeIL.js +15 -0
  54. package/dist/x-datepicker/Locale/DsDatePickerLocaleHuHU.d.ts +68 -0
  55. package/dist/x-datepicker/Locale/DsDatePickerLocaleHuHU.js +15 -0
  56. package/dist/x-datepicker/Locale/DsDatePickerLocaleIsIS.d.ts +68 -0
  57. package/dist/x-datepicker/Locale/DsDatePickerLocaleIsIS.js +15 -0
  58. package/dist/x-datepicker/Locale/DsDatePickerLocaleItIT.d.ts +68 -0
  59. package/dist/x-datepicker/Locale/DsDatePickerLocaleItIT.js +15 -0
  60. package/dist/x-datepicker/Locale/DsDatePickerLocaleJaJP.d.ts +68 -0
  61. package/dist/x-datepicker/Locale/DsDatePickerLocaleJaJP.js +15 -0
  62. package/dist/x-datepicker/Locale/DsDatePickerLocaleKoKR.d.ts +68 -0
  63. package/dist/x-datepicker/Locale/DsDatePickerLocaleKoKR.js +15 -0
  64. package/dist/x-datepicker/Locale/DsDatePickerLocaleKzKZ.d.ts +68 -0
  65. package/dist/x-datepicker/Locale/DsDatePickerLocaleKzKZ.js +15 -0
  66. package/dist/x-datepicker/Locale/DsDatePickerLocaleMk.d.ts +68 -0
  67. package/dist/x-datepicker/Locale/DsDatePickerLocaleMk.js +15 -0
  68. package/dist/x-datepicker/Locale/DsDatePickerLocaleNbNO.d.ts +68 -0
  69. package/dist/x-datepicker/Locale/DsDatePickerLocaleNbNO.js +15 -0
  70. package/dist/x-datepicker/Locale/DsDatePickerLocaleNlNL.d.ts +68 -0
  71. package/dist/x-datepicker/Locale/DsDatePickerLocaleNlNL.js +15 -0
  72. package/dist/x-datepicker/Locale/DsDatePickerLocalePlPL.d.ts +68 -0
  73. package/dist/x-datepicker/Locale/DsDatePickerLocalePlPL.js +15 -0
  74. package/dist/x-datepicker/Locale/DsDatePickerLocalePtBR.d.ts +68 -0
  75. package/dist/x-datepicker/Locale/DsDatePickerLocalePtBR.js +15 -0
  76. package/dist/x-datepicker/Locale/DsDatePickerLocaleRoRO.d.ts +68 -0
  77. package/dist/x-datepicker/Locale/DsDatePickerLocaleRoRO.js +15 -0
  78. package/dist/x-datepicker/Locale/DsDatePickerLocaleRuRU.d.ts +68 -0
  79. package/dist/x-datepicker/Locale/DsDatePickerLocaleRuRU.js +15 -0
  80. package/dist/x-datepicker/Locale/DsDatePickerLocaleSkSK.d.ts +68 -0
  81. package/dist/x-datepicker/Locale/DsDatePickerLocaleSkSK.js +15 -0
  82. package/dist/x-datepicker/Locale/DsDatePickerLocaleSvSE.d.ts +68 -0
  83. package/dist/x-datepicker/Locale/DsDatePickerLocaleSvSE.js +15 -0
  84. package/dist/x-datepicker/Locale/DsDatePickerLocaleTrTR.d.ts +68 -0
  85. package/dist/x-datepicker/Locale/DsDatePickerLocaleTrTR.js +15 -0
  86. package/dist/x-datepicker/Locale/DsDatePickerLocaleUkUA.d.ts +68 -0
  87. package/dist/x-datepicker/Locale/DsDatePickerLocaleUkUA.js +15 -0
  88. package/dist/x-datepicker/Locale/DsDatePickerLocaleUrPK.d.ts +66 -0
  89. package/dist/x-datepicker/Locale/DsDatePickerLocaleUrPK.js +13 -0
  90. package/dist/x-datepicker/Locale/DsDatePickerLocaleViVN.d.ts +68 -0
  91. package/dist/x-datepicker/Locale/DsDatePickerLocaleViVN.js +15 -0
  92. package/dist/x-datepicker/Locale/DsDatePickerLocaleZhCN.d.ts +68 -0
  93. package/dist/x-datepicker/Locale/DsDatePickerLocaleZhCN.js +15 -0
  94. package/dist/x-datepicker/Locale/DsDatePickerLocaleZhHK.d.ts +68 -0
  95. package/dist/x-datepicker/Locale/DsDatePickerLocaleZhHK.js +15 -0
  96. package/dist/x-datepicker/Locale/index.d.ts +35 -0
  97. package/dist/x-datepicker/Locale/index.js +34 -0
  98. package/dist/x-datepicker/componentOverrides.d.ts +289 -0
  99. package/dist/x-datepicker/componentOverrides.js +5 -0
  100. package/dist/x-datepicker/index.d.ts +2 -0
  101. package/dist/x-datepicker/index.js +2 -0
  102. package/package.json +1 -1
  103. package/dist/Components/DsDatePicker/DateCalenderHeader.d.ts +0 -7
  104. package/dist/Components/DsDatePicker/DateCalenderHeader.js +0 -26
  105. package/dist/Components/DsDatePicker/DatePickerTextField.js +0 -8
  106. package/dist/Components/DsDatePicker/DefaultActionBar.d.ts +0 -7
  107. package/dist/Components/DsDatePicker/DefaultActionBar.js +0 -28
  108. package/dist/Components/DsDatePicker/DefaultToolbar.d.ts +0 -7
  109. package/dist/Components/DsDatePicker/DefaultToolbar.js +0 -29
  110. package/dist/Components/DsDatePicker/DsDatePicker.Component.d.ts +0 -16
  111. package/dist/Components/DsDatePicker/DsDatePicker.Component.js +0 -91
  112. package/dist/Components/DsDatePicker/DsDatePicker.Types.d.ts +0 -20
  113. /package/dist/{Components → x-datepicker/Components}/DsDatePicker/index.d.ts +0 -0
  114. /package/dist/{Components → x-datepicker/Components}/DsDatePicker/index.js +0 -0
  115. /package/dist/{Components → x-datepicker/Components}/DsDatePicker/utils.d.ts +0 -0
@@ -0,0 +1,289 @@
1
+ /// <reference types="date-fns" />
2
+ declare const XDatePickerComponentOverrides: {
3
+ MuiDatePicker: {
4
+ defaultProps: import("./Components").DsDatePickerProps<Date>;
5
+ };
6
+ MuiLocalizationProvider: {
7
+ defaultProps: {
8
+ adapterLocale: Locale;
9
+ localeText: {
10
+ okButtonLabel: string;
11
+ previousMonth?: string | undefined;
12
+ nextMonth?: string | undefined;
13
+ calendarWeekNumberHeaderLabel?: string | undefined;
14
+ calendarWeekNumberHeaderText?: string | undefined;
15
+ calendarWeekNumberAriaLabelText?: ((weekNumber: number) => string) | undefined;
16
+ calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
17
+ openPreviousView?: string | undefined;
18
+ openNextView?: string | undefined;
19
+ calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers").DateView) => string) | undefined;
20
+ start?: string | undefined;
21
+ end?: string | undefined;
22
+ cancelButtonLabel?: string | undefined;
23
+ clearButtonLabel?: string | undefined;
24
+ todayButtonLabel?: string | undefined;
25
+ clockLabelText?: ((view: import("@mui/x-date-pickers").TimeView, time: any, adapter: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
26
+ hoursClockNumberText?: ((hours: string) => string) | undefined;
27
+ minutesClockNumberText?: ((minutes: string) => string) | undefined;
28
+ secondsClockNumberText?: ((seconds: string) => string) | undefined;
29
+ selectViewText?: ((view: import("@mui/x-date-pickers/internals/models").TimeViewWithMeridiem) => string) | undefined;
30
+ openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
31
+ openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
32
+ fieldClearLabel?: string | undefined;
33
+ timeTableLabel?: string | undefined;
34
+ dateTableLabel?: string | undefined;
35
+ fieldYearPlaceholder?: ((params: {
36
+ digitAmount: number;
37
+ format: string;
38
+ }) => string) | undefined;
39
+ fieldMonthPlaceholder?: ((params: {
40
+ contentType: import("@mui/x-date-pickers").FieldSectionContentType;
41
+ format: string;
42
+ }) => string) | undefined;
43
+ fieldDayPlaceholder?: ((params: {
44
+ format: string;
45
+ }) => string) | undefined;
46
+ fieldWeekDayPlaceholder?: ((params: {
47
+ contentType: import("@mui/x-date-pickers").FieldSectionContentType;
48
+ format: string;
49
+ }) => string) | undefined;
50
+ fieldHoursPlaceholder?: ((params: {
51
+ format: string;
52
+ }) => string) | undefined;
53
+ fieldMinutesPlaceholder?: ((params: {
54
+ format: string;
55
+ }) => string) | undefined;
56
+ fieldSecondsPlaceholder?: ((params: {
57
+ format: string;
58
+ }) => string) | undefined;
59
+ fieldMeridiemPlaceholder?: ((params: {
60
+ format: string;
61
+ }) => string) | undefined;
62
+ datePickerToolbarTitle?: string | undefined;
63
+ timePickerToolbarTitle?: string | undefined;
64
+ dateTimePickerToolbarTitle?: string | undefined;
65
+ dateRangePickerToolbarTitle?: string | undefined;
66
+ };
67
+ };
68
+ };
69
+ MuiPickersPopper: {
70
+ styleOverrides: {
71
+ root: {
72
+ ' &[data-popper-placement^="right"]': {
73
+ marginLeft: string;
74
+ };
75
+ ' &[data-popper-placement^="bottom"]': {
76
+ marginTop: string;
77
+ };
78
+ ' &[data-popper-placement^="left"]': {
79
+ marginRight: string;
80
+ };
81
+ ' &[data-popper-placement^="top"]': {
82
+ marginBottom: string;
83
+ };
84
+ };
85
+ paper: {
86
+ borderRadius: string;
87
+ boxShadow: string;
88
+ };
89
+ };
90
+ };
91
+ MuiDateCalendar: {
92
+ styleOverrides: {
93
+ root: {
94
+ width: string;
95
+ maxHeight: string;
96
+ height: string;
97
+ paddingTop: string;
98
+ };
99
+ };
100
+ };
101
+ MuiPickersCalendarHeader: {
102
+ styleOverrides: {
103
+ root: {
104
+ margin: string;
105
+ marginBottom: string;
106
+ padding: string;
107
+ };
108
+ labelContainer: {
109
+ position: string;
110
+ left: string;
111
+ transform: string;
112
+ cursor: string;
113
+ pointerEvents: string;
114
+ };
115
+ switchViewButton: {
116
+ display: string;
117
+ };
118
+ label: {
119
+ marginRight: string;
120
+ };
121
+ };
122
+ };
123
+ MuiPickersArrowSwitcher: {
124
+ styleOverrides: {
125
+ root: {
126
+ width: string;
127
+ };
128
+ spacer: {
129
+ flexGrow: number;
130
+ };
131
+ };
132
+ };
133
+ MuiPickersDay: {
134
+ styleOverrides: {
135
+ root: {
136
+ width: string;
137
+ height: string;
138
+ margin: string;
139
+ fontWeight: string;
140
+ fontSize: string;
141
+ lineHeight: string;
142
+ letterSpacing: string;
143
+ '&.Mui-selected': {
144
+ backgroundColor: string;
145
+ color: string;
146
+ '&:hover': {
147
+ backgroundColor: string;
148
+ color: string;
149
+ };
150
+ '&:focus': {
151
+ backgroundColor: string;
152
+ color: string;
153
+ };
154
+ };
155
+ };
156
+ today: {
157
+ ':not(.Mui-selected)': {
158
+ background: string;
159
+ borderWidth: string;
160
+ borderStyle: string;
161
+ borderColor: string;
162
+ };
163
+ };
164
+ };
165
+ };
166
+ MuiPickersMonth: {
167
+ styleOverrides: {
168
+ monthButton: {
169
+ fontWeight: string;
170
+ fontSize: string;
171
+ lineHeight: string;
172
+ letterSpacing: string;
173
+ borderRadius: string;
174
+ '&.Mui-selected': {
175
+ backgroundColor: string;
176
+ color: string;
177
+ fontWeight: string;
178
+ fontSize: string;
179
+ lineHeight: string;
180
+ letterSpacing: string;
181
+ borderRadius: string;
182
+ '&:hover': {
183
+ backgroundColor: string;
184
+ color: string;
185
+ };
186
+ '&:focus': {
187
+ backgroundColor: string;
188
+ color: string;
189
+ };
190
+ };
191
+ };
192
+ };
193
+ };
194
+ MuiDayCalendar: {
195
+ styleOverrides: {
196
+ root: {
197
+ padding: string;
198
+ maxHeight: string;
199
+ };
200
+ weekDayLabel: {
201
+ color: string;
202
+ width: string;
203
+ height: string;
204
+ margin: string;
205
+ fontWeight: string;
206
+ fontSize: string;
207
+ lineHeight: string;
208
+ letterSpacing: string;
209
+ };
210
+ weekContainer: {
211
+ justifyContent: string;
212
+ };
213
+ slideTransition: {
214
+ minHeight: string;
215
+ };
216
+ monthContainer: {
217
+ position: string;
218
+ };
219
+ header: {
220
+ marginBottom: string;
221
+ justifyContent: string;
222
+ };
223
+ };
224
+ };
225
+ MuiYearCalendar: {
226
+ styleOverrides: {
227
+ root: {
228
+ paddingLeft: string;
229
+ paddingRight: string;
230
+ marginTop: string;
231
+ marginBottom: string;
232
+ backgroundColor: string;
233
+ };
234
+ };
235
+ };
236
+ MuiMonthCalendar: {
237
+ styleOverrides: {
238
+ root: {
239
+ rowGap: string;
240
+ paddingTop: string;
241
+ paddingBottom: string;
242
+ paddingLeft: string;
243
+ paddingRight: string;
244
+ };
245
+ };
246
+ };
247
+ MuiPickersYear: {
248
+ styleOverrides: {
249
+ root: {
250
+ flexBasis: string;
251
+ };
252
+ yearButton: {
253
+ width: string;
254
+ paddingTop: string;
255
+ paddingBottom: string;
256
+ height: string;
257
+ borderRadius: string;
258
+ marginTop: string;
259
+ marginBottom: string;
260
+ fontWeight: string;
261
+ fontSize: string;
262
+ lineHeight: string;
263
+ letterSpacing: string;
264
+ color: string;
265
+ '&:hover': {
266
+ backgroundColor: string;
267
+ };
268
+ '&:focus': {
269
+ backgroundColor: string;
270
+ };
271
+ '&.Mui-selected': {
272
+ fontWeight: string;
273
+ fontSize: string;
274
+ lineHeight: string;
275
+ letterSpacing: string;
276
+ color: string;
277
+ backgroundColor: string;
278
+ '&:hover': {
279
+ backgroundColor: string;
280
+ };
281
+ '&:focus': {
282
+ backgroundColor: string;
283
+ };
284
+ };
285
+ };
286
+ };
287
+ };
288
+ };
289
+ export default XDatePickerComponentOverrides;
@@ -0,0 +1,5 @@
1
+ import { DsDatePickerOverrides } from './Components';
2
+ const XDatePickerComponentOverrides = {
3
+ ...DsDatePickerOverrides
4
+ };
5
+ export default XDatePickerComponentOverrides;
@@ -0,0 +1,2 @@
1
+ export * from './Components';
2
+ export * from './Locale';
@@ -0,0 +1,2 @@
1
+ export * from './Components';
2
+ export * from './Locale';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@am92/react-design-system",
3
- "version": "2.5.4",
3
+ "version": "2.5.6",
4
4
  "description": "ReactJS Design System using Material UI",
5
5
  "sideEffects": false,
6
6
  "types": "dist/index.d.ts",
@@ -1,7 +0,0 @@
1
- import React, { PureComponent } from 'react';
2
- import { DateView, PickersCalendarHeaderProps } from '@mui/x-date-pickers';
3
- export declare class DateCalenderHeader extends PureComponent<PickersCalendarHeaderProps<Date>> {
4
- handleMonthChange: (direction: 'left' | 'right', numberOfMonths: 1 | -1 | 12 | -12) => () => void;
5
- handleViewShow: (view: DateView) => () => void;
6
- render(): React.ReactNode;
7
- }
@@ -1,26 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { PureComponent } from 'react';
3
- import { format, addMonths } from 'date-fns';
4
- import { DsButtonBase } from '../DsButtonBase';
5
- import { DsIconButton } from '../DsIconButton';
6
- import { DsRemixIcon } from '../DsRemixIcon';
7
- import { DsStack } from '../DsStack';
8
- import { DsTypography } from '../DsTypography';
9
- export class DateCalenderHeader extends PureComponent {
10
- handleMonthChange = (direction, numberOfMonths) => () => {
11
- const { currentMonth, onMonthChange } = this.props;
12
- onMonthChange(addMonths(currentMonth, numberOfMonths), direction);
13
- };
14
- handleViewShow = (view) => () => {
15
- const { onViewChange } = this.props;
16
- onViewChange && onViewChange(view);
17
- };
18
- render() {
19
- const { currentMonth, onMonthChange, view } = this.props;
20
- const isYearNavigationDisabled = view === 'month';
21
- const isMonthNavigationDisabled = view === 'year';
22
- return (_jsxs(DsStack, { direction: "row", justifyContent: "space-between",
23
- // spacing='var(--ds-spacing-frostbite)'
24
- sx: { p: 'var(--ds-spacing-frostbite)' }, children: [_jsxs(DsStack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: "var(--ds-spacing-frostbite)", children: [_jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: this.handleMonthChange('left', -1), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-left-line" }) }), _jsxs(DsButtonBase, { disabled: isMonthNavigationDisabled, onClick: this.handleViewShow('month'), children: [_jsx(DsTypography, { variant: "bodyBoldSmall", color: isMonthNavigationDisabled ? 'text.disabled' : 'text.primary', children: format(currentMonth, 'MMM') }), _jsx(DsRemixIcon, { className: "ri-arrow-drop-down-fill", color: isMonthNavigationDisabled ? 'iconDisabled' : 'iconDefault', sx: { mr: 'var(--ds-spacing-quickFreeze)' } })] }), _jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: this.handleMonthChange('right', 1), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-right-line" }) })] }), _jsxs(DsStack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: "var(--ds-spacing-frostbite)", children: [_jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: this.handleMonthChange('left', -12), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-left-line" }) }), _jsxs(DsButtonBase, { disabled: isYearNavigationDisabled, onClick: this.handleViewShow('year'), children: [_jsx(DsTypography, { variant: "bodyBoldSmall", color: isYearNavigationDisabled ? 'text.disabled' : 'text.primary', children: format(currentMonth, 'yyyy') }), _jsx(DsRemixIcon, { className: "ri-arrow-drop-down-fill", color: isYearNavigationDisabled ? 'iconDisabled' : 'iconDefault', sx: { mr: 'var(--ds-spacing-quickFreeze)' } })] }), _jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: this.handleMonthChange('right', 12), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-right-line" }) })] })] }));
25
- }
26
- }
@@ -1,8 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import React from 'react';
3
- import { DsTextField } from '../DsTextField';
4
- export const DatePickerTextField = React.forwardRef((props, inputRef) => {
5
- const { setOpen, ref, InputProps, focused, ownerState, ...other } = props;
6
- const { readOnly } = InputProps || {};
7
- return _jsx(DsTextField, { readOnly: readOnly, ...other });
8
- });
@@ -1,7 +0,0 @@
1
- import React, { PureComponent } from 'react';
2
- import { PickersActionBarProps } from '@mui/x-date-pickers';
3
- export declare class DefaultActionBar extends PureComponent<PickersActionBarProps & {
4
- ownerState?: any;
5
- }> {
6
- render(): React.ReactNode;
7
- }
@@ -1,28 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { PureComponent } from 'react';
3
- import { DsButton } from '../DsButton';
4
- import { DsButtonGroup } from '../DsButtonGroup';
5
- export class DefaultActionBar extends PureComponent {
6
- render() {
7
- const { onAccept, onClear, ownerState, actions } = this.props;
8
- const { value } = ownerState || {};
9
- if (!actions?.length) {
10
- return;
11
- }
12
- const isClearVisible = actions.includes('clear');
13
- const isConfirmVisible = actions.includes('accept');
14
- return (_jsxs(DsButtonGroup, { sx: {
15
- gridArea: '3 / 1 / auto / 4',
16
- backgroundColor: 'var(--ds-colour-surfaceSecondary)',
17
- px: 'var(--ds-spacing-mild)',
18
- borderTop: '1px solid var(--ds-colour-strokeDefault)',
19
- borderRadius: '0px 0px 16px 16px '
20
- }, justifyContent: "space-between", size: "medium", children: [isClearVisible && (_jsx(DsButton, { sx: {
21
- py: 'var(--ds-spacing-glacial)',
22
- px: 'var(--ds-spacing-pleasant)'
23
- }, variant: "text", size: "medium", color: "secondary", onClick: onClear, disabled: !value, children: "Clear" })), isConfirmVisible && (_jsx(DsButton, { sx: {
24
- py: 'var(--ds-spacing-glacial)',
25
- px: 'var(--ds-spacing-pleasant)'
26
- }, variant: "text", size: "medium", color: "secondary", onClick: onAccept, disabled: !value, children: "Confrim" }))] }));
27
- }
28
- }
@@ -1,7 +0,0 @@
1
- import React, { Component } from 'react';
2
- import { DatePickerToolbarProps } from '@mui/x-date-pickers';
3
- export declare class DefaultToolbar extends Component<DatePickerToolbarProps<Date> & {
4
- ownerState?: any;
5
- }> {
6
- render(): React.ReactNode;
7
- }
@@ -1,29 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Component } from 'react';
3
- import { DsIconButton } from '../DsIconButton';
4
- import { DsRemixIcon } from '../DsRemixIcon';
5
- import { DsStack } from '../DsStack';
6
- import { DsTypography } from '../DsTypography';
7
- export class DefaultToolbar extends Component {
8
- render() {
9
- const { value, ownerState } = this.props;
10
- const { onCancel } = ownerState;
11
- const formatOptions = {
12
- day: 'numeric',
13
- month: 'short',
14
- year: 'numeric'
15
- };
16
- const currentDateAndDay = value && value.toLocaleDateString('en-GB', formatOptions);
17
- return (_jsx(DsStack, { sx: {
18
- backgroundColor: 'var(--ds-colour-surfaceSecondary)',
19
- padding: 'var(--ds-spacing-cool) var(--ds-spacing-bitterCold)',
20
- gridArea: '1 / 2 / auto / 4',
21
- borderRadius: '16px 16px 0px 0px',
22
- borderBottom: '1px solid var(--ds-colour-strokeDefault)'
23
- }, children: _jsxs(DsTypography, { sx: {
24
- display: 'flex',
25
- alignItems: 'center',
26
- justifyContent: 'space-between'
27
- }, variant: "headingBoldExtraSmall", children: [value ? `Selected date: ${currentDateAndDay}` : 'Select a date', _jsx(DsIconButton, { onClick: onCancel, children: _jsx(DsRemixIcon, { className: "ri-close-line" }) })] }) }));
28
- }
29
- }
@@ -1,16 +0,0 @@
1
- import React, { PureComponent } from 'react';
2
- import { DateValidationError, DateView } from '@mui/x-date-pickers';
3
- import { DsDatePickerProps, DsDatePickerState } from './DsDatePicker.Types';
4
- import { PickerChangeHandlerContext } from '@mui/x-date-pickers/models';
5
- export declare class DsDatePicker extends PureComponent<DsDatePickerProps<Date>, DsDatePickerState> {
6
- static defaultProps: DsDatePickerProps<Date>;
7
- state: DsDatePickerState;
8
- ref: React.RefObject<HTMLInputElement>;
9
- setOpen: (open: boolean) => void;
10
- onOpen: () => void;
11
- onClose: () => void;
12
- handleChange: (value: Date | null, context: PickerChangeHandlerContext<DateValidationError>) => void;
13
- handleError: (error: DateValidationError, value: Date | null) => void;
14
- handleViewChange: (value: DateView) => void;
15
- render(): import("react/jsx-runtime").JSX.Element;
16
- }
@@ -1,91 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import React, { PureComponent } from 'react';
3
- import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
4
- import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
5
- import { DatePicker } from '@mui/x-date-pickers';
6
- import { DefaultActionBar } from './DefaultActionBar';
7
- import { DefaultToolbar } from './DefaultToolbar';
8
- import { DsDatePickerDefaultProps, DsDatePickerDefaultState } from './DsDatePicker.Types';
9
- import { DateCalenderHeader } from './DateCalenderHeader';
10
- import { DsIconButton } from '../DsIconButton';
11
- import { DsInputAdornment } from '../DsInputAdornment';
12
- import { DsRemixIcon } from '../DsRemixIcon';
13
- import { DatePickerTextField } from './DatePickerTextField';
14
- import { getDateFromValue, getErrorFromErrorMap, getValueTypeFromValue } from './utils';
15
- export class DsDatePicker extends PureComponent {
16
- static defaultProps = DsDatePickerDefaultProps;
17
- state = DsDatePickerDefaultState;
18
- ref = React.createRef();
19
- setOpen = (open) => this.setState({ open });
20
- onOpen = () => this.setOpen(true);
21
- onClose = () => this.setOpen(false);
22
- handleChange = (value, context) => {
23
- const { onChange, onError, errorMap, name, valueType, format: formatType, views } = this.props;
24
- if (!views)
25
- this.setState({ views: ['day'] });
26
- if (context.validationError && typeof onError === 'function') {
27
- const error = getErrorFromErrorMap(errorMap, context.validationError, value);
28
- onError(name, error, context.validationError, getValueTypeFromValue(value, valueType, formatType));
29
- return;
30
- }
31
- if (typeof onChange === 'function' && formatType) {
32
- onChange(name, getValueTypeFromValue(value, valueType, formatType));
33
- }
34
- };
35
- handleError = (error, value) => {
36
- const { onError, errorMap, name } = this.props;
37
- if (error && typeof onError === 'function') {
38
- const errorMsg = getErrorFromErrorMap(errorMap, error, value);
39
- onError(name, errorMsg, error, value);
40
- }
41
- };
42
- handleViewChange = (value) => {
43
- this.setState({ views: [value, 'day'] });
44
- };
45
- render() {
46
- const { onChange, onError, defaultValue, value, valueType, format, onViewChange, views: propViews, disabled, readOnly = false, required, label, InputLabelProps, labelSupportText, helperText, HelperTextProps, FormControlProps, success, error, ...restProps } = this.props;
47
- const { open, views } = this.state;
48
- return (_jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DatePicker, { ...restProps, slots: {
49
- actionBar: DefaultActionBar,
50
- toolbar: DefaultToolbar,
51
- textField: DatePickerTextField,
52
- calendarHeader: DateCalenderHeader,
53
- ...this.props.slots
54
- }, slotProps: {
55
- ...this.props.slotProps,
56
- day: {
57
- //commented to show current day border highlight
58
- // disableHighlightToday: true,
59
- ...this.props.slotProps?.day
60
- },
61
- textField: {
62
- required,
63
- label,
64
- InputLabelProps,
65
- labelSupportText,
66
- helperText,
67
- HelperTextProps,
68
- FormControlProps,
69
- success,
70
- error,
71
- readOnly,
72
- ...this.props.slotProps?.textField,
73
- endAdornment: (_jsx(DsInputAdornment, { position: "end", disablePointerEvents: disabled, children: _jsx(DsIconButton, { disabled: disabled, onClick: this.onOpen, children: _jsx(DsRemixIcon, { className: "ri-calendar-line", fontSize: "bitterCold" }) }) }))
74
- },
75
- actionBar: ownerState => ({
76
- actions: ownerState.view === 'day' ? ['clear', 'accept'] : [],
77
- ...this.props.slotProps?.actionBar
78
- }),
79
- popper: {
80
- anchorEl: this.ref.current,
81
- //style to unset fixed width
82
- sx: {
83
- '.MuiMonthCalendar-root': {
84
- width: '100%'
85
- }
86
- },
87
- ...this.props.slotProps?.popper
88
- }
89
- }, readOnly: readOnly, disabled: disabled, format: format, open: open, reduceAnimations: true, onOpen: this.onOpen, onClose: this.onClose, onChange: this.handleChange, onViewChange: this.handleViewChange, onError: this.handleError, views: propViews || views, value: getDateFromValue(value, valueType, format), defaultValue: getDateFromValue(defaultValue, valueType, format), inputRef: this.ref }) }));
90
- }
91
- }
@@ -1,20 +0,0 @@
1
- import { DatePickerProps, DateValidationError, DateView } from '@mui/x-date-pickers';
2
- import { DsTextFieldProps } from '../DsTextField';
3
- export type TErrorMapKeys = Exclude<DateValidationError, null>;
4
- export type TValue = string | Date | undefined | null;
5
- export type TValueType = 'date' | 'formattedValue' | undefined;
6
- export interface DsDatePickerProps<TDate> extends Omit<DatePickerProps<TDate>, 'open' | 'onOpen' | 'onClose' | 'yearsPerRow' | 'monthsPerRow' | 'onChange' | 'onError' | 'value' | 'defaultValue'>, Pick<DsTextFieldProps, 'required' | 'label' | 'InputLabelProps' | 'labelSupportText' | 'helperText' | 'HelperTextProps' | 'FormControlProps' | 'success' | 'error'> {
7
- onChange?: (name: string, value: TValue) => void;
8
- onError?: (name: string, error: string, errorCode: DateValidationError, value: TValue | null) => void;
9
- name: string;
10
- value?: TValue;
11
- defaultValue?: TValue;
12
- valueType?: TValueType;
13
- errorMap?: Partial<Record<TErrorMapKeys, string>>;
14
- }
15
- export declare const DsDatePickerDefaultProps: DsDatePickerProps<Date>;
16
- export interface DsDatePickerState {
17
- open: boolean;
18
- views: readonly DateView[];
19
- }
20
- export declare const DsDatePickerDefaultState: DsDatePickerState;