@itcase/ui 1.8.130 → 1.8.131
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/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/Response.js +29 -40
- package/dist/components/Segmented.js +5 -5
- package/dist/css/components/Pagination/Pagination.css +3 -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/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 +1 -1
|
@@ -52,11 +52,15 @@ const chipsAppearanceDanger = {
|
|
|
52
52
|
|
|
53
53
|
const chipsAppearanceDisabled = {
|
|
54
54
|
disabled: {
|
|
55
|
-
fill: '
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
55
|
+
fill: 'surfaceSecondary',
|
|
56
|
+
fillHover: 'surfaceSecondary',
|
|
57
|
+
labelTextActiveColor: 'surfaceTextQuaternary',
|
|
58
|
+
labelTextActiveColorHover: 'surfaceTextQuaternary',
|
|
59
|
+
labelTextColor: 'surfaceTextQuaternary',
|
|
60
|
+
labelTextColorHover: 'surfaceTextQuaternary',
|
|
61
|
+
borderColor: 'disabledBorderPrimary',
|
|
62
|
+
iconAfterFillIcon: 'disabledItemPrimary',
|
|
63
|
+
iconBeforeFillIcon: 'disabledItemPrimary',
|
|
60
64
|
},
|
|
61
65
|
};
|
|
62
66
|
|
|
@@ -244,7 +248,7 @@ const chipsAppearanceSurface = {
|
|
|
244
248
|
fillHover: 'surfaceTertiary',
|
|
245
249
|
labelTextActiveColor: 'accentTextPrimary',
|
|
246
250
|
labelTextColor: 'surfaceTextPrimary',
|
|
247
|
-
|
|
251
|
+
labelTextColorHover: 'surfaceTextPrimary',
|
|
248
252
|
borderColor: 'surfaceBorderTertiary',
|
|
249
253
|
activeIconItemFill: 'surfaceItemSecondary',
|
|
250
254
|
badgeAppearance: 'surfacePrimary sizeXS solid',
|
|
@@ -260,7 +264,7 @@ const chipsAppearanceSurface = {
|
|
|
260
264
|
fillHover: 'surfaceTertiary',
|
|
261
265
|
labelTextActiveColor: 'accentTextPrimary',
|
|
262
266
|
labelTextColor: 'surfaceTextPrimary',
|
|
263
|
-
|
|
267
|
+
labelTextColorHover: 'surfaceTextPrimary',
|
|
264
268
|
borderColor: 'surfaceBorderSecondary',
|
|
265
269
|
iconAfterFillActiveIcon: 'accentItemPrimary',
|
|
266
270
|
iconAfterFillIcon: 'surfaceItemPrimary',
|
|
@@ -315,16 +319,16 @@ const chipsConfig = {
|
|
|
315
319
|
},
|
|
316
320
|
};
|
|
317
321
|
function Chips(props) {
|
|
318
|
-
const {
|
|
322
|
+
const { appearance, className, dataTestId, dataTour, label = '', iconAfter, iconAfterSrc, iconBefore, iconBeforeSrc, isActive, isDisabled, isSkeleton, onClick, onClickIconAfter, onClickIconBefore, children, } = props;
|
|
319
323
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, chipsConfig, isDisabled);
|
|
320
324
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
321
|
-
const { alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor,
|
|
325
|
+
const { alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, cursorClass, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
|
|
322
326
|
const { styles: chipsStyles } = useStyles.useStyles(props);
|
|
323
|
-
return (jsxRuntime.jsx("div", {
|
|
327
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'chips', !isActive
|
|
324
328
|
? fillClass && `fill_${fillClass}`
|
|
325
329
|
: fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
|
|
326
330
|
? fillHoverClass && `fill_hover_${fillHoverClass}`
|
|
327
|
-
: fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `chips_size_${sizeClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, isActive && 'chips_state_active', isDisabled && `chips_state_disabled`, cursorClass && `cursor_${cursorClass}`, onClick && 'cursor_type_pointer', isSkeleton && `chips_skeleton`), style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover:
|
|
331
|
+
: fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `chips_size_${sizeClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, isActive && 'chips_state_active', isDisabled && `chips_state_disabled`, cursorClass && `cursor_${cursorClass}`, onClick && 'cursor_type_pointer', isSkeleton && `chips_skeleton`), "data-test-id": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, isActive: isActive, onClick: onClickIconAfter })), badgeValue && (jsxRuntime.jsx(Icon.Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
|
|
328
332
|
}
|
|
329
333
|
|
|
330
334
|
function ChipsGroup(props) {
|
|
@@ -50,11 +50,15 @@ const chipsAppearanceDanger = {
|
|
|
50
50
|
|
|
51
51
|
const chipsAppearanceDisabled = {
|
|
52
52
|
disabled: {
|
|
53
|
-
fill: '
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
fill: 'surfaceSecondary',
|
|
54
|
+
fillHover: 'surfaceSecondary',
|
|
55
|
+
labelTextActiveColor: 'surfaceTextQuaternary',
|
|
56
|
+
labelTextActiveColorHover: 'surfaceTextQuaternary',
|
|
57
|
+
labelTextColor: 'surfaceTextQuaternary',
|
|
58
|
+
labelTextColorHover: 'surfaceTextQuaternary',
|
|
59
|
+
borderColor: 'disabledBorderPrimary',
|
|
60
|
+
iconAfterFillIcon: 'disabledItemPrimary',
|
|
61
|
+
iconBeforeFillIcon: 'disabledItemPrimary',
|
|
58
62
|
},
|
|
59
63
|
};
|
|
60
64
|
|
|
@@ -242,7 +246,7 @@ const chipsAppearanceSurface = {
|
|
|
242
246
|
fillHover: 'surfaceTertiary',
|
|
243
247
|
labelTextActiveColor: 'accentTextPrimary',
|
|
244
248
|
labelTextColor: 'surfaceTextPrimary',
|
|
245
|
-
|
|
249
|
+
labelTextColorHover: 'surfaceTextPrimary',
|
|
246
250
|
borderColor: 'surfaceBorderTertiary',
|
|
247
251
|
activeIconItemFill: 'surfaceItemSecondary',
|
|
248
252
|
badgeAppearance: 'surfacePrimary sizeXS solid',
|
|
@@ -258,7 +262,7 @@ const chipsAppearanceSurface = {
|
|
|
258
262
|
fillHover: 'surfaceTertiary',
|
|
259
263
|
labelTextActiveColor: 'accentTextPrimary',
|
|
260
264
|
labelTextColor: 'surfaceTextPrimary',
|
|
261
|
-
|
|
265
|
+
labelTextColorHover: 'surfaceTextPrimary',
|
|
262
266
|
borderColor: 'surfaceBorderSecondary',
|
|
263
267
|
iconAfterFillActiveIcon: 'accentItemPrimary',
|
|
264
268
|
iconAfterFillIcon: 'surfaceItemPrimary',
|
|
@@ -313,16 +317,16 @@ const chipsConfig = {
|
|
|
313
317
|
},
|
|
314
318
|
};
|
|
315
319
|
function Chips(props) {
|
|
316
|
-
const {
|
|
320
|
+
const { appearance, className, dataTestId, dataTour, label = '', iconAfter, iconAfterSrc, iconBefore, iconBeforeSrc, isActive, isDisabled, isSkeleton, onClick, onClickIconAfter, onClickIconBefore, children, } = props;
|
|
317
321
|
const appearanceConfig = useAppearanceConfig(appearance, chipsConfig, isDisabled);
|
|
318
322
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
319
|
-
const { alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor,
|
|
323
|
+
const { alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, cursorClass, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
|
|
320
324
|
const { styles: chipsStyles } = useStyles(props);
|
|
321
|
-
return (jsx("div", {
|
|
325
|
+
return (jsx("div", { className: clsx(className, 'chips', !isActive
|
|
322
326
|
? fillClass && `fill_${fillClass}`
|
|
323
327
|
: fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
|
|
324
328
|
? fillHoverClass && `fill_hover_${fillHoverClass}`
|
|
325
|
-
: fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `chips_size_${sizeClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, isActive && 'chips_state_active', isDisabled && `chips_state_disabled`, cursorClass && `cursor_${cursorClass}`, onClick && 'cursor_type_pointer', isSkeleton && `chips_skeleton`), style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover:
|
|
329
|
+
: fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `chips_size_${sizeClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, isActive && 'chips_state_active', isDisabled && `chips_state_disabled`, cursorClass && `cursor_${cursorClass}`, onClick && 'cursor_type_pointer', isSkeleton && `chips_skeleton`), "data-test-id": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, isActive: isActive, onClick: onClickIconAfter })), badgeValue && (jsx(Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
|
|
326
330
|
}
|
|
327
331
|
|
|
328
332
|
function ChipsGroup(props) {
|
|
@@ -7,7 +7,7 @@ var common = require('@itcase/common');
|
|
|
7
7
|
var DatePicker = require('../../DatePicker_cjs_BLOiIsfD.js');
|
|
8
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
|
-
var ChipsGroup = require('../../
|
|
10
|
+
var ChipsGroup = require('../../ChipsGroup_cjs_Du8WHI-Y.js');
|
|
11
11
|
require('date-fns/locale');
|
|
12
12
|
require('react-datepicker');
|
|
13
13
|
require('../hooks/useStyles/useStyles.js');
|
|
@@ -169,13 +169,13 @@ const menuItemAppearanceSurface = {
|
|
|
169
169
|
},
|
|
170
170
|
surfacePrimary: {
|
|
171
171
|
fill: 'surfacePrimary',
|
|
172
|
-
fillActive: '
|
|
173
|
-
fillActiveHover: '
|
|
174
|
-
fillHover: '
|
|
175
|
-
labelTextActiveColor: '
|
|
176
|
-
|
|
172
|
+
fillActive: 'surfaceSecondary',
|
|
173
|
+
fillActiveHover: 'surfaceTertiary',
|
|
174
|
+
fillHover: 'surfaceSecondary',
|
|
175
|
+
labelTextActiveColor: 'surfaceTextPrimary',
|
|
176
|
+
labelTextActiveColorHover: 'surfaceTextPrimary',
|
|
177
177
|
labelTextColor: 'surfaceTextPrimary',
|
|
178
|
-
|
|
178
|
+
labelTextColorHover: 'surfaceTextPrimary',
|
|
179
179
|
borderColor: 'surfaceBorderQuaternary',
|
|
180
180
|
iconAfterFillIcon: 'surfaceItemPrimary',
|
|
181
181
|
iconBeforeFillIcon: 'surfaceItemPrimary',
|
|
@@ -191,7 +191,7 @@ const menuItemAppearanceSurface = {
|
|
|
191
191
|
fillActiveHover: 'surfaceHover',
|
|
192
192
|
fillHover: 'surfaceSecondary',
|
|
193
193
|
labelTextActiveColor: 'accentTextSecondary',
|
|
194
|
-
|
|
194
|
+
labelTextActiveColorHover: 'surfaceTextPrimary',
|
|
195
195
|
borderColor: 'surfaceBorderQuaternary',
|
|
196
196
|
iconAfterFillIcon: 'surfaceItemPrimary',
|
|
197
197
|
iconBeforeFillIcon: 'surfaceItemPrimary',
|
|
@@ -219,7 +219,7 @@ const menuItemConfig = {
|
|
|
219
219
|
},
|
|
220
220
|
};
|
|
221
221
|
function MenuItem(props) {
|
|
222
|
-
const { appearance, className, label, href, link, LinkComponent, rel, showTooltip, target, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
|
|
222
|
+
const { appearance, className, label, href, link, LinkComponent, rel, showTooltip, target, easing, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
|
|
223
223
|
const tooltipRef = React.useRef(null);
|
|
224
224
|
const onMouseEnter = React.useCallback(() => {
|
|
225
225
|
if (showTooltip) {
|
|
@@ -233,10 +233,10 @@ function MenuItem(props) {
|
|
|
233
233
|
}, [showTooltip]);
|
|
234
234
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, menuItemConfig, isDisabled);
|
|
235
235
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
236
|
-
const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass,
|
|
236
|
+
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;
|
|
237
237
|
// @ts-expect-error
|
|
238
238
|
const { styles: menuItem } = useStyles.useStyles(props);
|
|
239
|
-
return (jsxRuntime.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) &&
|
|
239
|
+
return (jsxRuntime.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) &&
|
|
240
240
|
'menu-item_label-icon', sizeClass && `menu-item_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, !isActive
|
|
241
241
|
? fillClass && `fill_${fillClass}`
|
|
242
242
|
: fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
|
|
@@ -244,7 +244,7 @@ function MenuItem(props) {
|
|
|
244
244
|
: fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass
|
|
245
245
|
? `shape-strength_${shapeStrengthClass}`
|
|
246
246
|
: shapeClass === 'rounded' && 'shape-strength_default', typeClass && `menu-item_type_${typeClass}`, widthClass && `width_${widthClass}`, justifyContentClass &&
|
|
247
|
-
`menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxRuntime.jsxs(Link.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 || (jsxRuntime.jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.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 && (jsxRuntime.jsx(Text.Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover:
|
|
247
|
+
`menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxRuntime.jsxs(Link.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 || (jsxRuntime.jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.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 && (jsxRuntime.jsx(Text.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) && (jsxRuntime.jsx(Icon.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 && (jsxRuntime.jsx(Icon.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,
|
|
248
248
|
// centering="vertical"
|
|
249
249
|
shape: tooltipShape, shapeStrength: tooltipShapeStrength, isTooltipDisableState: true }))] }));
|
|
250
250
|
}
|
|
@@ -255,79 +255,68 @@ const Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props)
|
|
|
255
255
|
});
|
|
256
256
|
|
|
257
257
|
const RESPONSE_MESSAGES = {
|
|
258
|
-
empty: {
|
|
259
|
-
appearance: 'refresh ghost',
|
|
260
|
-
title: ' Список пуст',
|
|
261
|
-
desc: 'Нет данных по заданным параметрам',
|
|
262
|
-
code: '500',
|
|
263
|
-
imageSrc: index.responseIcon.Empty,
|
|
264
|
-
primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
265
|
-
primaryButtonLabel: 'ОК',
|
|
266
|
-
},
|
|
267
258
|
error: {
|
|
268
259
|
appearance: 'error ghost',
|
|
269
260
|
title: 'Ошибка',
|
|
270
261
|
desc: 'Возникла проблема с обработкой вашего запроса. Повторите попытку позже или обратитесь в поддержку по электронной почте: support@example.com',
|
|
271
|
-
code: '500',
|
|
262
|
+
// code: '500',
|
|
272
263
|
imageSrc: index.responseIcon.Error,
|
|
273
264
|
primaryButtonAppearance: 'errorPrimary sizeXXL solid rounded',
|
|
274
265
|
primaryButtonLabel: 'ОК',
|
|
275
266
|
secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
276
267
|
secondaryButtonLabel: 'Отмена',
|
|
277
268
|
},
|
|
278
|
-
|
|
279
|
-
appearance: '
|
|
280
|
-
title: '
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
},
|
|
287
|
-
success: {
|
|
288
|
-
appearance: 'refresh ghost',
|
|
289
|
-
title: 'Готово',
|
|
290
|
-
desc: 'Успешно выполнено',
|
|
291
|
-
code: '500',
|
|
292
|
-
imageSrc: index.responseIcon.Success,
|
|
293
|
-
primaryButtonAppearance: 'successPrimary sizeXXL solid rounded',
|
|
294
|
-
primaryButtonLabel: 'ОК',
|
|
269
|
+
errorNetwork: {
|
|
270
|
+
appearance: 'unableLoadData ghost',
|
|
271
|
+
title: 'Ошибка соединения',
|
|
272
|
+
desc: 'Не удалось подключиться. Проверьте интернет-соединение и повторите попытку',
|
|
273
|
+
// code: null,
|
|
274
|
+
imageSrc: index.responseIcon.UnableLoadData,
|
|
275
|
+
primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
276
|
+
primaryButtonLabel: 'Обновить',
|
|
295
277
|
secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
296
|
-
secondaryButtonLabel: '
|
|
278
|
+
secondaryButtonLabel: 'Отмена',
|
|
297
279
|
},
|
|
298
280
|
nothingFound: {
|
|
299
281
|
appearance: 'refresh ghost',
|
|
300
282
|
title: 'Ничего не найдено',
|
|
301
283
|
desc: 'Нет данных по заданным параметрам',
|
|
302
|
-
code: '500',
|
|
284
|
+
// code: '500',
|
|
303
285
|
imageSrc: index.responseIcon.NothingFound,
|
|
304
286
|
primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
305
287
|
primaryButtonLabel: 'Сбросить',
|
|
306
288
|
secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
307
289
|
secondaryButtonLabel: 'Отмена',
|
|
308
290
|
},
|
|
309
|
-
|
|
310
|
-
appearance: '
|
|
311
|
-
title: '
|
|
312
|
-
desc: '
|
|
313
|
-
code: '
|
|
314
|
-
imageSrc: index.responseIcon.
|
|
291
|
+
empty: {
|
|
292
|
+
appearance: 'refresh ghost',
|
|
293
|
+
title: 'Список пуст',
|
|
294
|
+
desc: 'Нет данных по заданным параметрам',
|
|
295
|
+
code: '200',
|
|
296
|
+
imageSrc: index.responseIcon.Empty,
|
|
315
297
|
primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
316
|
-
primaryButtonLabel: '
|
|
317
|
-
secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
318
|
-
secondaryButtonLabel: 'Отмена',
|
|
298
|
+
primaryButtonLabel: 'ОК',
|
|
319
299
|
},
|
|
320
|
-
|
|
300
|
+
errorAccessDenied: {
|
|
321
301
|
appearance: 'unableLoadData ghost',
|
|
322
302
|
title: 'Доступ ограничен',
|
|
323
303
|
desc: 'Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com',
|
|
324
|
-
code: '403',
|
|
304
|
+
code: '401/403',
|
|
325
305
|
imageSrc: index.responseIcon.UnableLoadData,
|
|
326
306
|
primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
327
307
|
primaryButtonLabel: 'Повторить',
|
|
328
308
|
secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
329
309
|
secondaryButtonLabel: 'Отмена',
|
|
330
310
|
},
|
|
311
|
+
warning: {
|
|
312
|
+
appearance: 'warning ghost',
|
|
313
|
+
title: 'Внимание',
|
|
314
|
+
imageSrc: index.responseIcon.Warning,
|
|
315
|
+
primaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
|
|
316
|
+
primaryButtonLabel: 'Повторить',
|
|
317
|
+
secondaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
|
|
318
|
+
secondaryButtonLabel: 'Отмена',
|
|
319
|
+
},
|
|
331
320
|
};
|
|
332
321
|
|
|
333
322
|
exports.responseIcon = index.responseIcon;
|
|
@@ -33,7 +33,7 @@ const segmentedAppearanceDefault = {
|
|
|
33
33
|
fillActiveHover: 'accentPrimary',
|
|
34
34
|
fillHover: 'surfaceSecondary',
|
|
35
35
|
labelTextActiveColor: 'accentTextPrimary',
|
|
36
|
-
|
|
36
|
+
labelTextActiveColorHover: 'accentTextPrimary',
|
|
37
37
|
labelTextColor: 'surfaceTextPrimary',
|
|
38
38
|
borderColor: 'surfaceBorderQuaternary',
|
|
39
39
|
iconAfterFill: 'surfaceItemQuaternary',
|
|
@@ -50,7 +50,7 @@ const segmentedAppearanceDefault = {
|
|
|
50
50
|
fillActiveHover: 'accentHoverPrimary',
|
|
51
51
|
fillHover: 'surfaceTertiary',
|
|
52
52
|
labelTextActiveColor: 'accentTextPrimary',
|
|
53
|
-
|
|
53
|
+
labelTextActiveColorHover: 'accentTextPrimary',
|
|
54
54
|
labelTextColor: 'surfaceTextPrimary',
|
|
55
55
|
borderColor: 'surfaceBorderQuaternary',
|
|
56
56
|
iconAfterFill: 'surfaceItemQuaternary',
|
|
@@ -173,7 +173,7 @@ const segmentedAppearanceSuccess = {
|
|
|
173
173
|
fillHover: 'successItemSecondary',
|
|
174
174
|
labelTextActiveColor: 'successTextPrimary',
|
|
175
175
|
labelTextColor: 'successTextSecondary',
|
|
176
|
-
|
|
176
|
+
labelTextColorHover: 'successTextPrimary',
|
|
177
177
|
borderColor: 'successBorderSecondary',
|
|
178
178
|
iconAfterFill: 'successItemSecondary',
|
|
179
179
|
iconAfterFillActive: 'successTertiary',
|
|
@@ -242,7 +242,7 @@ const Segmented = (props) => {
|
|
|
242
242
|
}, [activeSegment, segmentsRefs]);
|
|
243
243
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, segmentedConfig, isDisabled);
|
|
244
244
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
245
|
-
const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor,
|
|
245
|
+
const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
246
246
|
return (jsxRuntime.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: jsxRuntime.jsx("div", { className: "segmented__wrapper", children: jsxRuntime.jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
|
|
247
247
|
const isActive = String(activeSegment?.value) === String(item.value);
|
|
248
248
|
return (jsxRuntime.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 &&
|
|
@@ -254,7 +254,7 @@ const Segmented = (props) => {
|
|
|
254
254
|
fillActiveClass &&
|
|
255
255
|
`fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value), onClick: () => !isDisabled && onChangeValue(item), children: jsxRuntime.jsxs("div", { className: clsx('segmented__item-label', sizeClass && `segmented_size_${sizeClass}`), children: [item.iconBefore || item.iconBeforeActive ? (jsxRuntime.jsx(Icon.Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
|
|
256
256
|
? item.iconBeforeActive || item.iconBefore
|
|
257
|
-
: item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover:
|
|
257
|
+
: item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsxRuntime.jsx(Icon.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 ? (jsxRuntime.jsx(Icon.Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
|
|
258
258
|
? item.iconAfterActive || item.iconAfter
|
|
259
259
|
: item.iconAfter, isActive: isActive, isDisabled: isDisabled })) : null] }) }, `${name}-${item.value}`));
|
|
260
260
|
}), jsxRuntime.jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && `fill_${indicatorFillClass}`) })] }) }) }));
|
|
@@ -49,7 +49,7 @@ const formatState = (key) => {
|
|
|
49
49
|
// - matches "ActiveHover", "Active", "Hover" or "Disabled"
|
|
50
50
|
// - case-insensitive because of the /i flag
|
|
51
51
|
// Examples of matches:
|
|
52
|
-
// "
|
|
52
|
+
// "fillActiveColorHover" -> match[0] === "ActiveHover"
|
|
53
53
|
// "borderDisabled" -> match[0] === "Disabled"
|
|
54
54
|
const stateMatch = key.match(/(ActiveHover|Active|Hover|Disabled)/i);
|
|
55
55
|
if (!stateMatch) {
|
|
@@ -63,7 +63,7 @@ const formatState = (key) => {
|
|
|
63
63
|
// Disabled -> disabled
|
|
64
64
|
// The final .toLowerCase() ensures output is lowercased regardless of input casing.
|
|
65
65
|
// Examples:
|
|
66
|
-
// "
|
|
66
|
+
// "fillActiveColorHover" -> "_active_hover"
|
|
67
67
|
// "borderDisabled" -> "disabled"
|
|
68
68
|
return ('_' +
|
|
69
69
|
stateMatch[0]
|
package/dist/components/Chips.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../
|
|
1
|
+
export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_CzVlqaHv.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'clsx';
|
|
4
4
|
import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
@@ -5,7 +5,7 @@ import { DATE_PERIOD_INTERVALS } from '@itcase/common';
|
|
|
5
5
|
import { D as DatePickerInput } from '../DatePicker_es_VslTy9Qw.js';
|
|
6
6
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
7
7
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
|
-
import { b as ChipsGroup, C as Chips } from '../
|
|
8
|
+
import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_CzVlqaHv.js';
|
|
9
9
|
import 'date-fns/locale';
|
|
10
10
|
import 'react-datepicker';
|
|
11
11
|
import '../hooks/useStyles/useStyles.js';
|
|
@@ -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
|
}
|
|
@@ -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 };
|