@ozen-ui/kit 0.56.0 → 0.58.0

package/__inner__/esm/components/FieldInput/FieldInput.js

@@ -5,10 +5,10 @@ import { useIsomorphicEffect } from '../../hooks/useIsomorphicEffect';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { useFieldControl } from '../FieldControl';
-export var FIELD_INPUT_DEFAULT_TAG = 'input';
+import { FIELD_INPUT_DEFAULT_TAG } from './constants';
 export var cnFieldInput = cn('FieldInput');
 export var FieldInput = polymorphicComponentWithRef(function (_a, ref) {
-    var _b = _a.as, Tag = _b === void 0 ? FIELD_INPUT_DEFAULT_TAG : _b, className = _a.className, requiredProp = _a.required, disabledProp = _a.disabled, valueProp = _a.value, onChange = _a.onChange, defaultValue = _a.defaultValue, children = _a.children, onFocus = _a.onFocus, onBlur = _a.onBlur, other = __rest(_a, ["as", "className", "required", "disabled", "value", "onChange", "defaultValue", "children", "onFocus", "onBlur"]);
+    var _b = _a.as, Tag = _b === void 0 ? FIELD_INPUT_DEFAULT_TAG : _b, className = _a.className, requiredProp = _a.required, disabledProp = _a.disabled, valueProp = _a.value, renderComponentProp = _a.renderComponent, onChange = _a.onChange, defaultValue = _a.defaultValue, children = _a.children, onFocus = _a.onFocus, onBlur = _a.onBlur, other = __rest(_a, ["as", "className", "required", "disabled", "value", "renderComponent", "onChange", "defaultValue", "children", "onFocus", "onBlur"]);
     var _c = __read(useState(), 2), focused = _c[0], setFocused = _c[1];
     var context = useFieldControl();
     var _d = __read(context, 2), fieldControl = _d[0], setFieldControl = _d[1];
@@ -47,6 +47,11 @@ export var FieldInput = polymorphicComponentWithRef(function (_a, ref) {
         setFocused(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     }, [onBlur]);
-    return (React.createElement(Tag, __assign({ className: cnFieldInput({}, [className]), required: required, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange }, (isControlled ? { value: valueState } : { defaultValue: defaultValue }), other, { ref: ref }), children));
+    var renderComponentDefault = function (props, ref) { return (React.createElement(Tag, __assign({}, props, { ref: ref }), children)); };
+    var renderComponent = renderComponentProp || renderComponentDefault;
+    var render = function () {
+        return renderComponent(__assign(__assign({ className: cnFieldInput({}, [className]), required: required, disabled: disabled, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange }, (isControlled ? { value: valueState } : { defaultValue: defaultValue })), other), ref);
+    };
+    return render();
 });
 FieldInput.displayName = 'FieldInput';

package/__inner__/esm/components/FieldInput/constants.d.ts

@@ -0,0 +1 @@
+export declare const FIELD_INPUT_DEFAULT_TAG = "input";

package/__inner__/esm/components/FieldInput/constants.js

@@ -0,0 +1 @@
+export var FIELD_INPUT_DEFAULT_TAG = 'input';

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

@@ -1 +1,2 @@
 export * from './FieldInput';
+export * from './types';

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

@@ -1 +1,2 @@
 export * from './FieldInput';
+export * from './types';

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

@@ -0,0 +1,11 @@
+import type { ElementType, HTMLAttributes, ReactElement, Ref } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { FIELD_INPUT_DEFAULT_TAG } from './constants';
+export type FieldInputPropRenderComponent<T extends HTMLElement = any> = (props: HTMLAttributes<T> & {
+    'data-testid'?: string;
+}, ref?: Ref<T>) => ReactElement | null;
+export type FieldInputBaseProps = {
+    'data-testid'?: string;
+    renderComponent?: FieldInputPropRenderComponent;
+};
+export type FieldInputProps<As extends ElementType = typeof FIELD_INPUT_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<FieldInputBaseProps, As>;

package/__inner__/esm/components/FieldInput/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/FieldLabel/FieldLabel.css

@@ -26,6 +26,7 @@
     transform: translateY(var(--field-label-translate_y)) scale(1);
   }
 
