@itcase/ui 1.8.130 → 1.8.132
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/{ChipsGroup_cjs_BMkiDYau.js → ChipsGroup_cjs_Du8WHI-Y.js} +15 -11
- package/dist/{ChipsGroup_es_Czu95rkL.js → ChipsGroup_es_CzVlqaHv.js} +15 -11
- package/dist/cjs/components/Chips.js +1 -1
- package/dist/cjs/components/DatePeriod.js +1 -1
- package/dist/cjs/components/MenuItem.js +11 -11
- package/dist/cjs/components/Pagination.js +48 -8
- package/dist/cjs/components/Response.js +29 -40
- package/dist/cjs/components/Segmented.js +5 -5
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.helpers.js +2 -2
- package/dist/components/Chips.js +1 -1
- package/dist/components/DatePeriod.js +1 -1
- package/dist/components/MenuItem.js +11 -11
- package/dist/components/Pagination.js +48 -8
- package/dist/components/Response.js +29 -40
- package/dist/components/Segmented.js +5 -5
- package/dist/css/components/Pagination/Pagination.css +6 -0
- package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js +2 -2
- package/dist/types/components/Chips/appearance/chipsDisabled.d.ts +4 -0
- package/dist/types/components/Chips/appearance/chipsSurface.d.ts +2 -2
- package/dist/types/components/Dropdown/Dropdown.interface.d.ts +1 -3
- package/dist/types/components/MenuItem/MenuItem.appearance.d.ts +232 -290
- package/dist/types/components/MenuItem/MenuItem.interface.d.ts +6 -5
- package/dist/types/components/Pagination/appearance/paginationShape.d.ts +34 -0
- package/dist/types/components/Pagination/appearance/paginationSurface.d.ts +5 -1
- package/dist/types/components/Response/Response.constant.d.ts +6 -20
- package/dist/types/components/Segmented/Segmented.interface.d.ts +2 -2
- package/dist/types/components/Segmented/appearance/segmentedDefault.d.ts +2 -2
- package/dist/types/components/Segmented/appearance/segmentedSuccess.d.ts +1 -1
- package/package.json +6 -6
|
@@ -167,13 +167,13 @@ const menuItemAppearanceSurface = {
|
|
|
167
167
|
},
|
|
168
168
|
surfacePrimary: {
|
|
169
169
|
fill: 'surfacePrimary',
|
|
170
|
-
fillActive: '
|
|
171
|
-
fillActiveHover: '
|
|
172
|
-
fillHover: '
|
|
173
|
-
labelTextActiveColor: '
|
|
174
|
-
|
|
170
|
+
fillActive: 'surfaceSecondary',
|
|
171
|
+
fillActiveHover: 'surfaceTertiary',
|
|
172
|
+
fillHover: 'surfaceSecondary',
|
|
173
|
+
labelTextActiveColor: 'surfaceTextPrimary',
|
|
174
|
+
labelTextActiveColorHover: 'surfaceTextPrimary',
|
|
175
175
|
labelTextColor: 'surfaceTextPrimary',
|
|
176
|
-
|
|
176
|
+
labelTextColorHover: 'surfaceTextPrimary',
|
|
177
177
|
borderColor: 'surfaceBorderQuaternary',
|
|
178
178
|
iconAfterFillIcon: 'surfaceItemPrimary',
|
|
179
179
|
iconBeforeFillIcon: 'surfaceItemPrimary',
|
|
@@ -189,7 +189,7 @@ const menuItemAppearanceSurface = {
|
|
|
189
189
|
fillActiveHover: 'surfaceHover',
|
|
190
190
|
fillHover: 'surfaceSecondary',
|
|
191
191
|
labelTextActiveColor: 'accentTextSecondary',
|
|
192
|
-
|
|
192
|
+
labelTextActiveColorHover: 'surfaceTextPrimary',
|
|
193
193
|
borderColor: 'surfaceBorderQuaternary',
|
|
194
194
|
iconAfterFillIcon: 'surfaceItemPrimary',
|
|
195
195
|
iconBeforeFillIcon: 'surfaceItemPrimary',
|
|
@@ -217,7 +217,7 @@ const menuItemConfig = {
|
|
|
217
217
|
},
|
|
218
218
|
};
|
|
219
219
|
function MenuItem(props) {
|
|
220
|
-
const { appearance, className, label, href, link, LinkComponent, rel, showTooltip, target, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
|
|
220
|
+
const { appearance, className, label, href, link, LinkComponent, rel, showTooltip, target, easing, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
|
|
221
221
|
const tooltipRef = useRef(null);
|
|
222
222
|
const onMouseEnter = useCallback(() => {
|
|
223
223
|
if (showTooltip) {
|
|
@@ -231,10 +231,10 @@ function MenuItem(props) {
|
|
|
231
231
|
}, [showTooltip]);
|
|
232
232
|
const appearanceConfig = useAppearanceConfig(appearance, menuItemConfig, isDisabled);
|
|
233
233
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
234
|
-
const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass,
|
|
234
|
+
const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorDisabled, labelTextColorHover, labelTextSize, labelWeight, labelWrap, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, tooltipTitle, shapeClass, shapeStrengthClass, sizeClass, tooltipFill, tooltipShape, tooltipShapeStrength, tooltipSize, tooltipText, tooltipTextColor, tooltipTextSize, tooltipTitleTextColor, typeClass, widthClass, isSkeleton, } = propsGenerator;
|
|
235
235
|
// @ts-expect-error
|
|
236
236
|
const { styles: menuItem } = useStyles(props);
|
|
237
|
-
return (jsxs("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isDisabled && `menu-item_state_disabled`, directionClass && `menu-item_direction_${directionClass}`, className, (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc) &&
|
|
237
|
+
return (jsxs("div", { className: clsx('menu-item', easing && `easing_${easing}`, isActive && 'menu-item_state_active', isDisabled && `menu-item_state_disabled`, directionClass && `menu-item_direction_${directionClass}`, className, (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc) &&
|
|
238
238
|
'menu-item_label-icon', sizeClass && `menu-item_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, !isActive
|
|
239
239
|
? fillClass && `fill_${fillClass}`
|
|
240
240
|
: fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
|
|
@@ -242,7 +242,7 @@ function MenuItem(props) {
|
|
|
242
242
|
: fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass
|
|
243
243
|
? `shape-strength_${shapeStrengthClass}`
|
|
244
244
|
: shapeClass === 'rounded' && 'shape-strength_default', typeClass && `menu-item_type_${typeClass}`, widthClass && `width_${widthClass}`, justifyContentClass &&
|
|
245
|
-
`menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover:
|
|
245
|
+
`menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsx(Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", size: tooltipSize, fill: tooltipFill, left: "100%", zIndex: "100", title: tooltipTitle, titleColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize,
|
|
246
246
|
// centering="vertical"
|
|
247
247
|
shape: tooltipShape, shapeStrength: tooltipShapeStrength, isTooltipDisableState: true }))] }));
|
|
248
248
|
}
|
|
@@ -71,6 +71,40 @@ const paginationAppearanceAccent = {
|
|
|
71
71
|
},
|
|
72
72
|
};
|
|
73
73
|
|
|
74
|
+
const paginationAppearanceShape = {
|
|
75
|
+
circular: {
|
|
76
|
+
shape: 'circular',
|
|
77
|
+
},
|
|
78
|
+
rounded: {
|
|
79
|
+
fillInputShape: 'rounded',
|
|
80
|
+
pageCountDropdownShape: 'rounded',
|
|
81
|
+
},
|
|
82
|
+
roundedXL: {
|
|
83
|
+
fillInputShape: 'rounded',
|
|
84
|
+
fillInputShapeStrength: '2m',
|
|
85
|
+
pageCountDropdownShape: 'rounded',
|
|
86
|
+
pageCountDropdownShapeStrength: '2m'
|
|
87
|
+
},
|
|
88
|
+
roundedL: {
|
|
89
|
+
fillInputShape: 'rounded',
|
|
90
|
+
fillInputShapeStrength: '1_5m',
|
|
91
|
+
pageCountDropdownShape: 'rounded',
|
|
92
|
+
pageCountDropdownShapeStrength: '1_5m'
|
|
93
|
+
},
|
|
94
|
+
roundedM: {
|
|
95
|
+
fillInputShape: 'rounded',
|
|
96
|
+
fillInputShapeStrength: '1m',
|
|
97
|
+
pageCountDropdownShape: 'rounded',
|
|
98
|
+
pageCountDropdownShapeStrength: '1m'
|
|
99
|
+
},
|
|
100
|
+
roundedS: {
|
|
101
|
+
fillInputShape: 'rounded',
|
|
102
|
+
fillInputShapeStrength: '0_5m',
|
|
103
|
+
pageCountDropdownShape: 'rounded',
|
|
104
|
+
pageCountDropdownShapeStrength: '0_5m'
|
|
105
|
+
},
|
|
106
|
+
};
|
|
107
|
+
|
|
74
108
|
const paginationAppearanceSize = {
|
|
75
109
|
sizeL: {
|
|
76
110
|
size: 'l',
|
|
@@ -166,16 +200,21 @@ const paginationAppearanceSurface = {
|
|
|
166
200
|
surfacePrimary: {
|
|
167
201
|
fill: 'surfacePrimary',
|
|
168
202
|
fillHover: 'surfaceTertiary',
|
|
169
|
-
fillActive: '
|
|
170
|
-
fillActiveHover: '
|
|
203
|
+
fillActive: 'accentPrimary',
|
|
204
|
+
fillActiveHover: 'accentHoverPrimary',
|
|
171
205
|
fillInput: 'surfacePrimary',
|
|
206
|
+
fillInputHover: 'surfaceTertiary',
|
|
172
207
|
textColor: 'surfaceTextPrimary',
|
|
208
|
+
textColorHover: 'surfaceTextPrimary',
|
|
209
|
+
textColorActive: 'accentTextPrimary',
|
|
210
|
+
textColorActiveHover: 'accentTextPrimary',
|
|
173
211
|
builderIconFillIcon: 'surfaceItemPrimary',
|
|
174
212
|
nextIconFillIcon: 'surfaceItemPrimary',
|
|
175
213
|
pageCountDescTextColor: 'surfaceTextPrimary',
|
|
176
214
|
pageCountDropdownAlignment: 'topCenter',
|
|
177
215
|
pageCountDropdownElevation: 8,
|
|
178
216
|
pageCountDropdownFill: 'surfacePrimary',
|
|
217
|
+
pageCountDropdownFillHover: 'surfaceTertiary',
|
|
179
218
|
pageCountDropdownItemDividerFill: 'surfaceSecondary',
|
|
180
219
|
pageCountDropdownItemFill: 'surfacePrimary',
|
|
181
220
|
pageCountDropdownItemFillActive: 'accentPrimary',
|
|
@@ -186,7 +225,6 @@ const paginationAppearanceSurface = {
|
|
|
186
225
|
pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
|
|
187
226
|
pageCountDropdownItemLabelColorActiveHover: 'accentTextPrimary',
|
|
188
227
|
pageCountDropdownItemLabelColorHover: 'surfaceTextPrimary',
|
|
189
|
-
pageCountDropdownShape: 'rounded',
|
|
190
228
|
pageCountInputIconColor: 'surfaceItemPrimary',
|
|
191
229
|
pageCountInputTextColor: 'surfaceTextPrimary',
|
|
192
230
|
previousIconFillIcon: 'surfaceItemPrimary',
|
|
@@ -197,6 +235,7 @@ const paginationAppearance = {
|
|
|
197
235
|
...paginationAppearanceSurface,
|
|
198
236
|
...paginationAppearanceAccent,
|
|
199
237
|
...paginationAppearanceSize,
|
|
238
|
+
...paginationAppearanceShape,
|
|
200
239
|
...paginationAppearanceStyle,
|
|
201
240
|
};
|
|
202
241
|
|
|
@@ -266,15 +305,16 @@ function Pagination(props) {
|
|
|
266
305
|
}, [pageNumber]);
|
|
267
306
|
const appearanceConfig = useAppearanceConfig(appearance, paginationConfig, isDisabled);
|
|
268
307
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
269
|
-
const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, textColorClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
|
|
308
|
+
const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorClass, textColorHoverClass, textColorActiveClass, textColorActiveHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
|
|
270
309
|
const { styles: paginationStyles } = useStyles(props);
|
|
271
|
-
return (allItemsCount > perPageCount && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`,
|
|
310
|
+
return (allItemsCount > perPageCount && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass && `text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
|
|
311
|
+
`text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
|
|
272
312
|
`pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled",
|
|
273
313
|
// pages settings
|
|
274
|
-
forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`),
|
|
314
|
+
forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`),
|
|
275
315
|
// next button
|
|
276
|
-
nextLabel: jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
|
|
277
|
-
(() => (jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass &&
|
|
316
|
+
nextLabel: jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
|
|
317
|
+
(() => (jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsx(Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass && `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
|
|
278
318
|
pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
|
|
279
319
|
pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
|
|
280
320
|
}
|
|
@@ -253,79 +253,68 @@ const Response = urlWithAssetPrefix(function Response(props) {
|
|
|
253
253
|
});
|
|
254
254
|
|
|
255
255
|
const RESPONSE_MESSAGES = {
|
|
256
|
-
empty: {
|
|
257
|
-
appearance: 'refresh ghost',
|
|
258
|
-
title: ' Список пуст',
|
|
259
|
-
desc: 'Нет данных по заданным параметрам',
|
|
260
|
-
code: '500',
|
|
261
|
-
imageSrc: responseIcon.Empty,
|
|
262
|
-
primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
263
|
-
primaryButtonLabel: 'ОК',
|
|
264
|
-
},
|
|
265
256
|
error: {
|
|
266
257
|
appearance: 'error ghost',
|
|
267
258
|
title: 'Ошибка',
|
|
268
259
|
desc: 'Возникла проблема с обработкой вашего запроса. Повторите попытку позже или обратитесь в поддержку по электронной почте: support@example.com',
|
|
269
|
-
code: '500',
|
|
260
|
+
// code: '500',
|
|
270
261
|
imageSrc: responseIcon.Error,
|
|
271
262
|
primaryButtonAppearance: 'errorPrimary sizeXXL solid rounded',
|
|
272
263
|
primaryButtonLabel: 'ОК',
|
|
273
264
|
secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
274
265
|
secondaryButtonLabel: 'Отмена',
|
|
275
266
|
},
|
|
276
|
-
|
|
277
|
-
appearance: '
|
|
278
|
-
title: '
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
},
|
|
285
|
-
success: {
|
|
286
|
-
appearance: 'refresh ghost',
|
|
287
|
-
title: 'Готово',
|
|
288
|
-
desc: 'Успешно выполнено',
|
|
289
|
-
code: '500',
|
|
290
|
-
imageSrc: responseIcon.Success,
|
|
291
|
-
primaryButtonAppearance: 'successPrimary sizeXXL solid rounded',
|
|
292
|
-
primaryButtonLabel: 'ОК',
|
|
267
|
+
errorNetwork: {
|
|
268
|
+
appearance: 'unableLoadData ghost',
|
|
269
|
+
title: 'Ошибка соединения',
|
|
270
|
+
desc: 'Не удалось подключиться. Проверьте интернет-соединение и повторите попытку',
|
|
271
|
+
// code: null,
|
|
272
|
+
imageSrc: responseIcon.UnableLoadData,
|
|
273
|
+
primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
274
|
+
primaryButtonLabel: 'Обновить',
|
|
293
275
|
secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
294
|
-
secondaryButtonLabel: '
|
|
276
|
+
secondaryButtonLabel: 'Отмена',
|
|
295
277
|
},
|
|
296
278
|
nothingFound: {
|
|
297
279
|
appearance: 'refresh ghost',
|
|
298
280
|
title: 'Ничего не найдено',
|
|
299
281
|
desc: 'Нет данных по заданным параметрам',
|
|
300
|
-
code: '500',
|
|
282
|
+
// code: '500',
|
|
301
283
|
imageSrc: responseIcon.NothingFound,
|
|
302
284
|
primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
303
285
|
primaryButtonLabel: 'Сбросить',
|
|
304
286
|
secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
305
287
|
secondaryButtonLabel: 'Отмена',
|
|
306
288
|
},
|
|
307
|
-
|
|
308
|
-
appearance: '
|
|
309
|
-
title: '
|
|
310
|
-
desc: '
|
|
311
|
-
code: '
|
|
312
|
-
imageSrc: responseIcon.
|
|
289
|
+
empty: {
|
|
290
|
+
appearance: 'refresh ghost',
|
|
291
|
+
title: 'Список пуст',
|
|
292
|
+
desc: 'Нет данных по заданным параметрам',
|
|
293
|
+
code: '200',
|
|
294
|
+
imageSrc: responseIcon.Empty,
|
|
313
295
|
primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
314
|
-
primaryButtonLabel: '
|
|
315
|
-
secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
316
|
-
secondaryButtonLabel: 'Отмена',
|
|
296
|
+
primaryButtonLabel: 'ОК',
|
|
317
297
|
},
|
|
318
|
-
|
|
298
|
+
errorAccessDenied: {
|
|
319
299
|
appearance: 'unableLoadData ghost',
|
|
320
300
|
title: 'Доступ ограничен',
|
|
321
301
|
desc: 'Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com',
|
|
322
|
-
code: '403',
|
|
302
|
+
code: '401/403',
|
|
323
303
|
imageSrc: responseIcon.UnableLoadData,
|
|
324
304
|
primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
325
305
|
primaryButtonLabel: 'Повторить',
|
|
326
306
|
secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
327
307
|
secondaryButtonLabel: 'Отмена',
|
|
328
308
|
},
|
|
309
|
+
warning: {
|
|
310
|
+
appearance: 'warning ghost',
|
|
311
|
+
title: 'Внимание',
|
|
312
|
+
imageSrc: responseIcon.Warning,
|
|
313
|
+
primaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
|
|
314
|
+
primaryButtonLabel: 'Повторить',
|
|
315
|
+
secondaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
|
|
316
|
+
secondaryButtonLabel: 'Отмена',
|
|
317
|
+
},
|
|
329
318
|
};
|
|
330
319
|
|
|
331
320
|
export { RESPONSE_MESSAGES, Response, responseAppearance, responseConfig, responseIcon };
|
|
@@ -31,7 +31,7 @@ const segmentedAppearanceDefault = {
|
|
|
31
31
|
fillActiveHover: 'accentPrimary',
|
|
32
32
|
fillHover: 'surfaceSecondary',
|
|
33
33
|
labelTextActiveColor: 'accentTextPrimary',
|
|
34
|
-
|
|
34
|
+
labelTextActiveColorHover: 'accentTextPrimary',
|
|
35
35
|
labelTextColor: 'surfaceTextPrimary',
|
|
36
36
|
borderColor: 'surfaceBorderQuaternary',
|
|
37
37
|
iconAfterFill: 'surfaceItemQuaternary',
|
|
@@ -48,7 +48,7 @@ const segmentedAppearanceDefault = {
|
|
|
48
48
|
fillActiveHover: 'accentHoverPrimary',
|
|
49
49
|
fillHover: 'surfaceTertiary',
|
|
50
50
|
labelTextActiveColor: 'accentTextPrimary',
|
|
51
|
-
|
|
51
|
+
labelTextActiveColorHover: 'accentTextPrimary',
|
|
52
52
|
labelTextColor: 'surfaceTextPrimary',
|
|
53
53
|
borderColor: 'surfaceBorderQuaternary',
|
|
54
54
|
iconAfterFill: 'surfaceItemQuaternary',
|
|
@@ -171,7 +171,7 @@ const segmentedAppearanceSuccess = {
|
|
|
171
171
|
fillHover: 'successItemSecondary',
|
|
172
172
|
labelTextActiveColor: 'successTextPrimary',
|
|
173
173
|
labelTextColor: 'successTextSecondary',
|
|
174
|
-
|
|
174
|
+
labelTextColorHover: 'successTextPrimary',
|
|
175
175
|
borderColor: 'successBorderSecondary',
|
|
176
176
|
iconAfterFill: 'successItemSecondary',
|
|
177
177
|
iconAfterFillActive: 'successTertiary',
|
|
@@ -240,7 +240,7 @@ const Segmented = (props) => {
|
|
|
240
240
|
}, [activeSegment, segmentsRefs]);
|
|
241
241
|
const appearanceConfig = useAppearanceConfig(appearance, segmentedConfig, isDisabled);
|
|
242
242
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
243
|
-
const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor,
|
|
243
|
+
const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
244
244
|
return (jsx("div", { className: clsx(className, 'segmented', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `segmented_width_${widthClass}`, sizeClass && `segmented_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, isSkeleton && `segmented_skeleton`), ref: controlRef, children: jsx("div", { className: "segmented__wrapper", children: jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
|
|
245
245
|
const isActive = String(activeSegment?.value) === String(item.value);
|
|
246
246
|
return (jsx("div", { className: clsx('segmented__item', !item.label && 'segmented__item_icon', sizeClass && `segmented__item_size_${sizeClass}`, isActive && 'segmented__item_active', !isActive && isDisabled && 'segmented__item_state_disabled', isActive &&
|
|
@@ -252,7 +252,7 @@ const Segmented = (props) => {
|
|
|
252
252
|
fillActiveClass &&
|
|
253
253
|
`fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value), onClick: () => !isDisabled && onChangeValue(item), children: jsxs("div", { className: clsx('segmented__item-label', sizeClass && `segmented_size_${sizeClass}`), children: [item.iconBefore || item.iconBeforeActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
|
|
254
254
|
? item.iconBeforeActive || item.iconBefore
|
|
255
|
-
: item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover:
|
|
255
|
+
: item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
|
|
256
256
|
? item.iconAfterActive || item.iconAfter
|
|
257
257
|
: item.iconAfter, isActive: isActive, isDisabled: isDisabled })) : null] }) }, `${name}-${item.value}`));
|
|
258
258
|
}), jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && `fill_${indicatorFillClass}`) })] }) }) }));
|
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
justify-content: space-between;
|
|
5
5
|
align-items: center;
|
|
6
|
+
@media (--mobile) {
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
}
|
|
6
9
|
&__container {
|
|
7
10
|
padding: 0;
|
|
8
11
|
display: flex;
|
|
@@ -20,6 +23,7 @@
|
|
|
20
23
|
&__input {
|
|
21
24
|
position: relative;
|
|
22
25
|
display: flex;
|
|
26
|
+
transition: var(--paginator-input-transition);
|
|
23
27
|
justify-content: center;
|
|
24
28
|
align-items: center;
|
|
25
29
|
}
|
|
@@ -196,6 +200,8 @@
|
|
|
196
200
|
--paginator-item-disabled-text: var(--color-surface-text-primary);
|
|
197
201
|
--paginator-item-disabled-icon: var(--color-surface-item-disabled);
|
|
198
202
|
|
|
203
|
+
--paginator-input-transition: all 0.2s ease 0s;
|
|
204
|
+
|
|
199
205
|
--pagination-input-size-l-padding: 10px 12px;
|
|
200
206
|
--pagination-input-size-l-gap: 4px;
|
|
201
207
|
|
|
@@ -47,7 +47,7 @@ const formatState = (key) => {
|
|
|
47
47
|
// - matches "ActiveHover", "Active", "Hover" or "Disabled"
|
|
48
48
|
// - case-insensitive because of the /i flag
|
|
49
49
|
// Examples of matches:
|
|
50
|
-
// "
|
|
50
|
+
// "fillActiveColorHover" -> match[0] === "ActiveHover"
|
|
51
51
|
// "borderDisabled" -> match[0] === "Disabled"
|
|
52
52
|
const stateMatch = key.match(/(ActiveHover|Active|Hover|Disabled)/i);
|
|
53
53
|
if (!stateMatch) {
|
|
@@ -61,7 +61,7 @@ const formatState = (key) => {
|
|
|
61
61
|
// Disabled -> disabled
|
|
62
62
|
// The final .toLowerCase() ensures output is lowercased regardless of input casing.
|
|
63
63
|
// Examples:
|
|
64
|
-
// "
|
|
64
|
+
// "fillActiveColorHover" -> "_active_hover"
|
|
65
65
|
// "borderDisabled" -> "disabled"
|
|
66
66
|
return ('_' +
|
|
67
67
|
stateMatch[0]
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
declare const chipsAppearanceDisabled: {
|
|
2
2
|
disabled: {
|
|
3
3
|
fill: string;
|
|
4
|
+
fillHover: string;
|
|
5
|
+
labelTextActiveColor: string;
|
|
6
|
+
labelTextActiveColorHover: string;
|
|
4
7
|
labelTextColor: string;
|
|
8
|
+
labelTextColorHover: string;
|
|
5
9
|
borderColor: string;
|
|
6
10
|
iconAfterFillIcon: string;
|
|
7
11
|
iconBeforeFillIcon: string;
|
|
@@ -13,7 +13,7 @@ declare const chipsAppearanceSurface: {
|
|
|
13
13
|
fillHover: string;
|
|
14
14
|
labelTextActiveColor: string;
|
|
15
15
|
labelTextColor: string;
|
|
16
|
-
|
|
16
|
+
labelTextColorHover: string;
|
|
17
17
|
borderColor: string;
|
|
18
18
|
activeIconItemFill: string;
|
|
19
19
|
badgeAppearance: string;
|
|
@@ -29,7 +29,7 @@ declare const chipsAppearanceSurface: {
|
|
|
29
29
|
fillHover: string;
|
|
30
30
|
labelTextActiveColor: string;
|
|
31
31
|
labelTextColor: string;
|
|
32
|
-
|
|
32
|
+
labelTextColorHover: string;
|
|
33
33
|
borderColor: string;
|
|
34
34
|
iconAfterFillActiveIcon: string;
|
|
35
35
|
iconAfterFillIcon: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
|
|
2
|
-
import { AlignDirectionProps, AlignmentProps, AlignProps, AppearanceKeysDefault, DirectionProps, ElevationProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, SizeProps, TextAlignProps, TextColorActiveProps, TextColorHoverProps, TextColorProps, TextGradientProps, TextSizeProps,
|
|
2
|
+
import { AlignDirectionProps, AlignmentProps, AlignProps, AppearanceKeysDefault, DirectionProps, ElevationProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, SizeProps, TextAlignProps, TextColorActiveProps, TextColorHoverProps, TextColorProps, TextGradientProps, TextSizeProps, TextWeightProps, TextWrapProps, TypeProps, UnderlineProps, WidthProps } from '@itcase/types';
|
|
3
3
|
import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
|
|
4
4
|
export interface DropdownProps extends StyleAttributes {
|
|
5
5
|
[key: number | string | symbol]: any;
|
|
@@ -53,7 +53,6 @@ export interface DropdownItemProps extends DropdownItemThemeColor, StyleAttribut
|
|
|
53
53
|
desc?: string;
|
|
54
54
|
descTextColorHover?: TextColorHoverProps;
|
|
55
55
|
descTextGradient?: TextGradientProps;
|
|
56
|
-
descTextStyle?: TextStyleProps;
|
|
57
56
|
descTextWeight?: TextWeightProps;
|
|
58
57
|
descTextWrap?: TextWrapProps;
|
|
59
58
|
dividerDirection?: DirectionProps;
|
|
@@ -69,7 +68,6 @@ export interface DropdownItemProps extends DropdownItemThemeColor, StyleAttribut
|
|
|
69
68
|
labelTextColorActive?: TextColorActiveProps;
|
|
70
69
|
labelTextColorHover?: TextColorHoverProps;
|
|
71
70
|
labelTextGradient?: TextGradientProps;
|
|
72
|
-
labelTextStyle?: TextStyleProps;
|
|
73
71
|
labelTextWeight?: TextWeightProps;
|
|
74
72
|
labelTextWrap?: TextWrapProps;
|
|
75
73
|
link?: string;
|