@ozen-ui/kit 0.56.0 → 0.58.0

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

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MODAL_DEFAULT_DISABLE_PORTAL = exports.MODAL_DEFAULT_ESCAPE_KEY_DOWN = exports.MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE = exports.MODAL_DEFAULT_DISABLE_SCROLL_LOCK = exports.MODAL_DEFAULT_HIDE_BACKDROP = exports.MODAL_DEFAULT_KEEP_MOUNTED = exports.MODAL_DEFAULT_OPEN = void 0;
+exports.MODAL_DEFAULT_ESCAPE_KEY_DOWN = exports.MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE = exports.MODAL_DEFAULT_DISABLE_SCROLL_LOCK = exports.MODAL_DEFAULT_HIDE_BACKDROP = exports.MODAL_DEFAULT_KEEP_MOUNTED = exports.MODAL_DEFAULT_OPEN = void 0;
 exports.MODAL_DEFAULT_OPEN = false;
 exports.MODAL_DEFAULT_KEEP_MOUNTED = false;
 exports.MODAL_DEFAULT_HIDE_BACKDROP = false;
 exports.MODAL_DEFAULT_DISABLE_SCROLL_LOCK = false;
 exports.MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE = false;
 exports.MODAL_DEFAULT_ESCAPE_KEY_DOWN = false;
-exports.MODAL_DEFAULT_DISABLE_PORTAL = false;

package/__inner__/cjs/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__/cjs/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__/cjs/components/Popover/Popover.js

@@ -14,6 +14,7 @@ var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var isKey_1 = require("../../utils/isKey");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var Paper_1 = require("../Paper");
 var Portal_1 = require("../Portal");
 var components_1 = require("./components");
 var constants_1 = require("./constants");
@@ -22,7 +23,11 @@ var PopoverContext_1 = require("./PopoverContext");
 exports.cnPopover = (0, classname_1.cn)('Popover');
 exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Popover' });
-    var _a = props.arrow, arrow = _a === void 0 ? constants_1.POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? constants_1.POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? constants_1.POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? constants_1.POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? constants_1.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 ? constants_1.POPOVER_DEFAULT_TAG : _k, other = tslib_1.__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 ? constants_1.POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? constants_1.POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? constants_1.POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? constants_1.POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? constants_1.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 ? constants_1.POPOVER_DEFAULT_TAG : _k, other = tslib_1.__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 = (0, react_1.useMemo)(function () {
+        // eslint-disable-next-line react/display-name
+        return (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ radius: "l", shadow: "m", background: "main" }, props, { as: as, ref: ref }))); });
+    }, [as]);
     var _l = tslib_1.__read((0, react_1.useState)(false), 2), openState = _l[0], setOpenState = _l[1];
     var focusedElement = (0, react_1.useRef)(null);
     var popoverRef = (0, react_1.useRef)(null);
@@ -105,7 +110,7 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
                 offset: offset,
             },
         }
-    ], tslib_1.__read((modifiersProps || [])), false); }, [offset, equalAnchorWidth, modifiersProps]);
+    ], tslib_1.__read((modifiersProp || [])), false); }, [offset, equalAnchorWidth, modifiersProp]);
     // Якорный элемент или координаты
     var resolveReferenceElement = (0, react_1.useMemo)(function () {
         if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
@@ -146,7 +151,7 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
     }, [open]);
     return (react_1.default.createElement(PopoverContext_1.PopoverContext.Provider, { value: { isTop: isTop } },
         react_1.default.createElement(react_transition_group_1.CSSTransition, tslib_1.__assign({ nodeRef: popoverRef, classNames: (0, exports.cnPopover)({ animation: true }), timeout: 120 }, transitionProps, { in: openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: true }),
-            react_1.default.createElement(Portal_1.Portal, tslib_1.__assign({ as: as, radius: "l", shadow: "l", background: "main" }, other, { style: tslib_1.__assign(tslib_1.__assign({}, style), styles.popper), ref: portalRef, className: (0, exports.cnPopover)({ disableInteractive: disableInteractive }, [className]) }, attributes.popper),
+            react_1.default.createElement(Portal_1.Portal, tslib_1.__assign({ as: Tag }, other, { style: tslib_1.__assign(tslib_1.__assign({}, style), styles.popper), ref: portalRef, className: (0, exports.cnPopover)({ disableInteractive: disableInteractive }, [className]) }, attributes.popper),
                 children,
                 arrow && (react_1.default.createElement(components_1.PopoverArrow, tslib_1.__assign({}, arrowProps, { style: tslib_1.__assign(tslib_1.__assign({}, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style), styles.arrow), "data-popper-arrow": true })))))));
 });

