@astral/ui 4.39.0 → 4.40.0

package/hook-form/EditableText/EditableText.d.ts

@@ -2,6 +2,7 @@ import { type ReactElement, type ReactNode } from 'react';
 import { type UseFormReturn } from '../useForm';
 import { type FIELD_NAME } from './constants';
 import type { FormValues, ValidationFn } from './types';
+export type ShowEditIconMode = 'always' | 'none' | 'onHover';
 export type EditableTextProps<TValue = string> = {
     /**
      * Название класса, применяется к корневому компоненту
@@ -13,10 +14,18 @@ export type EditableTextProps<TValue = string> = {
      */
     initialValue?: TValue;
     /**
-     * Если false, иконка редактирования не будет отображаться
+     * Если false, иконка редактирования не будет отображаться.
+     * Для новых сценариев предпочтительнее `showEditIcon`.
+     * Если переданы оба параметра, для отображения иконки используется `showEditIcon`.
      * @default true
      */
     isShowIcon?: boolean;
+    /**
+     * Режим отображения иконки редактирования (аналогично `CopyTypography.showCopyIcon`).
+     * Имеет приоритет над `isShowIcon`.
+     * @default если не задан — наследуется из `isShowIcon` (true → always, false → none)
+     */
+    showEditIcon?: ShowEditIconMode;
     /**
      * Если true, будет отображаться лоадер
      */

package/hook-form/EditableText/EditableText.js

@@ -1,17 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tooltip } from '../../components/Tooltip';
+import { classNames } from '../../components/utils/classNames';
+import { editableTextClassnames } from './constants';
 import { EditingForm } from './EditingForm';
 import { DisplayValue, StyledEditIcon, StyledLoader, StyledPopover, } from './styles';
 import { useLogic } from './useLogic';
