@cloud-ru/uikit-product-claudia 1.8.4 → 1.9.1

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.9.1 (2025-12-03)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-mobile-fields@0.12.0](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-fields/CHANGELOG.md)
+
+
+
+
+
+# 1.9.0 (2025-12-01)
+
+
+### Features
+
+* **AINFR-4454:** new component rate block for claudia ([234e89a](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/234e89accd3018b17979ccd3bab1944ccb30806e))
+
+
+
+
+
 ## 1.8.4 (2025-11-28)
 
 ### Only dependencies have been changed

package/README.md

@@ -107,6 +107,27 @@
 | contentClassName | `string` | - |  |
 | onActionClick | `() => void` | - |  |
 | className | `string` | - | CSS-класс |
+## RateForm
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| grades* | `Grade[]` | - | Массив доступных оценок |
+| selectedGrade | `Grade` | - | Текущая выбранная оценка |
+| title | `string` | - | Заголовок формы (показывается когда оценка не выбрана) |
+| ratedLabel | `string` | - | Текст "Вы поставили" |
+| ratedSubtitle | `string` | - | Подзаголовок после выбора оценки |
+| comment | `string` | - | Комментарий пользователя |
+| isLoading | `boolean` | - | Состояние загрузки |
+| onGradeClick | `(grade: Grade) => void` | - | Callback при клике на оценку |
+| onClose | `() => void` | - | Callback при закрытии формы |
+| onCommentChange | `(comment: string) => void` | - | Callback при изменении комментария |
+| onCommentSubmit | `(comment: string) => void` | - | Callback при отправке комментария |
+| commentPlaceholder | `string` | - | Плейсхолдер для поля комментария |
+| showCloseButton | `boolean` | true | Показывать ли кнопку закрытия |
+| className | `string` | - | Дополнительный className |
+| isTouchDevice | `boolean` | - | Является ли устройство тач-девайсом |
+| submitTooltipText | `string` | - | Текст тултипа для кнопки отправки |
+| renderTextField | `(props: { comment?: string; grade: Grade; placeholder?: string; onChange?: (value: string) => void; onSubmit?: (value: string) => void; }) => ReactNode` | - | Render prop для кастомного отображения текстового поля |
 ## IconGiga
 ### Props
 | name | type | default value | description |

