kamotive_ui 1.2.27 → 1.2.29

package/dist/components/Comment/Comment.js

@@ -4,12 +4,13 @@ import classNames from 'classnames';
 import { Typography } from '../Typography/Typography';
 import { TextEditor } from '../TextEditor/TextEditor';
 import { AttachedFilesPreview } from '../AttachedFilesPreview/AttachedFilesPreview';
-import { IconDeleteFilled, IconPencilFilled } from '../../Icons';
+import { IconAccount, IconDeleteFilled, IconPencilFilled } from '../../Icons';
 import { IconButton } from '../IconButton/IconButton';
 export const Comment = ({ id, value, style, className, username, avatar, creationDate, canAttachFiles = false, files = [], canEdit = false, isEdit = false, label, error = false, helperText, onChange, onSubmit, onDelete, }) => {
     const [commentText, setCommentText] = useState(value || '');
     const [isEditMode, setIsEditMode] = useState(isEdit);
     const [attachedFiles, setAttachedFiles] = useState(files);
+    const [imageError, setImageError] = useState(false);
     const wrapperClassess = classNames(styles['wrapper--input'], className, {
         [styles['wrapper--input-label']]: label,
         [styles['wrapper--input-helperText']]: error,
@@ -38,7 +39,8 @@ export const Comment = ({ id, value, style, className, username, avatar, creatio
     return (React.createElement("div", { className: wrapperClassess, style: style },
         React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
             React.createElement("div", { className: styles.labelWrapper },
-                React.createElement("div", { className: "profile" }, avatar ? (React.createElement("img", { src: avatar, alt: "Avatar", className: styles.avatar })) : (React.createElement("div", { className: styles.avatar }, "\uD83D\uDC64"))),
+                React.createElement("div", { className: styles.flexBox }, avatar && !imageError ? (React.createElement("img", { src: avatar, alt: "Avatar", className: styles.avatar, onError: () => setImageError(true) })) : (React.createElement("div", { className: `${styles.avatar} ${styles.avatarIcon} ${styles.flexBox}` },
+                    React.createElement(IconAccount, null)))),
                 React.createElement("div", { className: styles.infoWrapper },
                     React.createElement(Typography, { variant: "Body2-Medium", className: labelClasses }, username),
                     React.createElement(Typography, { variant: "Caption", className: styles.label, style: { color: '#8E8E93' } }, creationDate))),

package/dist/components/Comment/Comment.module.css

@@ -39,6 +39,18 @@
 	object-fit: cover;
 }
 
+.avatarIcon {
+	background-color: var(--grey-extraLight);
+	border-radius: 25px;
+	border: none;
+}
+
+.flexBox {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+}
+
 .input {
 	font-family: var(--font-family-content);
 	font-style: normal;

package/dist/components/Dropdown/Dropdown.js

@@ -367,7 +367,7 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
                 }, onBlur: (e) => {
                     e.stopPropagation();
                     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                }, onKeyDown: handleKeyDown, autoFocus: true })) : selectedItem ? (getComparisonValue(selectedItem, getOptionLabel)) : (searchValue || (((_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : lng === 'ru') ? 'Выберите значение' : 'Select value'))));
+                }, onKeyDown: handleKeyDown, autoFocus: true })) : selectedItem ? (getComparisonValue(selectedItem, getOptionLabel)) : (searchValue || ((_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : (lng === 'ru' ? 'Выберите значение' : 'Select value')))));
         return showSelectedTooltip ? (React.createElement("div", { className: styles.textField },
             React.createElement(Tooltip, { label: ((_b = getComparisonValue(selectedItem, getOptionLabel)) === null || _b === void 0 ? void 0 : _b.toString()) || '', position: "bottom-left", style: { width: '100% !important' } }, textFieldContent))) : (textFieldContent);
     };
