kamotive_ui 2.3.26 → 3.6.26

package/dist/components/Tab/Tab.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './Tab.module.css';
 import classNames from 'classnames';
 import { Typography } from '../Typography/Typography';
-export const Tab = ({ value, onClick, onMouseEnter, label, selected, disabled = false, style, className }) => {
+export const Tab = ({ value, onClick, onMouseEnter, label, selected, disabled = false, style, className, testId = "default" }) => {
     const handleClick = (e) => {
         if (onClick && value && !disabled) {
             onClick(value);
@@ -12,6 +12,6 @@ export const Tab = ({ value, onClick, onMouseEnter, label, selected, disabled =
             [styles.selected]: selected,
             [styles.disabled]: disabled,
             [className || '']: className,
-        }), onClick: handleClick, onMouseEnter: onMouseEnter, style: style },
-        React.createElement(Typography, { variant: selected ? 'Body1-SemiBold' : 'Body1' }, label)));
+        }), onClick: handleClick, onMouseEnter: onMouseEnter, style: style, "data-test-id": `${testId}-tab` },
+        React.createElement(Typography, { variant: selected ? 'Body1-SemiBold' : 'Body1', testId: `${testId}-tab` }, label)));
 };

package/dist/components/TableFilterSidebar/TableFilterSidebar.js

@@ -6,7 +6,7 @@ import { IconButton } from '../IconButton/IconButton';
 import { IconClose } from '../../Icons/IconClose/IconClose';
 import { Typography } from '../Typography/Typography';
 import { Button } from '../Button/Button';
-export const TableFilterSidebar = ({ open, onClose, children, lng = 'ru', onReset, onApply, isResetDisabled, isApplyDisabled, style, className, isLoading, width = '340px', zIndex = 10000, top = 0, right = 0, }) => {
+export const TableFilterSidebar = ({ open, onClose, children, lng = 'ru', onReset, onApply, isResetDisabled, isApplyDisabled, style, className, isLoading, width = '340px', zIndex = 10000, top = 0, right = 0, testId = 'default' }) => {
     if (!open)
         return null;
     const childrenArray = React.Children.toArray(children);
@@ -18,22 +18,22 @@ export const TableFilterSidebar = ({ open, onClose, children, lng = 'ru', onRese
     const isGrid = columnsCount > 1;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: styles.overlay, onClick: onClose, style: { zIndex } }),
-        React.createElement("aside", { className: classNames(styles.sidebar, open && styles.open, className), style: Object.assign({ width: sidebarWidth, gap: `${gap + 5}px`, zIndex: zIndex + 1, top: `${top}px`, right: `${right}px` }, style) },
-            React.createElement("div", { className: styles.header },
-                React.createElement(Typography, { variant: 'Body1-SemiBold', style: { color: 'var(--text-dark)' } },
+        React.createElement("aside", { className: classNames(styles.sidebar, open && styles.open, className), style: Object.assign({ width: sidebarWidth, gap: `${gap + 5}px`, zIndex: zIndex + 1, top: `${top}px`, right: `${right}px` }, style), "data-test-id": `${testId}-filter-modal` },
+            React.createElement("div", { className: styles.header, "data-test-id": `${testId}-filter-header` },
+                React.createElement(Typography, { variant: 'Body1-SemiBold', style: { color: 'var(--text-dark)' }, testId: `${testId}-filter` },
                     lng === 'ru' ? 'Фильтры' : 'Filters',
                     " "),
-                React.createElement(IconButton, { title: lng === 'ru' ? 'Закрыть' : 'Close', onClick: onClose, icon: React.createElement(IconClose, null), color: "var(--icons-grey)", className: styles.closeBtn })),
-            React.createElement("div", { className: styles.content }, isLoading ? (React.createElement("div", { className: styles.loaderWrapper },
-                React.createElement(Spinner, null))) : (React.createElement("div", { style: {
+                React.createElement(IconButton, { title: lng === 'ru' ? 'Закрыть' : 'Close', onClick: onClose, icon: React.createElement(IconClose, null), color: "var(--icons-grey)", className: styles.closeBtn, testId: `${testId}-filter` })),
+            React.createElement("div", { className: styles.content, "data-test-id": `${testId}-filter-content` }, isLoading ? (React.createElement("div", { className: styles.loaderWrapper },
+                React.createElement(Spinner, { testId: `${testId}-filter` }))) : (React.createElement("div", { style: {
                     display: 'grid',
                     gap: `${gap}px ${gap + 10}px`,
                     gridTemplateColumns: `repeat(${columnsCount}, minmax(0, 1fr))`
-                } }, childrenArray.map((child, index) => (React.createElement("div", { key: index, style: {
+                }, "data-test-id": `${testId}-filters-list` }, childrenArray.map((child, index) => (React.createElement("div", { key: index, style: {
                     minWidth: 0,
                     width: '100%',
-                } }, child)))))),
+                }, "data-test-id": `${testId}-filter-item-${index}` }, child)))))),
             React.createElement("div", { className: styles.buttons },
-                onReset && React.createElement(Button, { label: lng === 'ru' ? 'Сбросить' : 'Reset', variant: 'outline', onClick: onReset, disabled: isResetDisabled || isLoading }),
-                onApply && React.createElement(Button, { label: lng === 'ru' ? 'Применить' : 'Apply', onClick: onApply, disabled: isApplyDisabled || isLoading })))));
+                onReset && React.createElement(Button, { label: lng === 'ru' ? 'Сбросить' : 'Reset', variant: 'outline', onClick: onReset, disabled: isResetDisabled || isLoading, testId: `${testId}-filter-reset` }),
+                onApply && React.createElement(Button, { label: lng === 'ru' ? 'Применить' : 'Apply', onClick: onApply, disabled: isApplyDisabled || isLoading, testId: `${testId}-filter-apply` })))));
 };

