@itcase/ui 1.8.57 → 1.8.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Avatar_cjs_CxyEa4gB.js → Avatar_cjs_-cKfA1OW.js} +28 -3
- package/dist/{Avatar_es_DQTyqtKx.js → Avatar_es_CSKFNChm.js} +28 -3
- package/dist/{DropdownItem_cjs_BtL83PeZ.js → DropdownItem_cjs_DdjN_gRH.js} +3 -3
- package/dist/{DropdownItem_es_BK2bacxA.js → DropdownItem_es_DfEoMbef.js} +3 -3
- package/dist/cjs/components/Accordion.js +7 -7
- package/dist/cjs/components/Avatar.js +1 -1
- package/dist/cjs/components/AvatarStack.js +1 -1
- package/dist/cjs/components/Dropdown.js +1 -1
- package/dist/cjs/components/Logo.js +3 -3
- package/dist/cjs/components/MenuItem.js +18 -4
- package/dist/cjs/components/Pagination.js +1 -1
- package/dist/cjs/components/Response.js +8 -16
- package/dist/cjs/hoc/urlWithAssetPrefix.js +3 -4
- package/dist/components/Accordion.js +7 -7
- package/dist/components/Avatar.js +1 -1
- package/dist/components/AvatarStack.js +1 -1
- package/dist/components/Dropdown.js +1 -1
- package/dist/components/Logo.js +3 -3
- package/dist/components/MenuItem.js +20 -6
- package/dist/components/Pagination.js +1 -1
- package/dist/components/Response.js +8 -16
- package/dist/css/components/Avatar/Avatar.css +0 -22
- package/dist/css/components/MenuItem/MenuItem.css +2 -1
- package/dist/css/components/Swiper/Swiper.css +3 -1
- package/dist/css/styles/align/align_horizontal-reverse.css +20 -5
- package/dist/css/styles/align/align_horizontal.css +24 -8
- package/dist/css/styles/align/align_vertical-reverse.css +19 -7
- package/dist/css/styles/align/align_vertical.css +22 -7
- package/dist/hoc/urlWithAssetPrefix.js +3 -4
- package/dist/stories/Overview.mdx +1 -1
- package/dist/stories/Playground.mdx +1 -1
- package/dist/types/components/Accordion/appearance/accordionSize.d.ts +7 -7
- package/dist/types/components/Avatar/appearance/avatarShape.d.ts +25 -0
- package/dist/types/components/MenuItem/MenuItem.interface.d.ts +1 -1
- package/dist/types/components/MenuItem/appearance/menuItemSurface.d.ts +1 -0
- package/package.json +4 -4
|
@@ -30,6 +30,31 @@ var avatarAppearanceDefault = {
|
|
|
30
30
|
},
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
+
var avatarAppearanceShape = {
|
|
34
|
+
circular: {
|
|
35
|
+
shape: 'circular',
|
|
36
|
+
},
|
|
37
|
+
rounded: {
|
|
38
|
+
shape: 'rounded',
|
|
39
|
+
},
|
|
40
|
+
roundedL: {
|
|
41
|
+
shape: 'rounded',
|
|
42
|
+
shapeStrength: '1_5m',
|
|
43
|
+
},
|
|
44
|
+
roundedM: {
|
|
45
|
+
shape: 'rounded',
|
|
46
|
+
shapeStrength: '1m',
|
|
47
|
+
},
|
|
48
|
+
roundedS: {
|
|
49
|
+
shape: 'rounded',
|
|
50
|
+
shapeStrength: '0_5m',
|
|
51
|
+
},
|
|
52
|
+
roundedXL: {
|
|
53
|
+
shape: 'rounded',
|
|
54
|
+
shapeStrength: '2m',
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
|
|
33
58
|
var avatarAppearanceSize = {
|
|
34
59
|
size16: {
|
|
35
60
|
size: '16',
|
|
@@ -130,7 +155,7 @@ var avatarAppearanceStyle = {
|
|
|
130
155
|
},
|
|
131
156
|
};
|
|
132
157
|
|
|
133
|
-
var avatarAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, avatarAppearanceSize), avatarAppearanceStyle), avatarAppearanceDefault);
|
|
158
|
+
var avatarAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, avatarAppearanceSize), avatarAppearanceStyle), avatarAppearanceShape), avatarAppearanceDefault);
|
|
134
159
|
|
|
135
160
|
var avatarConfig = {
|
|
136
161
|
appearance: avatarAppearance,
|
|
@@ -147,8 +172,8 @@ function Avatar(props) {
|
|
|
147
172
|
}, [firstName, secondName]);
|
|
148
173
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, avatarConfig);
|
|
149
174
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
150
|
-
var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, textWeight = propsGenerator.textWeight, badge = propsGenerator.badge, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, placeholderUrl = propsGenerator.placeholderUrl, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
|
|
151
|
-
return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar',
|
|
175
|
+
var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, textWeight = propsGenerator.textWeight, badge = propsGenerator.badge, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, placeholderUrl = propsGenerator.placeholderUrl, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
|
|
176
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', size && "avatar_size_".concat(sizeClass), type && "avatar_type_".concat(type), (badgeValue || badgeAppearance || badgeSize) && 'avatar_status', isSkeleton && "avatar_skeleton", onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: clsx('avatar__image', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), src: src, placeholderUrl: placeholderUrl })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__text", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars || count })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (badge || badgeValue) && (jsxRuntime.jsx(Icon.Badge, { className: "avatar__badge", appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), after] }) }));
|
|
152
177
|
}
|
|
153
178
|
|
|
154
179
|
exports.Avatar = Avatar;
|
|
@@ -28,6 +28,31 @@ var avatarAppearanceDefault = {
|
|
|
28
28
|
},
|
|
29
29
|
};
|
|
30
30
|
|
|
31
|
+
var avatarAppearanceShape = {
|
|
32
|
+
circular: {
|
|
33
|
+
shape: 'circular',
|
|
34
|
+
},
|
|
35
|
+
rounded: {
|
|
36
|
+
shape: 'rounded',
|
|
37
|
+
},
|
|
38
|
+
roundedL: {
|
|
39
|
+
shape: 'rounded',
|
|
40
|
+
shapeStrength: '1_5m',
|
|
41
|
+
},
|
|
42
|
+
roundedM: {
|
|
43
|
+
shape: 'rounded',
|
|
44
|
+
shapeStrength: '1m',
|
|
45
|
+
},
|
|
46
|
+
roundedS: {
|
|
47
|
+
shape: 'rounded',
|
|
48
|
+
shapeStrength: '0_5m',
|
|
49
|
+
},
|
|
50
|
+
roundedXL: {
|
|
51
|
+
shape: 'rounded',
|
|
52
|
+
shapeStrength: '2m',
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
|
|
31
56
|
var avatarAppearanceSize = {
|
|
32
57
|
size16: {
|
|
33
58
|
size: '16',
|
|
@@ -128,7 +153,7 @@ var avatarAppearanceStyle = {
|
|
|
128
153
|
},
|
|
129
154
|
};
|
|
130
155
|
|
|
131
|
-
var avatarAppearance = __assign(__assign(__assign({}, avatarAppearanceSize), avatarAppearanceStyle), avatarAppearanceDefault);
|
|
156
|
+
var avatarAppearance = __assign(__assign(__assign(__assign({}, avatarAppearanceSize), avatarAppearanceStyle), avatarAppearanceShape), avatarAppearanceDefault);
|
|
132
157
|
|
|
133
158
|
var avatarConfig = {
|
|
134
159
|
appearance: avatarAppearance,
|
|
@@ -145,8 +170,8 @@ function Avatar(props) {
|
|
|
145
170
|
}, [firstName, secondName]);
|
|
146
171
|
var appearanceConfig = useAppearanceConfig(appearance, avatarConfig);
|
|
147
172
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
148
|
-
var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, textWeight = propsGenerator.textWeight, badge = propsGenerator.badge, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, placeholderUrl = propsGenerator.placeholderUrl, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
|
|
149
|
-
return (jsx("div", { className: clsx(className, 'avatar',
|
|
173
|
+
var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, textWeight = propsGenerator.textWeight, badge = propsGenerator.badge, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, placeholderUrl = propsGenerator.placeholderUrl, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
|
|
174
|
+
return (jsx("div", { className: clsx(className, 'avatar', size && "avatar_size_".concat(sizeClass), type && "avatar_type_".concat(type), (badgeValue || badgeAppearance || badgeSize) && 'avatar_status', isSkeleton && "avatar_skeleton", onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxs("div", { className: clsx('avatar__wrapper', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsx(Image, { className: clsx('avatar__image', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), src: src, placeholderUrl: placeholderUrl })) : (jsx(Text, { className: "avatar__text", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars || count })), (icon || iconSrc) && (jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (badge || badgeValue) && (jsx(Badge, { className: "avatar__badge", appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), after] }) }));
|
|
150
175
|
}
|
|
151
176
|
|
|
152
177
|
export { Avatar as A, avatarConfig as a, avatarAppearance as b };
|
|
@@ -150,7 +150,7 @@ var dropdownAppearanceSurface = {
|
|
|
150
150
|
surfacePrimary: {
|
|
151
151
|
fill: 'surfacePrimary',
|
|
152
152
|
fillActive: 'surfacePrimaryActive',
|
|
153
|
-
fillHover: '
|
|
153
|
+
fillHover: 'surfaceHoverPrimary',
|
|
154
154
|
labelTextColor: 'surfaceTextPrimary',
|
|
155
155
|
labelTextColorActive: 'surfaceTextPrimary',
|
|
156
156
|
labelTextColorActiveHover: 'surfaceTextPrimary',
|
|
@@ -189,7 +189,7 @@ var dropdownItemConfig = {
|
|
|
189
189
|
},
|
|
190
190
|
};
|
|
191
191
|
function DropdownItem(props) {
|
|
192
|
-
var className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, badgeValue = props.badgeValue, emptyMessage = props.emptyMessage, showDivider = props.showDivider, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, isSkeleton = props.isSkeleton,
|
|
192
|
+
var className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, badgeValue = props.badgeValue, emptyMessage = props.emptyMessage, showDivider = props.showDivider, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, isSkeleton = props.isSkeleton, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
|
|
193
193
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, dropdownItemConfig);
|
|
194
194
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
195
195
|
var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextAlign = propsGenerator.labelTextAlign, labelTextColor = propsGenerator.labelTextColor, labelTextColorActive = propsGenerator.labelTextColorActive, labelTextColorActiveHover = propsGenerator.labelTextColorActiveHover, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, descTextColor = propsGenerator.descTextColor, descTextColorHover = propsGenerator.descTextColorHover, descTextGradient = propsGenerator.descTextGradient, descTextSize = propsGenerator.descTextSize, descTextStyle = propsGenerator.descTextStyle, descTextWeight = propsGenerator.descTextWeight, descTextWrap = propsGenerator.descTextWrap, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, emptyMessageTextColor = propsGenerator.emptyMessageTextColor, emptyMessageTextColorHover = propsGenerator.emptyMessageTextColorHover, emptyMessageTextSize = propsGenerator.emptyMessageTextSize, emptyMessageTextStyle = propsGenerator.emptyMessageTextStyle, emptyMessageTextWeight = propsGenerator.emptyMessageTextWeight, emptyMessageTextWrap = propsGenerator.emptyMessageTextWrap, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
@@ -199,7 +199,7 @@ function DropdownItem(props) {
|
|
|
199
199
|
? fillClass && "fill_".concat(fillClass)
|
|
200
200
|
: fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
|
|
201
201
|
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
202
|
-
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), widthClass && "dropdown__item_width_".concat(widthClass), isDisabled && "dropdown__item_state_disabled", onClick && 'cursor_type_pointer',
|
|
202
|
+
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), widthClass && "dropdown__item_width_".concat(widthClass), isDisabled && "dropdown__item_state_disabled", onClick && 'cursor_type_pointer', isSkeleton && "dropdown__item_skeleton", justifyContentClass &&
|
|
203
203
|
"dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: !isActive && labelTextColor, textColorActive: "accentTextPrimary", textColorActive: isActive && labelTextColorActive, textColorHover: !isActive && labelTextColorHover, textColorHoverActive: isActive && labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (jsxRuntime.jsx(Icon.Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
|
|
204
204
|
}
|
|
205
205
|
|
|
@@ -148,7 +148,7 @@ var dropdownAppearanceSurface = {
|
|
|
148
148
|
surfacePrimary: {
|
|
149
149
|
fill: 'surfacePrimary',
|
|
150
150
|
fillActive: 'surfacePrimaryActive',
|
|
151
|
-
fillHover: '
|
|
151
|
+
fillHover: 'surfaceHoverPrimary',
|
|
152
152
|
labelTextColor: 'surfaceTextPrimary',
|
|
153
153
|
labelTextColorActive: 'surfaceTextPrimary',
|
|
154
154
|
labelTextColorActiveHover: 'surfaceTextPrimary',
|
|
@@ -187,7 +187,7 @@ var dropdownItemConfig = {
|
|
|
187
187
|
},
|
|
188
188
|
};
|
|
189
189
|
function DropdownItem(props) {
|
|
190
|
-
var className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, badgeValue = props.badgeValue, emptyMessage = props.emptyMessage, showDivider = props.showDivider, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, isSkeleton = props.isSkeleton,
|
|
190
|
+
var className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, badgeValue = props.badgeValue, emptyMessage = props.emptyMessage, showDivider = props.showDivider, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, isSkeleton = props.isSkeleton, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
|
|
191
191
|
var appearanceConfig = useAppearanceConfig(appearance, dropdownItemConfig);
|
|
192
192
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
193
193
|
var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextAlign = propsGenerator.labelTextAlign, labelTextColor = propsGenerator.labelTextColor, labelTextColorActive = propsGenerator.labelTextColorActive, labelTextColorActiveHover = propsGenerator.labelTextColorActiveHover, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, descTextColor = propsGenerator.descTextColor, descTextColorHover = propsGenerator.descTextColorHover, descTextGradient = propsGenerator.descTextGradient, descTextSize = propsGenerator.descTextSize, descTextStyle = propsGenerator.descTextStyle, descTextWeight = propsGenerator.descTextWeight, descTextWrap = propsGenerator.descTextWrap, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, emptyMessageTextColor = propsGenerator.emptyMessageTextColor, emptyMessageTextColorHover = propsGenerator.emptyMessageTextColorHover, emptyMessageTextSize = propsGenerator.emptyMessageTextSize, emptyMessageTextStyle = propsGenerator.emptyMessageTextStyle, emptyMessageTextWeight = propsGenerator.emptyMessageTextWeight, emptyMessageTextWrap = propsGenerator.emptyMessageTextWrap, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
@@ -197,7 +197,7 @@ function DropdownItem(props) {
|
|
|
197
197
|
? fillClass && "fill_".concat(fillClass)
|
|
198
198
|
: fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
|
|
199
199
|
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
200
|
-
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), widthClass && "dropdown__item_width_".concat(widthClass), isDisabled && "dropdown__item_state_disabled", onClick && 'cursor_type_pointer',
|
|
200
|
+
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), widthClass && "dropdown__item_width_".concat(widthClass), isDisabled && "dropdown__item_state_disabled", onClick && 'cursor_type_pointer', isSkeleton && "dropdown__item_skeleton", justifyContentClass &&
|
|
201
201
|
"dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: !isActive && labelTextColor, textColorActive: "accentTextPrimary", textColorActive: isActive && labelTextColorActive, textColorHover: !isActive && labelTextColorHover, textColorHoverActive: isActive && labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (jsx(Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
|
|
202
202
|
}
|
|
203
203
|
|
|
@@ -34,48 +34,48 @@ var accordionAppearanceSize = {
|
|
|
34
34
|
titleTextSize: 'h3',
|
|
35
35
|
badgeAppearanceSize: 'sizeXS',
|
|
36
36
|
contentTextSize: 'xxl',
|
|
37
|
-
icon: _default.icons16.Arrow.
|
|
37
|
+
icon: _default.icons16.Arrow.ChevronDown,
|
|
38
38
|
},
|
|
39
39
|
sizeXL: {
|
|
40
40
|
size: 'xl',
|
|
41
41
|
titleTextSize: 'h3',
|
|
42
42
|
badgeAppearanceSize: 'sizeXS',
|
|
43
43
|
contentTextSize: 'l',
|
|
44
|
-
icon: _default.icons16.Arrow.
|
|
44
|
+
icon: _default.icons16.Arrow.ChevronDown,
|
|
45
45
|
},
|
|
46
46
|
sizeL: {
|
|
47
47
|
size: 'l',
|
|
48
48
|
titleTextSize: 'h4',
|
|
49
49
|
badgeAppearanceSize: 'sizeXS',
|
|
50
|
-
icon: _default.icons16.Arrow.
|
|
50
|
+
icon: _default.icons16.Arrow.ChevronDown,
|
|
51
51
|
},
|
|
52
52
|
sizeM: {
|
|
53
53
|
size: 'm',
|
|
54
54
|
titleTextSize: 'h5',
|
|
55
55
|
badgeAppearanceSize: 'sizeXS',
|
|
56
56
|
contentTextSize: 'm',
|
|
57
|
-
icon: _default.icons16.Arrow.
|
|
57
|
+
icon: _default.icons16.Arrow.ChevronDown,
|
|
58
58
|
},
|
|
59
59
|
sizeS: {
|
|
60
60
|
size: 's',
|
|
61
61
|
titleTextSize: 'h6',
|
|
62
62
|
badgeAppearanceSize: 'sizeXS',
|
|
63
63
|
contentTextSize: 's',
|
|
64
|
-
icon: _default.icons16.Arrow.
|
|
64
|
+
icon: _default.icons16.Arrow.ChevronDown,
|
|
65
65
|
},
|
|
66
66
|
sizeXS: {
|
|
67
67
|
size: 'xs',
|
|
68
68
|
titleTextSize: 'h6',
|
|
69
69
|
badgeAppearanceSize: 'sizeXS',
|
|
70
70
|
contentTextSize: 'xs',
|
|
71
|
-
icon: _default.icons16.Arrow.
|
|
71
|
+
icon: _default.icons16.Arrow.ChevronDown,
|
|
72
72
|
},
|
|
73
73
|
sizeXXS: {
|
|
74
74
|
size: 'xxs',
|
|
75
75
|
titleTextSize: 'h6',
|
|
76
76
|
badgeAppearanceSize: 'sizeXS',
|
|
77
77
|
contentTextSize: 'xs',
|
|
78
|
-
icon: _default.icons16.Arrow.
|
|
78
|
+
icon: _default.icons16.Arrow.ChevronDown,
|
|
79
79
|
},
|
|
80
80
|
};
|
|
81
81
|
|
|
@@ -5,7 +5,7 @@ var clsx = require('clsx');
|
|
|
5
5
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
6
6
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
8
|
-
var Avatar = require('../../
|
|
8
|
+
var Avatar = require('../../Avatar_cjs_-cKfA1OW.js');
|
|
9
9
|
var Group = require('../../Group_cjs_DHNBxjH3.js');
|
|
10
10
|
var Text = require('../../Text_cjs_C-Ux7Tz5.js');
|
|
11
11
|
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
@@ -30,12 +30,12 @@ var logoConfig = {
|
|
|
30
30
|
},
|
|
31
31
|
};
|
|
32
32
|
var Logo = urlWithAssetPrefix.urlWithAssetPrefix(function Logo(props) {
|
|
33
|
-
var className = props.className, appearance = props.appearance,
|
|
33
|
+
var className = props.className, appearance = props.appearance, href = props.href, link = props.link;
|
|
34
34
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, logoConfig);
|
|
35
35
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
36
|
-
var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, alignItemsClass = propsGenerator.alignItemsClass, src = propsGenerator.src, title = propsGenerator.title, alt = propsGenerator.alt, widthClass = propsGenerator.widthClass;
|
|
36
|
+
var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, alignItemsClass = propsGenerator.alignItemsClass, src = propsGenerator.src, title = propsGenerator.title, alt = propsGenerator.alt, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
37
37
|
var logo = useStyles.useStyles(props).styles;
|
|
38
|
-
return (jsxRuntime.jsx("div", { className: clsx(className, 'logo', alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignItemsClass && "logo_align-items_".concat(alignItemsClass),
|
|
38
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'logo', alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignItemsClass && "logo_align-items_".concat(alignItemsClass), sizeClass && "logo_size_".concat(sizeClass), widthClass && "width_".concat(widthClass)), style: logo, children: link || href ? (jsxRuntime.jsx(Link.LinkWrapper, { className: "logo__link", href: link || href, children: jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
|
|
39
39
|
});
|
|
40
40
|
|
|
41
41
|
exports.Logo = Logo;
|
|
@@ -145,6 +145,7 @@ var menuItemAppearanceSurface = {
|
|
|
145
145
|
fillActive: 'surfaceHover',
|
|
146
146
|
fillActiveHover: 'surfaceHover',
|
|
147
147
|
fillHover: 'surfaceHover',
|
|
148
|
+
labelTextHoverColor: 'accentTextSecondary',
|
|
148
149
|
labelTextColor: 'surfaceTextPrimary',
|
|
149
150
|
borderColor: 'surfaceBorderQuaternary',
|
|
150
151
|
iconAfterFillIcon: 'surfaceItemPrimary',
|
|
@@ -181,20 +182,33 @@ var menuItemConfig = {
|
|
|
181
182
|
},
|
|
182
183
|
};
|
|
183
184
|
function MenuItem(props) {
|
|
184
|
-
var className = props.className, appearance = props.appearance, label = props.label, isDisabled = props.isDisabled, href = props.href, link = props.link, LinkComponent = props.LinkComponent, rel = props.rel, target = props.target, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, onClick = props.onClick,
|
|
185
|
+
var className = props.className, appearance = props.appearance, label = props.label, isDisabled = props.isDisabled, href = props.href, link = props.link, LinkComponent = props.LinkComponent, rel = props.rel, showTooltip = props.showTooltip, target = props.target, tooltipAppearance = props.tooltipAppearance, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, onClick = props.onClick, children = props.children;
|
|
186
|
+
var tooltipRef = React.useRef(null);
|
|
187
|
+
var onMouseEnter = React.useCallback(function () {
|
|
188
|
+
var _a;
|
|
189
|
+
if (showTooltip) {
|
|
190
|
+
(_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.openTooltip();
|
|
191
|
+
}
|
|
192
|
+
}, [showTooltip]);
|
|
193
|
+
var onMouseLeave = React.useCallback(function () {
|
|
194
|
+
var _a;
|
|
195
|
+
if (showTooltip) {
|
|
196
|
+
(_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.closeTooltip();
|
|
197
|
+
}
|
|
198
|
+
}, [showTooltip]);
|
|
185
199
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, menuItemConfig);
|
|
186
200
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
187
|
-
var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelStyle = propsGenerator.labelStyle, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextColorDisabled = propsGenerator.labelTextColorDisabled, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelWeight = propsGenerator.labelWeight, labelWrap = propsGenerator.labelWrap, borderColorClass = propsGenerator.borderColorClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass,
|
|
201
|
+
var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelStyle = propsGenerator.labelStyle, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextColorDisabled = propsGenerator.labelTextColorDisabled, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelWeight = propsGenerator.labelWeight, labelWrap = propsGenerator.labelWrap, borderColorClass = propsGenerator.borderColorClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, tooltipFill = propsGenerator.tooltipFill, tooltipShapeStrength = propsGenerator.tooltipShapeStrength, tooltipText = propsGenerator.tooltipText, tooltipTextColor = propsGenerator.tooltipTextColor, tooltipTitleTextColor = propsGenerator.tooltipTitleTextColor, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
|
|
188
202
|
// @ts-expect-error
|
|
189
203
|
var menuItem = useStyles.useStyles(props).styles;
|
|
190
|
-
return (jsxRuntime.
|
|
204
|
+
return (jsxRuntime.jsxs("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isDisabled && "menu-item_state_disabled", directionClass && "menu-item_direction_".concat(directionClass), className, sizeClass && "menu-item_size_".concat(sizeClass), borderColorClass && "border-color_".concat(borderColorClass), !isActive
|
|
191
205
|
? fillClass && "fill_".concat(fillClass)
|
|
192
206
|
: fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
|
|
193
207
|
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
194
208
|
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass
|
|
195
209
|
? "shape-strength_".concat(shapeStrengthClass)
|
|
196
210
|
: shapeClass === 'rounded' && 'shape-strength_default', typeClass && "menu-item_type_".concat(typeClass), widthClass && "width_".concat(widthClass), justifyContentClass &&
|
|
197
|
-
"menu-item_justify-content_".concat(justifyContentClass), isSkeleton && "menu-item_skeleton"), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsxs(Link.Link, { className: clsx('menu-item__wrapper', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(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: labelTextActiveHoverColor, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextHoverColor, textStyle: labelStyle, textWeight: labelWeight, textWrap: labelWrap, isDisabled: isDisabled, isActive: isActive, 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, jsxRuntime.jsx(Icon.Tooltip, { className: "menu-item__tooltip", appearance: tooltipAppearance, minWidth: "auto", fill: tooltipFill, left: "100%", zIndex: "100", titleTextColor: tooltipTitleTextColor, text: tooltipText, textColor: tooltipTextColor, centering: "vertical", shapeStrength: tooltipShapeStrength })] })
|
|
211
|
+
"menu-item_justify-content_".concat(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_".concat(alignDirectionClass), alignClass && "align_".concat(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: labelTextActiveHoverColor, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextHoverColor, textStyle: labelStyle, textWeight: labelWeight, textWrap: labelWrap, isDisabled: isDisabled, isActive: isActive, 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, { className: "menu-item__tooltip", appearance: tooltipAppearance, minWidth: "auto", fill: tooltipFill, left: "100%", zIndex: "100", titleTextColor: tooltipTitleTextColor, text: tooltipText, textColor: tooltipTextColor, centering: "vertical", ref: tooltipRef, shapeStrength: tooltipShapeStrength }))] }));
|
|
198
212
|
}
|
|
199
213
|
|
|
200
214
|
exports.MenuItem = MenuItem;
|
|
@@ -8,7 +8,7 @@ var ReactPaginate = require('react-paginate');
|
|
|
8
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
11
|
-
var DropdownItem = require('../../
|
|
11
|
+
var DropdownItem = require('../../DropdownItem_cjs_DdjN_gRH.js');
|
|
12
12
|
var Icon = require('../../Icon_cjs_O7ILYzgW.js');
|
|
13
13
|
var Text = require('../../Text_cjs_C-Ux7Tz5.js');
|
|
14
14
|
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
@@ -4,7 +4,6 @@ var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var clsx = require('clsx');
|
|
7
|
-
var SVG = require('react-inlinesvg');
|
|
8
7
|
var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
|
|
9
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
@@ -26,6 +25,7 @@ require('../utils/setViewportProperty.js');
|
|
|
26
25
|
require('lodash/maxBy');
|
|
27
26
|
require('../hooks/useStyles/styleAttributes.js');
|
|
28
27
|
require('../../Icon_cjs_O7ILYzgW.js');
|
|
28
|
+
require('react-inlinesvg');
|
|
29
29
|
require('../../Link_cjs_BqT6eVl6.js');
|
|
30
30
|
require('../../Loader_cjs_DXJ1zsFJ.js');
|
|
31
31
|
|
|
@@ -167,14 +167,13 @@ var Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props) {
|
|
|
167
167
|
return jsxRuntime.jsx(Image, tslib_es6.__assign({}, sizes));
|
|
168
168
|
}
|
|
169
169
|
if (src) {
|
|
170
|
-
if (src.endsWith('.svg') || src.startsWith('data:image/svg')) {
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
}
|
|
170
|
+
// if (src.endsWith('.svg') || src.startsWith('data:image/svg')) {
|
|
171
|
+
// if (svgFillClass) {
|
|
172
|
+
// return <SVG src={src} preProcessor={removeFillStroke} />
|
|
173
|
+
// } else {
|
|
174
|
+
// return <SVG src={src} />
|
|
175
|
+
// }
|
|
176
|
+
// }
|
|
178
177
|
return jsxRuntime.jsx("img", { src: src });
|
|
179
178
|
}
|
|
180
179
|
return null;
|
|
@@ -187,13 +186,6 @@ var Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props) {
|
|
|
187
186
|
secondaryButton ||
|
|
188
187
|
appearanceConfig) && (jsxRuntime.jsxs(Group.Group, { className: "response__button", width: "fill", children: [primaryButtonLabel ? (jsxRuntime.jsx(Button.Button, { className: "response__button-item", appearance: primaryButtonAppearance, width: primaryButtonWidth || 'fill', size: primaryButtonSize, fill: primaryButtonFill, fillHover: primaryButtonFillHover, label: primaryButtonLabel, labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize, shape: primaryButtonShape, before: primaryButtonBefore, after: primaryButtonAfter, onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel ? (jsxRuntime.jsx(Button.Button, { className: "response__button-item", appearance: secondaryButtonAppearance, width: secondaryButtonWidth || 'fill', size: secondaryButtonSize, fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, label: secondaryButtonLabel, labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize, shape: secondaryButtonShape, before: secondaryButtonBefore, after: secondaryButtonAfter, onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
|
|
189
188
|
});
|
|
190
|
-
var removeFillStroke = function (code) {
|
|
191
|
-
return code
|
|
192
|
-
.replace(/fill=".*?"/g, 'fill=""')
|
|
193
|
-
.replace(/fill='.*?'/g, "fill=''")
|
|
194
|
-
.replace(/stroke=".*?"/g, 'stroke=""')
|
|
195
|
-
.replace(/stroke='.*?'/g, "stroke=''");
|
|
196
|
-
};
|
|
197
189
|
|
|
198
190
|
exports.Response = Response;
|
|
199
191
|
exports.responseAppearance = responseAppearance;
|
|
@@ -14,11 +14,10 @@ var urlWithAssetPrefix = function (WrappedComponent) {
|
|
|
14
14
|
var url = props[propKey];
|
|
15
15
|
if (url && typeof url === 'string') {
|
|
16
16
|
if (assetPrefix) {
|
|
17
|
-
var
|
|
18
|
-
var isNeedAssetPrefix = checkIsNeedAssetPrefix(cleanUrl, assetPrefix, ignorePathsList);
|
|
17
|
+
var isNeedAssetPrefix = checkIsNeedAssetPrefix(url, assetPrefix, ignorePathsList);
|
|
19
18
|
if (isNeedAssetPrefix) {
|
|
20
19
|
var prefixPath = common.formatURL(assetPrefix).slice(0, -1);
|
|
21
|
-
url = "".concat(prefixPath).concat(
|
|
20
|
+
url = "".concat(prefixPath).concat(url);
|
|
22
21
|
}
|
|
23
22
|
}
|
|
24
23
|
resultProps[propKey] = url;
|
|
@@ -52,7 +51,7 @@ var checkIsNeedAssetPrefix = function (url, assetPrefix, ignorePathsList) {
|
|
|
52
51
|
}
|
|
53
52
|
}
|
|
54
53
|
else {
|
|
55
|
-
if (url.startsWith(common.formatURL(urlPath))) {
|
|
54
|
+
if (common.formatURL(url).startsWith(common.formatURL(urlPath))) {
|
|
56
55
|
return false;
|
|
57
56
|
}
|
|
58
57
|
}
|
|
@@ -32,48 +32,48 @@ var accordionAppearanceSize = {
|
|
|
32
32
|
titleTextSize: 'h3',
|
|
33
33
|
badgeAppearanceSize: 'sizeXS',
|
|
34
34
|
contentTextSize: 'xxl',
|
|
35
|
-
icon: icons16.Arrow.
|
|
35
|
+
icon: icons16.Arrow.ChevronDown,
|
|
36
36
|
},
|
|
37
37
|
sizeXL: {
|
|
38
38
|
size: 'xl',
|
|
39
39
|
titleTextSize: 'h3',
|
|
40
40
|
badgeAppearanceSize: 'sizeXS',
|
|
41
41
|
contentTextSize: 'l',
|
|
42
|
-
icon: icons16.Arrow.
|
|
42
|
+
icon: icons16.Arrow.ChevronDown,
|
|
43
43
|
},
|
|
44
44
|
sizeL: {
|
|
45
45
|
size: 'l',
|
|
46
46
|
titleTextSize: 'h4',
|
|
47
47
|
badgeAppearanceSize: 'sizeXS',
|
|
48
|
-
icon: icons16.Arrow.
|
|
48
|
+
icon: icons16.Arrow.ChevronDown,
|
|
49
49
|
},
|
|
50
50
|
sizeM: {
|
|
51
51
|
size: 'm',
|
|
52
52
|
titleTextSize: 'h5',
|
|
53
53
|
badgeAppearanceSize: 'sizeXS',
|
|
54
54
|
contentTextSize: 'm',
|
|
55
|
-
icon: icons16.Arrow.
|
|
55
|
+
icon: icons16.Arrow.ChevronDown,
|
|
56
56
|
},
|
|
57
57
|
sizeS: {
|
|
58
58
|
size: 's',
|
|
59
59
|
titleTextSize: 'h6',
|
|
60
60
|
badgeAppearanceSize: 'sizeXS',
|
|
61
61
|
contentTextSize: 's',
|
|
62
|
-
icon: icons16.Arrow.
|
|
62
|
+
icon: icons16.Arrow.ChevronDown,
|
|
63
63
|
},
|
|
64
64
|
sizeXS: {
|
|
65
65
|
size: 'xs',
|
|
66
66
|
titleTextSize: 'h6',
|
|
67
67
|
badgeAppearanceSize: 'sizeXS',
|
|
68
68
|
contentTextSize: 'xs',
|
|
69
|
-
icon: icons16.Arrow.
|
|
69
|
+
icon: icons16.Arrow.ChevronDown,
|
|
70
70
|
},
|
|
71
71
|
sizeXXS: {
|
|
72
72
|
size: 'xxs',
|
|
73
73
|
titleTextSize: 'h6',
|
|
74
74
|
badgeAppearanceSize: 'sizeXS',
|
|
75
75
|
contentTextSize: 'xs',
|
|
76
|
-
icon: icons16.Arrow.
|
|
76
|
+
icon: icons16.Arrow.ChevronDown,
|
|
77
77
|
},
|
|
78
78
|
};
|
|
79
79
|
|
|
@@ -3,7 +3,7 @@ import clsx from 'clsx';
|
|
|
3
3
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
4
4
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
5
5
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
6
|
-
import { A as Avatar } from '../
|
|
6
|
+
import { A as Avatar } from '../Avatar_es_CSKFNChm.js';
|
|
7
7
|
import { G as Group } from '../Group_es_B2yGEJfj.js';
|
|
8
8
|
import { T as Text } from '../Text_es_BdFAdf7M.js';
|
|
9
9
|
import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../
|
|
1
|
+
export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_DfEoMbef.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'clsx';
|
package/dist/components/Logo.js
CHANGED
|
@@ -28,12 +28,12 @@ var logoConfig = {
|
|
|
28
28
|
},
|
|
29
29
|
};
|
|
30
30
|
var Logo = urlWithAssetPrefix(function Logo(props) {
|
|
31
|
-
var className = props.className, appearance = props.appearance,
|
|
31
|
+
var className = props.className, appearance = props.appearance, href = props.href, link = props.link;
|
|
32
32
|
var appearanceConfig = useAppearanceConfig(appearance, logoConfig);
|
|
33
33
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
34
|
-
var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, alignItemsClass = propsGenerator.alignItemsClass, src = propsGenerator.src, title = propsGenerator.title, alt = propsGenerator.alt, widthClass = propsGenerator.widthClass;
|
|
34
|
+
var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, alignItemsClass = propsGenerator.alignItemsClass, src = propsGenerator.src, title = propsGenerator.title, alt = propsGenerator.alt, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
35
35
|
var logo = useStyles(props).styles;
|
|
36
|
-
return (jsx("div", { className: clsx(className, 'logo', alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignItemsClass && "logo_align-items_".concat(alignItemsClass),
|
|
36
|
+
return (jsx("div", { className: clsx(className, 'logo', alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignItemsClass && "logo_align-items_".concat(alignItemsClass), sizeClass && "logo_size_".concat(sizeClass), widthClass && "width_".concat(widthClass)), style: logo, children: link || href ? (jsx(LinkWrapper, { className: "logo__link", href: link || href, children: jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
|
|
37
37
|
});
|
|
38
38
|
|
|
39
39
|
export { Logo, logoConfig };
|