package/__inner__/cjs/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__/cjs/components/Popover/constants.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW = exports.POPOVER_DEFAULT_STRATEGY = exports.POPOVER_DEFAULT_PLACEMENT = exports.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = exports.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = exports.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = exports.POPOVER_DEFAULT_DISABLE_INTERACTIVE = exports.POPOVER_DEFAULT_OPEN = exports.POPOVER_DEFAULT_ARROW = exports.POPOVER_DEFAULT_TAG = void 0;
-var Paper_1 = require("../Paper");
-exports.POPOVER_DEFAULT_TAG = Paper_1.Paper;
+exports.POPOVER_DEFAULT_TAG = 'div';
 exports.POPOVER_DEFAULT_ARROW = false;
 exports.POPOVER_DEFAULT_OPEN = false;
 exports.POPOVER_DEFAULT_DISABLE_INTERACTIVE = false;

package/__inner__/cjs/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__/cjs/components/Portal/Portal.js

@@ -12,9 +12,9 @@ exports.Portal = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(
     var _a = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'Portal',
-    }), children = _a.children, container = _a.container, className = _a.className, _b = _a.as, Tag = _b === void 0 ? constants_1.PORTAL_DEFAULT_TAG : _b, other = tslib_1.__rest(_a, ["children", "container", "className", "as"]);
+    }), _b = _a.disablePortal, disablePortal = _b === void 0 ? constants_1.PORTAL_DEFAULT_DISABLE_PORTAL : _b, _c = _a.as, Tag = _c === void 0 ? constants_1.PORTAL_DEFAULT_TAG : _c, containerProp = _a.container, children = _a.children, other = tslib_1.__rest(_a, ["disablePortal", "as", "container", "children"]);
+    var container = containerProp || constants_1.PORTAL_DEFAULT_CONTAINER;
     var theme = (0, ThemeProvider_1.useTheme)();
-    var portalContainer = container || window.document.body;
-    return (0, react_dom_1.createPortal)(react_1.default.createElement(ThemeProvider_1.ThemeProvider, tslib_1.__assign({ theme: theme, className: className, as: Tag }, other, { ref: ref }), children), portalContainer);
+    return disablePortal ? (react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref }), children)) : ((0, react_dom_1.createPortal)(react_1.default.createElement(ThemeProvider_1.ThemeProvider, tslib_1.__assign({ theme: theme, as: Tag }, other, { ref: ref }), children), container));
 });
 exports.Portal.displayName = 'Portal';

package/__inner__/cjs/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__/cjs/components/Portal/constants.js

@@ -1,4 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PORTAL_DEFAULT_TAG = void 0;
+exports.PORTAL_DEFAULT_DISABLE_PORTAL = exports.PORTAL_DEFAULT_CONTAINER = exports.PORTAL_DEFAULT_TAG = void 0;
 exports.PORTAL_DEFAULT_TAG = 'div';
+exports.PORTAL_DEFAULT_CONTAINER = window.document.body;
+exports.PORTAL_DEFAULT_DISABLE_PORTAL = false;

package/__inner__/cjs/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__/cjs/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__/cjs/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__/cjs/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__/cjs/components/TagNext/Tag.js

@@ -13,7 +13,7 @@ var constants_1 = require("./constants");
 exports.cnTag = (0, classname_1.cn)('TagNext');
 exports.Tag = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'TagNext' });
