@campxdev/react-blueprint 2.3.10 → 2.3.12

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 (7) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/esm/index.js +2 -2
  3. package/package.json +1 -1
  4. package/src/components/Input/DatePicker/DatePicker.tsx +30 -23
  5. package/src/components/Input/DateTimePicker/DateTimePicker.tsx +26 -22
  6. package/src/components/Input/TimePicker/TimePicker.tsx +13 -10
  7. package/src/themes/commonTheme.ts +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@campxdev/react-blueprint",
3
- "version": "2.3.10",
3
+ "version": "2.3.12",
4
4
  "description": "React UI component library for CampX applications",
5
5
  "author": "CampX",
6
6
  "license": "MIT",
package/src/components/Input/DatePicker/DatePicker.tsx CHANGED
@@ -1,5 +1,10 @@
1
1
  import { StackProps } from '@mui/material';
2
- import { PickersShortcutsItem, PickerValidDate } from '@mui/x-date-pickers';
2
+ import {
3
+ LocalizationProvider,
4
+ PickersShortcutsItem,
5
+ PickerValidDate,
6
+ } from '@mui/x-date-pickers';
7
+ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
3
8
  import {
4
9
  DatePicker as MuiDatePicker,
5
10
  DatePickerProps as MuiDatePickerProps,
@@ -48,28 +53,30 @@ export const DatePicker = <
48
53
  name={name}
49
54
  containerProps={containerProps}
50
55
  >
51
- <MuiDatePicker
52
- format={format}
53
- views={views}
54
- defaultValue={value}
55
- slotProps={{
56
- textField: {
57
- helperText,
58
- placeholder,
59
- error: !!error,
60
- },
61
- shortcuts: {
62
- items: shortcutsItems,
63
- },
64
- }}
65
- slots={{
66
- openPickerIcon: Icon,
67
- }}
68
- dayOfWeekFormatter={(day: any) => {
69
- return `${DateFnsFormat(day, 'EEEE').slice(0, 2)}.`;
70
- }}
71
- {...rest}
72
- />
56
+ <LocalizationProvider dateAdapter={AdapterDateFns}>
57
+ <MuiDatePicker
58
+ format={format}
59
+ views={views}
60
+ defaultValue={value}
61
+ slotProps={{
62
+ textField: {
63
+ helperText,
64
+ placeholder,
65
+ error: !!error,
66
+ },
67
+ shortcuts: {
68
+ items: shortcutsItems,
69
+ },
70
+ }}
71
+ slots={{
72
+ openPickerIcon: Icon,
73
+ }}
74
+ dayOfWeekFormatter={(day: any) => {
75
+ return `${DateFnsFormat(day, 'EEEE').slice(0, 2)}.`;
76
+ }}
77
+ {...rest}
78
+ />
79
+ </LocalizationProvider>
73
80
  </LabelWrapper>
74
81
  );
75
82
  };
package/src/components/Input/DateTimePicker/DateTimePicker.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import { StackProps } from '@mui/material';
2
2
  import {
3
+ LocalizationProvider,
3
4
  DateTimePicker as MuiDateTimePicker,
4
5
  DateTimePickerProps as MuiDateTimePickerProps,
5
6
  PickersShortcutsItem,
@@ -7,6 +8,7 @@ import {
7
8
  } from '@mui/x-date-pickers';
8
9
  import { format as DateFnsFormat } from 'date-fns';
9
10
 
11
+ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
10
12
  import { Icons } from '../../export';
11
13
  import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
12
14
 
@@ -71,28 +73,30 @@ export const DateTimePicker = <
71
73
  name={name}
72
74
  containerProps={containerProps}
73
75
  >
74
- <MuiDateTimePicker
75
- format={format}
76
- views={views}
77
- defaultValue={value}
78
- slotProps={{
79
- textField: {
80
- helperText,
81
- placeholder,
82
- error: !!error,
83
- },
84
- shortcuts: {
85
- items: shortcutsItems,
86
- },
87
- }}
88
- slots={{
89
- openPickerIcon: Icon,
90
- }}
91
- dayOfWeekFormatter={(day: any) => {
92
- return `${DateFnsFormat(day, 'EEEE').slice(0, 2)}.`;
93
- }}
94
- {...rest}
95
- />
76
+ <LocalizationProvider dateAdapter={AdapterDateFns}>
77
+ <MuiDateTimePicker
78
+ format={format}
79
+ views={views}
80
+ defaultValue={value}
81
+ slotProps={{
82
+ textField: {
83
+ helperText,
84
+ placeholder,
85
+ error: !!error,
86
+ },
87
+ shortcuts: {
88
+ items: shortcutsItems,
89
+ },
90
+ }}
91
+ slots={{
92
+ openPickerIcon: Icon,
93
+ }}
94
+ dayOfWeekFormatter={(day: any) => {
95
+ return `${DateFnsFormat(day, 'EEEE').slice(0, 2)}.`;
96
+ }}
97
+ {...rest}
98
+ />
99
+ </LocalizationProvider>
96
100
  </LabelWrapper>
97
101
  );
98
102
  };
package/src/components/Input/TimePicker/TimePicker.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import { PickerValidDate } from '@mui/x-date-pickers';
1
+ import { LocalizationProvider, PickerValidDate } from '@mui/x-date-pickers';
2
+ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
2
3
  import {
3
4
  TimePicker as MuiTimePicker,
4
5
  TimePickerProps as MuiTimePickerProps,
@@ -39,15 +40,17 @@ export const TimePicker = <
39
40
  name={name}
40
41
  containerProps={containerProps}
41
42
  >
42
- <MuiTimePicker
43
- defaultValue={value}
44
- format={format}
45
- views={views}
46
- slotProps={{
47
- textField: { placeholder, helperText },
48
- }}
49
- {...rest}
50
- />
43
+ <LocalizationProvider dateAdapter={AdapterDateFns}>
44
+ <MuiTimePicker
45
+ defaultValue={value}
46
+ format={format}
47
+ views={views}
48
+ slotProps={{
49
+ textField: { placeholder, helperText },
50
+ }}
51
+ {...rest}
52
+ />
53
+ </LocalizationProvider>
51
54
  </LabelWrapper>
52
55
  );
53
56
  };
package/src/themes/commonTheme.ts CHANGED
@@ -414,6 +414,7 @@ export const getCommonTheme = (mode: Theme) => {
414
414
  backgroundColor: ColorTokens.surface.paperBackground,
415
415
  // boxShadow: `0px 2px 5px ${ColorTokens.secondary.main}`,
416
416
  border: `1px solid ${ColorTokens.secondary.main}`,
417
+ color: ColorTokens.text.secondary,
417
418
  },
418
419
  arrow: {
419
420
  color: ColorTokens.surface.paperBackground,