@astral/ui 4.38.0 → 4.40.0

package/components/Button/Button.js

@@ -1,20 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRefWithGeneric } from '../forwardRefWithGeneric';
-import { classNames } from '../utils/classNames';
-import { buttonClassnames } from './constants';
 import { ButtonColors, ButtonVariants } from './enums';
 import { StyledButton, StyledLoader } from './styles';
 import { useLogic } from './useLogic';
 const UnwrappedButton = (props, ref) => {
-    const { loadingIndicatorColor } = useLogic(props);
+    const { loadingIndicatorColor, classnames } = useLogic(props);
     const { variant = ButtonVariants.Contained, color = variant === ButtonVariants.Text
         ? ButtonColors.Grey
         : ButtonColors.Primary, loading, disabled, children, className, selected, ...restProps } = props;
-    return (_jsxs(StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled || loading, selected: selected, ...restProps, className: classNames(className, buttonClassnames.root, {
-            [buttonClassnames.loading]: loading,
-            [buttonClassnames.selected]: selected,
-            [buttonClassnames.disabled]: disabled,
-        }), "aria-disabled": loading, children: [loading && (_jsx(StyledLoader, { color: loadingIndicatorColor, size: "small", "$color": color, "$variant": variant, "$isDisabled": disabled })), children] }));
+    return (_jsxs(StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled || loading, selected: selected, ...restProps, className: classnames, "aria-disabled": loading, children: [loading && (_jsx(StyledLoader, { color: loadingIndicatorColor, size: "small", "$color": color, "$variant": variant, "$isDisabled": disabled })), children] }));
 };
 export const Button = forwardRefWithGeneric(UnwrappedButton);
 export default Button;

package/components/Button/constants.d.ts

@@ -1,5 +1,17 @@
 export { buttonClasses } from '@mui/material/Button';