package/dist/cjs/components/RateForm/RateForm.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { Grade } from './types';
+export type RateFormProps = {
+    /** Массив доступных оценок */
+    grades: Grade[];
+    /** Текущая выбранная оценка */
+    selectedGrade?: Grade | null;
+    /** Заголовок формы (показывается когда оценка не выбрана) */
+    title?: string;
+    /** Текст "Вы поставили" */
+    ratedLabel?: string;
+    /** Подзаголовок после выбора оценки */
+    ratedSubtitle?: string;
+    /** Комментарий пользователя */
+    comment?: string;
+    /** Состояние загрузки */
+    isLoading?: boolean;
+    /** Callback при клике на оценку */
+    onGradeClick?: (grade: Grade) => void;
+    /** Callback при закрытии формы */
+    onClose?: () => void;
+    /** Callback при изменении комментария */
+    onCommentChange?: (comment: string) => void;
+    /** Callback при отправке комментария */
+    onCommentSubmit?: (comment: string) => void;
+    /** Плейсхолдер для поля комментария */
+    commentPlaceholder?: string;
+    /** Показывать ли кнопку закрытия */
+    showCloseButton?: boolean;
+    /** Дополнительный className */
+    className?: string;
+    /** Является ли устройство тач-девайсом */
+    isTouchDevice?: boolean;
+    /** Текст тултипа для кнопки отправки */
+    submitTooltipText?: string;
+    /** Render prop для кастомного отображения текстового поля */
+    renderTextField?: (props: {
+        comment?: string;
+        grade: Grade;
+        placeholder?: string;
+        onChange?: (value: string) => void;
+        onSubmit?: (value: string) => void;
+    }) => ReactNode;
+};
+export declare function RateForm({ grades, selectedGrade, title, ratedLabel, ratedSubtitle, comment, isLoading, onGradeClick, onClose, onCommentChange, onCommentSubmit, commentPlaceholder, showCloseButton, className, isTouchDevice, submitTooltipText, renderTextField, }: RateFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RateForm/RateForm.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RateForm = RateForm;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const figma_tokens_cloud_platform_1 = require("@sbercloud/figma-tokens-cloud-platform");
+const icons_1 = require("@snack-uikit/icons");
+const loaders_1 = require("@snack-uikit/loaders");
+const typography_1 = require("@snack-uikit/typography");
+const TextFieldWithAccordionMessage_1 = require("./components/TextFieldWithAccordionMessage");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function RateForm({ grades, selectedGrade, title, ratedLabel, ratedSubtitle, comment, isLoading = false, onGradeClick, onClose, onCommentChange, onCommentSubmit, commentPlaceholder, showCloseButton = true, className, isTouchDevice = false, submitTooltipText, renderTextField, }) {
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.feedbackFormLoading, className), "data-loading": true, children: (0, jsx_runtime_1.jsx)(loaders_1.Spinner, { size: 's' }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.feedbackForm, className), "data-touch": isTouchDevice || undefined, children: [selectedGrade ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.ratingContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.ratingTitle, children: [ratedLabel && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelL, { children: ratedLabel }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleL, { className: styles_module_scss_1.default.ratingIcon, children: selectedGrade.icon })] }), ratedSubtitle && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.ratingSubtitle, children: ratedSubtitle }))] })) : (title && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelL, { className: styles_module_scss_1.default.feedbackFormTitle, children: title })), !selectedGrade && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.gradeBlock, children: grades.map(grade => ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.grade, onClick: () => onGradeClick === null || onGradeClick === void 0 ? void 0 : onGradeClick(grade), role: 'presentation', children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansHeadlineL, { className: styles_module_scss_1.default.gradeIcon, children: grade.icon }), (0, jsx_runtime_1.jsx)(typography_1.Typography.LightLabelS, { className: styles_module_scss_1.default.description, children: grade.description })] }, grade.id))) })), selectedGrade &&
+                (renderTextField ? (renderTextField({
+                    comment,
+                    grade: selectedGrade,
+                    placeholder: commentPlaceholder,
+                    onChange: onCommentChange,
+                    onSubmit: onCommentSubmit,
+                })) : ((0, jsx_runtime_1.jsx)(TextFieldWithAccordionMessage_1.TextFieldWithAccordionMessage, { comment: comment, placeholder: commentPlaceholder, onChange: onCommentChange, onSubmit: onCommentSubmit, isTouchDevice: isTouchDevice, submitTooltipText: submitTooltipText }))), showCloseButton && selectedGrade && ((0, jsx_runtime_1.jsx)(icons_1.CrossSVG, { className: styles_module_scss_1.default.closeIcon, size: 24, color: figma_tokens_cloud_platform_1.themeVars.sys.neutral.textSupport, onClick: onClose }))] }));
+}

package/dist/cjs/components/RateForm/components/FieldSubmitButton.d.ts

@@ -0,0 +1,15 @@
+export type FieldSubmitButtonProps = {
+    /** Активна ли кнопка */
+    active: boolean;
+    /** Callback при клике */
+    onClick: () => void;
+    /** Размер кнопки */
+    size?: 'xs' | 's';
+    /** Дополнительный className */
+    className?: string;
+    /** Кнопка на всю ширину */
+    fullWidth?: boolean;
+    /** Текст тултипа */
+    tooltipText?: string;
+};
+export declare function FieldSubmitButton({ active, onClick, size, className, fullWidth, tooltipText, }: FieldSubmitButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RateForm/components/FieldSubmitButton.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldSubmitButton = FieldSubmitButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const button_1 = require("@snack-uikit/button");
+const tooltip_1 = require("@snack-uikit/tooltip");
+function FieldSubmitButton({ active, onClick, size = 'xs', className, fullWidth, tooltipText, }) {
+    if (active) {
+        return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: tooltipText, hoverDelayOpen: 600, open: tooltipText ? undefined : false, children: (0, jsx_runtime_1.jsx)(button_1.ButtonTonal, { fullWidth: fullWidth, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ArrowUpSVG, {}), size: size, appearance: 'primary', type: 'button', onClick: onClick, className: className }) }));
+    }
+    return (0, jsx_runtime_1.jsx)(button_1.ButtonTonal, { icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ArrowUpSVG, {}), size: size, disabled: true, className: className, fullWidth: fullWidth });
+}

package/dist/cjs/components/RateForm/components/TextFieldWithAccordionMessage/TextFieldWithAccordionMessage.d.ts