@@ -376,7 +376,9 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         const menu = isOpen && (React.createElement("div", { className: dropdownClassess }, optionsToRender && optionsToRender.length > 0 ? (optionsToRender.map((optionsToRender, index) => {
             var _a;
             return (React.createElement(DropdownListItem, { key: (_a = optionsToRender === null || optionsToRender === void 0 ? void 0 : optionsToRender.key) !== null && _a !== void 0 ? _a : index, item: optionsToRender, getOptionLabel: getOptionLabel, size: size, selectedItem: selectedItem, variant: variant, onChange: onChangeHandler, isActive: activeIndex === index, activeIndex: activeIndex, index: index }));
-        })) : (React.createElement("div", { className: `${styles['item-container']} ${styles['item-block']}`, style: { paddingLeft: '15px' } }, lng === 'ru' || lng.includes('ru') ? noOptionsText || 'Нет вариантов для выбора' : noOptionsText || 'No options to select'))));
+        })) : (React.createElement("div", { className: `${styles['item-container']} ${styles['item-block']}`, style: { paddingLeft: '15px' } }, lng === 'ru' || lng.includes('ru')
+            ? noOptionsText || 'Нет вариантов для выбора'
+            : noOptionsText || 'No options to select'))));
         return isOpen ? menu : null;
     };
     useEffect(() => {

package/dist/components/Link/Link.js

@@ -4,7 +4,7 @@ import styles from './Link.module.css';
 import { Typography } from '../Typography/Typography';
 import { ETypographyVariants } from '../Typography/enums';
 import { Tooltip } from '../Tooltip/Tooltip';
-export const Link = ({ href, onClick, children, title, className, style, underline = 'hover', variant = ETypographyVariants.Body1, color = 'var(--text-dark)', maxWidth, size, widthInPixels, }) => {
+export const Link = ({ href, onClick, children, title, className, style, contentStyle, underline = 'hover', variant = ETypographyVariants.Body1, color = 'var(--text-dark)', maxWidth, size, widthInPixels, }) => {
     const stylesUnderline = underline === 'hover' ? styles.linkHover : underline === 'none' ? styles.linkNone : '';
     const stylesTooltipWidth = maxWidth ? { maxWidth: maxWidth } : {};
     const textRef = useRef(null);
@@ -24,7 +24,7 @@ export const Link = ({ href, onClick, children, title, className, style, underli
         const shouldShow = actualSize > widthInPixels;
         return shouldShow;
     }, [actualSize, widthInPixels, size]);
-    const linkContent = (React.createElement(Typography, { variant: variant, color: color }, children));
+    const linkContent = (React.createElement(Typography, { variant: variant, color: color, style: contentStyle }, children));
     const link = onClick ? (React.createElement("div", { onClick: onClick, className: classNames(styles.link, stylesUnderline, isTooltipVisible && styles.tooltipStyle, className), style: Object.assign(Object.assign({}, linkStyle), stylesTooltipWidth) },
         !size && (React.createElement("div", { ref: textRef, style: {
                 position: 'absolute',

package/dist/components/List/List.js

@@ -5,6 +5,7 @@ import { Typography } from '../Typography/Typography';
 import { Checkbox } from '../Checkbox/Checkbox';
 import { RadioButton } from '../RadioButton/RadioButton';
 import { ChevronDown } from '../../Icons';
+import { ListItem } from '../ListItem/ListItem';
 export const List = ({ onClick, onCheck, onRadioSelect, checked = false, selected = false, disabled = false, label, id, style, className, collapsible = false, open = false, withCheckbox = false, checkboxColor, checkboxFilled, withRadioButton = false, customBullet, customItemBullet, bulletClassName, titleContent, children, isHeader = false, parentChecked = false, }) => {
     const [isOpen, setIsOpen] = useState(open);
     const [isChecked, setIsChecked] = useState(checked || parentChecked);
@@ -37,7 +38,7 @@ export const List = ({ onClick, onCheck, onRadioSelect, checked = false, selecte
         const newCheckedState = !isChecked;
         setIsChecked(newCheckedState);
         if (onCheck) {
-            onCheck(id || "", newCheckedState);
+            onCheck(id || '', newCheckedState);
         }
         if (childIds.length > 0 && onCheck) {
             childIds.forEach((childId) => {
@@ -69,23 +70,18 @@ export const List = ({ onClick, onCheck, onRadioSelect, checked = false, selecte
             collapsible && (React.createElement("span", { className: styles.indicator }, isOpen ? React.createElement(ChevronDown, null) : React.createElement(ChevronDown, { rotation: 270 }))))),
         React.createElement("div", { className: collapsible ? contentClassNames : styles.content, style: { paddingLeft: !label ? 0 : '16px' } }, React.Children.map(children, (child) => {
             if (React.isValidElement(child)) {
-                return React.cloneElement(child, {
-                    bulletClassName: classNames(styles.bullet, child.props.bulletClassName || bulletClassName),
-                    customBullet: child.props.customBullet !== undefined
-                        ? child.props.customBullet
-                        : customItemBullet !== undefined
-                            ? customItemBullet
-                            : customBullet,
-                    withCheckbox: child.props.withCheckbox !== undefined ? child.props.withCheckbox : withCheckbox,
-                    checkboxFilled: child.props.checkboxFilled !== undefined ? child.props.checkboxFilled : checkboxFilled,
-                    withRadioButton: child.props.withRadioButton !== undefined ? child.props.withRadioButton : withRadioButton,
-                    onCheck: handleChildCheck,
-                    onRadioSelect: handleChildRadioSelect,
-                    parentChecked: isChecked,
-                    selected: child.props.selected,
+                const commonProps = {
                     style: child.props.style || style,
                     className: child.props.className,
-                });
+                };
+                if (child.type === ListItem || child.type === List) {
+                    return React.cloneElement(child, Object.assign(Object.assign({}, commonProps), { bulletClassName: classNames(styles.bullet, child.props.bulletClassName || bulletClassName), customBullet: child.props.customBullet !== undefined
+                            ? child.props.customBullet
+                            : customItemBullet !== undefined
+                                ? customItemBullet
+                                : customBullet, withCheckbox: child.props.withCheckbox !== undefined ? child.props.withCheckbox : withCheckbox, checkboxFilled: child.props.checkboxFilled !== undefined ? child.props.checkboxFilled : checkboxFilled, withRadioButton: child.props.withRadioButton !== undefined ? child.props.withRadioButton : withRadioButton, onCheck: handleChildCheck, onRadioSelect: handleChildRadioSelect, parentChecked: isChecked, selected: child.props.selected }));
+                }
+                return React.cloneElement(child, commonProps);
             }
             return child;
         }))));

package/dist/types/index.d.ts

@@ -649,6 +649,8 @@ export interface LinkProps {
     className?: string;
     /** Стили передаваемые напрямую */
     style?: CSSProperties;
+    /** Стили текста */
+    contentStyle?: CSSProperties;
     /**Подчеркивание */
     underline?: 'hover' | 'underline' | 'none';
     /** Вариант шрифта */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kamotive_ui",
-  "version": "1.2.27",
+  "version": "1.2.29",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [