@moysklad/uikit 28.1.0 → 31.20.0

package/dist/components/Select/ShortVariant/ShortVariant_module.css

@@ -5,7 +5,7 @@
 .container-sh9fLu {
   cursor: pointer;
   align-items: center;
-  column-gap: 12px;
+  column-gap: 4px;
   width: fit-content;
   display: flex;
 }
@@ -28,6 +28,10 @@
   display: flex;
 }
 
+.focusOutlineNone-j96au6:focus {
+  outline: none;
+}
+
 .value-W7MA4Q {
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/components/Select/types.d.ts

@@ -50,6 +50,7 @@ export interface IRenderDropdownContentOptions<T = unknown> {
     searchHandler: (text: string) => void;
     inputKeyUpHandler: (e: KeyboardEvent<HTMLInputElement>) => void;
     clearHandler: () => void;
+    isDropdownOpen: boolean;
 }
 export interface IRenderInputOptions {
     triggerRef: MutableRefObject<HTMLDivElement | null>;

package/dist/components/Select/useDropdownPadding.d.ts

@@ -0,0 +1,5 @@
+import { type CSSProperties } from 'react';
+export declare const useDropdownPadding: () => {
+    scrollPaddings: CSSProperties;
+    dropdownActionsContainerRefCb: (node: null | HTMLDivElement) => void;
+};

package/dist/components/Select/useDropdownPadding.js

@@ -0,0 +1,22 @@
+import { useCallback, useMemo, useState } from "react";
+const useDropdownPadding = ()=>{
+    const [dropdownActionsContainerHeight, setDropdownActionsContainerHeight] = useState(0);
+    const dropdownActionsContainerRefCb = useCallback((node)=>{
+        setDropdownActionsContainerHeight(node?.clientHeight ?? 0);
+    }, []);
+    const scrollPaddings = useMemo(()=>{
+        const scrollPadding = 4;
+        const scrollPaddings = {
+            scrollPaddingTop: scrollPadding,
+            scrollPaddingBottom: dropdownActionsContainerHeight + scrollPadding
+        };
+        return scrollPaddings;
+    }, [
+        dropdownActionsContainerHeight
+    ]);
+    return {
+        scrollPaddings,
+        dropdownActionsContainerRefCb
+    };
+};
+export { useDropdownPadding };

package/dist/components/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,28 @@
+import { type ButtonHTMLAttributes } from 'react';
+import type { ValueOf } from '../../common/types';
+import { type ISelectOption } from '../Select/Select';
+import { StatusColor, type StatusColorType } from './utils/StatusBadgeColor';
+export declare const StatusBadgeSize: {
+    readonly Comfortable: "comfortable";
+    readonly Compact: "compact";
+};
+export type StatusBadgeSizeType = ValueOf<typeof StatusBadgeSize>;
+export interface StatusBadgeOption<T = unknown> extends Pick<ISelectOption<T>, 'label' | 'value' | 'dto'> {
+    color: StatusColorType;
+}
+export interface StatusBadgeProps<T = unknown> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect' | 'value'> {
+    title: string;
+    value?: StatusBadgeOption<T>;
+    testId?: string;
+    /**
+     * @default "comfortable"
+     */
+    size?: StatusBadgeSizeType;
+    availableStatuses: StatusBadgeOption<T>[];
+    dropdownZIndex?: number;
+    dropdownButtonText?: string;
+    onSelect?: (option: StatusBadgeOption<T>) => void;
+    onDropdownButtonClick?: () => void;
+}
+export declare const StatusBadge: <T>({ title, value, disabled, className, testId, size: sizeProp, availableStatuses, dropdownZIndex, dropdownButtonText, onSelect, onDropdownButtonClick, ...props }: StatusBadgeProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { StatusColor, type StatusColorType };

package/dist/components/StatusBadge/StatusBadge.js

@@ -0,0 +1,167 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../common/css/index.js";
+import { mergeRefs } from "../../common/react/mergeRefs.js";
+import { useOverflowHint } from "../../hooks/useOverflowHint/index.js";
+import { Down12Icon, Settings16Icon } from "../../icon/index.js";
+import { Button } from "../Button/Button.js";
+import { Dropdown, useDropdown } from "../Dropdown/Dropdown.js";
+import { Hint } from "../Hint/Hint.js";
+import { Select } from "../Select/Select.js";
+import { Text, TextVariant } from "../Text/Text.js";
+import { getStatusColor } from "./utils/getStatusBadgeColor.js";
+import { StatusColor } from "./utils/StatusBadgeColor.js";
+import StatusBadge_module from "./StatusBadge.module.js";
+const StatusBadgeSize = {
+    Comfortable: 'comfortable',
+    Compact: 'compact'
+};
+const StatusBadge = ({ title, value, disabled, className, testId, size: sizeProp, availableStatuses, dropdownZIndex, dropdownButtonText = 'Настроить статусы', onSelect, onDropdownButtonClick, ...props })=>{
+    const color = value?.color ?? StatusColor.Empty;
+    const size = sizeProp ?? StatusBadgeSize.Comfortable;
+    const statusDropdown = useDropdown();
+    const titleHint = useOverflowHint({
+        targetText: title
+    });
+    const [cursor, setCursor] = useState(0);
+    const [isHintVisible, setIsHintVisible] = useState(false);
+    const badgeButtonRef = useRef(null);
+    const dropdownButtonRef = useRef(null);
+    const handleKeyDown = (event)=>{
+        props.onKeyDown?.(event);
+        if (statusDropdown.open && [
+            'ArrowUp',
+            'ArrowDown'
+        ].includes(event.key)) event.preventDefault();
+        if (statusDropdown.open && 'Tab' === event.key && !event.shiftKey) {
+            event.preventDefault();
+            dropdownButtonRef.current?.focus();
+        }
+    };
+    const handleClick = (event)=>{
+        props.onClick?.(event);
+        statusDropdown.handleToggle();
+    };
+    useEffect(()=>{
+        if (statusDropdown.open) setIsHintVisible(false);
+    }, [
+        statusDropdown.open
+    ]);
+    const handleSelect = (option)=>{
+        onSelect?.({
+            label: option.label,
+            value: option.value,
+            color: getStatusColor(option.color),
+            dto: option.dto
+        });
+    };
+    const handleDropdownButtonKeyDown = (event)=>{
+        if ('Enter' === event.key) event.stopPropagation();
+        if ('Tab' === event.key) {
+            event.preventDefault();
+            statusDropdown.handleClose();
+            badgeButtonRef.current?.focus();
+        }
+    };
+    const handleDropdownButtonClick = ()=>{
+        statusDropdown.handleClose();
+        badgeButtonRef.current?.focus();
+        onDropdownButtonClick?.();
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("button", {
+                ...props,
+                ...statusDropdown.triggerAriaProps,
+                ref: mergeRefs([
+                    badgeButtonRef,
+                    statusDropdown.triggerRef
+                ]),
+                className: cn(StatusBadge_module.container, StatusBadge_module[color], className, disabled && StatusBadge_module.disabled),
+                tabIndex: disabled ? -1 : 0,
+                "data-test-id": testId,
+                "data-disabled": disabled,
+                onClick: disabled ? void 0 : handleClick,
+                onKeyDown: handleKeyDown,
+                type: "button",
+                children: [
+                    /*#__PURE__*/ jsx(Hint, {
+                        visible: isHintVisible,
+                        onVisibleChange: (visible)=>{
+                            if (!statusDropdown.open) setIsHintVisible(visible);
+                        },
+                        overlay: /*#__PURE__*/ jsx(Text.Body, {
+                            colorToken: "invert",
+                            children: title
+                        }),
+                        trigger: titleHint.needShowHint ? 'hover' : [],
+                        testId: testId,
+                        children: /*#__PURE__*/ jsx(Text, {
+                            ref: titleHint.targetRef,
+                            variant: size === StatusBadgeSize.Comfortable ? TextVariant.body : TextVariant.caption,
+                            colorToken: color === StatusColor.Empty ? 'primary' : 'invert',
+                            className: StatusBadge_module.title,
+                            testId: testId ? `${testId}-title` : void 0,
+                            children: title
+                        })
+                    }),
+                    !disabled && /*#__PURE__*/ jsx(Down12Icon, {
+                        stroke: "var(--status-icon-color)"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Dropdown, {
+                ...statusDropdown.dropdownAriaProps,
+                open: statusDropdown.open,
+                ref: statusDropdown.dropdownRef,
+                onClose: statusDropdown.handleClose,
+                triggerRef: statusDropdown.triggerRef,
+                zIndex: dropdownZIndex,
+                className: StatusBadge_module.dropdown,
+                children: [
+                    /*#__PURE__*/ jsx(Select.OptionsList, {
+                        className: StatusBadge_module.optionsList,
+                        isFocusable: false,
+                        skipSelectOnTab: true,
+                        testId: testId,
+                        cursor: cursor,
+                        onSetCursor: setCursor,
+                        items: availableStatuses,
+                        value: value,
+                        onSelect: handleSelect,
+                        onOptionClick: statusDropdown.handleClose,
+                        renderOption: (option)=>/*#__PURE__*/ jsxs("div", {
+                                className: StatusBadge_module.statusWithText,
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: cn(StatusBadge_module.statusBullet, option.color && StatusBadge_module[option.color])
+                                    }),
+                                    /*#__PURE__*/ jsx(Text.Body, {
+                                        className: StatusBadge_module.optionText,
+                                        children: option.label
+                                    })
+                                ]
+                            })
+                    }),
+                    !!availableStatuses.length && /*#__PURE__*/ jsx("div", {
+                        className: StatusBadge_module.delimitter
+                    }),
+                    /*#__PURE__*/ jsxs(Button, {
+                        testId: testId ? `${testId}-settings-button` : void 0,
+                        ref: dropdownButtonRef,
+                        variant: "frameless",
+                        withHorisontalPadding: true,
+                        type: "button",
+                        onKeyDown: handleDropdownButtonKeyDown,
+                        onClick: handleDropdownButtonClick,
+                        children: [
+                            /*#__PURE__*/ jsx(Settings16Icon, {}),
+                            dropdownButtonText
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { StatusBadge, StatusBadgeSize, StatusColor };

package/dist/components/StatusBadge/StatusBadge.module.js

@@ -0,0 +1,37 @@
+import "./StatusBadge_module.css";
+const StatusBadge_module = {
+    container: "container-fsEGWn",
+    disabled: "disabled-yJv1lv",
+    title: "title-gOl3dW",
+    empty: "empty-_VmmSs",
+    grey: "grey-HnF8o5",
+    red: "red-UOE1vP",
+    orange: "orange-TJXhGG",
+    brown: "brown-Sz2XcV",
+    "yellow-green": "yellow-green-cPm_En",
+    yellowGreen: "yellow-green-cPm_En",
+    "lime-green": "lime-green-hOiJ_C",
+    limeGreen: "lime-green-hOiJ_C",
+    "mint-green": "mint-green-rAJ613",
+    mintGreen: "mint-green-rAJ613",
+    green: "green-mB4dha",
+    "sky-blue": "sky-blue-hYCzJt",
+    skyBlue: "sky-blue-hYCzJt",
+    blue: "blue-bG9VvY",
+    "dusty-blue": "dusty-blue-SUkZJw",
+    dustyBlue: "dusty-blue-SUkZJw",
+    "dark-blue": "dark-blue-QGw8eW",
+    darkBlue: "dark-blue-QGw8eW",
+    pink: "pink-enxZ8b",
+    violet: "violet-KUy0CO",
+    "dark-red": "dark-red-PUpJQc",
+    darkRed: "dark-red-PUpJQc",
+    black: "black-KN9PpU",
+    statusWithText: "statusWithText-cXdPD5",
+    statusBullet: "statusBullet-NpYdbk",
+    dropdown: "dropdown-pQnFYQ",
+    optionsList: "optionsList-jXuIZx",
+    optionText: "optionText-iKqBS1",
+    delimitter: "delimitter-u0EiAs"
+};
+export default StatusBadge_module;

package/dist/components/StatusBadge/StatusBadge_module.css

@@ -0,0 +1,149 @@
+.container-fsEGWn {
+  --status-icon-color: var(--invert-element-white, #fff);
+  --status-background-color: var(--gwt-statuses-grey, #999);
+  cursor: pointer;
+  background-color: var(--status-background-color);
+  outline-offset: -1px;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  width: fit-content;
+  height: 20px;
+  padding: 0 8px;
+  display: flex;
+}
+
+.container-fsEGWn:focus-visible {
+  outline: 1px solid var(--border-focused, #091739);
+}
+
+.container-fsEGWn:active {
+  background: linear-gradient(0deg, var(--bgd-overlay, #01040b5c) 0%, var(--bgd-overlay, #01040b5c) 100%),var(--status-background-color);
+}
+
+.disabled-yJv1lv {
+  pointer-events: none;
+}
+
+.title-gOl3dW {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -webkit-user-select: none;
+  user-select: none;
+  flex: 1;
+  overflow: hidden;
+}
+
+.empty-_VmmSs {
+  --status-background-color: var(--button-secondary-normal, #fff);
+  --status-icon-color: var(--elements-hover, #091739);
+  outline: 1px solid var(--border-normal, #d1d6df);
+}
+
+.grey-HnF8o5 {
+  --status-background-color: var(--gwt-statuses-grey, #999);
+}
+
+.red-UOE1vP {
+  --status-background-color: var(--gwt-statuses-red, #e92919);
+}
+
+.orange-TJXhGG {
+  --status-background-color: var(--gwt-statuses-orange, #e68116);
+}
+
+.brown-Sz2XcV {
+  --status-background-color: var(--gwt-statuses-brown, #694b1e);
+}
+
+.yellow-green-cPm_En {
+  --status-background-color: var(--gwt-statuses-yellow-green, #bdae00);
+}
+
+.lime-green-hOiJ_C {
+  --status-background-color: var(--gwt-statuses-lime-green, #a2c617);
+}
+
+.mint-green-rAJ613 {
+  --status-background-color: var(--gwt-statuses-mint-green, #86aa60);
+}
+
+.green-mB4dha {
+  --status-background-color: var(--gwt-statuses-green, #008739);
+}
+
+.sky-blue-hYCzJt {
+  --status-background-color: var(--gwt-statuses-sky-blue, #85c6de);
+}
+
+.blue-bG9VvY {
+  --status-background-color: var(--gwt-statuses-blue, #009fe3);
+}
+
+.dusty-blue-SUkZJw {
+  --status-background-color: var(--gwt-statuses-dusty-blue, #427081);
+}
+
+.dark-blue-QGw8eW {
+  --status-background-color: var(--gwt-statuses-dark-blue, #00499a);
+}
+
+.pink-enxZ8b {
+  --status-background-color: var(--gwt-statuses-pink, #ec619f);
+}
+
+.violet-KUy0CO {
+  --status-background-color: var(--gwt-statuses-violet, #a466bd);
+}
+
+.dark-red-PUpJQc {
+  --status-background-color: var(--gwt-statuses-dark-red, #8d1430);
+}
+
+.black-KN9PpU {
+  --status-background-color: var(--gwt-statuses-black, #000);
+}
+
+.statusWithText-cXdPD5 {
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.statusBullet-NpYdbk {
+  background-color: var(--status-background-color);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+}
+
+.dropdown-pQnFYQ {
+  max-width: 350px;
+  min-width: unset;
+  padding: 4px;
+}
+
+.optionsList-jXuIZx {
+  padding: 0;
+}
+
+.optionText-iKqBS1 {
+  flex: 1;
+}
+
+.delimitter-u0EiAs {
+  padding: 6px 0;
+}
+
+.delimitter-u0EiAs:after {
+  content: "";
+  background-color: var(--border-normal, #d1d6df);
+  width: 100%;
+  height: 1px;
+  display: block;
+}
+

package/dist/components/StatusBadge/utils/StatusBadgeColor.d.ts

@@ -0,0 +1,21 @@
+import type { ValueOf } from '../../../common/types';
+export declare const StatusColor: {
+    readonly Empty: "empty";
+    readonly Grey: "grey";
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Brown: "brown";
+    readonly YellowGreen: "yellow-green";
+    readonly LimeGreen: "lime-green";
+    readonly MintGreen: "mint-green";
+    readonly Green: "green";
+    readonly SkyBlue: "sky-blue";
+    readonly Blue: "blue";
+    readonly DustyBlue: "dusty-blue";
+    readonly DarkBlue: "dark-blue";
+    readonly Pink: "pink";
+    readonly Violet: "violet";
+    readonly DarkRed: "dark-red";
+    readonly Black: "black";
+};
+export type StatusColorType = ValueOf<typeof StatusColor>;

package/dist/components/StatusBadge/utils/StatusBadgeColor.js

@@ -0,0 +1,20 @@
+const StatusColor = {
+    Empty: 'empty',
+    Grey: 'grey',
+    Red: 'red',
+    Orange: 'orange',
+    Brown: 'brown',
+    YellowGreen: 'yellow-green',
+    LimeGreen: 'lime-green',
+    MintGreen: 'mint-green',
+    Green: 'green',
+    SkyBlue: 'sky-blue',
+    Blue: 'blue',
+    DustyBlue: 'dusty-blue',
+    DarkBlue: 'dark-blue',
+    Pink: 'pink',
+    Violet: 'violet',
+    DarkRed: 'dark-red',
+    Black: 'black'
+};
+export { StatusColor };

package/dist/components/StatusBadge/utils/getStatusBadgeColor.d.ts

@@ -0,0 +1,2 @@
+import { type StatusColorType } from './StatusBadgeColor';
+export declare const getStatusColor: (color?: string) => StatusColorType;

package/dist/components/StatusBadge/utils/getStatusBadgeColor.js

@@ -0,0 +1,8 @@
+import { StatusColor } from "./StatusBadgeColor.js";
+const StatusColors = Object.values(StatusColor);
+const isStatusColor = (color)=>StatusColors.includes(color);
+const getStatusColor = (color)=>{
+    if (color && isStatusColor(color)) return color;
+    return StatusColor.Empty;
+};
+export { getStatusColor };

package/dist/components/Textfield/Textfield.d.ts

@@ -1,25 +1,46 @@
 import { type CSSProperties, type ReactNode, type TextareaHTMLAttributes } from 'react';
 import type { IHasTabIndex, IHasTestId } from '../../common/types';
+import type { HelpProps } from '../Help/Help';
+import { type ITextfieldFileUploaderProps, type TextfieldSizeValue } from './types';
 export interface TextfieldProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, IHasTestId, IHasTabIndex {
     name: string;
     className?: string;
     label?: string;
     info?: string;
     required?: boolean;
-    help?: ReactNode;
     error?: boolean;
     disabled?: boolean;
-    clearable?: boolean;
     resize?: CSSProperties['resize'];
     limit?: number;
     showCounterLimit?: number;
     autoVerticalResize?: boolean;
     minHeight?: number;
     maxHeight?: number;
-    actionsBar?: ReactNode;
     resetHeightOnClear?: boolean;
     fitContentHeightOnInit?: boolean;
     textareaClassName?: string;
+    size?: TextfieldSizeValue;
+    onMainBtnClick?: () => void;
+    onEmojiBtnClick?: () => void;
+    mainBtnIcon?: ReactNode;
+    emojiBtnIcon?: ReactNode;
+    fileBtnIcon?: ReactNode;
+    isFileBtnVisible?: boolean;
+    fileUploaderProps?: ITextfieldFileUploaderProps;
+    resizeTop?: boolean;
+    resizeBottom?: boolean;
+    /**
+     * @deprecated Используйте onMainBtnClick, onEmojiBtnClick, isFileBtnVisible вместо
+     */
+    actionsBar?: ReactNode;
+    /**
+     * @deprecated Пропс более не поддерживается
+     */
     onClear?: () => void;
+    /**
+     * @deprecated Используйте `helpProps`
+     */
+    help?: ReactNode;
+    helpProps?: Omit<HelpProps, 'testId'>;
 }
 export declare const Textfield: import("react").ForwardRefExoticComponent<TextfieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textfield/Textfield.js

@@ -7,13 +7,16 @@ import { useTextField } from "../../hooks/useTextField/useTextField.js";
 import { Container } from "./components/Container/Container.js";
 import { InnerContainer } from "./components/InnerContainer/InnerContainer.js";
 import { InputContainer } from "./components/InputContainer/InputContainer.js";
+import { ResizeHandle } from "./components/ResizeHandle/ResizeHandle.js";
+import { TextfieldSize } from "./types/index.js";
+import { getMinHeight } from "./utils/index.js";
 import Textfield_module from "./Textfield.module.js";
-const Textfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, label, info, required, error, help, disabled, clearable, resize, style, value, limit, showCounterLimit, autoVerticalResize, minHeight = 92, maxHeight, rows, actionsBar, resetHeightOnClear = false, fitContentHeightOnInit = false, textareaClassName, onFocus, onBlur, onClear, onChange, ...textfieldProps }, forwardedRef)=>{
+const Textfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, label, info, required, error, help, disabled, resize, style, value, limit, showCounterLimit, autoVerticalResize, minHeight: minHeightProp, maxHeight, rows, resetHeightOnClear = false, fitContentHeightOnInit = false, textareaClassName, size = TextfieldSize.M, onFocus, onBlur, onChange, onMainBtnClick, onEmojiBtnClick, isFileBtnVisible = false, mainBtnIcon, emojiBtnIcon, fileBtnIcon, fileUploaderProps, resizeTop = false, resizeBottom = false, actionsBar, helpProps, ...textfieldProps }, forwardedRef)=>{
     const textfieldId = useId(textfieldProps.id);
     const ref = useRef(null);
-    const { height, isFocused, isLimitError, setIsFocused, handleClear } = useTextField({
-        onChange,
-        onClear,
+    const minHeight = getMinHeight(minHeightProp, size);
+    const hasResizeHandles = resizeTop || resizeBottom;
+    const { height, setHeight, isFocused, isLimitError, setIsFocused } = useTextField({
         minHeight,
         maxHeight,
         ref,
@@ -21,8 +24,10 @@ const Textfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, label
         autoVerticalResize,
         limit,
         resetHeightOnClear,
-        fitContentHeightOnInit
+        fitContentHeightOnInit,
+        hasResizeHandles
     });
+    const effectiveHeight = autoVerticalResize || fitContentHeightOnInit || resetHeightOnClear || hasResizeHandles ? height || void 0 : void 0;
     return /*#__PURE__*/ jsx(Container, {
         textfieldId: textfieldId,
         label: label,
@@ -36,20 +41,40 @@ const Textfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, label
         error: error,
         info: info,
         hasHelp: !!help,
+        size: size,
+        helpProps: helpProps,
         children: /*#__PURE__*/ jsx(InnerContainer, {
-            clearable: clearable,
-            value: String(value),
-            disabled: disabled,
             withHelp: !!help,
-            onClear: handleClear,
             popup: help,
             testId: testId,
             children: /*#__PURE__*/ jsx(InputContainer, {
-                clearable: clearable,
                 disabled: disabled,
                 focused: isFocused,
                 error: error || isLimitError,
                 actionsBar: actionsBar,
+                size: size,
+                mainBtnIcon: mainBtnIcon,
+                emojiBtnIcon: emojiBtnIcon,
+                fileBtnIcon: fileBtnIcon,
+                onMainBtnClick: onMainBtnClick,
+                onEmojiBtnClick: onEmojiBtnClick,
+                isFileBtnVisible: isFileBtnVisible,
+                testId: testId,
+                fileUploaderProps: fileUploaderProps,
+                resizeTopSlot: resizeTop ? /*#__PURE__*/ jsx(ResizeHandle, {
+                    direction: "top",
+                    onHeightChange: setHeight,
+                    startHeight: height || minHeight,
+                    minHeight: minHeight,
+                    maxHeight: maxHeight
+                }) : null,
+                resizeBottomSlot: resizeBottom ? /*#__PURE__*/ jsx(ResizeHandle, {
+                    direction: "bottom",
+                    onHeightChange: setHeight,
+                    startHeight: height || minHeight,
+                    minHeight: minHeight,
+                    maxHeight: maxHeight
+                }) : null,
                 children: /*#__PURE__*/ jsx("textarea", {
                     ...textfieldProps,
                     onChange: onChange,
@@ -60,11 +85,11 @@ const Textfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, label
                         forwardedRef
                     ]),
                     "data-test-id": testId ? `${testId}-textfield` : null,
-                    className: cn(Textfield_module.textarea, clearable && Textfield_module.clearable, textareaClassName),
+                    className: cn(Textfield_module.textarea, Textfield_module[size], textareaClassName),
                     disabled: disabled,
                     style: {
-                        resize,
-                        height: autoVerticalResize || fitContentHeightOnInit ? height : '',
+                        resize: hasResizeHandles ? 'none' : resize,
+                        height: effectiveHeight,
                         minHeight,
                         ...style
                     },

package/dist/components/Textfield/Textfield.module.js

@@ -1,7 +1,8 @@
 import "./Textfield_module.css";
 const Textfield_module = {
     textarea: "textarea-V0PDbc",
-    clearable: "clearable-c3zLgM",
+    m: "m-d5lyS7",
+    l: "l-ZsiQBg",
     input: "input-tESIWx"
 };
 export default Textfield_module;