@@ -0,0 +1,19 @@
+export type TextFieldWithAccordionMessageProps = {
+    /** Существующий комментарий */
+    comment?: string;
+    /** Плейсхолдер для поля ввода */
+    placeholder?: string;
+    /** Callback при изменении текста */
+    onChange?: (value: string) => void;
+    /** Callback при отправке */
+    onSubmit?: (value: string) => void;
+    /** Максимальная длина сообщения */
+    maxLength?: number;
+    /** Является ли устройство тач-девайсом */
+    isTouchDevice?: boolean;
+    /** Показывать ли тултип на кнопке отправки */
+    showSubmitTooltip?: boolean;
+    /** Текст тултипа для кнопки отправки */
+    submitTooltipText?: string;
+};
+export declare function TextFieldWithAccordionMessage({ comment, placeholder, onChange, onSubmit, maxLength, isTouchDevice, showSubmitTooltip, submitTooltipText, }: TextFieldWithAccordionMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RateForm/components/TextFieldWithAccordionMessage/TextFieldWithAccordionMessage.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldWithAccordionMessage = TextFieldWithAccordionMessage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const figma_tokens_cloud_platform_1 = require("@sbercloud/figma-tokens-cloud-platform");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const divider_1 = require("@snack-uikit/divider");
+const fields_1 = require("@snack-uikit/fields");
+const typography_1 = require("@snack-uikit/typography");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const FieldSubmitButton_1 = require("../FieldSubmitButton");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TextFieldWithAccordionMessage({ comment, placeholder, onChange, onSubmit, maxLength = constants_1.MESSAGE_MAX_LENGTH, isTouchDevice = false, showSubmitTooltip = true, submitTooltipText, }) {
+    const textRef = (0, react_1.useRef)(null);
+    const [isMultiLine, setIsMultiLine] = (0, react_1.useState)(false);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const [message, setMessage] = (0, react_1.useState)(comment || '');
+    const isValid = typeof message === 'string' && message.trim().length > 0;
+    (0, utils_1.useLayoutEffect)(() => {
+        if (!comment)
+            return;
+        setMessage(comment);
+        const timeout = setTimeout(() => {
+            if (textRef.current) {
+                const textHeight = textRef.current.scrollHeight;
+                setIsMultiLine(textHeight > constants_1.STATIC_LINE_HEIGHT * 2 + 5);
+            }
+        }, 0);
+        return () => clearTimeout(timeout);
+    }, [comment]);
+    const handleClickMessage = () => {
+        setIsExpanded(!isExpanded);
+    };
+    const handleChangeMessage = (value) => {
+        const truncatedValue = value.slice(0, maxLength);
+        setMessage(truncatedValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(truncatedValue);
+    };
+    const handleSubmit = () => {
+        if (isValid) {
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(message);
+        }
+    };
+    const handleKeyDown = event => {
+        if (event.key === 'Enter' && !event.shiftKey && !isTouchDevice) {
+            event.preventDefault();
+            handleSubmit();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [comment && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.comment, children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, "data-clickable": isMultiLine || undefined, onClick: isMultiLine ? handleClickMessage : undefined, role: isMultiLine ? 'button' : undefined, children: [(0, jsx_runtime_1.jsx)("div", { ref: textRef, className: styles_module_scss_1.default.textContainer, "data-collapsed": (isMultiLine && !isExpanded) || undefined, children: (0, jsx_runtime_1.jsx)(typography_1.Typography.LightBodyS, { className: styles_module_scss_1.default.text, children: message }) }), isMultiLine && ((0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronUpInterfaceSVG, { color: figma_tokens_cloud_platform_1.themeVars.sys.neutral.textLight, className: styles_module_scss_1.default.textIcon, "data-rotated": !isExpanded || undefined, size: 20 }))] })] })), !comment && ((0, jsx_runtime_1.jsx)(fields_1.FieldTextArea, { value: message, size: 'm', minRows: 1, maxRows: 4, placeholder: placeholder, onChange: handleChangeMessage, onKeyDown: handleKeyDown, spellCheck: true, footer: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.actionsFooter, children: (0, jsx_runtime_1.jsx)(FieldSubmitButton_1.FieldSubmitButton, { tooltipText: showSubmitTooltip && !isTouchDevice ? submitTooltipText : undefined, className: styles_module_scss_1.default.buttonRight, "data-mobile": isTouchDevice || undefined, active: isValid, onClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' }) }), showClearButton: false }))] }));
+}

package/dist/cjs/components/RateForm/components/TextFieldWithAccordionMessage/index.d.ts

@@ -0,0 +1 @@
+export * from './TextFieldWithAccordionMessage';

package/dist/cjs/components/RateForm/components/TextFieldWithAccordionMessage/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TextFieldWithAccordionMessage"), exports);

package/dist/cjs/components/RateForm/components/TextFieldWithAccordionMessage/styles.module.css

@@ -0,0 +1,62 @@
+.actionsFooter{
+  display:flex;
+  flex-direction:row;
+  justify-content:flex-end;
+  align-items:center;
+  width:100%;
+  padding:0 10px 9px 0;
+  cursor:text;
+}
+
+.textIcon{
+  min-width:20px;
+  min-height:20px;
+  transition:transform 0.2s ease;
+}
+.textIcon[data-rotated]{
+  transform:rotate(180deg);
+}
+
+.textContainer{
+  flex:1;
+  min-width:0;
+  line-height:16px;
+}
+.textContainer[data-collapsed]{
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:2;
+  line-clamp:2;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  line-height:16px;
+  max-height:32px;
+}
+
+.comment{
+  width:100%;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:flex-start;
+  gap:16px;
+}
+
+.text{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  line-height:16px;
+}
+
+.container{
+  display:flex;
+  flex-direction:row;
+  align-items:flex-end;
+  gap:4px;
+  width:100%;
+}
+.container svg path{
+  fill:var(--sys-neutral-text-light, #8b8e9b);
+}
+.container[data-clickable]{
+  cursor:pointer;
+}

package/dist/cjs/components/RateForm/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MESSAGE_MAX_LENGTH = 255;
+export declare const STATIC_LINE_HEIGHT = 16;

package/dist/cjs/components/RateForm/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STATIC_LINE_HEIGHT = exports.MESSAGE_MAX_LENGTH = void 0;
+exports.MESSAGE_MAX_LENGTH = 255;
+exports.STATIC_LINE_HEIGHT = 16;

package/dist/cjs/components/RateForm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './RateForm';
+export type { Grade } from './types';
+export { MESSAGE_MAX_LENGTH, STATIC_LINE_HEIGHT } from './constants';

package/dist/cjs/components/RateForm/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STATIC_LINE_HEIGHT = exports.MESSAGE_MAX_LENGTH = void 0;
+__exportStar(require("./RateForm"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "MESSAGE_MAX_LENGTH", { enumerable: true, get: function () { return constants_1.MESSAGE_MAX_LENGTH; } });
+Object.defineProperty(exports, "STATIC_LINE_HEIGHT", { enumerable: true, get: function () { return constants_1.STATIC_LINE_HEIGHT; } });

package/dist/cjs/components/RateForm/styles.module.css

@@ -0,0 +1,127 @@
+.closeIcon{
+  cursor:pointer;
+  position:absolute;
+  top:8px;
+  right:8px;
+  opacity:0;
+  transition:opacity 0.2s ease;
+  will-change:opacity;
+}
+
+.feedbackForm{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  width:296px;
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border:1px solid var(--sys-neutral-decor-default, #dde0ea);
+  border-radius:8px;
+  padding:24px;
+  gap:16px;
+}
+.feedbackForm:hover .closeIcon{
+  opacity:1;
+}
+.feedbackForm[data-touch] .closeIcon{
+  opacity:1;
+}
+
+.feedbackFormTitle{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.feedbackFormLoading{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  width:296px;
+  height:141px;
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border:1px solid var(--sys-neutral-decor-default, #dde0ea);
+  border-radius:8px;
+  padding:24px;
+}
+.feedbackFormLoading[data-loading]{
+  cursor:wait;
+}
+
+.gradeBlock{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content:center;
+  gap:14px;
+  position:relative;
+}
+
+.description{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  position:absolute;
+  bottom:-12px;
+  opacity:0;
+}
+
+.grade{
+  cursor:pointer;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+  transition:all 0.2s ease;
+  height:40px;
+  width:36px;
+}
+.grade:hover > .description{
+  opacity:1;
+}
+
+.gradeIcon{
+  transition:all 0.2s ease;
+  font-size:32px;
+}
+.gradeIcon:hover{
+  font-size:36px !important;
+}
+
+.ratingContainer{
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+  gap:4px;
+}
+
+.ratingTitle{
+  display:flex;
+  flex-direction:row;
+  justify-content:center;
+  align-items:center;
+  gap:4px;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.ratingSubtitle{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.ratingIcon{
+  line-height:20px !important;
+}
+
+.mobileSubmitButton{
+  position:relative !important;
+  flex-shrink:0 !important;
+}
+.mobileSubmitButton:after{
+  content:"";
+  display:flex;
+  width:48px;
+  height:48px;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+}

package/dist/cjs/components/RateForm/types.d.ts

@@ -0,0 +1,8 @@
+export type Grade = {
+    /** Уникальный идентификатор оценки */
+    id: string;
+    /** Иконка (эмодзи) */
+    icon: string;
+    /** Описание оценки */
+    description: string;
+};

package/dist/cjs/components/RateForm/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/SshField/SshField.d.ts

@@ -6,7 +6,7 @@ export type SshFieldProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder
     /** Колбек отмены действия */
     onCancel(): void;
 }>;
-export declare const SshField: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "footer" | "spellCheck" | "required" | "labelTooltip"> & {
+export declare const SshField: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "spellCheck" | "labelTooltip" | "required" | "footer"> & {
     /** Колбек действия при отправке */
     onSubmit(value: string): void;
     /** Колбек отмены действия */

package/dist/cjs/components/SshField/components/MobileFieldAi/MobileFieldAi.d.ts

@@ -1,5 +1,5 @@
 import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
-export declare const MobileFieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "footer" | "spellCheck" | "required" | "labelTooltip"> & {
+export declare const MobileFieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "spellCheck" | "labelTooltip" | "required" | "footer"> & {
     onSubmit(): void;
     submitEnabled: boolean;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/cjs/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ButtonClaudia';
 export * from './ButtonGiga';
 export * from './ChatStatusAnnouncement';
+export * from './RateForm';
 export * from './IconGiga';
 export * from './RecommendPannel';
 export * from './SshField';

package/dist/cjs/components/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ButtonClaudia"), exports);
 __exportStar(require("./ButtonGiga"), exports);
 __exportStar(require("./ChatStatusAnnouncement"), exports);
+__exportStar(require("./RateForm"), exports);
 __exportStar(require("./IconGiga"), exports);
 __exportStar(require("./RecommendPannel"), exports);
 __exportStar(require("./SshField"), exports);

package/dist/esm/components/RateForm/RateForm.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { Grade } from './types';
+export type RateFormProps = {
+    /** Массив доступных оценок */
+    grades: Grade[];
+    /** Текущая выбранная оценка */
+    selectedGrade?: Grade | null;
+    /** Заголовок формы (показывается когда оценка не выбрана) */
+    title?: string;
+    /** Текст "Вы поставили" */
+    ratedLabel?: string;
+    /** Подзаголовок после выбора оценки */
+    ratedSubtitle?: string;
+    /** Комментарий пользователя */
+    comment?: string;
+    /** Состояние загрузки */
+    isLoading?: boolean;
+    /** Callback при клике на оценку */
+    onGradeClick?: (grade: Grade) => void;
+    /** Callback при закрытии формы */
+    onClose?: () => void;
+    /** Callback при изменении комментария */
+    onCommentChange?: (comment: string) => void;
+    /** Callback при отправке комментария */
+    onCommentSubmit?: (comment: string) => void;
+    /** Плейсхолдер для поля комментария */
+    commentPlaceholder?: string;
+    /** Показывать ли кнопку закрытия */
+    showCloseButton?: boolean;
+    /** Дополнительный className */
+    className?: string;
+    /** Является ли устройство тач-девайсом */
+    isTouchDevice?: boolean;
+    /** Текст тултипа для кнопки отправки */
+    submitTooltipText?: string;
+    /** Render prop для кастомного отображения текстового поля */
+    renderTextField?: (props: {
+        comment?: string;
+        grade: Grade;
+        placeholder?: string;
+        onChange?: (value: string) => void;
+        onSubmit?: (value: string) => void;
+    }) => ReactNode;
+};
+export declare function RateForm({ grades, selectedGrade, title, ratedLabel, ratedSubtitle, comment, isLoading, onGradeClick, onClose, onCommentChange, onCommentSubmit, commentPlaceholder, showCloseButton, className, isTouchDevice, submitTooltipText, renderTextField, }: RateFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RateForm/RateForm.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+import { CrossSVG } from '@snack-uikit/icons';
+import { Spinner } from '@snack-uikit/loaders';
+import { Typography } from '@snack-uikit/typography';
+import { TextFieldWithAccordionMessage } from './components/TextFieldWithAccordionMessage';
+import styles from './styles.module.css';
+export function RateForm({ grades, selectedGrade, title, ratedLabel, ratedSubtitle, comment, isLoading = false, onGradeClick, onClose, onCommentChange, onCommentSubmit, commentPlaceholder, showCloseButton = true, className, isTouchDevice = false, submitTooltipText, renderTextField, }) {
+    if (isLoading) {
+        return (_jsx("div", { className: cn(styles.feedbackFormLoading, className), "data-loading": true, children: _jsx(Spinner, { size: 's' }) }));
+    }
+    return (_jsxs("div", { className: cn(styles.feedbackForm, className), "data-touch": isTouchDevice || undefined, children: [selectedGrade ? (_jsxs("div", { className: styles.ratingContainer, children: [_jsxs("div", { className: styles.ratingTitle, children: [ratedLabel && _jsx(Typography.SansLabelL, { children: ratedLabel }), _jsx(Typography.SansTitleL, { className: styles.ratingIcon, children: selectedGrade.icon })] }), ratedSubtitle && (_jsx(Typography.SansBodyM, { className: styles.ratingSubtitle, children: ratedSubtitle }))] })) : (title && _jsx(Typography.SansLabelL, { className: styles.feedbackFormTitle, children: title })), !selectedGrade && (_jsx("div", { className: styles.gradeBlock, children: grades.map(grade => (_jsxs("div", { className: styles.grade, onClick: () => onGradeClick === null || onGradeClick === void 0 ? void 0 : onGradeClick(grade), role: 'presentation', children: [_jsx(Typography.SansHeadlineL, { className: styles.gradeIcon, children: grade.icon }), _jsx(Typography.LightLabelS, { className: styles.description, children: grade.description })] }, grade.id))) })), selectedGrade &&
+                (renderTextField ? (renderTextField({
+                    comment,
+                    grade: selectedGrade,
+                    placeholder: commentPlaceholder,
+                    onChange: onCommentChange,
+                    onSubmit: onCommentSubmit,
+                })) : (_jsx(TextFieldWithAccordionMessage, { comment: comment, placeholder: commentPlaceholder, onChange: onCommentChange, onSubmit: onCommentSubmit, isTouchDevice: isTouchDevice, submitTooltipText: submitTooltipText }))), showCloseButton && selectedGrade && (_jsx(CrossSVG, { className: styles.closeIcon, size: 24, color: themeVars.sys.neutral.textSupport, onClick: onClose }))] }));
+}

package/dist/esm/components/RateForm/components/FieldSubmitButton.d.ts

@@ -0,0 +1,15 @@
+export type FieldSubmitButtonProps = {
+    /** Активна ли кнопка */
+    active: boolean;
+    /** Callback при клике */
+    onClick: () => void;
+    /** Размер кнопки */
+    size?: 'xs' | 's';
+    /** Дополнительный className */
+    className?: string;
+    /** Кнопка на всю ширину */
+    fullWidth?: boolean;
+    /** Текст тултипа */
+    tooltipText?: string;
+};
+export declare function FieldSubmitButton({ active, onClick, size, className, fullWidth, tooltipText, }: FieldSubmitButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RateForm/components/FieldSubmitButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowUpSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonTonal } from '@snack-uikit/button';
+import { Tooltip } from '@snack-uikit/tooltip';
+export function FieldSubmitButton({ active, onClick, size = 'xs', className, fullWidth, tooltipText, }) {
+    if (active) {
+        return (_jsx(Tooltip, { tip: tooltipText, hoverDelayOpen: 600, open: tooltipText ? undefined : false, children: _jsx(ButtonTonal, { fullWidth: fullWidth, icon: _jsx(ArrowUpSVG, {}), size: size, appearance: 'primary', type: 'button', onClick: onClick, className: className }) }));
+    }
+    return _jsx(ButtonTonal, { icon: _jsx(ArrowUpSVG, {}), size: size, disabled: true, className: className, fullWidth: fullWidth });
+}