@snack-uikit/fields 0.10.4 → 0.11.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.11.1 (2024-01-22)
+
+
+### Bug Fixes
+
+* **FF-4103:** make fields fit parent container ([4312de4](https://github.com/cloud-ru-tech/snack-uikit/commit/4312de4eefb07eed5daf6806274422f61a8063ab))
+
+
+
+
+
+# 0.11.0 (2024-01-18)
+
+
+### Features
+
+* **FF-4096:** add showClearButton prop ([1e619be](https://github.com/cloud-ru-tech/snack-uikit/commit/1e619befffcc5b50f44cda18edac5b6be2dff60d))
+
+
+
+
+
 ## 0.10.4 (2023-12-28)
 
 ### Only dependencies have been changed

package/README.md

@@ -180,7 +180,8 @@ const [isOpen, setIsOpen] = useState(false);
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| showCopyButton | `boolean` | - | Показывать ли кнопку Копировать для поля (актуально только для `readonly = true`) |
+| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
+| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
 | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | value | `string` | - | Значение input |
@@ -211,7 +212,8 @@ const [isOpen, setIsOpen] = useState(false);
 | maxRows | `number` | - | Максимальное кол-во строк, до которого размер поля может быть увеличен |
 | resizable | `boolean` | - | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) |
 | onChange | `(value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void` | - | Колбек смены значения |
-| showCopyButton | `boolean` | - | Показывать ли кнопку Копировать для поля (актуально только для `readonly = true`) |
+| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
+| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
 | allowMoreThanMaxLength | `boolean` | true | Можно ли вводить больше разрешённого кол-ва символов |
 | value | `string` | - | HTML-аттрибут value |
 | disabled | `boolean` | - | Является ли поле деактивированным |
@@ -239,7 +241,7 @@ const [isOpen, setIsOpen] = useState(false);
 |------|------|---------------|-------------|
 | hidden | `boolean` | - | Замаскированно ли значение поля |
 | onHiddenChange | `(value: boolean) => void` | - | Колбек смены маскирования |
-| showCopyButton | `boolean` | - | Отображать ли кнопку копирования |
+| showCopyButton | `boolean` | - | Отображение кнопки копирования |
 | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | value | `string` | - | Значение input |
@@ -271,7 +273,8 @@ const [isOpen, setIsOpen] = useState(false);
 | open | `boolean` | - | Открыт date-picker |
 | onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
 | onChange | `(value: string) => void` | - | Колбек смены значения |
-| showCopyButton | `boolean` | - | Отображать ли кнопку копирования |
+| showCopyButton | `boolean` | - | Отображение кнопки копирования |
+| showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
 | locale | `Locale` | new Intl.Locale('ru-RU') | Текущая локаль календаря |
 | disabled | `boolean` | - | Является ли поле деактивированным |
 | readonly | `boolean` | - | Является ли поле доступным только для чтения |
@@ -299,7 +302,8 @@ const [isOpen, setIsOpen] = useState(false);
 | open | `boolean` | - | Открыт ли выпадающий список |
 | onOpenChange | `(value: boolean) => void` | - | Колбек открытия выпадающего списка |
 | searchable | `boolean` | - | Можно ли искать опции внутри списка |
-| showCopyButton | `boolean` | - | Показывать ли кнопку Копировать для поля (актуально только для readonly = true) |
+| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
+| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | noDataText | `string` | - | Текст отсутствия доступных значений |
 | locale | `Locale` | - | Текущая локаль |

package/dist/components/FieldDate/FieldDate.d.ts

@@ -11,8 +11,13 @@ type FieldDateOwnProps = {
     onOpenChange?(value: boolean): void;
     /** Колбек смены значения */
     onChange?(value: string): void;
-    /** Отображать ли кнопку копирования */
+    /** Отображение кнопки копирования */
     showCopyButton?: boolean;
+    /**
+     * Отображение кнопки Очистки поля
+     * @default true
+     */
+    showClearButton?: boolean;
     /** Текущая локаль календаря */
     locale?: Intl.Locale;
 };

package/dist/components/FieldDate/FieldDate.js

@@ -34,7 +34,7 @@ const CALENDAR_SIZE_MAP = {
     [SIZE.L]: 'm',
 };
 export const FieldDate = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, locale = DEFAULT_LOCALE } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "locale"]);
+    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, locale = DEFAULT_LOCALE } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "locale"]);
     const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
     const [pickerAutofocus, setPickerAutofocus] = useState(false);
     const localRef = useRef(null);
@@ -43,7 +43,7 @@ export const FieldDate = forwardRef((_a, ref) => {
     const calendarIconSize = size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S;
     const showDropList = isOpen && !readonly && !disabled;
     const showAdditionalButton = Boolean(valueProp && !disabled);
-    const showClearButton = showAdditionalButton && !readonly;
+    const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
     const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
     const checkForLeavingFocus = useCallback((event) => {
         if (event.key === 'ArrowDown') {

package/dist/components/FieldDecorator/styles.module.css

@@ -1,6 +1,9 @@
 .decorator{
   display:flex;
   flex-direction:column;
+  flex-grow:1;
+  width:100%;
+  min-width:0;
 }
 .decorator[data-size=s]{
   gap:var(--space-fields-decorator-single-gap, 4px);

package/dist/components/FieldSecure/FieldSecure.d.ts

@@ -9,7 +9,7 @@ type FieldSecureOwnProps = {
     hidden?: boolean;
     /** Колбек смены маскирования */
     onHiddenChange?(value: boolean): void;
-    /** Отображать ли кнопку копирования */
+    /** Отображение кнопки копирования */
     showCopyButton?: boolean;
     /** Можно ли вводить больше разрешённого кол-ва символов */
     allowMoreThanMaxLength?: boolean;

package/dist/components/FieldSelect/FieldSelectBase.js

@@ -47,5 +47,5 @@ export const FieldSelectBase = forwardRef((_a, ref) => {
         },
         onDroplistFocusLeave,
     ]);
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Droplist, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, triggerClickByKeys: !searchable, placement: 'bottom', onFocusLeave: onFocusLeaveHandler, firstElementRefCallback: firstDroplistItemRefCallback, "data-test-id": 'field-select__list' }, (readonly || disabled ? { open: false } : { open, onOpenChange }), { triggerElement: _jsxs(FieldContainerPrivate, { className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: open, selectable: !searchable, inputRef: localRef, prefix: prefixIcon, onMouseDown: onContainerPrivateMouseDown, postfix: _jsxs(_Fragment, { children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }), children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', placeholder: placeholder, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, disabled: disabled, "data-size": size, "data-test-id": 'field-select__input', onKeyDown: onInputKeyDownHandler, onChange: searchable ? onInputValueChange : undefined, readonly: !searchable || readonly, value: inputValue, tabIndex: inputTabIndex }), displayedValue && (_jsx("span", { className: styles.displayValue, "data-test-id": 'field-select__displayed-value', children: displayedValue }))] }), children: options.length === 0 ? (_jsx(Droplist.NoData, { size: size, label: noDataText, "data-test-id": 'field-select__no-data' })) : (options.map(option => (_jsx(Item, Object.assign({ onChange: onChange(option), "data-test-id": 'field-select__list-option-' + option.value }, option, { option: option.label }), option.value)))) })) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Droplist, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, triggerClickByKeys: !searchable, placement: 'bottom', onFocusLeave: onFocusLeaveHandler, firstElementRefCallback: firstDroplistItemRefCallback, "data-test-id": 'field-select__list' }, (readonly || disabled ? { open: false } : { open, onOpenChange }), { triggerElement: _jsxs(FieldContainerPrivate, { className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: open, selectable: !searchable, inputRef: localRef, prefix: prefixIcon, onMouseDown: onContainerPrivateMouseDown, postfix: _jsxs(_Fragment, { children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }), children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', placeholder: displayedValue ? undefined : placeholder, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, disabled: disabled, "data-size": size, "data-test-id": 'field-select__input', onKeyDown: onInputKeyDownHandler, onChange: searchable ? onInputValueChange : undefined, readonly: !searchable || readonly, value: inputValue, tabIndex: inputTabIndex }), displayedValue && (_jsx("span", { className: styles.displayValue, "data-test-id": 'field-select__displayed-value', children: displayedValue }))] }), children: options.length === 0 ? (_jsx(Droplist.NoData, { size: size, label: noDataText, "data-test-id": 'field-select__no-data' })) : (options.map(option => (_jsx(Item, Object.assign({ onChange: onChange(option), "data-test-id": 'field-select__list-option-' + option.value }, option, { option: option.label }), option.value)))) })) })));
 });

