@itcase/ui 1.8.170 → 1.8.172
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.
- package/dist/cjs/components/DatePeriod.js +2 -16
- package/dist/cjs/hooks/useDeviceTargetClass.js +0 -1
- package/dist/cjs/hooks/useMediaQueries/useMediaQueries.js +0 -8
- package/dist/cjs/hooks/useStyles/useStyles.js +0 -3
- package/dist/components/DatePeriod.js +2 -16
- package/dist/css/components/DatePicker/DatePicker.css +8 -1
- package/dist/css/components/Notification/Notification.css +19 -5
- package/dist/css/components/Notification/css/__item/notification__item.css +2 -0
- package/dist/css/components/Swiper/Swiper.css +2 -2
- package/dist/css/styles/bundle.css +29 -8
- package/dist/hooks/useDeviceTargetClass.js +0 -1
- package/dist/hooks/useMediaQueries/useMediaQueries.js +0 -8
- package/dist/hooks/useStyles/useStyles.js +0 -3
- package/dist/types/components/DatePeriod/DatePeriod.interface.d.ts +1 -0
- package/dist/types/components/Drawer/stories/__mock__/index.d.ts +6 -0
- package/dist/types/components/Select/stories/__mock__/index.d.ts +46 -0
- package/dist/types/hooks/useDeviceTargetClass.d.ts +5 -0
- package/package.json +12 -12
|
@@ -108,7 +108,7 @@ const datePeriodConfig = {
|
|
|
108
108
|
},
|
|
109
109
|
};
|
|
110
110
|
function DatePeriod(props) {
|
|
111
|
-
const { appearance, className, datePeriodIntervalsList = Object.values(common.DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
|
|
111
|
+
const { appearance, className, datePeriodIntervalsList = Object.values(common.DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, showWeekNumbers = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
|
|
112
112
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
|
|
113
113
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
114
114
|
const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputSize, datePickerInputTextSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
|
|
@@ -131,26 +131,12 @@ function DatePeriod(props) {
|
|
|
131
131
|
return (dateStartIso === normalizedDatePeriodValueStart &&
|
|
132
132
|
dateEndIso === normalizedDatePeriodValueEnd);
|
|
133
133
|
}, [datePeriodValueEnd, datePeriodValueStart]);
|
|
134
|
-
// const onChangeDatePicker = useCallback(
|
|
135
|
-
// (dateStart: Date | null, dateEnd: Date | null) => {
|
|
136
|
-
// let dateStartIso = null
|
|
137
|
-
// let dateEndIso = null
|
|
138
|
-
// if (dateStart) {
|
|
139
|
-
// dateStartIso = DateTime.fromJSDate(dateStart).toISODate()
|
|
140
|
-
// }
|
|
141
|
-
// if (dateEnd) {
|
|
142
|
-
// dateEndIso = DateTime.fromJSDate(dateEnd).toISODate()
|
|
143
|
-
// }
|
|
144
|
-
// onChangeDatePeriod(dateStartIso, dateEndIso)
|
|
145
|
-
// },
|
|
146
|
-
// [onChangeDatePeriod],
|
|
147
|
-
// )
|
|
148
134
|
return (jsxRuntime.jsx("div", { className: clsx(className, 'date-period', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: jsxRuntime.jsxs(ChipsGroup.ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: [datePeriodIntervalsList.map((datePeriodItem) => (jsxRuntime.jsx(ChipsGroup.Chips, { appearance: `${chipsAppearance} ${chipsAppearanceSize}`, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))), jsxRuntime.jsx(DatePicker.DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
|
|
149
135
|
appearance: `${datePickerAppearance} ${datePickerAppearanceSize}`,
|
|
150
136
|
dateFormat: 'dd/MM/yyyy',
|
|
151
137
|
monthsShown: monthsShown,
|
|
152
138
|
selectsRange: selectsRange,
|
|
153
|
-
showWeekNumbers:
|
|
139
|
+
showWeekNumbers: showWeekNumbers,
|
|
154
140
|
isClearable: false,
|
|
155
141
|
isStartDefaultNull: true,
|
|
156
142
|
onKeyDown: onKeyDown,
|
|
@@ -15,13 +15,11 @@ var mediaQueries = {
|
|
|
15
15
|
const isSSR = typeof window === 'undefined';
|
|
16
16
|
function useMediaQueries(userDevice = {}) {
|
|
17
17
|
// const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
|
|
18
|
-
|
|
19
18
|
// prettier-ignore
|
|
20
19
|
const isMobile = reactResponsive.useMediaQuery({
|
|
21
20
|
minWidth: mediaQueries['mobile-tiny'],
|
|
22
21
|
maxWidth: mediaQueries['tablet']
|
|
23
22
|
}) || isSSR && Boolean(userDevice.isMobile);
|
|
24
|
-
|
|
25
23
|
// const isMobileTiny = useMediaQuery({
|
|
26
24
|
// minWidth: mediaQueries['mobile-tiny'],
|
|
27
25
|
// maxWidth: mediaQueries['mobile-small'],
|
|
@@ -46,18 +44,15 @@ function useMediaQueries(userDevice = {}) {
|
|
|
46
44
|
// minWidth: mediaQueries['mobile-extra-large'],
|
|
47
45
|
// maxWidth: mediaQueries['mobile-super-extra-large'],
|
|
48
46
|
// })
|
|
49
|
-
|
|
50
47
|
reactResponsive.useMediaQuery({
|
|
51
48
|
minWidth: mediaQueries['mobile-super-extra-large'],
|
|
52
49
|
maxWidth: mediaQueries['tablet']
|
|
53
50
|
});
|
|
54
|
-
|
|
55
51
|
// prettier-ignore
|
|
56
52
|
const isTablet = reactResponsive.useMediaQuery({
|
|
57
53
|
minWidth: mediaQueries['tablet'],
|
|
58
54
|
maxWidth: mediaQueries['desktop-small']
|
|
59
55
|
}) || isSSR && Boolean(userDevice.isTablet);
|
|
60
|
-
|
|
61
56
|
// const isTabletSmall = useMediaQuery({
|
|
62
57
|
// minWidth: mediaQueries['tablet-small'],
|
|
63
58
|
// maxWidth: mediaQueries['tablet'],
|
|
@@ -66,13 +61,11 @@ function useMediaQueries(userDevice = {}) {
|
|
|
66
61
|
// minWidth: mediaQueries['tablet'],
|
|
67
62
|
// maxWidth: mediaQueries['tablet-large'],
|
|
68
63
|
// })
|
|
69
|
-
|
|
70
64
|
// prettier-ignore
|
|
71
65
|
const isDesktop = reactResponsive.useMediaQuery({
|
|
72
66
|
minWidth: mediaQueries['desktop-small'],
|
|
73
67
|
maxWidth: mediaQueries['desktop-super-huge']
|
|
74
68
|
}) || isSSR && Boolean(userDevice.isDesktop);
|
|
75
|
-
|
|
76
69
|
// const isDesktopSmall = useMediaQuery({
|
|
77
70
|
// minWidth: mediaQueries['desktop-small'],
|
|
78
71
|
// maxWidth: mediaQueries['desktop-medium'],
|
|
@@ -97,7 +90,6 @@ function useMediaQueries(userDevice = {}) {
|
|
|
97
90
|
// minWidth: mediaQueries['desktop-super-extra-large'],
|
|
98
91
|
// maxWidth: mediaQueries['desktop-huge'],
|
|
99
92
|
// })
|
|
100
|
-
|
|
101
93
|
const isDesktopMega = reactResponsive.useMediaQuery({
|
|
102
94
|
minWidth: mediaQueries['desktop-huge']
|
|
103
95
|
});
|
|
@@ -46,7 +46,6 @@ function useStyles(props) {
|
|
|
46
46
|
let value = null;
|
|
47
47
|
const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
|
|
48
48
|
const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(deviceCurrentType.toLowerCase());
|
|
49
|
-
|
|
50
49
|
// e.g. "GridWrapperInner"
|
|
51
50
|
const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''), deviceTypesList);
|
|
52
51
|
const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
|
|
@@ -99,7 +98,6 @@ function useStyles(props) {
|
|
|
99
98
|
* top and bottom
|
|
100
99
|
* right and left
|
|
101
100
|
*/
|
|
102
|
-
|
|
103
101
|
const valuePxPartsList = value.split(' ').map(valuePart => {
|
|
104
102
|
const valueModule = valuePart.replace(/[a-z]/gi, '');
|
|
105
103
|
const valuePx = parseFloat(valueModule) * 8;
|
|
@@ -180,7 +178,6 @@ const getTargetStyleAttributeKey = (styleKey, styleValue = '') => {
|
|
|
180
178
|
return styleKey.startsWith(styleAttribute);
|
|
181
179
|
}
|
|
182
180
|
});
|
|
183
|
-
|
|
184
181
|
// Get longest style key (e.g. "borderLeftWidth")
|
|
185
182
|
const targetStyleAttribute = maxBy(possibleStyleAttributesList, styleAttribute => {
|
|
186
183
|
const key = index_helpers.getStyleAttributeKey(styleAttribute);
|
|
@@ -106,7 +106,7 @@ const datePeriodConfig = {
|
|
|
106
106
|
},
|
|
107
107
|
};
|
|
108
108
|
function DatePeriod(props) {
|
|
109
|
-
const { appearance, className, datePeriodIntervalsList = Object.values(DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
|
|
109
|
+
const { appearance, className, datePeriodIntervalsList = Object.values(DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, showWeekNumbers = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
|
|
110
110
|
const appearanceConfig = useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
|
|
111
111
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
112
112
|
const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputSize, datePickerInputTextSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
|
|
@@ -129,26 +129,12 @@ function DatePeriod(props) {
|
|
|
129
129
|
return (dateStartIso === normalizedDatePeriodValueStart &&
|
|
130
130
|
dateEndIso === normalizedDatePeriodValueEnd);
|
|
131
131
|
}, [datePeriodValueEnd, datePeriodValueStart]);
|
|
132
|
-
// const onChangeDatePicker = useCallback(
|
|
133
|
-
// (dateStart: Date | null, dateEnd: Date | null) => {
|
|
134
|
-
// let dateStartIso = null
|
|
135
|
-
// let dateEndIso = null
|
|
136
|
-
// if (dateStart) {
|
|
137
|
-
// dateStartIso = DateTime.fromJSDate(dateStart).toISODate()
|
|
138
|
-
// }
|
|
139
|
-
// if (dateEnd) {
|
|
140
|
-
// dateEndIso = DateTime.fromJSDate(dateEnd).toISODate()
|
|
141
|
-
// }
|
|
142
|
-
// onChangeDatePeriod(dateStartIso, dateEndIso)
|
|
143
|
-
// },
|
|
144
|
-
// [onChangeDatePeriod],
|
|
145
|
-
// )
|
|
146
132
|
return (jsx("div", { className: clsx(className, 'date-period', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: jsxs(ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: [datePeriodIntervalsList.map((datePeriodItem) => (jsx(Chips, { appearance: `${chipsAppearance} ${chipsAppearanceSize}`, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))), jsx(DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
|
|
147
133
|
appearance: `${datePickerAppearance} ${datePickerAppearanceSize}`,
|
|
148
134
|
dateFormat: 'dd/MM/yyyy',
|
|
149
135
|
monthsShown: monthsShown,
|
|
150
136
|
selectsRange: selectsRange,
|
|
151
|
-
showWeekNumbers:
|
|
137
|
+
showWeekNumbers: showWeekNumbers,
|
|
152
138
|
isClearable: false,
|
|
153
139
|
isStartDefaultNull: true,
|
|
154
140
|
onKeyDown: onKeyDown,
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
padding: 0;
|
|
21
21
|
margin: -1px;
|
|
22
22
|
overflow: hidden;
|
|
23
|
-
clip:
|
|
23
|
+
clip-path: inset(50%);
|
|
24
24
|
white-space: nowrap;
|
|
25
25
|
border: 0;
|
|
26
26
|
}
|
|
@@ -312,6 +312,7 @@ h2.react-datepicker__current-month {
|
|
|
312
312
|
background-color: rgb(28.75, 93.2196969697, 143.75);
|
|
313
313
|
}
|
|
314
314
|
.react-datepicker__day-names {
|
|
315
|
+
text-align: center;
|
|
315
316
|
white-space: nowrap;
|
|
316
317
|
margin-bottom: -8px;
|
|
317
318
|
}
|
|
@@ -328,6 +329,12 @@ h2.react-datepicker__current-month {
|
|
|
328
329
|
text-align: center;
|
|
329
330
|
margin: 0.166rem;
|
|
330
331
|
}
|
|
332
|
+
.react-datepicker__day-name--disabled,
|
|
333
|
+
.react-datepicker__day--disabled,
|
|
334
|
+
.react-datepicker__time-name--disabled {
|
|
335
|
+
cursor: default;
|
|
336
|
+
color: #ccc;
|
|
337
|
+
}
|
|
331
338
|
.react-datepicker__day,
|
|
332
339
|
.react-datepicker__month-text,
|
|
333
340
|
.react-datepicker__quarter-text,
|
|
@@ -5,8 +5,6 @@
|
|
|
5
5
|
background: none;
|
|
6
6
|
padding: 0;
|
|
7
7
|
position: fixed;
|
|
8
|
-
top: 0;
|
|
9
|
-
right: 0;
|
|
10
8
|
z-index: 1000;
|
|
11
9
|
pointer-events: none;
|
|
12
10
|
@media (--mobile) {
|
|
@@ -15,15 +13,29 @@
|
|
|
15
13
|
right: 0;
|
|
16
14
|
bottom: 0;
|
|
17
15
|
}
|
|
16
|
+
&_left_bottom {
|
|
17
|
+
left: 0;
|
|
18
|
+
bottom: 0;
|
|
19
|
+
^^&__wrapper {
|
|
20
|
+
left: 24px;
|
|
21
|
+
bottom: 56px;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
&_right_top {
|
|
25
|
+
top: 0;
|
|
26
|
+
right: 0;
|
|
27
|
+
^^&__wrapper {
|
|
28
|
+
top: 56px;
|
|
29
|
+
right: 48px;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
18
32
|
^&__wrapper {
|
|
19
33
|
width: 100%;
|
|
20
34
|
position: relative;
|
|
21
35
|
display: flex;
|
|
36
|
+
gap: 24px;
|
|
22
37
|
flex-flow: column nowrap;
|
|
23
38
|
align-items: flex-end;
|
|
24
|
-
top: 56px;
|
|
25
|
-
right: 48px;
|
|
26
|
-
gap: 24px;
|
|
27
39
|
@media (--mobile) {
|
|
28
40
|
align-items: center;
|
|
29
41
|
left: 0;
|
|
@@ -43,8 +55,10 @@
|
|
|
43
55
|
flex-direction: column;
|
|
44
56
|
gap: 8px;
|
|
45
57
|
^&-title {
|
|
58
|
+
padding: 0 24px 0 0;
|
|
46
59
|
}
|
|
47
60
|
^&-text {
|
|
61
|
+
padding: 0 24px 0 0;
|
|
48
62
|
}
|
|
49
63
|
^&-button {
|
|
50
64
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Swiper 12.0.
|
|
2
|
+
* Swiper 12.0.3
|
|
3
3
|
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
|
4
4
|
* https://swiperjs.com
|
|
5
5
|
*
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*
|
|
8
8
|
* Released under the MIT License
|
|
9
9
|
*
|
|
10
|
-
* Released on:
|
|
10
|
+
* Released on: October 21, 2025
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
:root {
|
|
@@ -60040,7 +60040,7 @@ div.avatar-stack {
|
|
|
60040
60040
|
padding: 0;
|
|
60041
60041
|
margin: -1px;
|
|
60042
60042
|
overflow: hidden;
|
|
60043
|
-
clip:
|
|
60043
|
+
clip-path: inset(50%);
|
|
60044
60044
|
white-space: nowrap;
|
|
60045
60045
|
border: 0;
|
|
60046
60046
|
}
|
|
@@ -60332,6 +60332,7 @@ h2.react-datepicker__current-month {
|
|
|
60332
60332
|
background-color: rgb(28.75, 93.2196969697, 143.75);
|
|
60333
60333
|
}
|
|
60334
60334
|
.react-datepicker__day-names {
|
|
60335
|
+
text-align: center;
|
|
60335
60336
|
white-space: nowrap;
|
|
60336
60337
|
margin-bottom: -8px;
|
|
60337
60338
|
}
|
|
@@ -60348,6 +60349,12 @@ h2.react-datepicker__current-month {
|
|
|
60348
60349
|
text-align: center;
|
|
60349
60350
|
margin: 0.166rem;
|
|
60350
60351
|
}
|
|
60352
|
+
.react-datepicker__day-name--disabled,
|
|
60353
|
+
.react-datepicker__day--disabled,
|
|
60354
|
+
.react-datepicker__time-name--disabled {
|
|
60355
|
+
cursor: default;
|
|
60356
|
+
color: #ccc;
|
|
60357
|
+
}
|
|
60351
60358
|
.react-datepicker__day,
|
|
60352
60359
|
.react-datepicker__month-text,
|
|
60353
60360
|
.react-datepicker__quarter-text,
|
|
@@ -79837,8 +79844,6 @@ div.label {
|
|
|
79837
79844
|
background: none;
|
|
79838
79845
|
padding: 0;
|
|
79839
79846
|
position: fixed;
|
|
79840
|
-
top: 0;
|
|
79841
|
-
right: 0;
|
|
79842
79847
|
z-index: 1000;
|
|
79843
79848
|
pointer-events: none;
|
|
79844
79849
|
@media (--mobile) {
|
|
@@ -79847,15 +79852,29 @@ div.label {
|
|
|
79847
79852
|
right: 0;
|
|
79848
79853
|
bottom: 0;
|
|
79849
79854
|
}
|
|
79855
|
+
&_left_bottom {
|
|
79856
|
+
left: 0;
|
|
79857
|
+
bottom: 0;
|
|
79858
|
+
^^&__wrapper {
|
|
79859
|
+
left: 24px;
|
|
79860
|
+
bottom: 56px;
|
|
79861
|
+
}
|
|
79862
|
+
}
|
|
79863
|
+
&_right_top {
|
|
79864
|
+
top: 0;
|
|
79865
|
+
right: 0;
|
|
79866
|
+
^^&__wrapper {
|
|
79867
|
+
top: 56px;
|
|
79868
|
+
right: 48px;
|
|
79869
|
+
}
|
|
79870
|
+
}
|
|
79850
79871
|
^&__wrapper {
|
|
79851
79872
|
width: 100%;
|
|
79852
79873
|
position: relative;
|
|
79853
79874
|
display: flex;
|
|
79875
|
+
gap: 24px;
|
|
79854
79876
|
flex-flow: column nowrap;
|
|
79855
79877
|
align-items: flex-end;
|
|
79856
|
-
top: 56px;
|
|
79857
|
-
right: 48px;
|
|
79858
|
-
gap: 24px;
|
|
79859
79878
|
@media (--mobile) {
|
|
79860
79879
|
align-items: center;
|
|
79861
79880
|
left: 0;
|
|
@@ -79875,8 +79894,10 @@ div.label {
|
|
|
79875
79894
|
flex-direction: column;
|
|
79876
79895
|
gap: 8px;
|
|
79877
79896
|
^&-title {
|
|
79897
|
+
padding: 0 24px 0 0;
|
|
79878
79898
|
}
|
|
79879
79899
|
^&-text {
|
|
79900
|
+
padding: 0 24px 0 0;
|
|
79880
79901
|
}
|
|
79881
79902
|
^&-button {
|
|
79882
79903
|
}
|
|
@@ -98010,7 +98031,7 @@ div.label {
|
|
|
98010
98031
|
}
|
|
98011
98032
|
}
|
|
98012
98033
|
/**
|
|
98013
|
-
* Swiper 12.0.
|
|
98034
|
+
* Swiper 12.0.3
|
|
98014
98035
|
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
|
98015
98036
|
* https://swiperjs.com
|
|
98016
98037
|
*
|
|
@@ -98018,7 +98039,7 @@ div.label {
|
|
|
98018
98039
|
*
|
|
98019
98040
|
* Released under the MIT License
|
|
98020
98041
|
*
|
|
98021
|
-
* Released on:
|
|
98042
|
+
* Released on: October 21, 2025
|
|
98022
98043
|
*/
|
|
98023
98044
|
:root {
|
|
98024
98045
|
--swiper-theme-color: #007aff;
|
|
@@ -13,13 +13,11 @@ var mediaQueries = {
|
|
|
13
13
|
const isSSR = typeof window === 'undefined';
|
|
14
14
|
function useMediaQueries(userDevice = {}) {
|
|
15
15
|
// const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
|
|
16
|
-
|
|
17
16
|
// prettier-ignore
|
|
18
17
|
const isMobile = useMediaQuery({
|
|
19
18
|
minWidth: mediaQueries['mobile-tiny'],
|
|
20
19
|
maxWidth: mediaQueries['tablet']
|
|
21
20
|
}) || isSSR && Boolean(userDevice.isMobile);
|
|
22
|
-
|
|
23
21
|
// const isMobileTiny = useMediaQuery({
|
|
24
22
|
// minWidth: mediaQueries['mobile-tiny'],
|
|
25
23
|
// maxWidth: mediaQueries['mobile-small'],
|
|
@@ -44,18 +42,15 @@ function useMediaQueries(userDevice = {}) {
|
|
|
44
42
|
// minWidth: mediaQueries['mobile-extra-large'],
|
|
45
43
|
// maxWidth: mediaQueries['mobile-super-extra-large'],
|
|
46
44
|
// })
|
|
47
|
-
|
|
48
45
|
useMediaQuery({
|
|
49
46
|
minWidth: mediaQueries['mobile-super-extra-large'],
|
|
50
47
|
maxWidth: mediaQueries['tablet']
|
|
51
48
|
});
|
|
52
|
-
|
|
53
49
|
// prettier-ignore
|
|
54
50
|
const isTablet = useMediaQuery({
|
|
55
51
|
minWidth: mediaQueries['tablet'],
|
|
56
52
|
maxWidth: mediaQueries['desktop-small']
|
|
57
53
|
}) || isSSR && Boolean(userDevice.isTablet);
|
|
58
|
-
|
|
59
54
|
// const isTabletSmall = useMediaQuery({
|
|
60
55
|
// minWidth: mediaQueries['tablet-small'],
|
|
61
56
|
// maxWidth: mediaQueries['tablet'],
|
|
@@ -64,13 +59,11 @@ function useMediaQueries(userDevice = {}) {
|
|
|
64
59
|
// minWidth: mediaQueries['tablet'],
|
|
65
60
|
// maxWidth: mediaQueries['tablet-large'],
|
|
66
61
|
// })
|
|
67
|
-
|
|
68
62
|
// prettier-ignore
|
|
69
63
|
const isDesktop = useMediaQuery({
|
|
70
64
|
minWidth: mediaQueries['desktop-small'],
|
|
71
65
|
maxWidth: mediaQueries['desktop-super-huge']
|
|
72
66
|
}) || isSSR && Boolean(userDevice.isDesktop);
|
|
73
|
-
|
|
74
67
|
// const isDesktopSmall = useMediaQuery({
|
|
75
68
|
// minWidth: mediaQueries['desktop-small'],
|
|
76
69
|
// maxWidth: mediaQueries['desktop-medium'],
|
|
@@ -95,7 +88,6 @@ function useMediaQueries(userDevice = {}) {
|
|
|
95
88
|
// minWidth: mediaQueries['desktop-super-extra-large'],
|
|
96
89
|
// maxWidth: mediaQueries['desktop-huge'],
|
|
97
90
|
// })
|
|
98
|
-
|
|
99
91
|
const isDesktopMega = useMediaQuery({
|
|
100
92
|
minWidth: mediaQueries['desktop-huge']
|
|
101
93
|
});
|
|
@@ -44,7 +44,6 @@ function useStyles(props) {
|
|
|
44
44
|
let value = null;
|
|
45
45
|
const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
|
|
46
46
|
const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(deviceCurrentType.toLowerCase());
|
|
47
|
-
|
|
48
47
|
// e.g. "GridWrapperInner"
|
|
49
48
|
const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''), deviceTypesList);
|
|
50
49
|
const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
|
|
@@ -97,7 +96,6 @@ function useStyles(props) {
|
|
|
97
96
|
* top and bottom
|
|
98
97
|
* right and left
|
|
99
98
|
*/
|
|
100
|
-
|
|
101
99
|
const valuePxPartsList = value.split(' ').map(valuePart => {
|
|
102
100
|
const valueModule = valuePart.replace(/[a-z]/gi, '');
|
|
103
101
|
const valuePx = parseFloat(valueModule) * 8;
|
|
@@ -178,7 +176,6 @@ const getTargetStyleAttributeKey = (styleKey, styleValue = '') => {
|
|
|
178
176
|
return styleKey.startsWith(styleAttribute);
|
|
179
177
|
}
|
|
180
178
|
});
|
|
181
|
-
|
|
182
179
|
// Get longest style key (e.g. "borderLeftWidth")
|
|
183
180
|
const targetStyleAttribute = maxBy(possibleStyleAttributesList, styleAttribute => {
|
|
184
181
|
const key = getStyleAttributeKey(styleAttribute);
|
|
@@ -29,5 +29,6 @@ type DatePeriodProps = DatePeriodThemeColor & StyleAttributes & {
|
|
|
29
29
|
datePickerInputTextSize?: TextSizeProps;
|
|
30
30
|
isSkeleton?: boolean;
|
|
31
31
|
onChangeDatePeriod: (dateStart: Date | null, dateEnd: Date | null) => void;
|
|
32
|
+
showWeekNumbers?: boolean;
|
|
32
33
|
};
|
|
33
34
|
export type { DatePeriodAppearanceType, DatePeriodConfig, DatePeriodProps, DatePeriodThemeColor, };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
export namespace SelectDefaultMock {
|
|
2
|
+
let elevation: number;
|
|
3
|
+
let hideSelectedOptions: boolean;
|
|
4
|
+
let loadingMessageText: string;
|
|
5
|
+
let noOptionsSearchText: string;
|
|
6
|
+
let noOptionsText: string;
|
|
7
|
+
let options: ({
|
|
8
|
+
label: string;
|
|
9
|
+
options: {
|
|
10
|
+
label: string;
|
|
11
|
+
value: string;
|
|
12
|
+
}[];
|
|
13
|
+
isDisabled?: undefined;
|
|
14
|
+
value?: undefined;
|
|
15
|
+
isFixed?: undefined;
|
|
16
|
+
isSelected?: undefined;
|
|
17
|
+
} | {
|
|
18
|
+
label: string;
|
|
19
|
+
isDisabled: boolean;
|
|
20
|
+
value: string;
|
|
21
|
+
options?: undefined;
|
|
22
|
+
isFixed?: undefined;
|
|
23
|
+
isSelected?: undefined;
|
|
24
|
+
} | {
|
|
25
|
+
label: string;
|
|
26
|
+
value: string;
|
|
27
|
+
isFixed: boolean;
|
|
28
|
+
isSelected: boolean;
|
|
29
|
+
options?: undefined;
|
|
30
|
+
isDisabled?: undefined;
|
|
31
|
+
} | {
|
|
32
|
+
label: string;
|
|
33
|
+
value: string;
|
|
34
|
+
isFixed: boolean;
|
|
35
|
+
options?: undefined;
|
|
36
|
+
isDisabled?: undefined;
|
|
37
|
+
isSelected?: undefined;
|
|
38
|
+
})[];
|
|
39
|
+
let placeholder: string;
|
|
40
|
+
let showBadge: boolean;
|
|
41
|
+
let showDivider: boolean;
|
|
42
|
+
let closeMenuOnSelect: boolean;
|
|
43
|
+
let isClearable: boolean;
|
|
44
|
+
let isMulti: boolean;
|
|
45
|
+
let isSearchable: boolean;
|
|
46
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.172",
|
|
4
4
|
"description": "UI components (Modal, Loader, Popup, etc)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Modal",
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
"rc-slider": "^11.1.9",
|
|
118
118
|
"react": "^18.3.1",
|
|
119
119
|
"react-dadata": "^2.27.4",
|
|
120
|
-
"react-datepicker": "^8.
|
|
120
|
+
"react-datepicker": "^8.8.0",
|
|
121
121
|
"react-dom": "^18.3.1",
|
|
122
122
|
"react-indiana-drag-scroll": "^3.0.3-alpha",
|
|
123
123
|
"react-inlinesvg": "^4.2.0",
|
|
@@ -130,13 +130,13 @@
|
|
|
130
130
|
"react-scrollbars-custom": "^4.1.1",
|
|
131
131
|
"react-select": "^5.10.2",
|
|
132
132
|
"simplebar-react": "^3.3.2",
|
|
133
|
-
"swiper": "^12.0.
|
|
133
|
+
"swiper": "^12.0.3",
|
|
134
134
|
"uuid": "^13.0.0"
|
|
135
135
|
},
|
|
136
136
|
"devDependencies": {
|
|
137
|
-
"@babel/core": "^7.28.
|
|
138
|
-
"@babel/preset-env": "^7.28.
|
|
139
|
-
"@babel/preset-react": "^7.
|
|
137
|
+
"@babel/core": "^7.28.5",
|
|
138
|
+
"@babel/preset-env": "^7.28.5",
|
|
139
|
+
"@babel/preset-react": "^7.28.5",
|
|
140
140
|
"@commitlint/cli": "^20.1.0",
|
|
141
141
|
"@commitlint/config-conventional": "^20.0.0",
|
|
142
142
|
"@itcase/config": "^1.0.60",
|
|
@@ -144,12 +144,12 @@
|
|
|
144
144
|
"@itcase/types": "^1.0.45",
|
|
145
145
|
"@rollup/plugin-alias": "^5.1.1",
|
|
146
146
|
"@rollup/plugin-babel": "^6.1.0",
|
|
147
|
-
"@rollup/plugin-commonjs": "^28.0.
|
|
147
|
+
"@rollup/plugin-commonjs": "^28.0.9",
|
|
148
148
|
"@rollup/plugin-image": "^3.0.3",
|
|
149
149
|
"@rollup/plugin-json": "^6.1.0",
|
|
150
150
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
151
151
|
"@rollup/plugin-terser": "^0.4.4",
|
|
152
|
-
"@rollup/plugin-typescript": "^12.
|
|
152
|
+
"@rollup/plugin-typescript": "^12.3.0",
|
|
153
153
|
"@semantic-release/changelog": "^6.0.3",
|
|
154
154
|
"@semantic-release/git": "^10.0.1",
|
|
155
155
|
"@semantic-release/release-notes-generator": "14.1.0",
|
|
@@ -166,18 +166,18 @@
|
|
|
166
166
|
"babel-plugin-react-docgen": "^4.2.1",
|
|
167
167
|
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
|
|
168
168
|
"conventional-changelog-conventionalcommits": "^9.1.0",
|
|
169
|
-
"eslint": "9.
|
|
169
|
+
"eslint": "9.38.0",
|
|
170
170
|
"husky": "^9.1.7",
|
|
171
|
-
"lint-staged": "^16.2.
|
|
171
|
+
"lint-staged": "^16.2.6",
|
|
172
172
|
"prettier": "^3.6.2",
|
|
173
173
|
"react-docgen-typescript": "^2.4.0",
|
|
174
|
-
"rollup": "^4.52.
|
|
174
|
+
"rollup": "^4.52.5",
|
|
175
175
|
"rollup-plugin-copy": "^3.5.0",
|
|
176
176
|
"rollup-plugin-dts": "^6.2.3",
|
|
177
177
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
178
178
|
"rollup-preserve-directives": "^1.1.3",
|
|
179
179
|
"semantic-release": "^24.2.9",
|
|
180
|
-
"storybook": "^9.1.
|
|
180
|
+
"storybook": "^9.1.15",
|
|
181
181
|
"stylelint": "^16.25.0",
|
|
182
182
|
"typescript": "^5.9.3"
|
|
183
183
|
}
|