+const getShowEditIconMode = ({ showEditIcon, isShowIcon = true, }) => {
+    if (showEditIcon !== undefined) {
+        return showEditIcon;
+    }
+    return isShowIcon === false ? 'none' : 'always';
+};
 // biome-ignore lint/complexity/noUselessTypeConstraint: Фикс типизации в тестах
 export const EditableText = (props) => {
     const { isIconOnLeft, onClose, displayValueProps, tooltipProps, popoverProps, } = useLogic(props);
-    const { className, children, isShowIcon = true, isLoading, iconPosition = 'right', ...restProps } = props;
+    const { className, children, isShowIcon = true, isLoading, showEditIcon, iconPosition = 'right', ...restProps } = props;
+    const showEditIconMode = getShowEditIconMode({ showEditIcon, isShowIcon });
     const renderIcon = () => {
         if (isLoading) {
             return _jsx(StyledLoader, { "$iconPosition": iconPosition });
         }
-        return isShowIcon ? _jsx(StyledEditIcon, { "$iconPosition": iconPosition }) : null;
+        if (showEditIconMode === 'none') {
+            return null;
+        }
+        return (_jsx(StyledEditIcon, { "$iconPosition": iconPosition, className: classNames({
+                [editableTextClassnames.showIconOnHover]: showEditIconMode === 'onHover',
+            }) }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { ...tooltipProps, placement: "bottom", children: _jsxs(DisplayValue, { "$isLoading": isLoading, className: className, variant: "inherit", ...displayValueProps, children: [isIconOnLeft && renderIcon(), children, !isIconOnLeft && renderIcon()] }) }), _jsx(StyledPopover, { anchorOrigin: {
                     vertical: 'bottom',

package/hook-form/EditableText/constants.d.ts

@@ -1 +1,4 @@
 export declare const FIELD_NAME = "editableField";
+export declare const editableTextClassnames: {
+    showIconOnHover: string;
+};

package/hook-form/EditableText/constants.js

@@ -1 +1,5 @@
+import { createUIKitClassname } from '../../components/utils/createUIKitClassname';
 export const FIELD_NAME = 'editableField';
+export const editableTextClassnames = {
+    showIconOnHover: createUIKitClassname('editable-text__edit-icon_show-on-hover'),
+};

package/hook-form/EditableText/styles.js

@@ -3,6 +3,7 @@ import { Popover } from '../../components/Popover';
 import { styled } from '../../components/styled';
 import { Typography } from '../../components/Typography';
 import { EditOutlineMd } from '../../icons/EditOutlineMd';
+import { editableTextClassnames } from './constants';
 const getBackgroundColor = (theme, $isEdited, $isLoading) => {
     if ($isEdited) {
         return theme.palette.primary[100];
@@ -33,6 +34,10 @@ export const DisplayValue = styled(Typography, {
     cursor: ${({ $isLoading }) => ($isLoading ? 'default' : 'pointer')};
 
     text-decoration: ${({ $isLoading }) => $isLoading ? 'inherit' : 'underline'};
+
+    .${editableTextClassnames.showIconOnHover} {
+      display: unset;
+    }
   }
 `;
 export const StyledEditIcon = styled(EditOutlineMd, {
@@ -49,6 +54,10 @@ export const StyledEditIcon = styled(EditOutlineMd, {
   margin-left: ${({ $iconPosition, theme }) => $iconPosition === 'right' ? theme.spacing(1) : ''};
 
   font-size: inherit;
+
+  &.${editableTextClassnames.showIconOnHover} {
+    display: none;
+  }
 `;
 export const StyledLoader = styled(Loader, {
     shouldForwardProp: (prop) => !['$iconPosition'].includes(prop),

package/node/hook-form/EditableText/EditableText.d.ts

@@ -2,6 +2,7 @@ import { type ReactElement, type ReactNode } from 'react';
 import { type UseFormReturn } from '../useForm';
 import { type FIELD_NAME } from './constants';
 import type { FormValues, ValidationFn } from './types';
+export type ShowEditIconMode = 'always' | 'none' | 'onHover';
 export type EditableTextProps<TValue = string> = {
     /**
      * Название класса, применяется к корневому компоненту
@@ -13,10 +14,18 @@ export type EditableTextProps<TValue = string> = {
      */
     initialValue?: TValue;
     /**
-     * Если false, иконка редактирования не будет отображаться
+     * Если false, иконка редактирования не будет отображаться.
+     * Для новых сценариев предпочтительнее `showEditIcon`.
+     * Если переданы оба параметра, для отображения иконки используется `showEditIcon`.
      * @default true
      */
     isShowIcon?: boolean;
+    /**
+     * Режим отображения иконки редактирования (аналогично `CopyTypography.showCopyIcon`).
+     * Имеет приоритет над `isShowIcon`.
+     * @default если не задан — наследуется из `isShowIcon` (true → always, false → none)
+     */
+    showEditIcon?: ShowEditIconMode;
     /**
      * Если true, будет отображаться лоадер
      */

package/node/hook-form/EditableText/EditableText.js

@@ -3,18 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditableText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Tooltip_1 = require("../../components/Tooltip");
+const classNames_1 = require("../../components/utils/classNames");
+const constants_1 = require("./constants");
 const EditingForm_1 = require("./EditingForm");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const getShowEditIconMode = ({ showEditIcon, isShowIcon = true, }) => {
+    if (showEditIcon !== undefined) {
+        return showEditIcon;
+    }
+    return isShowIcon === false ? 'none' : 'always';
+};
 // biome-ignore lint/complexity/noUselessTypeConstraint: Фикс типизации в тестах
 const EditableText = (props) => {
     const { isIconOnLeft, onClose, displayValueProps, tooltipProps, popoverProps, } = (0, useLogic_1.useLogic)(props);
-    const { className, children, isShowIcon = true, isLoading, iconPosition = 'right', ...restProps } = props;
+    const { className, children, isShowIcon = true, isLoading, showEditIcon, iconPosition = 'right', ...restProps } = props;
+    const showEditIconMode = getShowEditIconMode({ showEditIcon, isShowIcon });
     const renderIcon = () => {
         if (isLoading) {
             return (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, { "$iconPosition": iconPosition });
         }
-        return isShowIcon ? (0, jsx_runtime_1.jsx)(styles_1.StyledEditIcon, { "$iconPosition": iconPosition }) : null;
+        if (showEditIconMode === 'none') {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsx)(styles_1.StyledEditIcon, { "$iconPosition": iconPosition, className: (0, classNames_1.classNames)({
+                [constants_1.editableTextClassnames.showIconOnHover]: showEditIconMode === 'onHover',
+            }) }));
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { ...tooltipProps, placement: "bottom", children: (0, jsx_runtime_1.jsxs)(styles_1.DisplayValue, { "$isLoading": isLoading, className: className, variant: "inherit", ...displayValueProps, children: [isIconOnLeft && renderIcon(), children, !isIconOnLeft && renderIcon()] }) }), (0, jsx_runtime_1.jsx)(styles_1.StyledPopover, { anchorOrigin: {
                     vertical: 'bottom',

package/node/hook-form/EditableText/constants.d.ts

@@ -1 +1,4 @@
 export declare const FIELD_NAME = "editableField";
+export declare const editableTextClassnames: {
+    showIconOnHover: string;
+};

package/node/hook-form/EditableText/constants.js

@@ -1,4 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FIELD_NAME = void 0;
+exports.editableTextClassnames = exports.FIELD_NAME = void 0;
+const createUIKitClassname_1 = require("../../components/utils/createUIKitClassname");
 exports.FIELD_NAME = 'editableField';
+exports.editableTextClassnames = {
+    showIconOnHover: (0, createUIKitClassname_1.createUIKitClassname)('editable-text__edit-icon_show-on-hover'),
+};

package/node/hook-form/EditableText/styles.js

@@ -6,6 +6,7 @@ const Popover_1 = require("../../components/Popover");
 const styled_1 = require("../../components/styled");
 const Typography_1 = require("../../components/Typography");
 const EditOutlineMd_1 = require("../../icons/EditOutlineMd");
+const constants_1 = require("./constants");
 const getBackgroundColor = (theme, $isEdited, $isLoading) => {
     if ($isEdited) {
         return theme.palette.primary[100];
@@ -36,6 +37,10 @@ exports.DisplayValue = (0, styled_1.styled)(Typography_1.Typography, {
     cursor: ${({ $isLoading }) => ($isLoading ? 'default' : 'pointer')};
 
     text-decoration: ${({ $isLoading }) => $isLoading ? 'inherit' : 'underline'};
+
+    .${constants_1.editableTextClassnames.showIconOnHover} {
+      display: unset;
+    }
   }
 `;
 exports.StyledEditIcon = (0, styled_1.styled)(EditOutlineMd_1.EditOutlineMd, {
@@ -52,6 +57,10 @@ exports.StyledEditIcon = (0, styled_1.styled)(EditOutlineMd_1.EditOutlineMd, {
   margin-left: ${({ $iconPosition, theme }) => $iconPosition === 'right' ? theme.spacing(1) : ''};
 
   font-size: inherit;
+
+  &.${constants_1.editableTextClassnames.showIconOnHover} {
+    display: none;
+  }
 `;
 exports.StyledLoader = (0, styled_1.styled)(Loader_1.Loader, {
     shouldForwardProp: (prop) => !['$iconPosition'].includes(prop),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.39.0",
+  "version": "4.40.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {