@ozen-ui/kit 0.7.0 → 0.9.0

package/__inner__/esm/components/Modal/Modal.js

@@ -9,25 +9,27 @@ import { useMultiRef } from '../../hooks/useMultiRef';
 import { cn } from '../../utils/classname';
 import { isKey } from '../../utils/isKey';
 import { Backdrop } from '../Backdrop';
-import { Paper } from '../Paper';
 import { Portal } from '../Portal';
+import { ModalConsumer } from './components';
 import { useModalManager } from './index';
 export var cnModal = cn('Modal');
 export var Modal = forwardRef(function (_a, ref) {
-    var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? false : _d, children = _a.children, onEnter = _a.onEnter, onEntered = _a.onEntered, onExit = _a.onExit, onExitedProp = _a.onExited, onClose = _a.onClose, backdropProps = _a.backdropProps, windowProps = _a.windowProps, transitionProps = _a.transitionProps, className = _a.className, other = __rest(_a, ["open", "keepMounted", "hideBackdrop", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className"]);
+    var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? false : _d, _e = _a.disableScrollLock, disableScrollLock = _e === void 0 ? false : _e, _f = _a.disableClickOutside, disableClickOutside = _f === void 0 ? false : _f, _g = _a.disableEscapeKeyDown, disableEscapeKeyDown = _g === void 0 ? false : _g, children = _a.children, onEnter = _a.onEnter, onEntered = _a.onEntered, onExit = _a.onExit, onExitedProp = _a.onExited, onClose = _a.onClose, backdropProps = _a.backdropProps, windowProps = _a.windowProps, transitionProps = _a.transitionProps, className = _a.className, ignoreClickOutsideRefs = _a.ignoreClickOutsideRefs, other = __rest(_a, ["open", "keepMounted", "hideBackdrop", "disableScrollLock", "disableClickOutside", "disableEscapeKeyDown", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className", "ignoreClickOutsideRefs"]);
     var hasBackdrop = !hideBackdrop;
-    var hasScrollOnBody = useRef(null);
     var modalInnerRef = useRef(null);
     var focusedElement = useRef(null);
     var isClickOutSide = useRef(null);
-    var _e = __read(useState(false), 2), openState = _e[0], setOpenState = _e[1];
-    var _f = useModalManager(modalInnerRef, 1000, openState), isTop = _f.isTop, refsClickOutside = _f.refsClickOutside;
+    var _h = __read(useState(false), 2), openState = _h[0], setOpenState = _h[1];
+    var _j = useModalManager(modalInnerRef, 1000, openState), isTop = _j.isTop, refsClickOutside = _j.refsClickOutside;
     useClickOutside({
-        refs: __spreadArray([modalInnerRef], __read(refsClickOutside), false),
+        refs: __spreadArray(__spreadArray([
+            modalInnerRef
+        ], __read(refsClickOutside), false), __read((ignoreClickOutsideRefs || [])), false),
         handler: function () {
             isClickOutSide.current = true;
             onClose === null || onClose === void 0 ? void 0 : onClose();
-        }
+        },
+        active: !disableClickOutside
     });
     useEffect(function () {
         var _a;
@@ -63,21 +65,11 @@ export var Modal = forwardRef(function (_a, ref) {
             }
             onClose === null || onClose === void 0 ? void 0 : onClose();
         },
-        active: isTop
+        active: isTop && !disableEscapeKeyDown
     });
-    // Блокирует прокрутку основного окна приложения
-    useEffect(function () {
-        if (openState) {
-            hasScrollOnBody.current = document.body.classList.contains('no-scroll');
-            document.body.classList.add('no-scroll');
-        }
-        else if (!hasScrollOnBody.current) {
-            document.body.classList.remove('no-scroll');
-        }
-    }, [openState]);
     return (React.createElement(CSSTransition, __assign({ classNames: cnModal({ animation: true }), timeout: 300 }, transitionProps, { "in": openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
-        React.createElement(Portal, __assign({}, other, { className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: useMultiRef([modalInnerRef, ref]) }),
-            !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1 }, backdropProps, { onClick: onClose, open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
-            React.createElement(Paper, __assign({ radius: "s", background: "main" }, windowProps, { className: cnModal('Window', [windowProps === null || windowProps === void 0 ? void 0 : windowProps.className]), tabIndex: -1, ref: useMultiRef([trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
+        React.createElement(Portal, __assign({}, other, { className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: ref }),
+            !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1 }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
+            React.createElement(ModalConsumer, __assign({}, windowProps, { open: openState && !disableScrollLock, ref: useMultiRef([modalInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
 });
 Modal.displayName = 'Modal';

package/__inner__/esm/components/Modal/components/ModalConsumer.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import type { PaperProps } from '../../Paper';
+export declare const ModalConsumer: FC<PaperProps & {
+    open: boolean;
+}>;

package/__inner__/esm/components/Modal/components/ModalConsumer.js

@@ -0,0 +1,12 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
+import { Paper } from '../../Paper';
+import { cnModal } from '../index';
+export var ModalConsumer = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, open = _a.open, other = __rest(_a, ["children", "className", "open"]);
+    // Блокирует прокрутку основного окна приложения
+    useLockBodyScroll(open);
+    return (React.createElement(Paper, __assign({ radius: "s", background: "main" }, other, { className: cnModal('Window', [className]), tabIndex: -1, ref: ref }), children));
+});
+ModalConsumer.displayName = 'ModalConsumer';

package/__inner__/esm/components/Modal/components/index.d.ts

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

package/__inner__/esm/components/Modal/components/index.js

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

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/createPaginationRange.d.ts

@@ -1,5 +1,5 @@
 import type { PaginationBaseProps } from '../../index';
-import { EllipsisType } from '../../types';
+import type { EllipsisType } from '../../types';
 type Params = Required<Pick<PaginationBaseProps, 'page' | 'pageSize' | 'totalCount' | 'siblingCount'>>;
 export declare const createPaginationRange: ({ page, pageSize, totalCount, siblingCount, }: Params) => (number | EllipsisType)[];
 export {};

package/__inner__/esm/components/Pagination/types.d.ts

@@ -1,7 +1,7 @@
-import React, { HTMLAttributes } from 'react';
-import { PaginationItemProps } from './components';
-import { ELLIPSIS, NEXT, PREVIOUS } from './constants';
-import { GetItemAriaLabel } from './helpers/getItemAriaLabel';
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { PaginationItemProps } from './components';
+import type { ELLIPSIS, NEXT, PREVIOUS } from './constants';
+import type { GetItemAriaLabel } from './helpers/getItemAriaLabel';
 export type EllipsisType = typeof ELLIPSIS;
 export type PreviousType = typeof PREVIOUS;
 export type NextType = typeof NEXT;
@@ -33,6 +33,6 @@ export type PaginationBaseProps = {
     /** Функция форматирования атрибута aria-label. */
     getItemAriaLabel?: GetItemAriaLabel;
     /** Рендер функция, для отображения кнопок пагинации.  */
-    renderComponent?: (PagItemProps: PaginationItemProps) => React.ReactNode;
+    renderComponent?: (PagItemProps: PaginationItemProps) => ReactNode;
 };
 export type PaginationProps = PaginationBaseProps & HTMLAttributes<HTMLElement>;

package/__inner__/esm/components/Popover/types.d.ts

@@ -1,11 +1,10 @@
-import React, { ComponentRef, ElementType } from 'react';
-import type { RefObject } from 'react';
-import PopperJS from '@popperjs/core';
+import type { RefObject, ComponentRef, ElementType, ReactNode } from 'react';
+import type PopperJS from '@popperjs/core';
 import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { PortalProps } from '../Portal';
 import type { PopoverArrowProps } from './components';
-import { POPOVER_DEFAULT_TAG } from './constants';
+import type { POPOVER_DEFAULT_TAG } from './constants';
 export type VirtualElement = {
     getBoundingClientRect: () => DOMRect;
     contextElement?: Element;
@@ -25,7 +24,7 @@ export type PopoverBaseProps = {
         y: number;
     };
     /** Контент поповера */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
     onClose?: () => void;
     /** Функция обратного вызова которая будет вызвана до начала

package/__inner__/esm/components/ProgressBar/ProgressBar.d.ts

@@ -1,6 +1,6 @@
 import './ProgressBar.css';
-import { type ElementType } from 'react';
-import { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import { PROGRESSBAR_DEFAULT_TAG } from './constants';
 export declare const cnProgressBar: import("@bem-react/classname").ClassNameFormatter;
 export type ProgressBarBaseProps = {

package/__inner__/esm/components/ProgressBar/ProgressBar.js

@@ -2,7 +2,7 @@ import { __assign, __rest } from "tslib";
 import './ProgressBar.css';
 import React from 'react';
 import { cn } from '../../utils/classname';
-import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { PROGRESSBAR_DEFAULT_TAG } from './constants';
 export var cnProgressBar = cn('ProgressBar');
 export var ProgressBar = polymorphicComponentWithRef(function (_a, ref) {

package/__inner__/esm/components/Select/Select.css

@@ -4,6 +4,7 @@
   --textfield-background-color: var(--color-background-primary);
   --textfield-border-width: var(--border-width-s);
   --textfield-border-color: var(--color-border-main);
+  font: var(--textfield-input-font);
   display: inline-flex;
   vertical-align: top;
   flex-direction: column;
@@ -21,19 +22,6 @@
     inline-size: 100%;
     box-sizing: border-box;
   }
-.Select-Fieldset {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    border-radius: var(--border-radius-xs);
-    border: var(--textfield-border-width) solid var(--textfield-border-color);
-    transition: border var(--transition-default);
-  }
 .Select-Body {
     position: relative;
     display: flex;
@@ -64,7 +52,6 @@
     color: var(--textfield-color);
     box-sizing: border-box;
     block-size: var(--textfield-input-block-size);
-    font: var(--textfield-input-font);
     align-items: center;
   }
 .Select-Field span {
@@ -176,7 +163,8 @@
   }
 .Select_animation-enter-active {
     opacity: 1;
-    transition: opacity var(--transition-default),
+    transition:
+      opacity var(--transition-default),
       transform var(--transition-default);
     transform: translate(0);
     pointer-events: none;
@@ -192,7 +180,8 @@
   }
 .Select_animation-exit-active {
     opacity: 0;
-    transition: opacity var(--transition-default),
+    transition:
+      opacity var(--transition-default),
       transform var(--transition-default);
     transform: translate(0, calc(var(--space-s) * -1));
     pointer-events: none;

package/__inner__/esm/components/Select/components/SelectInput/SelectInput.js

@@ -7,6 +7,7 @@ import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { FieldHint } from '../../../FieldHint';
 import { FieldIcon } from '../../../FieldIcon';
 import { FieldLabel } from '../../../FieldLabel';
+import { Fieldset } from '../../../Fieldset';
 import { cnSelect } from '../../index';
 export var SelectInput = forwardRef(function (_a, ref) {
     var _b = _a.size, size = _b === void 0 ? 'm' : _b, _c = _a.multiline, multiline = _c === void 0 ? false : _c, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, inputRef = _a.inputRef, fieldRef = _a.fieldRef, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, labelRef = _a.labelRef, labelProps = _a.labelProps, fieldProps = _a.fieldProps, onClick = _a.onClick, focused = _a.focused, placeholderProp = _a.placeholder, renderedValue = _a.renderedValue, bodyProps = _a.bodyProps, bodyRefProp = _a.bodyRef, open = _a.open, other = __rest(_a, ["size", "multiline", "label", "error", "id", "name", "renderLeft", "renderRight", "inputRef", "fieldRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onFocus", "onBlur", "onKeyDown", "labelRef", "labelProps", "fieldProps", "onClick", "focused", "placeholder", "renderedValue", "bodyProps", "bodyRef", "open"]);
@@ -32,7 +33,7 @@ export var SelectInput = forwardRef(function (_a, ref) {
                 React.createElement("input", __assign({ id: id, name: name, defaultValue: defaultValue, value: valueProp, disabled: disabled, required: required, tabIndex: -1, "aria-hidden": true, readOnly: true }, inputProps, { className: cnSelect('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: inputRef }))),
             React.createElement(FieldIcon, { className: cnSelect('RenderRight'), icon: renderRight, size: size }),
             React.createElement(FieldIcon, { className: classnames(cnSelect('RenderRight'), cnSelect('DropDownIcon', { open: open })), icon: ChevronDownIcon, size: size }),
-            React.createElement("fieldset", { className: cnSelect('Fieldset') })),
+            React.createElement(Fieldset, { className: cnSelect('Fieldset') })),
         React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
 });
 SelectInput.displayName = 'SelectInput';

package/__inner__/esm/components/Select/types.d.ts

@@ -1,5 +1,4 @@
-import React, { SyntheticEvent } from 'react';
-import type { HTMLAttributes } from 'react';
+import type { HTMLAttributes, SyntheticEvent, ReactNode } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { MenuProps } from '../Menu';
 import type { SelectInputProps } from './components';
@@ -10,7 +9,7 @@ export type SelectedOptionProp = {
     label?: SelectPropLabel;
     value?: SelectPropValue;
 };
-export type SelectRenderValue = (option: SelectedOptionProp) => React.ReactNode | null;
+export type SelectRenderValue = (option: SelectedOptionProp) => ReactNode | null;
 type SelectOpenControlledProps = {
     /** Текущее состояние списка. Если `true`, список отображается. */
     open?: boolean;
@@ -47,7 +46,7 @@ export type SelectProps = {
     /** Рендер-функция для выбранного значения */
     renderValue?: SelectRenderValue;
     /** Содержимое компонента */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Свойства компонента Menu */
     menuProps?: Omit<MenuProps, 'onClose' | 'open' | 'anchorRef'>;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */

package/__inner__/esm/components/Slider/types.d.ts

@@ -1,7 +1,7 @@
 import type { ElementType, ComponentPropsWithRef, ChangeEvent } from 'react';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import type { TooltipProps } from '../Tooltip';
-import { SLIDER_DEFAULT_TAG } from './constants';
+import type { SLIDER_DEFAULT_TAG } from './constants';
 export declare const sliderSizeVariant: readonly ["m", "l"];
 export type SliderSizeVariant = (typeof sliderSizeVariant)[number];
 export type SliderValue = number;

package/__inner__/esm/components/Snackbar/types.d.ts

@@ -1,4 +1,4 @@
-import { SnackbarItemProps } from './components/SnackbarItem';
+import type { SnackbarItemProps } from './components/SnackbarItem';
 export declare const snackbarVerticalAlignVariant: readonly ["top", "bottom"];
 export declare const snackbarHorizontalAlignVariant: readonly ["left", "center", "right"];
 export declare const snackbarStatusVariant: readonly ["success", "info", "warning", "error"];

package/__inner__/esm/components/Tag/components/RemoveButton/RemoveButton.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import type { IconProps } from '@ozen-ui/icons';
 export declare const removeButtonSizeVariant: readonly ["s", "xs", "2xs"];
 export type RemoveButtonSizeVariant = (typeof removeButtonSizeVariant)[number];

package/__inner__/esm/components/Textarea/Textarea.css

@@ -1,39 +1,13 @@
 .Textarea {
-  --textfield-color: var(--color-content-primary);
-  --textfield-background-color: var(--color-background-primary);
-  --textfield-border-width: var(--border-width-s);
-  --textfield-border-color: var(--color-border-main);
   --textfield-scroll-size: 12px;
-  min-block-size: var(--textfield-input-block-size);
-  display: inline-flex;
-  vertical-align: top;
-  flex-direction: column;
+  min-block-size: var(--textfield-input-height);
   position: relative;
-  cursor: text;
 }
 
-  .Textarea > * {
-    cursor: text;
-  }
-
   .Textarea-Label {
     padding: 0 var(--textfield-gutter-x);
   }
 
-  .Textarea-Fieldset {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    border-radius: var(--border-radius-xs);
-    border: var(--textfield-border-width) solid var(--textfield-border-color);
-    transition: border var(--transition-default);
-  }
-
   .Textarea-Body,
   .Textarea-Field {
     transition: background-color var(--transition-slow);
@@ -50,10 +24,9 @@
     transition: background-color var(--transition-slow);
     color: var(--textfield-color);
     border-radius: var(--border-radius-xs);
-    padding-block-start: 16px;
-    padding-block-end: 16px;
     min-block-size: inherit;
     block-size: inherit;
+    padding: var(--textfield-input-padding);
   }
 
   .Textarea-Field {
@@ -95,7 +68,7 @@
     border: none;
     display: flex;
     outline: none;
-    font: var(--textfield-input-font);
+    font: inherit;
     background-color: var(--textfield-background-color);
     color: var(--textfield-color);
     padding: 0 var(--textfield-gutter-x);
@@ -126,80 +99,3 @@
         resize: vertical;
         overflow: hidden;
       }
-
-  .Textarea_hasLabel .Textarea-Field::placeholder {
-        opacity: 0;
-      }
-
-  .Textarea_hasLabel .Textarea-Field:focus::placeholder {
-        opacity: 1;
-      }
-
-  .Textarea_hasLabel .Textarea-Body {
-      padding: var(--textfield-input-padding);
-    }
-
-  .Textarea_fullWidth {
-    inline-size: 100%;
-  }
-
-  .Textarea_size_2xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-block-size: 32px;
-      --textfield-input-font: var(--typography-text-2xs-font);
-      --textfield-input-padding: 8px 0 8px;
-    }
-
-  .Textarea_size_xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-block-size: 40px;
-      --textfield-input-font: var(--typography-text-xs-font);
-      --textfield-input-padding: 19px 0 4px;
-    }
-
-  .Textarea_size_s {
-      --textfield-gutter-x: 16px;
-      --textfield-input-block-size: 48px;
-      --textfield-input-font: var(--typography-text-s-font);
-      --textfield-input-padding: 21px 0 6px;
-    }
-
-  .Textarea_size_m {
-      --textfield-gutter-x: 20px;
-      --textfield-input-block-size: 56px;
-      --textfield-input-font: var(--typography-text-m-font);
-      --textfield-input-padding: 24px 0 6px;
-    }
-
-  .Textarea_size_l {
-      --textfield-gutter-x: 24px;
-      --textfield-input-block-size: 64px;
-      --textfield-input-font: var(--typography-text-l-font);
-      --textfield-input-padding: 26px 0 6px;
-    }
-
-  .Textarea:hover {
-    --textfield-border-color: var(--color-border-main-hover);
-  }
-
-  .Textarea_focused,
-  .Textarea_focused:hover {
-    --textfield-border-width: var(--border-width-m);
-    --textfield-background-color: var(--color-background-main);
-    --textfield-border-color: var(--color-border-action);
-  }
-
-  .Textarea_error,
-  .Textarea_error.Textarea:hover,
-  .Textarea_error.Textarea_focused,
-  .Textarea_error.Textarea_focused:hover {
-    --textfield-border-color: var(--color-border-error);
-  }
-
-  .Textarea_disabled {
-    --textfield-border-color: var(--color-border-disabled);
-    --textfield-background-color: var(--color-background-disabled);
-    --textfield-color: var(--color-content-secondary);
-    pointer-events: none;
-    cursor: default;
-  }

package/__inner__/esm/components/Textarea/Textarea.d.ts

@@ -1,63 +1,5 @@
 import './Textarea.css';
 import React from 'react';
-import type { HTMLAttributes, TextareaHTMLAttributes, Ref } from 'react';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import { type FieldLabelProps } from '../FieldLabel';
+import type { TextareaProps } from './index';
 export declare const cnTextarea: import("@bem-react/classname").ClassNameFormatter;
-export type TextareaSizeVariant = FormElementSizeVariant;
-export declare const textareaExpandVariant: readonly ["autoSize", "verticalResize"];
-export type TextareaExpandVariant = (typeof textareaExpandVariant)[number];
-type TextareaElement = TextareaHTMLAttributes<HTMLTextAreaElement>;
-export type TextareaProps = {
-    /** Атрибут id для элемента input */
-    id?: string;
-    /** Атрибут name для элемента input */
-    name?: string;
-    /** Лейбл */
-    label?: string;
-    /** Размер компонента */
-    size?: TextareaSizeVariant;
-    /** Подсказка. Отображается, когда вариант не выбран */
-    placeholder?: string;
-    /** Если {true} устанавливает автофокус */
-    autoFocus?: boolean;
-    /** Если {true} переводит поле в состояние ошибки */
-    error?: boolean;
-    /** Если {true} растягивает поле на всю ширину */
-    fullWidth?: boolean;
-    /** Дополнительное описание к полю */
-    hint?: string | null | undefined;
-    /** Если {true} делает элемент неактивным */
-    disabled?: boolean;
-    /** Если {true} делает элемент обязательным к заполнению */
-    required?: boolean;
-    /** Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. */
-    maxLength?: number;
-    /** Количество колонок */
-    cols?: number;
-    /** Количество строк */
-    rows?: number;
-    /** Расширяемость поля */
-    expand?: TextareaExpandVariant;
-    /** Выбранное значение */
-    value?: string;
-    /** Значение по умолчанию (неконтролируемый компонент) */
-    defaultValue?: string;
-    /** Обработчик события на изменение значения поля */
-    onChange?: TextareaElement['onChange'];
-    /** Ссылка на элемент textarea */
-    textareaRef?: Ref<HTMLTextAreaElement>;
-    /** Свойства элемента textarea */
-    textareaProps?: TextareaElement & {
-        'data-testid'?: string;
-    };
-    /** Ссылка на FieldLabel */
-    labelRef?: FieldLabelProps['ref'];
-    /** Свойства FieldLabel */
-    labelProps?: FieldLabelProps;
-    /** Ссылка на корневой DOM-элемент компонента */
-    ref?: Ref<HTMLDivElement>;
-    'data-testid'?: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/__inner__/esm/components/Textarea/Textarea.js

@@ -1,75 +1,21 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __rest } from "tslib";
 import './Textarea.css';
-import React, { useMemo, useCallback, useState, useEffect, useRef, forwardRef, } from 'react';
-import { useMultiRef } from '../../hooks/useMultiRef';
+import React, { forwardRef } from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
-import { FieldHint } from '../FieldHint';
-import { FieldLabel } from '../FieldLabel';
+import { FieldControl } from '../FieldControl';
+import { TextareaConsumer } from './components';
+import { TEXTAREA_DEFAULT_SIZE } from './constants';
 export var cnTextarea = cn('Textarea');
-export var textareaExpandVariant = ['autoSize', 'verticalResize'];
 export var Textarea = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'Textarea'
     });
-    var _a = props.size, size = _a === void 0 ? 'm' : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, textareaRef = props.textareaRef, disabled = props.disabled, textareaProps = props.textareaProps, labelRef = props.labelRef, labelProps = props.labelProps, other = __rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "textareaRef", "disabled", "textareaProps", "labelRef", "labelProps"]);
-    var fieldRef = useRef(null);
-    var isControlled = typeof valueProp !== 'undefined';
-    var _b = __read(useState(), 2), focused = _b[0], setFocused = _b[1];
-    var _c = __read(useState(defaultValue), 2), valueState = _c[0], setValueState = _c[1];
-    var filled = isControlled ? !!valueProp : !!valueState;
-    // autoSize
-    useEffect(function () {
-        if (fieldRef.current && expand === 'autoSize') {
-            fieldRef.current.style.blockSize = '0px';
-            var scrollHeight = fieldRef.current.scrollHeight;
-            fieldRef.current.style.blockSize = "".concat(scrollHeight, "px");
-        }
-    }, [valueProp, valueState]);
-    // maxLength
-    var counter = useMemo(function () {
-        var _a;
-        var value = valueProp || valueState;
-        return maxLength ? "".concat((_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0, " / ").concat(maxLength) : undefined;
-    }, [maxLength, valueProp, valueState]);
-    var handleFocus = useCallback(function (e) {
-        var _a;
-        setFocused(true);
-        (_a = textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(textareaProps, e);
-    }, [textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onFocus]);
-    var handleBlur = useCallback(function (e) {
-        var _a;
-        setFocused(false);
-        (_a = textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textareaProps, e);
-    }, [textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onBlur]);
-    var handleChange = useCallback(function (e) {
-        if (disabled)
-            return;
-        var value = e.target.value;
-        if (!isControlled || maxLength || expand === 'autoSize') {
-            setValueState(value);
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    }, [onChange, isControlled, disabled, maxLength, expand]);
-    return (React.createElement("div", __assign({}, other, { className: cnTextarea({
-            size: size,
-            required: required,
-            fullWidth: fullWidth,
-            error: error,
-            disabled: disabled,
-            hasLabel: !!label,
-            expand: expand,
-            focused: focused
+    var _a = props.size, size = _a === void 0 ? TEXTAREA_DEFAULT_SIZE : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, textareaRef = props.textareaRef, disabled = props.disabled, textareaProps = props.textareaProps, labelRef = props.labelRef, labelProps = props.labelProps, other = __rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "textareaRef", "disabled", "textareaProps", "labelRef", "labelProps"]);
+    return (React.createElement(FieldControl, __assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { className: cnTextarea({
+            expand: expand
         }, [className]), ref: ref }),
-        React.createElement("label", { className: cnTextarea('Body') },
-            label && (React.createElement(FieldLabel, __assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: cnTextarea('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
-            React.createElement("textarea", __assign({ id: id, name: name, cols: cols, rows: rows, disabled: disabled, value: valueProp, required: required, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder, autoFocus: autoFocus }, textareaProps, { className: cnTextarea('Field', { filled: filled }, [
-                    textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.className,
-                ]), onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, ref: useMultiRef([textareaRef, fieldRef]) })),
-            React.createElement("fieldset", { className: cnTextarea('Fieldset') })),
-        (hint || maxLength) && (React.createElement(FieldHint, { size: size, error: error, disabled: disabled },
-            hint,
-            maxLength && (React.createElement("span", { className: cnTextarea('Counter', { disabled: disabled }) }, counter))))));
+        React.createElement(TextareaConsumer, { autoFocus: autoFocus, maxLength: maxLength, placeholder: placeholder, id: id, name: name, cols: cols, expand: expand, rows: rows, label: label, hint: hint, value: value, defaultValue: defaultValue, onChange: onChange, textareaRef: textareaRef, textareaProps: textareaProps, labelRef: labelRef, labelProps: labelProps })));
 });
 Textarea.displayName = 'Textarea';

package/__inner__/esm/components/Textarea/components/TextareaConsumer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TextareaProps } from '../../Textarea';
+export declare const TextareaConsumer: React.FC<TextareaProps>;

package/__inner__/esm/components/Textarea/components/TextareaConsumer.js

@@ -0,0 +1,32 @@
+import { __assign, __read } from "tslib";
+import React, { useContext, useEffect, useRef } from 'react';
+import { useMultiRef } from '../../../hooks/useMultiRef';
+import { FieldControlContext } from '../../FieldControl';
+import { FieldHint } from '../../FieldHint';
+import { FieldInput } from '../../FieldInput';
+import { FieldLabel } from '../../FieldLabel';
+import { Fieldset } from '../../Fieldset';
+import { cnTextarea } from '../../Textarea';
+import { TextareaCounter } from './index';
+export var TextareaConsumer = function (_a) {
+    var labelProps = _a.labelProps, labelRef = _a.labelRef, maxLength = _a.maxLength, label = _a.label, id = _a.id, name = _a.name, cols = _a.cols, rows = _a.rows, disabled = _a.disabled, valueProp = _a.value, required = _a.required, defaultValue = _a.defaultValue, placeholder = _a.placeholder, autoFocus = _a.autoFocus, textareaProps = _a.textareaProps, onChange = _a.onChange, textareaRef = _a.textareaRef, expand = _a.expand, hint = _a.hint;
+    var fieldRef = useRef(null);
+    var context = useContext(FieldControlContext);
+    var _b = __read(context, 1), value = _b[0].value;
+    // autoSize
+    useEffect(function () {
+        if (fieldRef.current && expand === 'autoSize') {
+            fieldRef.current.style.blockSize = '0px';
+            var scrollHeight = fieldRef.current.scrollHeight;
+            fieldRef.current.style.blockSize = "".concat(scrollHeight, "px");
+        }
+    }, [value]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("label", { className: cnTextarea('Body') },
+            React.createElement(FieldLabel, __assign({}, labelProps, { className: cnTextarea('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) }), label),
+            React.createElement(FieldInput, __assign({ as: "textarea", id: id, name: name, cols: cols, rows: rows, disabled: disabled, value: valueProp, required: required, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder, autoFocus: autoFocus, onChange: onChange }, textareaProps, { className: cnTextarea('Field', {}, [textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.className]), ref: useMultiRef([textareaRef || (textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.ref), fieldRef]) })),
+            React.createElement(Fieldset, null)),
+        React.createElement(FieldHint, null,
+            hint,
+            maxLength && React.createElement(TextareaCounter, { maxLength: maxLength }))));
+};

package/__inner__/esm/components/Textarea/components/TextareaCounter.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef, FC } from 'react';
+import type { TextareaProps } from '../index';
+export type TextareaCounter = ComponentPropsWithRef<'span'> & {
+    maxLength: TextareaProps['maxLength'];
+    disabled?: TextareaProps['disabled'];
+};
+export declare const TextareaCounter: FC<TextareaCounter>;