-    var _a = props.color, color = _a === void 0 ? constants_1.TAG_DEFAULT_COLOR : _a, _b = props.variant, variant = _b === void 0 ? constants_1.TAG_DEFAULT_VARIANT : _b, _c = props.size, size = _c === void 0 ? constants_1.TAG_DEFAULT_SIZE : _c, _d = props.as, Tag = _d === void 0 ? constants_1.TAG_DEFAULT_AS : _d, interactive = props.interactive, iconLeft = props.iconLeft, iconRight = props.iconRight, label = props.label, className = props.className, other = tslib_1.__rest(props, ["color", "variant", "size", "as", "interactive", "iconLeft", "iconRight", "label", "className"]);
+    var _a = props.color, color = _a === void 0 ? constants_1.TAG_DEFAULT_COLOR : _a, _b = props.variant, variant = _b === void 0 ? constants_1.TAG_DEFAULT_VARIANT : _b, _c = props.size, size = _c === void 0 ? constants_1.TAG_DEFAULT_SIZE : _c, _d = props.as, Tag = _d === void 0 ? constants_1.TAG_DEFAULT_TAG : _d, interactive = props.interactive, iconLeft = props.iconLeft, iconRight = props.iconRight, label = props.label, className = props.className, other = tslib_1.__rest(props, ["color", "variant", "size", "as", "interactive", "iconLeft", "iconRight", "label", "className"]);
     var renderIcon = function (content) {
         return (0, renderContent_1.renderContent)({
             content: content,

package/__inner__/cjs/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__/cjs/components/TagNext/constants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TAG_DEFAULT_SIZE = exports.TAG_DEFAULT_COLOR = exports.TAG_DEFAULT_VARIANT = exports.TAG_DEFAULT_AS = void 0;
-exports.TAG_DEFAULT_AS = 'div';
+exports.TAG_DEFAULT_SIZE = exports.TAG_DEFAULT_COLOR = exports.TAG_DEFAULT_VARIANT = exports.TAG_DEFAULT_TAG = void 0;
+exports.TAG_DEFAULT_TAG = 'div';
 exports.TAG_DEFAULT_VARIANT = 'secondary';
 exports.TAG_DEFAULT_COLOR = 'action';
 exports.TAG_DEFAULT_SIZE = 'm';

package/__inner__/cjs/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__/cjs/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__/cjs/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>;

package/__inner__/cjs/components/Tooltip/Tooltip.js

@@ -17,7 +17,7 @@ var constants_1 = require("./constants");
 exports.cnTooltip = (0, classname_1.cn)('Tooltip');
 exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Tooltip' });
-    var _a = props.trigger, trigger = _a === void 0 ? constants_1.TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? constants_1.TOOLTIP_DEFAULT_SIZE : _b, _c = props.offset, offset = _c === void 0 ? constants_1.TOOLTIP_DEFAULT_OFFSET : _c, _d = props.delayEnter, delayEnter = _d === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_ENTER : _d, _e = props.delayLeave, delayLeave = _e === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_LEAVE : _e, _f = props.arrow, arrow = _f === void 0 ? constants_1.TOOLTIP_DEFAULT_ARROW : _f, _g = props.shouldWrapChildren, shouldWrapChildren = _g === void 0 ? constants_1.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _g, _h = props.disabled, disabled = _h === void 0 ? constants_1.TOOLTIP_DEFAULT_DISABLED : _h, _j = props.inverse, inverse = _j === void 0 ? constants_1.TOOLTIP_DEFAULT_INVERSE : _j, _k = props.as, as = _k === void 0 ? constants_1.TOOLTIP_DEFAULT_TAG : _k, variant = props.variant, children = props.children, label = props.label, openProp = props.open, placement = props.placement, disableInteractive = props.disableInteractive, className = props.className, onOpen = props.onOpen, onClose = props.onClose, other = tslib_1.__rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "as", "variant", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose"]);
+    var _a = props.trigger, trigger = _a === void 0 ? constants_1.TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? constants_1.TOOLTIP_DEFAULT_SIZE : _b, _c = props.offset, offset = _c === void 0 ? constants_1.TOOLTIP_DEFAULT_OFFSET : _c, _d = props.delayEnter, delayEnter = _d === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_ENTER : _d, _e = props.delayLeave, delayLeave = _e === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_LEAVE : _e, _f = props.arrow, arrow = _f === void 0 ? constants_1.TOOLTIP_DEFAULT_ARROW : _f, _g = props.shouldWrapChildren, shouldWrapChildren = _g === void 0 ? constants_1.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _g, _h = props.disabled, disabled = _h === void 0 ? constants_1.TOOLTIP_DEFAULT_DISABLED : _h, _j = props.inverse, inverse = _j === void 0 ? constants_1.TOOLTIP_DEFAULT_INVERSE : _j, _k = props.as, as = _k === void 0 ? constants_1.TOOLTIP_DEFAULT_TAG : _k, modifiersProp = props.modifiers, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, variant = props.variant, children = props.children, label = props.label, openProp = props.open, className = props.className, onOpen = props.onOpen, onClose = props.onClose, other = tslib_1.__rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "as", "modifiers", "onMouseEnter", "onMouseLeave", "variant", "children", "label", "open", "className", "onOpen", "onClose"]);
     if (process.env.NODE_ENV !== 'production' && variant) {
         (0, logger_1.deprecate)('Свойство «variant» устарело. Для замены используйте «inverse».');
     }
@@ -25,14 +25,14 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
     var _l = tslib_1.__read((0, react_1.useState)(), 2), delay = _l[0], setDelay = _l[1];
     var _m = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), focused = _m[0], setFocused = _m[1];
     var _o = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), hovered = _o[0], setHovered = _o[1];