+  .FieldLabel_shrink.FieldLabel_size_2xs,
   .FieldLabel_filled.FieldLabel_size_2xs,
   .FieldLabel_focused.FieldLabel_size_2xs {
     opacity: 0;

package/__inner__/esm/components/Grid/Grid.css

@@ -4,6 +4,8 @@
 /* l >= 1280px */
 .Grid {
   display: grid;
+  min-block-size: 0;
+  min-inline-size: 0;
 }
 .Grid_cols_1 {
     grid-template-columns: repeat(1, 1fr);
@@ -801,6 +803,8 @@
   --grid-col-end: auto;
   --grid-row-start: auto;
   --grid-row-end: auto;
+  min-inline-size: 0;
+  overflow: hidden;
   grid-column: var(--grid-col-start) / var(--grid-col-end);
   grid-row: var(--grid-row-start) / var(--grid-row-end);
 }

package/__inner__/esm/components/Input/Input.css

@@ -14,23 +14,20 @@
   .Input-FieldContainer {
     inline-size: 100%;
     position: relative;
+    overflow: hidden;
   }
   .Input-Field {
     border: none;
     outline: none;
-    display: flex;
-    inline-size: 100%;
-    padding: var(--textfield-input-padding);
+    font: inherit;
+    display: block;
     background: none;
-    color: var(--textfield-color);
+    inline-size: 100%;
     box-sizing: border-box;
+    color: var(--textfield-color);
+    padding: var(--textfield-input-padding);
     block-size: var(--textfield-input-height);
-    font: inherit;
   }
-  .Input-Field::placeholder {
-      opacity: 1;
-      color: var(--textfield-placeholder-color);
-    }
   .Input-Field:-webkit-autofill,
     .Input-Field:-webkit-autofill:hover,
     .Input-Field:-webkit-autofill:focus {

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

@@ -4,6 +4,7 @@ import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant'
 import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
 import type { FieldHintProps } from '../FieldHint';
 import type { FieldIconProps } from '../FieldIcon';
+import type { FieldInputProps } from '../FieldInput';
 import type { FieldLabelProps } from '../FieldLabel';
 export declare const inputTypeVariant: readonly ["number", "date", "datetime-local", "time", "text", "tel", "password", "email"];
 export type InputTypeVariant = (typeof inputTypeVariant)[number];
@@ -65,9 +66,7 @@ export type InputProps = ExtendableComponentPropsWithRef<{
     /** Обработчик события на изменение значения поля */
     onChange?: InputOnChange;
     /** Свойства элемента input */
-    inputProps?: InputElement & {
-        'data-testid'?: string;
-    };
+    inputProps?: FieldInputProps;
     /** Свойства FieldLabel */
     labelProps?: FieldLabelProps;
     /** Cвойства Body */

package/__inner__/esm/components/InputNumber/InputNumber.css

@@ -68,11 +68,6 @@
     block-size: var(--textfield-input-height);
   }
 
-  .InputNumber-Field::placeholder {
-      opacity: 1;
-      color: var(--textfield-placeholder-color);
-    }
-
   .InputNumber-Field:-webkit-autofill,
     .InputNumber-Field:-webkit-autofill:hover,
     .InputNumber-Field:-webkit-autofill:focus {

package/__inner__/esm/components/Menu/Menu.js

@@ -5,6 +5,7 @@ import { deprecate } from '@ozen-ui/logger';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { getPaperSizeToFormElement } from '../../utils/getPaperSizeToFormElement';
+import { Paper } from '../Paper';
 import { Popover } from '../Popover';
 import { MenuContextConsumer } from './components';
 import { MENU_DEFAULT_SIZE } from './constants';
@@ -16,7 +17,7 @@ export var Menu = forwardRef(function (inProps, ref) {
     if (process.env.NODE_ENV !== 'production' && menuListRef) {
         deprecate('Свойство «menuListRef» устарело. Для замены используйте «menuListProps.ref».');
     }
-    return (React.createElement(Popover, __assign({ offset: [0, 4], radius: radius }, other, { open: open, onClose: onClose, className: cnMenu('', [className]), disableEnforceFocus: true, ref: ref }),
+    return (React.createElement(Popover, __assign({ as: Paper, offset: [0, 4], radius: radius }, other, { open: open, onClose: onClose, className: cnMenu('', [className]), disableEnforceFocus: true, ref: ref }),
         React.createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: __assign(__assign({ size: size }, menuListProps), { ref: menuListRef || (menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps.ref) }) }, children)));
 });
 Menu.displayName = 'Menu';

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

@@ -34,7 +34,6 @@ export declare const Modal: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     'data-testid'?: string | undefined;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[] | undefined;
-    disablePortal?: boolean | undefined;
 } & import("../Portal").PortalBaseProps & {
     as?: "div" | undefined;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "container"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof import("../Portal").PortalBaseProps> & React.RefAttributes<HTMLDivElement>>;

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

@@ -12,19 +12,18 @@ import { isKey } from '../../utils/isKey';
 import { Backdrop } from '../Backdrop';
 import { Portal } from '../Portal';
 import { ModalConsumer } from './components';
-import { MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE, MODAL_DEFAULT_DISABLE_PORTAL, MODAL_DEFAULT_DISABLE_SCROLL_LOCK, MODAL_DEFAULT_ESCAPE_KEY_DOWN, MODAL_DEFAULT_HIDE_BACKDROP, MODAL_DEFAULT_KEEP_MOUNTED, MODAL_DEFAULT_OPEN, } from './constants';
+import { MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE, MODAL_DEFAULT_DISABLE_SCROLL_LOCK, MODAL_DEFAULT_ESCAPE_KEY_DOWN, MODAL_DEFAULT_HIDE_BACKDROP, MODAL_DEFAULT_KEEP_MOUNTED, MODAL_DEFAULT_OPEN, } from './constants';
 import { useModalManager } from './index';
 export var cnModal = cn('Modal');
 export var Modal = forwardRef(function (_a, ref) {
-    var _b = _a.open, open = _b === void 0 ? MODAL_DEFAULT_OPEN : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? MODAL_DEFAULT_KEEP_MOUNTED : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? MODAL_DEFAULT_HIDE_BACKDROP : _d, _e = _a.disableScrollLock, disableScrollLock = _e === void 0 ? MODAL_DEFAULT_DISABLE_SCROLL_LOCK : _e, _f = _a.disableClickOutside, disableClickOutside = _f === void 0 ? MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = _a.disableEscapeKeyDown, disableEscapeKeyDown = _g === void 0 ? MODAL_DEFAULT_ESCAPE_KEY_DOWN : _g, _h = _a.disablePortal, disablePortal = _h === void 0 ? MODAL_DEFAULT_DISABLE_PORTAL : _h, 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", "disablePortal", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className", "ignoreClickOutsideRefs"]);
+    var _b = _a.open, open = _b === void 0 ? MODAL_DEFAULT_OPEN : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? MODAL_DEFAULT_KEEP_MOUNTED : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? MODAL_DEFAULT_HIDE_BACKDROP : _d, _e = _a.disableScrollLock, disableScrollLock = _e === void 0 ? MODAL_DEFAULT_DISABLE_SCROLL_LOCK : _e, _f = _a.disableClickOutside, disableClickOutside = _f === void 0 ? MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = _a.disableEscapeKeyDown, disableEscapeKeyDown = _g === void 0 ? MODAL_DEFAULT_ESCAPE_KEY_DOWN : _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 rootRef = useRef(null);
     var windowInnerRef = useRef(null);
     var focusedElement = useRef(null);
-    var _j = __read(useState(false), 2), openState = _j[0], setOpenState = _j[1];
-    var _k = __read(useState(false), 2), opened = _k[0], setOpened = _k[1];
-    var _l = useModalManager(windowInnerRef, 1000, openState), isTop = _l.isTop, refsClickOutside = _l.refsClickOutside;
-    var RootComponent = disablePortal ? 'div' : Portal;
+    var _h = __read(useState(false), 2), openState = _h[0], setOpenState = _h[1];
+    var _j = __read(useState(false), 2), opened = _j[0], setOpened = _j[1];
+    var _k = useModalManager(windowInnerRef, 1000, openState), isTop = _k.isTop, refsClickOutside = _k.refsClickOutside;
     useClickOutside({
         refs: __spreadArray(__spreadArray([
             windowInnerRef
@@ -70,7 +69,7 @@ export var Modal = forwardRef(function (_a, ref) {
         active: isTop && !disableEscapeKeyDown,
     });
     return (React.createElement(CSSTransition, __assign({ classNames: cnModal({ animation: true }), nodeRef: rootRef, timeout: 300 }, transitionProps, { in: openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
-        React.createElement(RootComponent, __assign({}, other, { className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: useMultiRef([rootRef, ref]) }),
+        React.createElement(Portal, __assign({}, other, { className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: useMultiRef([rootRef, ref]) }),
             !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1, open: openState }, backdropProps, { className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
             React.createElement(ModalConsumer, __assign({}, windowProps, { ref: useMultiRef([windowInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
 });

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

@@ -4,4 +4,3 @@ export declare const MODAL_DEFAULT_HIDE_BACKDROP = false;
 export declare const MODAL_DEFAULT_DISABLE_SCROLL_LOCK = false;
 export declare const MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE = false;
 export declare const MODAL_DEFAULT_ESCAPE_KEY_DOWN = false;
-export declare const MODAL_DEFAULT_DISABLE_PORTAL = false;

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

@@ -4,4 +4,3 @@ export var MODAL_DEFAULT_HIDE_BACKDROP = false;
 export var MODAL_DEFAULT_DISABLE_SCROLL_LOCK = false;
 export var MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE = false;
 export var MODAL_DEFAULT_ESCAPE_KEY_DOWN = false;
-export var MODAL_DEFAULT_DISABLE_PORTAL = false;

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

@@ -51,8 +51,5 @@ export type ModalProps = {
     'data-testid'?: string;
     /** Список ссылок на элементы при клике на которые Modal не будет закрываться (см. хук useClickOutside) */
     ignoreClickOutsideRefs?: RefObject<HTMLElement>[];
-    /** Если {true} отключает портал для компонента.
-     * Подробнее — https://react.dev/reference/react-dom/createPortal. */
-    disablePortal?: boolean;
 } & PortalProps;
 export type ModalRef = PortalRef;

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

@@ -1,4 +1,4 @@
 import './Popover.css';
 import type { PopoverBaseProps } from './types';
 export declare const cnPopover: import("@bem-react/classname").ClassNameFormatter;
-export declare const Popover: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<PopoverBaseProps, import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">>;
+export declare const Popover: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<PopoverBaseProps, "div">;

package/__inner__/esm/components/Popover/Popover.js

@@ -1,5 +1,5 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
-import React, { useCallback, useMemo, useEffect, useRef, useState, } from 'react';
+import React, { useCallback, useMemo, useEffect, useRef, useState, forwardRef, } from 'react';
 import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
 import './Popover.css';
@@ -11,6 +11,7 @@ import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { isKey } from '../../utils/isKey';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { Paper } from '../Paper';
 import { Portal } from '../Portal';
 import { PopoverArrow } from './components';
 import { POPOVER_DEFAULT_TAG, POPOVER_DEFAULT_ARROW, POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE, POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS, POPOVER_DEFAULT_DISABLE_INTERACTIVE, POPOVER_DEFAULT_DISABLE_RETURN_FOCUS, POPOVER_DEFAULT_OPEN, POPOVER_DEFAULT_PLACEMENT, POPOVER_DEFAULT_STRATEGY, POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW, } from './constants';
@@ -19,7 +20,11 @@ import { PopoverContext } from './PopoverContext';
 export var cnPopover = cn('Popover');
 export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Popover' });
-    var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, modifiersProps = props.modifiers, _k = props.as, as = _k === void 0 ? POPOVER_DEFAULT_TAG : _k, other = __rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "modifiers", "as"]);
+    var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, modifiersProp = props.modifiers, _k = props.as, as = _k === void 0 ? POPOVER_DEFAULT_TAG : _k, other = __rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "modifiers", "as"]);
+    var Tag = useMemo(function () {
+        // eslint-disable-next-line react/display-name
+        return forwardRef(function (props, ref) { return (React.createElement(Paper, __assign({ radius: "l", shadow: "m", background: "main" }, props, { as: as, ref: ref }))); });
+    }, [as]);
     var _l = __read(useState(false), 2), openState = _l[0], setOpenState = _l[1];
     var focusedElement = useRef(null);
     var popoverRef = useRef(null);
@@ -102,7 +107,7 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
                 offset: offset,
             },
         }
-    ], __read((modifiersProps || [])), false); }, [offset, equalAnchorWidth, modifiersProps]);
+    ], __read((modifiersProp || [])), false); }, [offset, equalAnchorWidth, modifiersProp]);
     // Якорный элемент или координаты
     var resolveReferenceElement = useMemo(function () {
         if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
@@ -143,7 +148,7 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
     }, [open]);
     return (React.createElement(PopoverContext.Provider, { value: { isTop: isTop } },
         React.createElement(CSSTransition, __assign({ nodeRef: popoverRef, classNames: cnPopover({ animation: true }), timeout: 120 }, transitionProps, { in: openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: true }),
-            React.createElement(Portal, __assign({ as: as, radius: "l", shadow: "l", background: "main" }, other, { style: __assign(__assign({}, style), styles.popper), ref: portalRef, className: cnPopover({ disableInteractive: disableInteractive }, [className]) }, attributes.popper),
+            React.createElement(Portal, __assign({ as: Tag }, other, { style: __assign(__assign({}, style), styles.popper), ref: portalRef, className: cnPopover({ disableInteractive: disableInteractive }, [className]) }, attributes.popper),
                 children,
                 arrow && (React.createElement(PopoverArrow, __assign({}, arrowProps, { style: __assign(__assign({}, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style), styles.arrow), "data-popper-arrow": true })))))));
 });

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

@@ -1,4 +1,4 @@
-export declare const POPOVER_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
+export declare const POPOVER_DEFAULT_TAG = "div";
 export declare const POPOVER_DEFAULT_ARROW = false;
 export declare const POPOVER_DEFAULT_OPEN = false;
 export declare const POPOVER_DEFAULT_DISABLE_INTERACTIVE = false;

package/__inner__/esm/components/Popover/constants.js

@@ -1,5 +1,4 @@
-import { Paper } from '../Paper';
-export var POPOVER_DEFAULT_TAG = Paper;
+export var POPOVER_DEFAULT_TAG = 'div';
 export var POPOVER_DEFAULT_ARROW = false;
 export var POPOVER_DEFAULT_OPEN = false;
 export var POPOVER_DEFAULT_DISABLE_INTERACTIVE = false;

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

@@ -3,7 +3,7 @@ import type PopperJS from '@popperjs/core';
 import type { PopperProps } from 'react-popper';
 import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
-import type { PortalProps } from '../Portal';
+import type { PortalBaseProps } from '../Portal';
 import type { PopoverArrowProps } from './components';
 import type { POPOVER_DEFAULT_TAG } from './constants';
 export type VirtualElement = {
@@ -71,8 +71,6 @@ export type PopoverBaseProps = {
     'data-testid'?: string;
     /** Функция обратного вызова для получения метода по перерасчету расположения компонента Popover */
     setUpdate?(update: PopperJS.Instance['update'] | null): void;
-    /** Контейнер для монтирования всплывающего окна */
-    container?: PortalProps['container'];
     /** Стратегия позиционирования */
     strategy?: PopoverStrategyVariant;
     /** Если {true} позволяет смещаться по границе якорного элемента компонента  */
@@ -82,6 +80,6 @@ export type PopoverBaseProps = {
      * https://popper.js.org/docs/v2/modifiers/#custom-modifiers
      * */
     modifiers?: PopperProps<unknown>['modifiers'];
-};
+} & PortalBaseProps;
 export type PopoverRef = ComponentRef<typeof POPOVER_DEFAULT_TAG>;
 export type PopoverProps<As extends ElementType = typeof POPOVER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;

package/__inner__/esm/components/Portal/Portal.js

@@ -4,14 +4,14 @@ import { createPortal } from 'react-dom';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { useTheme, ThemeProvider } from '../ThemeProvider';
-import { PORTAL_DEFAULT_TAG } from './constants';
+import { PORTAL_DEFAULT_CONTAINER, PORTAL_DEFAULT_DISABLE_PORTAL, PORTAL_DEFAULT_TAG, } from './constants';
 export var Portal = polymorphicComponentWithRef(function (inProps, ref) {
     var _a = useThemeProps({
         props: inProps,
         name: 'Portal',
-    }), children = _a.children, container = _a.container, className = _a.className, _b = _a.as, Tag = _b === void 0 ? PORTAL_DEFAULT_TAG : _b, other = __rest(_a, ["children", "container", "className", "as"]);
+    }), _b = _a.disablePortal, disablePortal = _b === void 0 ? PORTAL_DEFAULT_DISABLE_PORTAL : _b, _c = _a.as, Tag = _c === void 0 ? PORTAL_DEFAULT_TAG : _c, containerProp = _a.container, children = _a.children, other = __rest(_a, ["disablePortal", "as", "container", "children"]);
+    var container = containerProp || PORTAL_DEFAULT_CONTAINER;
     var theme = useTheme();
-    var portalContainer = container || window.document.body;
-    return createPortal(React.createElement(ThemeProvider, __assign({ theme: theme, className: className, as: Tag }, other, { ref: ref }), children), portalContainer);
+    return disablePortal ? (React.createElement(Tag, __assign({}, other, { ref: ref }), children)) : (createPortal(React.createElement(ThemeProvider, __assign({ theme: theme, as: Tag }, other, { ref: ref }), children), container));
 });
 Portal.displayName = 'Portal';

package/__inner__/esm/components/Portal/constants.d.ts

@@ -1 +1,3 @@
 export declare const PORTAL_DEFAULT_TAG = "div";
+export declare const PORTAL_DEFAULT_CONTAINER: HTMLElement;
+export declare const PORTAL_DEFAULT_DISABLE_PORTAL = false;

package/__inner__/esm/components/Portal/constants.js

@@ -1 +1,3 @@
 export var PORTAL_DEFAULT_TAG = 'div';
+export var PORTAL_DEFAULT_CONTAINER = window.document.body;
+export var PORTAL_DEFAULT_DISABLE_PORTAL = false;

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

@@ -5,5 +5,8 @@ export type PortalRef = ComponentRef<typeof PORTAL_DEFAULT_TAG>;
 export type PortalBaseProps = {
     /** Контейнер для монтирования портала */
     container?: Element | DocumentFragment | null;
+    /** Если {true} отключает портал для компонента.
+     * Подробнее — https://react.dev/reference/react-dom/createPortal. */
+    disablePortal?: boolean;
 };
 export type PortalProps<As extends ElementType = typeof PORTAL_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<PortalBaseProps, As>;

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

@@ -10,7 +10,7 @@ export type SnackbarProps = PortalProps & {
 };
 export declare const Snackbar: React.ForwardRefExoticComponent<import("../../../Portal").PortalBaseProps & {
     as?: "div" | undefined;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "container"> & {
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof import("../../../Portal").PortalBaseProps> & {
     /** Расположение сообщения относительно контейнера */
     anchorOrigin?: SnackbarAnchorOrigin | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Tag/Tag.css

@@ -7,6 +7,7 @@
   text-decoration: none;
   white-space: nowrap;
   max-inline-size: 100%;
+  box-sizing: border-box;
   gap: var(--spacing-3xs);
   padding: var(--tag-padding);
   border-radius: var(--tag-border-radius);

package/__inner__/esm/components/TagNext/Tag.css

@@ -7,7 +7,9 @@
   text-decoration: none;
   white-space: nowrap;
   max-inline-size: 100%;
+  box-sizing: border-box;
   gap: var(--tag-gap);
+  block-size: var(--tag-height);
   padding: var(--tag-padding);
   border-radius: var(--tag-border-radius);
   transition:
@@ -24,6 +26,7 @@
       text-transform: var(--typography-text-3xs-text_transform, none);
 
       --tag-padding: 0 4px;
+      --tag-height: 16px;
       --tag-gap: var(--spacing-3xs);
       --tag-border-radius: var(--border-radius-s);
     }
@@ -32,7 +35,8 @@
       letter-spacing: var(--typography-text-xs-letter_spacing, 0);
       text-transform: var(--typography-text-xs-text_transform, none);
 
-      --tag-padding: 4px 8px;
+      --tag-padding: 0 8px;
+      --tag-height: 24px;
       --tag-gap: var(--spacing-3xs);
       --tag-border-radius: var(--border-radius-s);
     }
@@ -41,7 +45,8 @@
       letter-spacing: var(--typography-text-s-letter_spacing, 0);
       text-transform: var(--typography-text-s-text_transform, none);
 
-      --tag-padding: 6px 12px;
+      --tag-padding: 0 12px;
+      --tag-height: 32px;
       --tag-gap: var(--spacing-3xs);
       --tag-border-radius: var(--border-radius-m);
     }
@@ -50,7 +55,8 @@
       letter-spacing: var(--typography-text-m-letter_spacing, 0);
       text-transform: var(--typography-text-m-text_transform, none);
 
-      --tag-padding: 6px 12px;
+      --tag-padding: 0 12px;
+      --tag-height: 36px;
       --tag-gap: var(--spacing-2xs);
       --tag-border-radius: var(--border-radius-m);
     }
