@itcase/ui 1.9.51 → 1.9.53
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/{Avatar_cjs_CZ0XJ6d2.js → Avatar_cjs_BIHJrAbQ.js} +2 -2
- package/dist/{Avatar_es_B2gMldVe.js → Avatar_es_CtP68jPM.js} +2 -2
- package/dist/{Button_cjs_BSfL-20W.js → Button_cjs_B8cIJYbm.js} +6 -6
- package/dist/{Button_es_Dk6_9N-r.js → Button_es_DQGp8Ipn.js} +6 -6
- package/dist/{ChipsGroup_cjs_D0xy5I4S.js → ChipsGroup_cjs_C27x9x9O.js} +3 -5
- package/dist/{ChipsGroup_es_C_dgXLfC.js → ChipsGroup_es_BTe1MYhV.js} +3 -5
- package/dist/{DatePicker_cjs_avA-OHmZ.js → DatePicker_cjs_CY5UAP1l.js} +5 -5
- package/dist/{DatePicker_es_ungoFvip.js → DatePicker_es_Cze2Bv6w.js} +5 -5
- package/dist/{DropdownItem_cjs_pJblsTmA.js → DropdownItem_cjs_k28TIoDU.js} +1 -1
- package/dist/{DropdownItem_es_Xq7G5-UI.js → DropdownItem_es_DjPgbwtU.js} +1 -1
- package/dist/{Icon_cjs_CuqEv1jm.js → Icon_cjs_DTvdhr8B.js} +33 -4
- package/dist/{Icon_es_BYViOa6l.js → Icon_es_kewxGRUB.js} +33 -4
- package/dist/{Image_cjs_C_FMjUjx.js → Image_cjs_Hvjp2QDB.js} +2 -2
- package/dist/{Image_es_Ca7UQOkj.js → Image_es_DpOCNWpn.js} +2 -2
- package/dist/{Label_cjs_DsuCRIyo.js → Label_cjs_RI5tFcPt.js} +1 -1
- package/dist/{Label_es_BPQhW13g.js → Label_es_CNRTIAWo.js} +1 -1
- package/dist/{Loader_cjs_DMIUN6_q.js → Loader_cjs_CJpdLndn.js} +19 -4
- package/dist/{Loader_es_DLb2P-Sk.js → Loader_es_CqlLujBJ.js} +19 -4
- package/dist/{SelectContainer_cjs_DshFNYWN.js → SelectContainer_cjs_DXYUcpco.js} +7 -7
- package/dist/{SelectContainer_es_BQ3-SqL2.js → SelectContainer_es_De_XL0im.js} +7 -7
- package/dist/cjs/components/Accordion.js +2 -2
- package/dist/cjs/components/Avatar.js +7 -6
- package/dist/cjs/components/AvatarStack.js +4 -4
- package/dist/cjs/components/Badge.js +6 -5
- package/dist/cjs/components/Breadcrumbs.js +2 -1
- package/dist/cjs/components/Button.js +8 -8
- package/dist/cjs/components/Cell.js +3 -3
- package/dist/cjs/components/Checkbox.js +47 -50
- package/dist/cjs/components/Checkmark.js +32 -6
- package/dist/cjs/components/Chips.js +5 -4
- package/dist/cjs/components/Choice.js +4 -3
- package/dist/cjs/components/CookiesWarning.js +7 -7
- package/dist/cjs/components/DatePeriod.js +12 -12
- package/dist/cjs/components/DatePicker.js +10 -10
- package/dist/cjs/components/Drawer.js +26 -26
- package/dist/cjs/components/Dropdown.js +5 -4
- package/dist/cjs/components/Dropzone.js +1751 -0
- package/dist/cjs/components/HeroTitle.js +4 -3
- package/dist/cjs/components/Icon.js +6 -5
- package/dist/cjs/components/Image.js +1 -1
- package/dist/cjs/components/InputNumber.js +8 -8
- package/dist/cjs/components/InputPassword.js +6 -5
- package/dist/cjs/components/Label.js +5 -4
- package/dist/cjs/components/Loader.js +2 -2
- package/dist/cjs/components/MenuItem.js +2 -1
- package/dist/cjs/components/Modal.js +4 -4
- package/dist/cjs/components/ModalSheetBottom.js +4 -3
- package/dist/cjs/components/Notification.js +12 -12
- package/dist/cjs/components/Pagination.js +4 -3
- package/dist/cjs/components/Response.js +5 -5
- package/dist/cjs/components/Search.js +3 -2
- package/dist/cjs/components/Segmented.js +5 -4
- package/dist/cjs/components/Select/stories/__mock__.js +4 -4
- package/dist/cjs/components/Select.js +5 -5
- package/dist/cjs/components/Swiper.js +3 -2
- package/dist/cjs/components/Tab.js +1 -1
- package/dist/cjs/components/Tile.js +4 -3
- package/dist/cjs/components/Title.js +6 -5
- package/dist/cjs/components/Tooltip.js +6 -5
- package/dist/cjs/components/Warning.js +3 -2
- package/dist/cjs/context/Notifications.js +1 -1
- package/dist/cjs/context/UIContext.js +7 -1
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.helpers.js +9 -9
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.js +3 -3
- package/dist/cjs/hooks/useDropzoneFieldFiles.js +20769 -0
- package/dist/cjs/hooks/useStyles/styleAttributes.js +166 -43
- package/dist/cjs/hooks/useStyles/useStyles.js +169 -155
- package/dist/cjs/utils/mergeAppearanceKeys.js +14 -1
- package/dist/components/Accordion.js +2 -2
- package/dist/components/Avatar.js +7 -6
- package/dist/components/AvatarStack.js +4 -4
- package/dist/components/Badge.js +6 -5
- package/dist/components/Breadcrumbs.js +2 -1
- package/dist/components/Button.js +8 -8
- package/dist/components/Cell.js +3 -3
- package/dist/components/Checkbox.js +47 -50
- package/dist/components/Checkmark.js +32 -6
- package/dist/components/Chips.js +5 -4
- package/dist/components/Choice.js +4 -3
- package/dist/components/CookiesWarning.js +7 -7
- package/dist/components/DatePeriod.js +12 -12
- package/dist/components/DatePicker.js +10 -10
- package/dist/components/Drawer.js +26 -26
- package/dist/components/Dropdown.js +5 -4
- package/dist/components/Dropzone.js +1749 -0
- package/dist/components/HeroTitle.js +4 -3
- package/dist/components/Icon.js +6 -5
- package/dist/components/Image.js +1 -1
- package/dist/components/InputNumber.js +8 -8
- package/dist/components/InputPassword.js +6 -5
- package/dist/components/Label.js +5 -4
- package/dist/components/Loader.js +2 -2
- package/dist/components/MenuItem.js +2 -1
- package/dist/components/Modal.js +4 -4
- package/dist/components/ModalSheetBottom.js +4 -3
- package/dist/components/Notification.js +12 -12
- package/dist/components/Pagination.js +4 -3
- package/dist/components/Response.js +5 -5
- package/dist/components/Search.js +3 -2
- package/dist/components/Segmented.js +5 -4
- package/dist/components/Select/stories/__mock__.js +4 -4
- package/dist/components/Select.js +5 -5
- package/dist/components/Swiper.js +3 -2
- package/dist/components/Tab.js +1 -1
- package/dist/components/Tile.js +4 -3
- package/dist/components/Title.js +6 -5
- package/dist/components/Tooltip.js +6 -5
- package/dist/components/Warning.js +3 -2
- package/dist/context/Notifications.js +1 -1
- package/dist/context/UIContext.js +7 -1
- package/dist/css/styles/bundles.css +440 -207
- package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js +9 -9
- package/dist/hooks/useActiveClasses/useActiveClasses.js +3 -3
- package/dist/hooks/useDropzoneFieldFiles.js +20767 -0
- package/dist/hooks/useStyles/styleAttributes.js +166 -43
- package/dist/hooks/useStyles/useStyles.js +169 -155
- package/dist/stories/DropzoneOverview.mdx +11 -0
- package/dist/stories/DropzonePlayground.mdx +10 -0
- package/dist/types/components/Avatar/Avatar.interface.d.ts +2 -2
- package/dist/types/components/AvatarStack/AvatarStack.interface.d.ts +9 -15
- package/dist/types/components/Breadcrumbs/Breadcrumbs.interface.d.ts +9 -8
- package/dist/types/components/Button/Button.d.ts +3 -2
- package/dist/types/components/Button/Button.interface.d.ts +4 -4
- package/dist/types/components/Button/stories/ButtonDefault.stories.d.ts +3 -2
- package/dist/types/components/Button/stories/ButtonDemo.stories.d.ts +3 -2
- package/dist/types/components/Button/stories/ButtonIcon.stories.d.ts +3 -2
- package/dist/types/components/Button/stories/ButtonLabel.stories.d.ts +3 -2
- package/dist/types/components/Button/stories/ButtonLoading.stories.d.ts +3 -2
- package/dist/types/components/Button/stories/ButtonMuted.stories.d.ts +3 -2
- package/dist/types/components/Button/stories/ButtonMutedIcon.stories.d.ts +3 -2
- package/dist/types/components/Button/stories/ButtonShape.stories.d.ts +3 -2
- package/dist/types/components/Button/stories/ButtonSize.stories.d.ts +3 -2
- package/dist/types/components/Checkbox/Checkbox.interface.d.ts +3 -3
- package/dist/types/components/Checkbox/appearance/checkboxShape.d.ts +3 -0
- package/dist/types/components/Checkmark/Checkmark.interface.d.ts +8 -2
- package/dist/types/components/Checkmark/appearance/checkmarkError.d.ts +3 -0
- package/dist/types/components/Checkmark/stories/CheckmarkError.stories.d.ts +23 -0
- package/dist/types/components/Chips/Chips.interface.d.ts +2 -2
- package/dist/types/components/DatePeriod/DatePeriod.interface.d.ts +20 -19
- package/dist/types/components/DatePeriod/stories/DatePeriodSize.stories.d.ts +3 -0
- package/dist/types/components/DatePicker/DatePicker.interface.d.ts +4 -3
- package/dist/types/components/Dropzone/Dropzone.appearance.d.ts +3 -0
- package/dist/types/components/Dropzone/Dropzone.d.ts +4 -0
- package/dist/types/components/Dropzone/Dropzone.interface.d.ts +82 -0
- package/dist/types/components/Dropzone/appearance/dropzoneDefault.d.ts +3 -0
- package/dist/types/components/Dropzone/appearance/dropzoneDisabled.d.ts +3 -0
- package/dist/types/components/Dropzone/appearance/dropzoneError.d.ts +3 -0
- package/dist/types/components/Dropzone/appearance/dropzoneRequire.d.ts +3 -0
- package/dist/types/components/Dropzone/appearance/dropzoneShape.d.ts +3 -0
- package/dist/types/components/Dropzone/appearance/dropzoneSuccess.d.ts +3 -0
- package/dist/types/components/Dropzone/index.d.ts +1 -0
- package/dist/types/components/Dropzone/stories/DropzoneDefault.stories.d.ts +42 -0
- package/dist/types/components/Dropzone/stories/DropzoneDemo.stories.d.ts +19 -0
- package/dist/types/components/HeroTitle/HeroTitle.interface.d.ts +1 -1
- package/dist/types/components/Icon/Icon.interface.d.ts +3 -2
- package/dist/types/components/Link/Link.interface.d.ts +1 -1
- package/dist/types/components/List/List.interface.d.ts +1 -1
- package/dist/types/components/Loader/Loader.interface.d.ts +5 -4
- package/dist/types/components/Loader/stories/LoaderAppearance.stories.d.ts +3 -0
- package/dist/types/components/Loader/stories/LoaderText.stories.d.ts +25 -0
- package/dist/types/components/Loader/stories/LoaderType.stories.d.ts +25 -0
- package/dist/types/components/MenuItem/MenuItem.interface.d.ts +1 -1
- package/dist/types/components/Notification/Notification.interface.d.ts +2 -2
- package/dist/types/components/Search/Search.interface.d.ts +10 -9
- package/dist/types/components/Search/SearchInput.d.ts +7 -7
- package/dist/types/components/Search/stories/SearchInputDefault.stories.d.ts +7 -7
- package/dist/types/components/Search/stories/SearchInputDemo.stories.d.ts +7 -7
- package/dist/types/components/Search/stories/SearchInputDisabled.stories.d.ts +7 -7
- package/dist/types/components/Search/stories/SearchInputError.stories.d.ts +7 -7
- package/dist/types/components/Search/stories/SearchInputRequire.stories.d.ts +7 -7
- package/dist/types/components/Search/stories/SearchInputShape.stories.d.ts +7 -7
- package/dist/types/components/Search/stories/SearchInputSize.stories.d.ts +7 -7
- package/dist/types/components/Search/stories/SearchInputStyle.stories.d.ts +7 -7
- package/dist/types/components/Search/stories/SearchInputSuccess.stories.d.ts +7 -7
- package/dist/types/components/Select/Select.interface.d.ts +9 -7
- package/dist/types/components/Select/SelectContainer.d.ts +4 -1
- package/dist/types/components/Select/SelectMultiValue.d.ts +2 -2
- package/dist/types/components/Select/stories/Select.stories.d.ts +5 -3
- package/dist/types/components/Select/stories/SelectDefault.stories.d.ts +5 -3
- package/dist/types/components/Select/stories/SelectDisabled.stories.d.ts +5 -3
- package/dist/types/components/Select/stories/SelectError.stories.d.ts +5 -3
- package/dist/types/components/Select/stories/SelectRequire.stories.d.ts +5 -3
- package/dist/types/components/Select/stories/SelectShape.stories.d.ts +5 -3
- package/dist/types/components/Select/stories/SelectSize.stories.d.ts +5 -3
- package/dist/types/components/Select/stories/SelectStyle.stories.d.ts +5 -3
- package/dist/types/components/Select/stories/SelectSuccess.stories.d.ts +5 -3
- package/dist/types/components/Select/stories/__mock__/index.d.ts +2 -2
- package/dist/types/components/Swiper/Swiper.interface.d.ts +2 -11
- package/dist/types/components/Text/Text.interface.d.ts +2 -2
- package/dist/types/context/Notifications.d.ts +1 -1
- package/dist/types/context/Notifications.interface.d.ts +2 -1
- package/dist/types/context/UIContext.d.ts +10 -4
- package/dist/types/hooks/useActiveClasses/useActiveClasses.interface.d.ts +1 -2
- package/dist/types/hooks/useDropzoneFieldFiles.d.ts +14 -0
- package/dist/types/hooks/useStyles/styleAttributes.d.ts +2 -3
- package/dist/types/hooks/useStyles/styleAttributes.interface.d.ts +9 -3
- package/dist/types/hooks/useStyles/useStyles.d.ts +4 -1
- package/dist/types/utils/mergeAppearanceKeys.d.ts +6 -1
- package/dist/utils/mergeAppearanceKeys.js +14 -1
- package/package.json +16 -15
|
@@ -3,48 +3,171 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var styleAttributes = [
|
|
6
|
-
/**
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
'alignContent',
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
'
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
'
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
'
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
'
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
'
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
'
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
'
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
'
|
|
6
|
+
/**
|
|
7
|
+
* Layout
|
|
8
|
+
*/
|
|
9
|
+
'alignContent',
|
|
10
|
+
'alignItems',
|
|
11
|
+
'alignSelf',
|
|
12
|
+
'aspectRatio',
|
|
13
|
+
'border',
|
|
14
|
+
'borderBottomWidth',
|
|
15
|
+
'borderLeftWidth',
|
|
16
|
+
'borderRightWidth',
|
|
17
|
+
'borderTopWidth',
|
|
18
|
+
'borderWidth',
|
|
19
|
+
'bottom',
|
|
20
|
+
'display',
|
|
21
|
+
'flex',
|
|
22
|
+
'flexBasis',
|
|
23
|
+
'flexDirection',
|
|
24
|
+
'flexGrow',
|
|
25
|
+
'flexShrink',
|
|
26
|
+
'flexWrap',
|
|
27
|
+
'gap',
|
|
28
|
+
'rowGap',
|
|
29
|
+
'columnGap',
|
|
30
|
+
'columnWidth',
|
|
31
|
+
'height',
|
|
32
|
+
'justifyContent',
|
|
33
|
+
'left',
|
|
34
|
+
'margin',
|
|
35
|
+
'marginBottom',
|
|
36
|
+
'marginHorizontal',
|
|
37
|
+
'marginLeft',
|
|
38
|
+
'marginRight',
|
|
39
|
+
'marginTop',
|
|
40
|
+
'marginVertical',
|
|
41
|
+
'maxHeight',
|
|
42
|
+
'maxWidth',
|
|
43
|
+
'minHeight',
|
|
44
|
+
'minWidth',
|
|
45
|
+
'overflow',
|
|
46
|
+
'overflowY',
|
|
47
|
+
'overflowX',
|
|
48
|
+
'padding',
|
|
49
|
+
'paddingBottom',
|
|
50
|
+
'paddingEnd',
|
|
51
|
+
'paddingHorizontal',
|
|
52
|
+
'paddingLeft',
|
|
53
|
+
'paddingRight',
|
|
54
|
+
'paddingStart',
|
|
55
|
+
'paddingTop',
|
|
56
|
+
'paddingVertical',
|
|
57
|
+
'position',
|
|
58
|
+
'right',
|
|
59
|
+
'top',
|
|
60
|
+
[
|
|
61
|
+
'width',
|
|
62
|
+
{
|
|
63
|
+
validate: (value) => {
|
|
64
|
+
// Pass only number value for "width" style.
|
|
65
|
+
// If width have custom value, like "fill", we must set class by this value.
|
|
66
|
+
// "\d" - digit; "+" - 1 or more
|
|
67
|
+
return /\d+/.test(value);
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
],
|
|
71
|
+
'zIndex',
|
|
72
|
+
'order',
|
|
73
|
+
/**
|
|
74
|
+
* Shadow
|
|
75
|
+
*/
|
|
76
|
+
'shadowColor',
|
|
77
|
+
'shadowOffset',
|
|
78
|
+
'shadowOpacity',
|
|
79
|
+
'shadowRadius',
|
|
80
|
+
/**
|
|
81
|
+
* Transform
|
|
82
|
+
*/
|
|
83
|
+
'transform',
|
|
84
|
+
/**
|
|
85
|
+
* View
|
|
86
|
+
*/
|
|
87
|
+
'background',
|
|
88
|
+
'backgroundColor',
|
|
89
|
+
'borderBottomColor',
|
|
90
|
+
'borderBottomEndRadius',
|
|
91
|
+
'borderBottomLeftRadius',
|
|
92
|
+
'borderBottomRightRadius',
|
|
93
|
+
'borderBottomStartRadius',
|
|
94
|
+
'borderColor',
|
|
95
|
+
'borderCurve',
|
|
96
|
+
'borderEndColor',
|
|
97
|
+
'borderLeftColor',
|
|
98
|
+
'borderRadius',
|
|
99
|
+
'borderRightColor',
|
|
100
|
+
'borderStartColor',
|
|
101
|
+
'borderStyle',
|
|
102
|
+
'borderTopColor',
|
|
103
|
+
'borderTopEndRadius',
|
|
104
|
+
'borderTopLeftRadius',
|
|
105
|
+
'borderTopRightRadius',
|
|
106
|
+
'borderTopStartRadius',
|
|
107
|
+
'opacity',
|
|
108
|
+
'cursor',
|
|
109
|
+
/**
|
|
110
|
+
* Text
|
|
111
|
+
*/
|
|
112
|
+
'color',
|
|
113
|
+
'fontFamily',
|
|
114
|
+
'fontSize',
|
|
115
|
+
'fontStyle',
|
|
116
|
+
'fontVariant',
|
|
117
|
+
'fontWeight',
|
|
118
|
+
'letterSpacing',
|
|
119
|
+
'lineHeight',
|
|
120
|
+
'textAlign',
|
|
121
|
+
'textDecorationColor',
|
|
122
|
+
'textDecorationLine',
|
|
123
|
+
'textDecorationStyle',
|
|
124
|
+
'textShadowColor',
|
|
125
|
+
'textShadowOffset',
|
|
126
|
+
'textShadowRadius',
|
|
127
|
+
'textTransform',
|
|
128
|
+
'verticalAlign',
|
|
129
|
+
'writingMode',
|
|
130
|
+
'whiteSpace',
|
|
131
|
+
/**
|
|
132
|
+
* Image
|
|
133
|
+
*/
|
|
134
|
+
'overlayColor',
|
|
135
|
+
'resizeMode',
|
|
136
|
+
'tintColor',
|
|
137
|
+
'objectFit',
|
|
138
|
+
'objectPosition',
|
|
139
|
+
/**
|
|
140
|
+
* Grid
|
|
141
|
+
*/
|
|
142
|
+
'gridTemplateColumns',
|
|
143
|
+
'gridArea',
|
|
144
|
+
'gridAutoColumns',
|
|
145
|
+
'gridAutoFlow',
|
|
146
|
+
'gridAutoRows',
|
|
147
|
+
'gridTemplate',
|
|
148
|
+
'gridTemplateAreas',
|
|
149
|
+
'gridTemplateRows',
|
|
150
|
+
'gridColumn',
|
|
151
|
+
'gridColumnStart',
|
|
152
|
+
'gridColumnEnd',
|
|
153
|
+
'gridColumnGap',
|
|
154
|
+
'gridRow',
|
|
155
|
+
'gridRowStart',
|
|
156
|
+
'gridRowEnd',
|
|
157
|
+
'gridRowGap',
|
|
158
|
+
/**
|
|
159
|
+
* Filter
|
|
160
|
+
*/
|
|
161
|
+
'backdropFilter',
|
|
162
|
+
/**
|
|
163
|
+
* transition
|
|
164
|
+
*/
|
|
165
|
+
'transition',
|
|
166
|
+
'transitionBehavior',
|
|
167
|
+
'transitionDelay',
|
|
168
|
+
'transitionDuration',
|
|
169
|
+
'transitionProperty',
|
|
170
|
+
'transitionTimingFunction',
|
|
171
|
+
];
|
|
49
172
|
|
|
50
173
|
exports.default = styleAttributes;
|
|
@@ -24,167 +24,181 @@ require('../../utils/setViewportProperty.js');
|
|
|
24
24
|
* paddingHorizontalGridInnerWrapperMobileNormal: "10px"
|
|
25
25
|
*/
|
|
26
26
|
function useStyles(props) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
27
|
+
const { deviceCurrentMainType, deviceCurrentType, deviceTypesList } = UIContext.useUserDeviceContext();
|
|
28
|
+
const propsStyleAttributes = React.useMemo(() => {
|
|
29
|
+
const styles = Object.entries(props).reduce((result, [propKey, propValue]) => {
|
|
30
|
+
const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
|
|
31
|
+
if (styleAttributeKey) {
|
|
32
|
+
result[propKey] = propValue;
|
|
33
|
+
}
|
|
34
|
+
return result;
|
|
35
|
+
}, {});
|
|
36
|
+
return styles;
|
|
37
|
+
// "props" object maybe big and frequently changing
|
|
38
|
+
}, [props]);
|
|
39
|
+
const collectedStyles = React.useMemo(() => {
|
|
40
|
+
const resultStylesGroups = {};
|
|
41
|
+
for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
|
|
42
|
+
let value = null;
|
|
43
|
+
const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
|
|
44
|
+
const isStyleForCurrentDevice = propKey
|
|
45
|
+
.toLowerCase()
|
|
46
|
+
.endsWith(deviceCurrentType.toLowerCase());
|
|
47
|
+
// e.g. "GridWrapperInner"
|
|
48
|
+
const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''), deviceTypesList);
|
|
49
|
+
const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
|
|
50
|
+
if (!resultStylesGroups[targetElementGroupKey]) {
|
|
51
|
+
resultStylesGroups[targetElementGroupKey] = {};
|
|
52
|
+
}
|
|
53
|
+
if (isStyleForCurrentDevice) {
|
|
54
|
+
value = propValue;
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
const propKeyWithOutDeviceType = `${styleAttributeKey}${targetElementKey}`;
|
|
58
|
+
const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${upperFirst(deviceCurrentMainType)}`;
|
|
59
|
+
const defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
|
|
60
|
+
let currentValue = resultStylesGroups[targetElementGroupKey][styleAttributeKey];
|
|
61
|
+
if (propKeyWithOutDeviceType.includes('Horizontal')) {
|
|
62
|
+
const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
|
|
63
|
+
currentValue =
|
|
64
|
+
resultStylesGroups[targetElementGroupKey][keyLeft];
|
|
65
|
+
}
|
|
66
|
+
else if (propKeyWithOutDeviceType.includes('Vertical')) {
|
|
67
|
+
const keyTop = styleAttributeKey.replace('Vertical', 'Top');
|
|
68
|
+
currentValue =
|
|
69
|
+
resultStylesGroups[targetElementGroupKey][keyTop];
|
|
70
|
+
}
|
|
71
|
+
if (!currentValue) {
|
|
72
|
+
value = defaultValue;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
if (value) {
|
|
76
|
+
// Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
|
|
77
|
+
const isValueHasUnit = /\D/.test(value);
|
|
78
|
+
// If value has some unit
|
|
79
|
+
if (isValueHasUnit) {
|
|
80
|
+
// Check value on our custom "m"(module) unit
|
|
81
|
+
/** Pattern for:
|
|
82
|
+
* 1m
|
|
83
|
+
* 1.5m
|
|
84
|
+
* 1m 1m 1.5m
|
|
85
|
+
* 0 0 1m 1m
|
|
86
|
+
*/
|
|
87
|
+
const isValueHasModuleUnit = /\d+\.?\d*m\s?(?![a-zA-Z]+)/.test(value);
|
|
88
|
+
// If value has module unit
|
|
89
|
+
if (isValueHasModuleUnit) {
|
|
90
|
+
/** Order for shorthand properties:
|
|
91
|
+
* top
|
|
92
|
+
* right
|
|
93
|
+
* bottom
|
|
94
|
+
* left
|
|
95
|
+
* or:
|
|
96
|
+
* top
|
|
97
|
+
* right and left
|
|
98
|
+
* bottom
|
|
99
|
+
* or:
|
|
100
|
+
* top and bottom
|
|
101
|
+
* right and left
|
|
102
|
+
*/
|
|
103
|
+
const valuePxPartsList = value
|
|
104
|
+
.split(' ')
|
|
105
|
+
.map((valuePart) => {
|
|
106
|
+
const valueModule = valuePart.replace(/[a-z]/gi, '');
|
|
107
|
+
const valuePx = parseFloat(valueModule) * 8;
|
|
108
|
+
return `${valuePx}px`;
|
|
109
|
+
}, []);
|
|
110
|
+
value = valuePxPartsList.join(' ');
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
else {
|
|
114
|
+
// Some properties doesn't have any units
|
|
115
|
+
const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
|
|
116
|
+
if (!ignorePX) {
|
|
117
|
+
// Add px to non-unit value
|
|
118
|
+
value = `${value}px`;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
if (styleAttributeKey.includes('Horizontal')) {
|
|
122
|
+
const keyRight = styleAttributeKey.replace('Horizontal', 'Right');
|
|
123
|
+
const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
|
|
124
|
+
const valuePartsList = value.split(' ');
|
|
125
|
+
const valueRight = valuePartsList[0];
|
|
126
|
+
const valueLeft = valuePartsList[1] || valuePartsList[0];
|
|
127
|
+
resultStylesGroups[targetElementGroupKey][keyRight] = valueRight;
|
|
128
|
+
resultStylesGroups[targetElementGroupKey][keyLeft] = valueLeft;
|
|
129
|
+
}
|
|
130
|
+
else if (styleAttributeKey.includes('Vertical')) {
|
|
131
|
+
const keyTop = styleAttributeKey.replace('Vertical', 'Top');
|
|
132
|
+
const keyBottom = styleAttributeKey.replace('Vertical', 'Bottom');
|
|
133
|
+
const valuePartsList = value.split(' ');
|
|
134
|
+
const valueTop = valuePartsList[0];
|
|
135
|
+
const valueBottom = valuePartsList[1] || valuePartsList[0];
|
|
136
|
+
resultStylesGroups[targetElementGroupKey][keyTop] = valueTop;
|
|
137
|
+
resultStylesGroups[targetElementGroupKey][keyBottom] = valueBottom;
|
|
138
|
+
}
|
|
139
|
+
else {
|
|
140
|
+
resultStylesGroups[targetElementGroupKey][styleAttributeKey] = value;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
68
143
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
if (isValueHasUnit) {
|
|
78
|
-
// Check value on our custom "m"(module) unit
|
|
79
|
-
/** Pattern for:
|
|
80
|
-
* 1m
|
|
81
|
-
* 1.5m
|
|
82
|
-
* 1m 1m 1.5m
|
|
83
|
-
* 0 0 1m 1m
|
|
84
|
-
*/
|
|
85
|
-
const isValueHasModuleUnit = /\d+\.?\d*m\s?(?![a-zA-Z]+)/.test(value);
|
|
86
|
-
// If value has module unit
|
|
87
|
-
if (isValueHasModuleUnit) {
|
|
88
|
-
/** Order for shorthand properties:
|
|
89
|
-
* top
|
|
90
|
-
* right
|
|
91
|
-
* bottom
|
|
92
|
-
* left
|
|
93
|
-
* or:
|
|
94
|
-
* top
|
|
95
|
-
* right and left
|
|
96
|
-
* bottom
|
|
97
|
-
* or:
|
|
98
|
-
* top and bottom
|
|
99
|
-
* right and left
|
|
100
|
-
*/
|
|
101
|
-
const valuePxPartsList = value.split(' ').map(valuePart => {
|
|
102
|
-
const valueModule = valuePart.replace(/[a-z]/gi, '');
|
|
103
|
-
const valuePx = parseFloat(valueModule) * 8;
|
|
104
|
-
return `${valuePx}px`;
|
|
105
|
-
}, []);
|
|
106
|
-
value = valuePxPartsList.join(' ');
|
|
107
|
-
}
|
|
108
|
-
} else {
|
|
109
|
-
// Some properties doesn't have any units
|
|
110
|
-
const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
|
|
111
|
-
if (!ignorePX) {
|
|
112
|
-
// Add px to non-unit value
|
|
113
|
-
value = `${value}px`;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
if (styleAttributeKey.includes('Horizontal')) {
|
|
117
|
-
const keyRight = styleAttributeKey.replace('Horizontal', 'Right');
|
|
118
|
-
const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
|
|
119
|
-
const valuePartsList = value.split(' ');
|
|
120
|
-
const valueRight = valuePartsList[0];
|
|
121
|
-
const valueLeft = valuePartsList[1] || valuePartsList[0];
|
|
122
|
-
resultStylesGroups[targetElementGroupKey][keyRight] = valueRight;
|
|
123
|
-
resultStylesGroups[targetElementGroupKey][keyLeft] = valueLeft;
|
|
124
|
-
} else if (styleAttributeKey.includes('Vertical')) {
|
|
125
|
-
const keyTop = styleAttributeKey.replace('Vertical', 'Top');
|
|
126
|
-
const keyBottom = styleAttributeKey.replace('Vertical', 'Bottom');
|
|
127
|
-
const valuePartsList = value.split(' ');
|
|
128
|
-
const valueTop = valuePartsList[0];
|
|
129
|
-
const valueBottom = valuePartsList[1] || valuePartsList[0];
|
|
130
|
-
resultStylesGroups[targetElementGroupKey][keyTop] = valueTop;
|
|
131
|
-
resultStylesGroups[targetElementGroupKey][keyBottom] = valueBottom;
|
|
132
|
-
} else {
|
|
133
|
-
resultStylesGroups[targetElementGroupKey][styleAttributeKey] = value;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
return resultStylesGroups;
|
|
138
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
139
|
-
}, [deviceCurrentMainType, deviceCurrentType, ...Object.values(propsStyleAttributes)]);
|
|
140
|
-
return collectedStyles;
|
|
144
|
+
return resultStylesGroups;
|
|
145
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
146
|
+
}, [
|
|
147
|
+
deviceCurrentMainType,
|
|
148
|
+
deviceCurrentType,
|
|
149
|
+
...Object.values(propsStyleAttributes),
|
|
150
|
+
]);
|
|
151
|
+
return collectedStyles;
|
|
141
152
|
}
|
|
142
153
|
const removeDeviceType = (originalKey, deviceTypesList) => {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
154
|
+
// Remove "mobile"/"tablet"/"desktop"
|
|
155
|
+
const withOutDeviceType = deviceTypesList.reduce((cleanKey, deviceType) => {
|
|
156
|
+
if (cleanKey.endsWith(upperFirst(deviceType))) {
|
|
157
|
+
return cleanKey.replace(upperFirst(deviceType), '');
|
|
158
|
+
}
|
|
159
|
+
return cleanKey;
|
|
160
|
+
}, originalKey);
|
|
161
|
+
return withOutDeviceType;
|
|
151
162
|
};
|
|
152
163
|
const getTargetStyleAttributeKey = (styleKey, styleValue = '') => {
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
164
|
+
// Collect list of possible styles for propKey. e.g:
|
|
165
|
+
// "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
|
|
166
|
+
const possibleStyleAttributesList = styleAttributes.default.filter((styleAttribute) => {
|
|
167
|
+
// Attribute can be array with key on first position and params on second
|
|
168
|
+
if (Array.isArray(styleAttribute)) {
|
|
169
|
+
// First item always attribute key (e.g. border, width, etc)
|
|
170
|
+
const styleAttributeKey = styleAttribute[0];
|
|
171
|
+
// Second item always params with some settings or methods
|
|
172
|
+
const styleAttributeParams = styleAttribute[1] || {};
|
|
173
|
+
// If is target attribute key
|
|
174
|
+
if (styleKey.startsWith(styleAttributeKey)) {
|
|
175
|
+
// If target attribute params has validate method
|
|
176
|
+
if (styleAttributeParams.validate) {
|
|
177
|
+
// Return validation result for target attribute
|
|
178
|
+
return styleAttributeParams.validate(styleValue);
|
|
179
|
+
}
|
|
180
|
+
else {
|
|
181
|
+
// Or always add to list
|
|
182
|
+
return true;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
else {
|
|
186
|
+
// Else ignore
|
|
187
|
+
return false;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
else {
|
|
191
|
+
// If is target attribute
|
|
192
|
+
return styleKey.startsWith(String(styleAttribute));
|
|
171
193
|
}
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
});
|
|
181
|
-
// Get longest style key (e.g. "borderLeftWidth")
|
|
182
|
-
const targetStyleAttribute = maxBy(possibleStyleAttributesList, styleAttribute => {
|
|
183
|
-
const key = index_helpers.getStyleAttributeKey(styleAttribute);
|
|
184
|
-
return key.length;
|
|
185
|
-
});
|
|
186
|
-
const styleAttributeKey = index_helpers.getStyleAttributeKey(targetStyleAttribute);
|
|
187
|
-
return styleAttributeKey;
|
|
194
|
+
});
|
|
195
|
+
// Get longest style key (e.g. "borderLeftWidth")
|
|
196
|
+
const targetStyleAttribute = maxBy(possibleStyleAttributesList, (styleAttribute) => {
|
|
197
|
+
const key = index_helpers.getStyleAttributeKey(styleAttribute);
|
|
198
|
+
return key.length;
|
|
199
|
+
});
|
|
200
|
+
const styleAttributeKey = index_helpers.getStyleAttributeKey(targetStyleAttribute);
|
|
201
|
+
return styleAttributeKey;
|
|
188
202
|
};
|
|
189
203
|
|
|
190
204
|
exports.useStyles = useStyles;
|
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* @example
|
|
5
|
+
* mergeAppearanceKeys(' ', '1', undefined, '2', '1') === '1 2'
|
|
6
|
+
*/
|
|
7
|
+
const mergeAppearanceKeys = (...appearances) => {
|
|
8
|
+
const trimmedAppearances = appearances
|
|
9
|
+
.map((appearance) => appearance?.trim())
|
|
10
|
+
.filter(Boolean);
|
|
11
|
+
if (trimmedAppearances.length < 2) {
|
|
12
|
+
return trimmedAppearances[0] ?? '';
|
|
13
|
+
}
|
|
14
|
+
const uniqueAppearances = Array.from(new Set(trimmedAppearances));
|
|
15
|
+
return uniqueAppearances.join(' ');
|
|
16
|
+
};
|
|
4
17
|
|
|
5
18
|
exports.mergeAppearanceKeys = mergeAppearanceKeys;
|
|
@@ -6,7 +6,7 @@ import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDev
|
|
|
6
6
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
7
7
|
import { mergeAppearanceKeys } from '../utils/mergeAppearanceKeys.js';
|
|
8
8
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
9
|
-
import { B as Badge, I as Icon } from '../
|
|
9
|
+
import { B as Badge, I as Icon } from '../Icon_es_kewxGRUB.js';
|
|
10
10
|
import { D as Divider } from '../Divider_es_D2snK_vn.js';
|
|
11
11
|
import { T as Text } from '../Text_es_DVNvU0m0.js';
|
|
12
12
|
import { icons16 } from '@itcase/icons/default';
|
|
@@ -23,9 +23,9 @@ import '../hooks.js';
|
|
|
23
23
|
import '../hooks/useStyles/styleAttributes.js';
|
|
24
24
|
import 'lodash/maxBy';
|
|
25
25
|
import 'react-inlinesvg';
|
|
26
|
+
import '../Link_es_BDAmhIzd.js';
|
|
26
27
|
import '../hoc/urlWithAssetPrefix.js';
|
|
27
28
|
import '../context/UrlAssetPrefix.js';
|
|
28
|
-
import '../Link_es_BDAmhIzd.js';
|
|
29
29
|
|
|
30
30
|
const accordionAppearanceSize = {
|
|
31
31
|
sizeXXL: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { A as Avatar, a as avatarAppearance, b as avatarConfig } from '../
|
|
1
|
+
export { A as Avatar, a as avatarAppearance, b as avatarConfig } from '../Avatar_es_CtP68jPM.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'clsx';
|
|
@@ -16,12 +16,13 @@ import 'react-responsive';
|
|
|
16
16
|
import '../utils/setViewportProperty.js';
|
|
17
17
|
import '../hooks.js';
|
|
18
18
|
import '../hooks/useStyles/styleAttributes.js';
|
|
19
|
-
import '../
|
|
19
|
+
import '../Icon_es_kewxGRUB.js';
|
|
20
20
|
import 'react-inlinesvg';
|
|
21
|
-
import '../
|
|
22
|
-
import '../context/UrlAssetPrefix.js';
|
|
21
|
+
import '../Link_es_BDAmhIzd.js';
|
|
23
22
|
import '../hooks/useStyles/useStyles.js';
|
|
24
23
|
import 'lodash/maxBy';
|
|
25
|
-
import '../Link_es_BDAmhIzd.js';
|
|
26
24
|
import '../Text_es_DVNvU0m0.js';
|
|
27
|
-
import '../
|
|
25
|
+
import '../hoc/urlWithAssetPrefix.js';
|
|
26
|
+
import '../context/UrlAssetPrefix.js';
|
|
27
|
+
import '../utils/mergeAppearanceKeys.js';
|
|
28
|
+
import '../Image_es_DpOCNWpn.js';
|
|
@@ -4,7 +4,7 @@ import { mergeAppearanceKeys } from '../utils/mergeAppearanceKeys.js';
|
|
|
4
4
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
6
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
7
|
-
import { A as Avatar } from '../
|
|
7
|
+
import { A as Avatar } from '../Avatar_es_CtP68jPM.js';
|
|
8
8
|
import { G as Group } from '../Group_es_Y1qBBLZU.js';
|
|
9
9
|
import { T as Text } from '../Text_es_DVNvU0m0.js';
|
|
10
10
|
import 'react';
|
|
@@ -21,12 +21,12 @@ import '../utils/setViewportProperty.js';
|
|
|
21
21
|
import '../hooks.js';
|
|
22
22
|
import '../hooks/useStyles/styleAttributes.js';
|
|
23
23
|
import 'lodash/maxBy';
|
|
24
|
-
import '../
|
|
24
|
+
import '../Icon_es_kewxGRUB.js';
|
|
25
25
|
import 'react-inlinesvg';
|
|
26
|
+
import '../Link_es_BDAmhIzd.js';
|
|
26
27
|
import '../hoc/urlWithAssetPrefix.js';
|
|
27
28
|
import '../context/UrlAssetPrefix.js';
|
|
28
|
-
import '../
|
|
29
|
-
import '../Image_es_Ca7UQOkj.js';
|
|
29
|
+
import '../Image_es_DpOCNWpn.js';
|
|
30
30
|
|
|
31
31
|
const avatarStackAppearanceSize = {
|
|
32
32
|
size16: {
|