-    var modifiers = [
+    var modifiers = tslib_1.__spreadArray([
         {
             name: 'arrow',
             options: {
                 padding: size === 'xs' ? 8 : 12,
             },
-        },
-    ];
+        }
+    ], tslib_1.__read((modifiersProp || [])), false);
     var _p = tslib_1.__read((0, useControlled_1.useControlled)({
         value: openProp,
         defaultValue: false,
@@ -65,18 +65,20 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
     }, [children, shouldWrapChildren]);
     var childrenProps = resolveChildren.props, childrenRef = resolveChildren.ref;
     var childrenMultiRef = (0, useMultiRef_1.useMultiRef)([anchorRef, childrenRef]);
-    var handleMouseEnter = function () {
+    var handleMouseEnter = function (e) {
         if (trigger === 'hover' || trigger === 'hover&focus') {
             setHovered.on();
             setOpenWithDelay(true);
         }
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
     };
-    var handleMouseLeave = function () {
+    var handleMouseLeave = function (e) {
         if (trigger === 'hover' || trigger === 'hover&focus') {
             setHovered.off();
             if (!focused)
                 setOpenWithDelay(false);
         }
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
     };
     var handleClick = function () {
         if (trigger === 'click')
@@ -112,11 +114,11 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
                 onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
             },
             onMouseEnter: function (e) {
-                handleMouseEnter();
+                handleMouseEnter(e);
                 onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
             },
             onMouseLeave: function (e) {
-                handleMouseLeave();
+                handleMouseLeave(e);
                 onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
             },
         };
@@ -132,9 +134,7 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
     ]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.cloneElement(resolveChildren, composeChildrenProps),
-        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState, onClose: closeWithDelay, className: (0, exports.cnTooltip)({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
-                size: size,
-            }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }),
+        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ arrow: arrow, offset: offset, background: "main", strategy: "absolute", arrowProps: { size: size }, anchorRef: anchorRef, modifiers: modifiers, as: as, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, radius: size === 'xs' ? 's' : 'l' }, (inverse && { background: 'main-inverse' }), (variant === 'dark' && { background: 'main-inverse' }), { className: (0, exports.cnTooltip)({ size: size, variant: variant, inverse: inverse }, [className]), disableEnforceFocus: true, disableReturnFocus: true }, other, { open: openState, onClose: closeWithDelay, ref: ref }),
             react_1.default.createElement("div", { className: (0, exports.cnTooltip)('Content', { size: size, variant: variant, inverse: inverse }) }, label))));
 });
 exports.Tooltip.displayName = 'Tooltip';

package/__inner__/cjs/components/Tooltip/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const TOOLTIP_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
+export declare const TOOLTIP_DEFAULT_TAG = "div";
 export declare const TOOLTIP_DEFAULT_TRIGGER = "hover";
 export declare const TOOLTIP_DEFAULT_SIZE = "s";
 export declare const TOOLTIP_DEFAULT_INVERSE = true;

package/__inner__/cjs/components/Tooltip/constants.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TOOLTIP_DEFAULT_DISABLED = exports.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN = exports.TOOLTIP_DEFAULT_ARROW = exports.TOOLTIP_DEFAULT_DELAY_LEAVE = exports.TOOLTIP_DEFAULT_DELAY_ENTER = exports.TOOLTIP_DEFAULT_OFFSET = exports.TOOLTIP_DEFAULT_INVERSE = exports.TOOLTIP_DEFAULT_SIZE = exports.TOOLTIP_DEFAULT_TRIGGER = exports.TOOLTIP_DEFAULT_TAG = void 0;
-var Paper_1 = require("../Paper");
-exports.TOOLTIP_DEFAULT_TAG = Paper_1.Paper;
+exports.TOOLTIP_DEFAULT_TAG = 'div';
 exports.TOOLTIP_DEFAULT_TRIGGER = 'hover';
 exports.TOOLTIP_DEFAULT_SIZE = 's';
 exports.TOOLTIP_DEFAULT_INVERSE = true;

package/__inner__/cjs/components/Tooltip/types.d.ts

@@ -48,7 +48,7 @@ export type TooltipBaseProps = {
     'data-testid'?: string;
     /** Дополнительные CSS-классы */
     className?: string;
-} & TooltipPropsDeprecated & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'>;
+} & TooltipPropsDeprecated & Omit<Partial<PopoverBaseProps>, 'onClose' | 'open'>;
 export type TooltipRef = ComponentRef<typeof TOOLTIP_DEFAULT_TAG>;
 export type TooltipProps<As extends ElementType = typeof TOOLTIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<TooltipBaseProps, As>;
 export {};

package/__inner__/cjs/hooks/useElementSize/index.d.ts

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

