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