package/dist/components/FieldSelect/FieldSelectMulti.d.ts

@@ -8,6 +8,7 @@ export declare const FieldSelectMulti: import("react").ForwardRefExoticComponent
     onOpenChange?(value: boolean): void;
     searchable?: boolean | undefined;
     showCopyButton?: boolean | undefined;
+    showClearButton?: boolean | undefined;
     prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     noDataText?: string | undefined;
     locale?: Intl.Locale | undefined;

package/dist/components/FieldSelect/FieldSelectMulti.js

@@ -17,7 +17,7 @@ import { FieldSelectBase } from './FieldSelectBase';
 import { getDisplayedValue } from './helpers';
 import { useList } from './hooks';
 export const FieldSelectMulti = forwardRef((_a, ref) => {
-    var { value: valueProp, onChange, options, disabled = false, readonly = false, searchable = true, required = false, open, onOpenChange, locale = DEFAULT_LOCALE, getSelectedItemsText = number => ((locale === null || locale === void 0 ? void 0 : locale.language) === 'ru' ? `Выбрано: ${number}` : `Selected: ${number}`), showCopyButton: showCopyButtonProp = true, onFocus, onBlur } = _a, rest = __rest(_a, ["value", "onChange", "options", "disabled", "readonly", "searchable", "required", "open", "onOpenChange", "locale", "getSelectedItemsText", "showCopyButton", "onFocus", "onBlur"]);
+    var { value: valueProp, onChange, options, disabled = false, readonly = false, searchable = true, required = false, open, onOpenChange, locale = DEFAULT_LOCALE, getSelectedItemsText = number => ((locale === null || locale === void 0 ? void 0 : locale.language) === 'ru' ? `Выбрано: ${number}` : `Selected: ${number}`), showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, onFocus, onBlur } = _a, rest = __rest(_a, ["value", "onChange", "options", "disabled", "readonly", "searchable", "required", "open", "onOpenChange", "locale", "getSelectedItemsText", "showCopyButton", "showClearButton", "onFocus", "onBlur"]);
     const selectionMode = SELECTION_MODE.Multi;
     const [value, setValue] = useUncontrolledProp(valueProp, [], onChange);
     const selected = useMemo(() => options.filter(option => value === null || value === void 0 ? void 0 : value.includes(option.value)), [options, value]);
@@ -42,6 +42,7 @@ export const FieldSelectMulti = forwardRef((_a, ref) => {
         isChecked,
         showAdditionalButton,
         showCopyButton: showCopyButtonProp,
+        showClearButton: showClearButtonProp,
     });
     const handleOpenChange = (isOpen) => {
         if (stayOpen.current) {

package/dist/components/FieldSelect/FieldSelectSingle.d.ts

@@ -8,6 +8,7 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     onOpenChange?(value: boolean): void;
     searchable?: boolean | undefined;
     showCopyButton?: boolean | undefined;
+    showClearButton?: boolean | undefined;
     prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     noDataText?: string | undefined;
     locale?: Intl.Locale | undefined;

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -18,7 +18,7 @@ import { FieldSelectBase } from './FieldSelectBase';
 import { getDisplayedValue } from './helpers';
 import { useList } from './hooks';
 export const FieldSelectSingle = forwardRef((_a, ref) => {
-    var { value: valueProp, onChange, options, disabled = false, readonly = false, searchable = true, required = false, locale = DEFAULT_LOCALE, open, onOpenChange, showCopyButton: showCopyButtonProp = true } = _a, rest = __rest(_a, ["value", "onChange", "options", "disabled", "readonly", "searchable", "required", "locale", "open", "onOpenChange", "showCopyButton"]);
+    var { value: valueProp, onChange, options, disabled = false, readonly = false, searchable = true, required = false, locale = DEFAULT_LOCALE, open, onOpenChange, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true } = _a, rest = __rest(_a, ["value", "onChange", "options", "disabled", "readonly", "searchable", "required", "locale", "open", "onOpenChange", "showCopyButton", "showClearButton"]);
     const selectionMode = SELECTION_MODE.Single;
     const [value, setValue] = useUncontrolledProp(valueProp, '', onChange);
     const selected = useMemo(() => { var _a; return (_a = options.find(option => option.value === value)) !== null && _a !== void 0 ? _a : EMPTY_OPTION; }, [options, value]);
@@ -37,6 +37,7 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
         options,
         isChecked,
         showCopyButton: showCopyButtonProp,
+        showClearButton: showClearButtonProp,
         showAdditionalButton,
     });
     const handleOpenChange = (isOpen) => {

package/dist/components/FieldSelect/hooks/useList.d.ts

@@ -4,11 +4,12 @@ import { Option } from '../types';
 type UseListProps = Pick<FieldSelectProps, 'readonly' | 'disabled' | 'open' | 'onOpenChange' | 'options' | 'showCopyButton'> & {
     searchable: NonNullable<FieldSelectProps['searchable']>;
     showAdditionalButton: boolean;
+    showClearButton: boolean;
     inputValue: string;
     setInputValue(value: string): void;
     isChecked(option: Option): boolean;
 };
-export declare function useList({ open, onOpenChange, readonly, disabled, searchable, showAdditionalButton, showCopyButton: showCopyButtonProp, inputValue, setInputValue, options, isChecked, }: UseListProps): {
+export declare function useList({ open, onOpenChange, readonly, disabled, searchable, showAdditionalButton, showCopyButton: showCopyButtonProp, showClearButton: showClearButtonProp, inputValue, setInputValue, options, isChecked, }: UseListProps): {
     isOpen: boolean;
     setIsOpen: (value: boolean) => void;
     localRef: import("react").RefObject<HTMLInputElement>;

package/dist/components/FieldSelect/hooks/useList.js

@@ -2,14 +2,14 @@ import { useEffect, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { useFilteredOptions } from './useFilteredOptions';
 import { useListNavigation } from './useListNavigation';
-export function useList({ open, onOpenChange, readonly, disabled, searchable, showAdditionalButton, showCopyButton: showCopyButtonProp, inputValue, setInputValue, options, isChecked, }) {
+export function useList({ open, onOpenChange, readonly, disabled, searchable, showAdditionalButton, showCopyButton: showCopyButtonProp, showClearButton: showClearButtonProp, inputValue, setInputValue, options, isChecked, }) {
     const touched = useRef(false);
     const localRef = useRef(null);
     const clearButtonRef = useRef(null);
     const copyButtonRef = useRef(null);
     const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
     const showDropList = isOpen && !readonly && !disabled;
-    const showClearButton = !readonly && (showAdditionalButton || inputValue.length > 0);
+    const showClearButton = showClearButtonProp && !readonly && (showAdditionalButton || inputValue.length > 0);
     const showCopyButton = Boolean(showAdditionalButton && showCopyButtonProp && readonly);
     const { extendedOptions, onInputKeyDown, onButtonKeyDown, onDroplistFocusLeave, firstDroplistItemRefCallback } = useListNavigation({
         inputRef: localRef,

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

@@ -21,8 +21,13 @@ type FieldSelectOwnProps = {
     onOpenChange?(value: boolean): void;
     /** Можно ли искать опции внутри списка */
     searchable?: boolean;
-    /** Показывать ли кнопку Копировать для поля (актуально только для readonly = true) */
+    /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
     showCopyButton?: boolean;
+    /**
+     * Отображение кнопки очистки поля
+     * @default true
+     */
+    showClearButton?: boolean;
     /** Иконка-префикс для поля */
     prefixIcon?: ReactElement;
     /** Текст отсутствия доступных значений */

package/dist/components/FieldText/FieldText.d.ts

@@ -5,8 +5,13 @@ import { FieldDecoratorProps } from '../FieldDecorator';
 type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
 type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement'>;
 type FieldTextOwnProps = {
-    /** Показывать ли кнопку Копировать для поля (актуально только для `readonly = true`)  */
+    /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
     showCopyButton?: boolean;
+    /**
+     * Отображение кнопки очистки поля
+     * @default true
+     */
+    showClearButton?: boolean;
     /** Можно ли вводить больше разрешённого кол-ва символов */
     allowMoreThanMaxLength?: boolean;
     /** Иконка-префикс для поля */

package/dist/components/FieldText/FieldText.js

@@ -20,13 +20,13 @@ import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
 export const FieldText = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "prefixIcon"]);
+    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "prefixIcon"]);
     const [value, onChange] = useUncontrolledProp(valueProp, '', onChangeProp);
     const localRef = useRef(null);
     const clearButtonRef = useRef(null);
     const copyButtonRef = useRef(null);
     const showAdditionalButton = Boolean(value && !disabled);
-    const showClearButton = showAdditionalButton && !readonly;
+    const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
     const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
     const onClear = () => {
         var _a;

package/dist/components/FieldTextArea/FieldTextArea.d.ts

@@ -11,8 +11,13 @@ type FieldTextAreaOwnProps = {
     resizable?: boolean;
     /** Колбек смены значения */
     onChange?(value: string, e?: ChangeEvent<HTMLTextAreaElement>): void;
-    /** Показывать ли кнопку Копировать для поля (актуально только для `readonly = true`) */
+    /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
     showCopyButton?: boolean;
+    /**
+     * Отображение кнопки очистки поля
+     * @default true
+     */
+    showClearButton?: boolean;
     /** Можно ли вводить больше разрешённого кол-ва символов */
     allowMoreThanMaxLength?: boolean;
 };

package/dist/components/FieldTextArea/FieldTextArea.js

@@ -22,14 +22,14 @@ import { useCopyButton } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
 import styles from './styles.module.css';
 export const FieldTextArea = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, placeholder, maxLength, maxRows, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "size", "validationState"]);
+    var { id, name, value: valueProp, placeholder, maxLength, maxRows, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "size", "validationState"]);
     const localRef = useRef(null);
     const clearButtonRef = useRef(null);
     const copyButtonRef = useRef(null);
     const isResizable = !readonly && !disabled && resizable;
     const [value, onChange] = useUncontrolledProp(valueProp, '', onChangeProp);
     const showCopyButton = showCopyButtonProp && Boolean(value) && !disabled && readonly;
-    const showClearButton = Boolean(value) && !disabled && !readonly;
+    const showClearButton = showClearButtonProp && Boolean(value) && !disabled && !readonly;
     const onClear = () => {
         var _a;
         onChange('');

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.10.4",
+  "version": "0.11.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -49,5 +49,5 @@
   "devDependencies": {
     "@types/merge-refs": "1.0.0"
   },
-  "gitHead": "57c597a3eebaf6528c0c61b6b27dd244753de1cf"
+  "gitHead": "42116ba6d69b36f1482f94a55b8473e1baf472ec"
 }

package/src/components/FieldDate/FieldDate.tsx

@@ -60,8 +60,13 @@ type FieldDateOwnProps = {
   onOpenChange?(value: boolean): void;
   /** Колбек смены значения */
   onChange?(value: string): void;
-  /** Отображать ли кнопку копирования */
+  /** Отображение кнопки копирования */
   showCopyButton?: boolean;
+  /**
+   * Отображение кнопки Очистки поля
+   * @default true
+   */
+  showClearButton?: boolean;
   /** Текущая локаль календаря */
   locale?: Intl.Locale;
 };
@@ -83,6 +88,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
       disabled = false,
       readonly = false,
       showCopyButton: showCopyButtonProp = true,
+      showClearButton: showClearButtonProp = true,
       open,
       onOpenChange,
       onChange,
@@ -111,7 +117,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
     const calendarIconSize = size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S;
     const showDropList = isOpen && !readonly && !disabled;
     const showAdditionalButton = Boolean(valueProp && !disabled);
-    const showClearButton = showAdditionalButton && !readonly;
+    const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
     const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
 
     const checkForLeavingFocus = useCallback(

package/src/components/FieldDecorator/styles.module.scss

@@ -21,6 +21,10 @@ $hint-icon-container: (
 .decorator {
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
+
+  width: 100%;
+  min-width: 0;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {

package/src/components/FieldSecure/FieldSecure.tsx

@@ -38,7 +38,7 @@ type FieldSecureOwnProps = {
   hidden?: boolean;
   /** Колбек смены маскирования */
   onHiddenChange?(value: boolean): void;
-  /** Отображать ли кнопку копирования */
+  /** Отображение кнопки копирования */
   showCopyButton?: boolean;
   /** Можно ли вводить больше разрешённого кол-ва символов */
   allowMoreThanMaxLength?: boolean;

package/src/components/FieldSelect/FieldSelectBase.tsx

@@ -180,7 +180,7 @@ export const FieldSelectBase = forwardRef<HTMLInputElement, Props>(
                 id={id}
                 name={name}
                 type='text'
-                placeholder={placeholder}
+                placeholder={displayedValue ? undefined : placeholder}
                 ref={mergeRefs(ref, localRef)}
                 onFocus={onFocus}
                 onBlur={onBlur}

package/src/components/FieldSelect/FieldSelectMulti.tsx

@@ -22,6 +22,7 @@ export const FieldSelectMulti = forwardRef<HTMLInputElement, FieldSelectMultiPro
       locale = DEFAULT_LOCALE,
       getSelectedItemsText = number => (locale?.language === 'ru' ? `Выбрано: ${number}` : `Selected: ${number}`),
       showCopyButton: showCopyButtonProp = true,
+      showClearButton: showClearButtonProp = true,
       onFocus,
       onBlur,
       ...rest
@@ -70,6 +71,7 @@ export const FieldSelectMulti = forwardRef<HTMLInputElement, FieldSelectMultiPro
       isChecked,
       showAdditionalButton,
       showCopyButton: showCopyButtonProp,
+      showClearButton: showClearButtonProp,
     });
 
     const handleOpenChange = (isOpen: boolean) => {

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -23,6 +23,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
       open,
       onOpenChange,
       showCopyButton: showCopyButtonProp = true,
+      showClearButton: showClearButtonProp = true,
       ...rest
     },
     ref,
@@ -60,6 +61,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
       options,
       isChecked,
       showCopyButton: showCopyButtonProp,
+      showClearButton: showClearButtonProp,
       showAdditionalButton,
     });
 

package/src/components/FieldSelect/hooks/useList.ts

@@ -12,6 +12,7 @@ type UseListProps = Pick<
 > & {
   searchable: NonNullable<FieldSelectProps['searchable']>;
   showAdditionalButton: boolean;
+  showClearButton: boolean;
   inputValue: string;
   setInputValue(value: string): void;
   isChecked(option: Option): boolean;
@@ -25,6 +26,7 @@ export function useList({
   searchable,
   showAdditionalButton,
   showCopyButton: showCopyButtonProp,
+  showClearButton: showClearButtonProp,
   inputValue,
   setInputValue,
   options,
@@ -36,7 +38,7 @@ export function useList({
   const copyButtonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
   const showDropList = isOpen && !readonly && !disabled;
-  const showClearButton = !readonly && (showAdditionalButton || inputValue.length > 0);
+  const showClearButton = showClearButtonProp && !readonly && (showAdditionalButton || inputValue.length > 0);
   const showCopyButton = Boolean(showAdditionalButton && showCopyButtonProp && readonly);
 
   const { extendedOptions, onInputKeyDown, onButtonKeyDown, onDroplistFocusLeave, firstDroplistItemRefCallback } =

package/src/components/FieldSelect/types.ts

@@ -42,8 +42,13 @@ type FieldSelectOwnProps = {
   onOpenChange?(value: boolean): void;
   /** Можно ли искать опции внутри списка */
   searchable?: boolean;
-  /** Показывать ли кнопку Копировать для поля (актуально только для readonly = true) */
+  /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
   showCopyButton?: boolean;
+  /**
+   * Отображение кнопки очистки поля
+   * @default true
+   */
+  showClearButton?: boolean;
   /** Иконка-префикс для поля */
   prefixIcon?: ReactElement;
   /** Текст отсутствия доступных значений */

package/src/components/FieldText/FieldText.tsx

@@ -27,8 +27,13 @@ type WrapperProps = Pick<
 >;
 
 type FieldTextOwnProps = {
-  /** Показывать ли кнопку Копировать для поля (актуально только для `readonly = true`)  */
+  /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
   showCopyButton?: boolean;
+  /**
+   * Отображение кнопки очистки поля
+   * @default true
+   */
+  showClearButton?: boolean;
   /** Можно ли вводить больше разрешённого кол-ва символов */
   allowMoreThanMaxLength?: boolean;
   /** Иконка-префикс для поля */
@@ -48,6 +53,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       disabled = false,
       readonly = false,
       showCopyButton: showCopyButtonProp = true,
+      showClearButton: showClearButtonProp = true,
       allowMoreThanMaxLength = false,
       onChange: onChangeProp,
       onFocus,
@@ -71,7 +77,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
     const clearButtonRef = useRef<HTMLButtonElement>(null);
     const copyButtonRef = useRef<HTMLButtonElement>(null);
     const showAdditionalButton = Boolean(value && !disabled);
-    const showClearButton = showAdditionalButton && !readonly;
+    const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
     const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
 
     const onClear = () => {

package/src/components/FieldTextArea/FieldTextArea.tsx

@@ -35,8 +35,13 @@ type FieldTextAreaOwnProps = {
   resizable?: boolean;
   /** Колбек смены значения */
   onChange?(value: string, e?: ChangeEvent<HTMLTextAreaElement>): void;
-  /** Показывать ли кнопку Копировать для поля (актуально только для `readonly = true`) */
+  /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
   showCopyButton?: boolean;
+  /**
+   * Отображение кнопки очистки поля
+   * @default true
+   */
+  showClearButton?: boolean;
   /** Можно ли вводить больше разрешённого кол-ва символов */
   allowMoreThanMaxLength?: boolean;
 };
@@ -56,6 +61,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
       resizable = false,
       readonly = false,
       showCopyButton: showCopyButtonProp = true,
+      showClearButton: showClearButtonProp = true,
       allowMoreThanMaxLength = true,
       showHintIcon,
       onChange: onChangeProp,
@@ -79,7 +85,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
     const isResizable = !readonly && !disabled && resizable;
     const [value, onChange] = useUncontrolledProp(valueProp, '', onChangeProp);
     const showCopyButton = showCopyButtonProp && Boolean(value) && !disabled && readonly;
-    const showClearButton = Boolean(value) && !disabled && !readonly;
+    const showClearButton = showClearButtonProp && Boolean(value) && !disabled && !readonly;
 
     const onClear = () => {
       onChange('');