package/__inner__/cjs/hooks/useElementSize/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useElementSize"), exports);

package/__inner__/cjs/hooks/useElementSize/useElementSize.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function useElementSize<T extends HTMLElement = any>(options?: ResizeObserverOptions): {
+    ref: import("react").RefObject<T>;
+    width: number;
+    height: number;
+};

package/__inner__/cjs/hooks/useElementSize/useElementSize.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementSize = void 0;
+var tslib_1 = require("tslib");
+var useResizeObserver_1 = require("../useResizeObserver");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function useElementSize(options) {
+    var _a = tslib_1.__read((0, useResizeObserver_1.useResizeObserver)(options), 2), ref = _a[0], _b = _a[1], width = _b.width, height = _b.height;
+    return { ref: ref, width: width, height: height };
+}
+exports.useElementSize = useElementSize;

package/__inner__/cjs/hooks/useResizeObserver/index.d.ts

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

package/__inner__/cjs/hooks/useResizeObserver/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useResizeObserver"), exports);

package/__inner__/cjs/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;
+export declare function useResizeObserver<T extends HTMLElement = any>(options?: ResizeObserverOptions): readonly [import("react").RefObject<T>, ObserverRect];
+export {};

package/__inner__/cjs/hooks/useResizeObserver/useResizeObserver.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizeObserver = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var defaultState = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function useResizeObserver(options) {
+    var frameID = (0, react_1.useRef)(0);
+    var ref = (0, react_1.useRef)(null);
+    var _a = tslib_1.__read((0, react_1.useState)(defaultState), 2), rect = _a[0], setRect = _a[1];
+    var observer = (0, react_1.useMemo)(function () {
+        return typeof window !== 'undefined' && typeof ResizeObserver !== 'undefined'
+            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                new ResizeObserver(function (entries) {
+                    var entry = entries[0];
+                    if (entry) {
+                        cancelAnimationFrame(frameID.current);
+                        frameID.current = requestAnimationFrame(function () {
+                            if (ref.current) {
+                                setRect(entry.contentRect);
+                            }
+                        });
+                    }
+                })
+            : null;
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (ref.current) {
+            observer === null || observer === void 0 ? void 0 : observer.observe(ref.current, options);
+        }
+        return function () {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            if (frameID.current) {
+                cancelAnimationFrame(frameID.current);
+            }
+        };
+    }, [ref.current]);
+    return [ref, rect];
+}
+exports.useResizeObserver = useResizeObserver;

package/__inner__/cjs/locale/locale.js

@@ -14,6 +14,13 @@ exports.ruRU = {
             clearText: 'Очистить',
             loadingText: 'Загрузка…',
         },
+        AutocompleteNext: {
+            noOptionsText: 'Ничего не найдено',
+            closeText: 'Закрыть',
+            openText: 'Открыть',
+            clearText: 'Очистить',
+            loadingText: 'Загрузка…',
+        },
         Breadcrumbs: {
             'aria-label': 'Навигация',
         },
@@ -87,6 +94,13 @@ exports.kkKZ = {
             clearText: 'Тазалау',
             loadingText: 'Жүктеу…',
         },
+        AutocompleteNext: {
+            noOptionsText: 'Ештеңе табылған жоқ',
+            closeText: 'Жабу',
+            openText: 'Ашу',
+            clearText: 'Тазалау',
+            loadingText: 'Жүктеу…',
+        },
         Breadcrumbs: {
             'aria-label': 'Навигация',
         },
@@ -160,6 +174,13 @@ exports.enUS = {
             clearText: 'Clear',
             loadingText: 'Loading…',
         },
+        AutocompleteNext: {
+            noOptionsText: 'No options',
+            closeText: 'Close',
+            openText: 'Open',
+            clearText: 'Clear',
+            loadingText: 'Loading…',
+        },
         Breadcrumbs: {
             'aria-label': 'Navigation',
         },

package/__inner__/cjs/utils/isNotNil.d.ts

@@ -0,0 +1 @@
+export declare const isNotNil: <T>(p: T) => p is Exclude<T, null | undefined>;

package/__inner__/cjs/utils/isNotNil.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNotNil = void 0;
+var isNotNil = function (p) {
+    return p !== undefined && p !== null;
+};
+exports.isNotNil = isNotNil;

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

@@ -1,4 +1,7 @@
 import './Autocomplete.css';
 import type { AutocompleteComponent } from './types';
 export declare const cnAutocomplete: import("@bem-react/classname").ClassNameFormatter;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент AutocompleteNext
+ */
 export declare const Autocomplete: AutocompleteComponent;