@@ -59,7 +65,8 @@
       letter-spacing: var(--typography-text-l-letter_spacing, 0);
       text-transform: var(--typography-text-l-text_transform, none);
 
-      --tag-padding: 6px 12px;
+      --tag-padding: 0 12px;
+      --tag-height: 40px;
       --tag-gap: var(--spacing-2xs);
       --tag-border-radius: var(--border-radius-m);
     }

package/__inner__/esm/components/TagNext/Tag.js

@@ -6,11 +6,11 @@ import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { renderContent } from '../../utils/renderContent';
-import { TAG_DEFAULT_AS, TAG_DEFAULT_COLOR, TAG_DEFAULT_SIZE, TAG_DEFAULT_VARIANT, } from './constants';
+import { TAG_DEFAULT_COLOR, TAG_DEFAULT_SIZE, TAG_DEFAULT_TAG, TAG_DEFAULT_VARIANT, } from './constants';
 export var cnTag = cn('TagNext');
 export var Tag = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'TagNext' });
-    var _a = props.color, color = _a === void 0 ? TAG_DEFAULT_COLOR : _a, _b = props.variant, variant = _b === void 0 ? TAG_DEFAULT_VARIANT : _b, _c = props.size, size = _c === void 0 ? TAG_DEFAULT_SIZE : _c, _d = props.as, Tag = _d === void 0 ? TAG_DEFAULT_AS : _d, interactive = props.interactive, iconLeft = props.iconLeft, iconRight = props.iconRight, label = props.label, className = props.className, other = __rest(props, ["color", "variant", "size", "as", "interactive", "iconLeft", "iconRight", "label", "className"]);
+    var _a = props.color, color = _a === void 0 ? TAG_DEFAULT_COLOR : _a, _b = props.variant, variant = _b === void 0 ? TAG_DEFAULT_VARIANT : _b, _c = props.size, size = _c === void 0 ? TAG_DEFAULT_SIZE : _c, _d = props.as, Tag = _d === void 0 ? TAG_DEFAULT_TAG : _d, interactive = props.interactive, iconLeft = props.iconLeft, iconRight = props.iconRight, label = props.label, className = props.className, other = __rest(props, ["color", "variant", "size", "as", "interactive", "iconLeft", "iconRight", "label", "className"]);
     var renderIcon = function (content) {
         return renderContent({
             content: content,

package/__inner__/esm/components/TagNext/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const TAG_DEFAULT_AS = "div";
+export declare const TAG_DEFAULT_TAG = "div";
 export declare const TAG_DEFAULT_VARIANT = "secondary";
 export declare const TAG_DEFAULT_COLOR = "action";
 export declare const TAG_DEFAULT_SIZE = "m";

package/__inner__/esm/components/TagNext/constants.js

@@ -1,4 +1,4 @@
-export var TAG_DEFAULT_AS = 'div';
+export var TAG_DEFAULT_TAG = 'div';
 export var TAG_DEFAULT_VARIANT = 'secondary';
 export var TAG_DEFAULT_COLOR = 'action';
 export var TAG_DEFAULT_SIZE = 'm';

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

@@ -1,18 +1,20 @@
-import type { ElementType } from 'react';
+import type { ComponentRef, ElementType } from 'react';
 import type { IconProps } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import type { RenderContentType } from '../../utils/renderContent';
+import type { TAG_DEFAULT_TAG } from './constants';
 export declare const tagVariant: readonly ["primary", "secondary"];
 export declare const tagColorVariant: readonly ["neutral", "action", "error", "warning", "success", "info"];
 export type TagVariant = (typeof tagVariant)[number];
 export type TagColor = (typeof tagColorVariant)[number];
 export type TagIcon = RenderContentType<IconProps>['content'];
+export type TagSizeVariant = FormElementSizeVariant;
 export type TagBaseProps = {
     /** Текст лейбла внутри тега */
     label: string;
     /** Размер */
-    size?: FormElementSizeVariant;
+    size?: TagSizeVariant;
     /** Вариант компонента */
     variant?: TagVariant;
     /** Цвет компонента */
@@ -24,4 +26,5 @@ export type TagBaseProps = {
     /** Иконка справа */
     iconRight?: TagIcon;
 };
-export type TagProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<TagBaseProps, As>;
+export type TagProps<As extends ElementType = typeof TAG_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<TagBaseProps, As>;
+export type TagRef = ComponentRef<typeof TAG_DEFAULT_TAG>;

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

@@ -76,11 +76,6 @@
     resize: none;
 }
 
-  .Textarea-Field::placeholder {
-      opacity: 1;
-      color: var(--textfield-placeholder-color);
-    }
-
   .Textarea-Counter {
     float: right;
     margin-inline-start: var(--spacing-s);

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

@@ -4,6 +4,7 @@ import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphi
 import type { AccordionProps, AccordionSummaryProps } from '../Accordion';
 import type { AlertProps } from '../Alert';
 import type { AutocompleteProps } from '../Autocomplete';
+import type { AutocompleteProps as AutocompletePropsNext } from '../AutocompleteNext';
 import type { AvatarProps } from '../Avatar';
 import type { BackdropProps } from '../Backdrop';
 import type { BadgeProps } from '../Badge';
@@ -78,6 +79,7 @@ export type Theme = {
         AccordionSummary?: Partial<AccordionSummaryProps>;
         Alert?: Partial<AlertProps>;
         Autocomplete?: Partial<AutocompleteProps>;
+        AutocompleteNext?: Partial<AutocompletePropsNext>;
         Avatar?: Partial<AvatarProps>;
         Backdrop?: Partial<BackdropProps>;
         Badge?: Partial<BadgeProps>;