package/dist/components/Tabs/Tabs.js

@@ -1,7 +1,7 @@
 ;
 import React from 'react';
 import styles from './Tabs.module.css';
-export const Tabs = ({ value, onChange, children, style, className }) => {
+export const Tabs = ({ value, onChange, children, style, className, testId = 'default' }) => {
     var _a;
     const selectedTabContent = (_a = children === null || children === void 0 ? void 0 : children.find((child) => child.props.value === value)) === null || _a === void 0 ? void 0 : _a.props.children;
     const handleTabChange = (newValue) => {
@@ -10,11 +10,17 @@ export const Tabs = ({ value, onChange, children, style, className }) => {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { role: "tablist", className: styles.tabs + ' ' + (className || ''), style: style }, children === null || children === void 0 ? void 0 : children.map((child, index) => React.cloneElement(child, {
-            key: index,
-            selected: child.props.value === value,
-            disabled: child.props.disabled,
-            onClick: () => handleTabChange(child.props.value),
-        }))),
-        React.createElement("div", { role: "tabpanel", "aria-labelledby": value }, selectedTabContent)));
+        React.createElement("div", { role: "tablist", className: styles.tabs + ' ' + (className || ''), style: style, "data-test-id": `${testId}-tablist` }, children === null || children === void 0 ? void 0 : children.map((child, index) => {
+            const tabSlug = child.props.value
+                ? String(child.props.value).toLowerCase().trim().replace(/\s+/g, '-')
+                : `item-${index}`;
+            return React.cloneElement(child, {
+                key: index,
+                selected: child.props.value === value,
+                disabled: child.props.disabled,
+                onClick: () => handleTabChange(child.props.value),
+                testId: child.props.testId || `${testId}-tabs-${tabSlug}`
+            });
+        })),
+        React.createElement("div", { role: "tabpanel", "aria-labelledby": value, "data-test-id": `${testId}-tabpanel` }, selectedTabContent)));
 };

package/dist/components/Tag/Tag.js

@@ -33,7 +33,7 @@ const adjustTextColor = (backgroundColor) => {
     const contrastWithWhite = getContrastRatio(backgroundColor, white);
     return contrastWithWhite < 1.5 ? black : "";
 };
-export const Tag = ({ label, color = 'red', closeButton = false, editable = false, onClick, onChange, }) => {
+export const Tag = ({ label, color = 'red', closeButton = false, editable = false, onClick, onChange, testId = 'default' }) => {
     const [newLabel, setNewLabel] = useState(label);
     const [width, setWidth] = useState(0);
     const measurementDivRef = useRef(null);
@@ -55,16 +55,16 @@ export const Tag = ({ label, color = 'red', closeButton = false, editable = fals
                 border: `1px solid ${adjustedColor}`,
                 backgroundColor: hexToRgba(color, 0.2),
             }
-            : {} },
-        editable ? (React.createElement("div", { style: { position: "relative" } },
-            React.createElement("input", { type: "text", placeholder: label, value: newLabel, onChange: (e) => {
+            : {}, "data-test-id": `${testId}-tag` },
+        editable ? (React.createElement("div", { style: { position: "relative" }, "data-test-id": `${testId}-tag-edit` },
+            React.createElement("input", { type: "text", name: 'input', placeholder: label, value: newLabel, onChange: (e) => {
                     setNewLabel(e.target.value);
                 }, onBlur: handleBlur, style: {
                     color: (color === null || color === void 0 ? void 0 : color.startsWith('#')) ? adjustedColor : `var(--${color})`,
                     '--placeholder-color': (color === null || color === void 0 ? void 0 : color.startsWith('#')) ? adjustedColor : `var(--${color})`,
                     width: `${width}px`,
                     minWidth: '25px',
-                } }),
+                }, "data-test-id": `${testId}-tag-edit-input` }),
             React.createElement("div", { ref: measurementDivRef, style: {
                     position: 'absolute',
                     visibility: 'hidden',
@@ -74,11 +74,11 @@ export const Tag = ({ label, color = 'red', closeButton = false, editable = fals
                     fontFamily: 'inherit',
                     fontWeight: 'inherit',
                     letterSpacing: 'inherit',
-                } }, newLabel || 'Item'))) : (React.createElement(React.Fragment, null,
+                }, "data-test-id": `${testId}-tag-edit-label` }, newLabel || 'Item'))) : (React.createElement(React.Fragment, null,
             " ",
             label,
             " ")),
         closeButton && (React.createElement("button", { type: "button", "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", style: color.startsWith('#')
                 ? { '--close-color': adjustedColor }
-                : { '--close-color': `var(--${color})` }, onClick: onClick }))));
+                : { '--close-color': `var(--${color})` }, onClick: onClick, "data-test-id": `${testId}-close-button` }))));
 };