+export declare const buttonColorClassnames: {
+    primary: string;
+    error: string;
+    success: string;
+    warning: string;
+    grey: string;
+};
 export declare const buttonClassnames: {
+    primary: string;
+    error: string;
+    success: string;
+    warning: string;
+    grey: string;
     root: string;
     loading: string;
     selected: string;

package/components/Button/constants.js

@@ -1,8 +1,17 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
+import { ButtonColors } from './enums';
 export { buttonClasses } from '@mui/material/Button';
+export const buttonColorClassnames = {
+    [ButtonColors.Primary]: createUIKitClassname('button_color-primary'),
+    [ButtonColors.Error]: createUIKitClassname('button_color-error'),
+    [ButtonColors.Success]: createUIKitClassname('button_color-success'),
+    [ButtonColors.Warning]: createUIKitClassname('button_color-warning'),
+    [ButtonColors.Grey]: createUIKitClassname('button_color-grey'),
+};
 export const buttonClassnames = {
     root: createUIKitClassname('button'),
     loading: createUIKitClassname('button_loading'),
     selected: createUIKitClassname('button_selected'),
     disabled: createUIKitClassname('button_disabled'),
+    ...buttonColorClassnames,
 };

package/components/Button/useLogic/useLogic.d.ts

@@ -1,7 +1,8 @@
 import { type ButtonProps } from '../types';
 type UseLogicParam = ButtonProps;
 type Color = 'primary' | 'inverted';
-export declare const useLogic: ({ variant, }: UseLogicParam) => {
+export declare const useLogic: ({ loading, selected, variant, color, disabled, className, }: UseLogicParam) => {
     loadingIndicatorColor: Color;
+    classnames: string;
 };
 export {};

package/components/Button/useLogic/useLogic.js

@@ -1,11 +1,20 @@
 import { useMemo } from 'react';
-import { ButtonVariants } from '../enums';
-export const useLogic = ({ variant = ButtonVariants.Contained, }) => {
+import { classNames } from '../../utils/classNames';
+import { buttonClassnames, buttonColorClassnames } from '../constants';
+import { ButtonColors, ButtonVariants } from '../enums';
+export const useLogic = ({ loading, selected, variant = ButtonVariants.Contained, color = variant === ButtonVariants.Text
+    ? ButtonColors.Grey
+    : ButtonColors.Primary, disabled, className, }) => {
     const loadingIndicatorColor = useMemo(() => {
         if (variant !== ButtonVariants.Contained) {
             return 'primary';
         }
         return 'inverted';
     }, [variant]);
-    return { loadingIndicatorColor };
+    const classnames = useMemo(() => classNames(buttonClassnames.root, buttonColorClassnames[color], className, {
+        [buttonClassnames.loading]: loading,
+        [buttonClassnames.disabled]: disabled,
+        [buttonClassnames.selected]: selected,
+    }), [loading, selected, color, className, disabled]);
+    return { loadingIndicatorColor, classnames };
 };

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/components/Button/Button.js

@@ -3,21 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const forwardRefWithGeneric_1 = require("../forwardRefWithGeneric");
-const classNames_1 = require("../utils/classNames");
-const constants_1 = require("./constants");
 const enums_1 = require("./enums");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const UnwrappedButton = (props, ref) => {
-    const { loadingIndicatorColor } = (0, useLogic_1.useLogic)(props);
+    const { loadingIndicatorColor, classnames } = (0, useLogic_1.useLogic)(props);
     const { variant = enums_1.ButtonVariants.Contained, color = variant === enums_1.ButtonVariants.Text
         ? enums_1.ButtonColors.Grey
         : enums_1.ButtonColors.Primary, loading, disabled, children, className, selected, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled || loading, selected: selected, ...restProps, className: (0, classNames_1.classNames)(className, constants_1.buttonClassnames.root, {
-            [constants_1.buttonClassnames.loading]: loading,
-            [constants_1.buttonClassnames.selected]: selected,
-            [constants_1.buttonClassnames.disabled]: disabled,
-        }), "aria-disabled": loading, children: [loading && ((0, jsx_runtime_1.jsx)(styles_1.StyledLoader, { color: loadingIndicatorColor, size: "small", "$color": color, "$variant": variant, "$isDisabled": disabled })), children] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled || loading, selected: selected, ...restProps, className: classnames, "aria-disabled": loading, children: [loading && ((0, jsx_runtime_1.jsx)(styles_1.StyledLoader, { color: loadingIndicatorColor, size: "small", "$color": color, "$variant": variant, "$isDisabled": disabled })), children] }));
 };
 exports.Button = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(UnwrappedButton);
 exports.default = exports.Button;

package/node/components/Button/constants.d.ts

@@ -1,5 +1,17 @@
 export { buttonClasses } from '@mui/material/Button';
+export declare const buttonColorClassnames: {
+    primary: string;
+    error: string;
+    success: string;
+    warning: string;
+    grey: string;
+};
 export declare const buttonClassnames: {
+    primary: string;
+    error: string;
+    success: string;
+    warning: string;
+    grey: string;
     root: string;
     loading: string;
     selected: string;

package/node/components/Button/constants.js

@@ -1,12 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonClassnames = exports.buttonClasses = void 0;
+exports.buttonClassnames = exports.buttonColorClassnames = exports.buttonClasses = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+const enums_1 = require("./enums");
 var Button_1 = require("@mui/material/Button");
 Object.defineProperty(exports, "buttonClasses", { enumerable: true, get: function () { return Button_1.buttonClasses; } });
+exports.buttonColorClassnames = {
+    [enums_1.ButtonColors.Primary]: (0, createUIKitClassname_1.createUIKitClassname)('button_color-primary'),
+    [enums_1.ButtonColors.Error]: (0, createUIKitClassname_1.createUIKitClassname)('button_color-error'),
+    [enums_1.ButtonColors.Success]: (0, createUIKitClassname_1.createUIKitClassname)('button_color-success'),
+    [enums_1.ButtonColors.Warning]: (0, createUIKitClassname_1.createUIKitClassname)('button_color-warning'),
+    [enums_1.ButtonColors.Grey]: (0, createUIKitClassname_1.createUIKitClassname)('button_color-grey'),
+};
 exports.buttonClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('button'),
     loading: (0, createUIKitClassname_1.createUIKitClassname)('button_loading'),
     selected: (0, createUIKitClassname_1.createUIKitClassname)('button_selected'),
     disabled: (0, createUIKitClassname_1.createUIKitClassname)('button_disabled'),
+    ...exports.buttonColorClassnames,
 };

package/node/components/Button/useLogic/useLogic.d.ts

@@ -1,7 +1,8 @@
 import { type ButtonProps } from '../types';
 type UseLogicParam = ButtonProps;
 type Color = 'primary' | 'inverted';
-export declare const useLogic: ({ variant, }: UseLogicParam) => {
+export declare const useLogic: ({ loading, selected, variant, color, disabled, className, }: UseLogicParam) => {
     loadingIndicatorColor: Color;
+    classnames: string;
 };
 export {};

package/node/components/Button/useLogic/useLogic.js

@@ -2,14 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const classNames_1 = require("../../utils/classNames");
+const constants_1 = require("../constants");
 const enums_1 = require("../enums");
-const useLogic = ({ variant = enums_1.ButtonVariants.Contained, }) => {
+const useLogic = ({ loading, selected, variant = enums_1.ButtonVariants.Contained, color = variant === enums_1.ButtonVariants.Text
+    ? enums_1.ButtonColors.Grey
+    : enums_1.ButtonColors.Primary, disabled, className, }) => {
     const loadingIndicatorColor = (0, react_1.useMemo)(() => {
         if (variant !== enums_1.ButtonVariants.Contained) {
             return 'primary';
         }
         return 'inverted';
     }, [variant]);
-    return { loadingIndicatorColor };
+    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.buttonClassnames.root, constants_1.buttonColorClassnames[color], className, {
+        [constants_1.buttonClassnames.loading]: loading,
+        [constants_1.buttonClassnames.disabled]: disabled,
+        [constants_1.buttonClassnames.selected]: selected,
+    }), [loading, selected, color, className, disabled]);
+    return { loadingIndicatorColor, classnames };
 };
 exports.useLogic = useLogic;

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.38.0",
+  "version": "4.40.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {