@itcase/ui 1.9.72 → 1.9.75

package/dist/hooks/useMediaQueries/useMediaQueries.js

@@ -1,7 +1,8 @@
 import 'react';
 import 'react-responsive';
-export { l as useMediaQueries } from '../../primitives_es_gY0Wzlk_.js';
+export { n as useMediaQueries } from '../../primitives_es_CFZll4Gh.js';
 import 'react/jsx-runtime';
+import '@rc-component/tooltip';
 import 'clsx';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/hooks/useMediaQueries.js

@@ -1,5 +1,6 @@
-export { l as useMediaQueries } from '../primitives_es_gY0Wzlk_.js';
+export { n as useMediaQueries } from '../primitives_es_CFZll4Gh.js';
 import 'react/jsx-runtime';
+import '@rc-component/tooltip';
 import 'react';
 import 'clsx';
 import 'lodash/camelCase';

package/dist/hooks/useStyles/styleAttributes.js

@@ -1,5 +1,6 @@
-export { o as default } from '../../primitives_es_gY0Wzlk_.js';
+export { p as default } from '../../primitives_es_CFZll4Gh.js';
 import 'react/jsx-runtime';
+import '@rc-component/tooltip';
 import 'react';
 import 'clsx';
 import 'lodash/camelCase';

package/dist/hooks/useStyles/useStyles.js

@@ -2,8 +2,9 @@ import 'react';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
-export { u as useStyles } from '../../primitives_es_gY0Wzlk_.js';
+export { u as useStyles } from '../../primitives_es_CFZll4Gh.js';
 import 'react/jsx-runtime';
+import '@rc-component/tooltip';
 import 'clsx';
 import 'lodash/castArray';
 import 'uuid';

package/dist/hooks/useStyles.js

@@ -1,5 +1,6 @@
-export { u as useStyles } from '../primitives_es_gY0Wzlk_.js';
+export { u as useStyles } from '../primitives_es_CFZll4Gh.js';
 import 'react/jsx-runtime';
+import '@rc-component/tooltip';
 import 'react';
 import 'clsx';
 import 'lodash/camelCase';

package/dist/hooks.js

@@ -1,5 +1,6 @@
-export { n as getStyleAttributeKey } from './primitives_es_gY0Wzlk_.js';
+export { o as getStyleAttributeKey } from './primitives_es_CFZll4Gh.js';
 import 'react/jsx-runtime';
+import '@rc-component/tooltip';
 import 'react';
 import 'clsx';
 import 'lodash/camelCase';

package/dist/{primitives_cjs_D8cRUOUa.js → primitives_cjs_CqGNSrPn.js}

@@ -2,6 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var TooltipTrigger = require('@rc-component/tooltip');
 var React = require('react');
 var clsx = require('clsx');
 var camelCase = require('lodash/camelCase');
@@ -1870,15 +1871,20 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     }), [isTooltipVisible, openTooltip, closeTooltip]);
     const appearanceConfig = useAppearanceConfig(appearance, tooltipConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, centeringClass, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     const { styles: tooltipStyles } = useStyles(props);
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'tooltip', !isTooltipDisableState
             ? isTooltipVisible
                 ? 'tooltip_state_open'
                 : 'tooltip_state_close'
-            : null, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, centeringClass && `centering_${centeringClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, "data-testid": dataTestId, "data-tour": dataTour, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (jsxRuntime.jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxRuntime.jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (jsxRuntime.jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsxRuntime.jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
+            : null, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, "data-testid": dataTestId, "data-tour": dataTour, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (jsxRuntime.jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxRuntime.jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (jsxRuntime.jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsxRuntime.jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
 });
 
+const TooltipWrapper = (props) => {
+    const { destroyOnHidden = true, placement = 'right', tooltipContent, trigger = 'hover', openDelay = 0.5, closeDelay = 0.25, isOpen, children, ...tooltipProps } = props;
+    return (jsxRuntime.jsx(TooltipTrigger, { destroyOnHidden: destroyOnHidden, mouseEnterDelay: openDelay, mouseLeaveDelay: closeDelay, overlay: jsxRuntime.jsx(Tooltip, { initialIsVisible: true, ...tooltipProps, children: tooltipContent }), placement: placement, prefixCls: "tooltip-wrapper", trigger: trigger, visible: isOpen, children: children }));
+};
+
 const UrlAssetPrefixContext = React.createContext({
     assetPrefix: undefined,
     ignorePathsList: undefined,
@@ -2686,6 +2692,7 @@ exports.NotificationsProvider = NotificationsProvider;
 exports.Text = Text;
 exports.Title = Title;
 exports.Tooltip = Tooltip;
+exports.TooltipWrapper = TooltipWrapper;
 exports.UIProvider = UIProvider;
 exports.UrlAssetPrefixContext = UrlAssetPrefixContext;
 exports.UrlAssetPrefixProvider = UrlAssetPrefixProvider;

package/dist/{primitives_es_gY0Wzlk_.js → primitives_es_CFZll4Gh.js}

@@ -1,5 +1,6 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import TooltipTrigger from '@rc-component/tooltip';
 import React, { useMemo, createContext, useState, useCallback, useEffect, useContext, memo, useRef, useImperativeHandle } from 'react';
 import clsx from 'clsx';
 import camelCase from 'lodash/camelCase';
@@ -1868,15 +1869,20 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     }), [isTooltipVisible, openTooltip, closeTooltip]);
     const appearanceConfig = useAppearanceConfig(appearance, tooltipConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, centeringClass, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     const { styles: tooltipStyles } = useStyles(props);
     return (jsxs("div", { className: clsx(className, 'tooltip', !isTooltipDisableState
             ? isTooltipVisible
                 ? 'tooltip_state_open'
                 : 'tooltip_state_close'
-            : null, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, centeringClass && `centering_${centeringClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, "data-testid": dataTestId, "data-tour": dataTour, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
+            : null, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, "data-testid": dataTestId, "data-tour": dataTour, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
 });
 
+const TooltipWrapper = (props) => {
+    const { destroyOnHidden = true, placement = 'right', tooltipContent, trigger = 'hover', openDelay = 0.5, closeDelay = 0.25, isOpen, children, ...tooltipProps } = props;
+    return (jsx(TooltipTrigger, { destroyOnHidden: destroyOnHidden, mouseEnterDelay: openDelay, mouseLeaveDelay: closeDelay, overlay: jsx(Tooltip, { initialIsVisible: true, ...tooltipProps, children: tooltipContent }), placement: placement, prefixCls: "tooltip-wrapper", trigger: trigger, visible: isOpen, children: children }));
+};
+
 const UrlAssetPrefixContext = createContext({
     assetPrefix: undefined,
     ignorePathsList: undefined,
@@ -2673,4 +2679,4 @@ function DropdownItem(props) {
             `dropdown__item_justify-content_${justifyContentClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (jsx(Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
 }
 
-export { tooltipConfig as A, Badge as B, UrlAssetPrefixContext as C, Divider as D, UrlAssetPrefixProvider as E, iconAppearance as F, iconConfig as G, dividerAppearance as H, Icon as I, dividerConfig as J, dropdownItemAppearance as K, LinkWrapper as L, dropdownItemConfig as M, NotificationsProvider as N, Title as T, UIProvider as U, useDevicePropsGenerator as a, Text as b, urlWithAssetPrefix as c, useAppearanceConfig as d, useUserDeviceContext as e, Dropdown as f, DropdownItem as g, Link as h, Tooltip as i, useNotifications as j, useNotificationsAPI as k, useMediaQueries as l, mergeAppearanceKeys as m, getStyleAttributeKey as n, styleAttributes as o, textConfig as p, badgeAppearance as q, badgeConfig as r, setViewportProperty as s, textAppearance as t, useStyles as u, linkAppearance as v, linkConfig as w, titleAppearance as x, titleConfig as y, tooltipAppearance as z };
+export { tooltipAppearance as A, Badge as B, tooltipConfig as C, Divider as D, UrlAssetPrefixContext as E, UrlAssetPrefixProvider as F, iconAppearance as G, iconConfig as H, Icon as I, dividerAppearance as J, dividerConfig as K, LinkWrapper as L, dropdownItemAppearance as M, NotificationsProvider as N, dropdownItemConfig as O, Title as T, UIProvider as U, useDevicePropsGenerator as a, Text as b, urlWithAssetPrefix as c, useAppearanceConfig as d, useUserDeviceContext as e, Dropdown as f, DropdownItem as g, TooltipWrapper as h, Link as i, useNotifications as j, useNotificationsAPI as k, Tooltip as l, mergeAppearanceKeys as m, useMediaQueries as n, getStyleAttributeKey as o, styleAttributes as p, textConfig as q, badgeAppearance as r, setViewportProperty as s, textAppearance as t, useStyles as u, badgeConfig as v, linkAppearance as w, linkConfig as x, titleAppearance as y, titleConfig as z };

package/dist/types/components/Avatar/Avatar.interface.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizePxKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceKey, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizePXProps } from '@itcase/types-ui';
+import { BorderColorProps, CompositeAppearanceSizePxKey, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizePXProps } from '@itcase/types-ui';
 import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 import { BadgeProps } from '../Badge/Badge.interface';
 import { IconProps } from '../Icon/Icon.interface';
@@ -33,7 +33,7 @@ type AvatarAppearanceProps = {
 };
 type AvatarProps = AvatarAppearanceProps & StyleAttributes & {
     after?: string;
-    appearance?: CompositeAppearanceKey;
+    appearance?: CompositeAppearanceSizePxKey;
     before?: string;
     children?: ReactNode;
     className?: string;
@@ -47,12 +47,11 @@ type AvatarProps = AvatarAppearanceProps & StyleAttributes & {
     src?: string;
     style?: CSSProperties;
 };
-type AvatarAppearanceKey = AppearanceKeysDefault | AppearanceShapeKey | AppearanceSizePxKey | AppearanceStyleKey;
-type AvatarAppearance = {
-    [key in AvatarAppearanceKey]?: AvatarAppearanceProps;
-};
 type AvatarConfig = {
-    appearance: AvatarAppearance;
-    setAppearance: (appearanceConfig: AvatarAppearance) => void;
+    appearance: {
+        [key in CompositeAppearanceSizePxKey]?: AvatarAppearanceProps;
+    };
+    setAppearance: (appearanceConfig: AvatarConfig['appearance']) => void;
 };
+type AvatarAppearance = AvatarConfig['appearance'];
 export type { AvatarAppearance, AvatarConfig, AvatarProps };

package/dist/types/components/Badge/Badge.interface.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKey, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, SvgFillItemProps } from '@itcase/types-ui';
+import { BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKey, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, SvgFillItemProps } from '@itcase/types-ui';
 import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 import { IconProps } from '../Icon/Icon.interface';
 import { TextProps } from '../Text/Text.interface';
@@ -35,12 +35,11 @@ type BadgeProps = BadgeAppearanceProps & StyleAttributes & {
     type?: 'counter' | 'dot' | 'dot-icon-counter' | 'fill' | 'icon' | 'icon-counter';
     value?: number | string;
 };
-type BadgeAppearanceKey = AppearanceKeysDefault | AppearanceShapeKey | AppearanceSizeKey | AppearanceStyleKey;
-type BadgeAppearance = {
-    [key in BadgeAppearanceKey]?: BadgeAppearanceProps;
-};
 type BadgeConfig = {
-    appearance: BadgeAppearance;
+    appearance: {
+        [key in CompositeAppearanceKey]?: BadgeAppearanceProps;
+    };
     setAppearance: (appearanceConfig: BadgeAppearance) => void;
 };
-export type { BadgeAppearance, BadgeAppearanceKey, BadgeConfig, BadgeProps };
+type BadgeAppearance = BadgeConfig['appearance'];
+export type { BadgeAppearance, BadgeConfig, BadgeProps };

package/dist/types/components/Badge/index.d.ts

@@ -1,3 +1,3 @@
 export { Badge, badgeConfig } from './Badge';
 export { badgeAppearance } from './Badge.appearance';
-export type { BadgeAppearance, BadgeAppearanceKey, BadgeConfig, BadgeProps, } from './Badge.interface';
+export type { BadgeAppearance, BadgeConfig, BadgeProps, } from './Badge.interface';

package/dist/types/components/MenuItem/MenuItem.interface.d.ts

@@ -1,10 +1,11 @@
-import { CSSProperties, ElementType, ReactNode } from 'react';
-import { LinkProps } from 'react-scroll';
-import { AlignProps, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceKey, DirectionProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, ShapeStrengthProps, TextSizeProps, UnderlineProps } from '@itcase/types-ui';
-import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
-import { IconProps } from '../Icon/Icon.interface';
-import { TextProps } from '../Text/Text.interface';
-import { TooltipProps } from '../Tooltip/Tooltip.interface';
+import type { CSSProperties, ElementType, ReactNode } from 'react';
+import type { LinkProps } from 'react-scroll';
+import type { AlignProps, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceKey, DirectionProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, ShapeStrengthProps, TextSizeProps, UnderlineProps } from '@itcase/types-ui';
+import type { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
+import type { IconProps } from '../Icon/Icon.interface';
+import type { TextProps } from '../Text/Text.interface';
+import type { TooltipProps } from '../Tooltip/Tooltip.interface';
+import type { TooltipWrapperPlacement, TooltipWrapperProps } from '../Tooltip/TooltipWrapper.interface';
 type MenuItemAppearanceProps = {
     align?: AlignProps;
     alignDirection?: DirectionProps;
@@ -83,6 +84,8 @@ type MenuItemProps = MenuItemAppearanceProps & StyleAttributes & {
     style?: CSSProperties;
     target?: LinkProps['target'];
     tooltipAppearance?: TooltipProps['appearance'];
+    tooltipContent?: TooltipWrapperProps['tooltipContent'];
+    tooltipPlacement?: TooltipWrapperPlacement;
     underline?: UnderlineProps;
 };
 type MenuItemAppearanceKey = AppearanceKeysDefault | AppearanceShapeKey | AppearanceSizeKey | AppearanceStyleKey;

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

@@ -125,7 +125,7 @@ type SelectAppearanceProps<Option> = {
     size?: SizeProps;
     width?: WidthProps;
 };
-type AppearanceKeys = AppearanceShapeKey | AppearanceSizeKey | AppearanceStateKeysDefault | AppearanceStyleKey;
+type AppearanceKeys = AppearanceStateKeysDefault | AppearanceSizeKey | AppearanceStyleKey | AppearanceShapeKey;
 type SelectAppearance = {
     [key in AppearanceKeys]?: SelectAppearanceProps<SelectOption>;
 };

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

@@ -6,7 +6,7 @@ declare const Tooltip: React.ForwardRefExoticComponent<import("../../hooks/useSt
     alignDirection?: import("@itcase/types-ui").DirectionProps;
     alignment?: string;
     alignPosition?: import("@itcase/types-ui").AlignProps;
-    arrowPosition?: import("@itcase/types-ui").AlignProps;
+    arrowPosition?: import("@itcase/types-ui").ArrowPosition;
     borderColor?: import("@itcase/types-ui").BorderColorProps;
     borderType?: import("@itcase/types-ui").BorderTypeProps;
     borderWidth?: import("@itcase/types-ui").BorderWidthProps;
@@ -42,6 +42,5 @@ declare const Tooltip: React.ForwardRefExoticComponent<import("../../hooks/useSt
     style?: React.CSSProperties;
     text?: string;
     title?: string;
-    tooltipContent?: string;
 } & React.RefAttributes<any>>;
 export { Tooltip, tooltipConfig };

package/dist/types/components/Tooltip/Tooltip.interface.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { AlignProps, AppearanceShapeKey, AppearanceSizeKey, AppearanceStateKeysDefault, AppearanceStyleKey, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceStateDefault, DirectionProps, ElevationProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, WrapProps } from '@itcase/types-ui';
+import { AlignProps, ArrowPosition, AppearanceShapeKey, AppearanceSizeKey, AppearanceStateKeysDefault, AppearanceStyleKey, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceStateDefault, DirectionProps, ElevationProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, WrapProps } from '@itcase/types-ui';
 import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 import { TextProps } from '../Text/Text.interface';
 import { TitleProps } from '../Title/Title.interface';
@@ -8,7 +8,7 @@ type TooltipAppearanceProps = {
     alignDirection?: DirectionProps;
     alignment?: string;
     alignPosition?: AlignProps;
-    arrowPosition?: AlignProps;
+    arrowPosition?: ArrowPosition;
     borderColor?: BorderColorProps;
     borderType?: BorderTypeProps;
     borderWidth?: BorderWidthProps;
@@ -45,7 +45,6 @@ type TooltipProps = StyleAttributes & TooltipAppearanceProps & {
     style?: CSSProperties;
     text?: string;
     title?: string;
-    tooltipContent?: string;
 };
 type TooltipAppearanceKey = AppearanceShapeKey | AppearanceSizeKey | AppearanceStateKeysDefault | AppearanceStyleKey;
 type TooltipAppearance = {

package/dist/types/components/Tooltip/TooltipWrapper.d.ts

@@ -0,0 +1,3 @@
+import { TooltipWrapperProps } from './TooltipWrapper.interface';
+declare const TooltipWrapper: (props: TooltipWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export { TooltipWrapper };

package/dist/types/components/Tooltip/TooltipWrapper.interface.d.ts

@@ -0,0 +1,13 @@
+import type { TooltipProps as TooltipTriggerProps } from '@rc-component/tooltip/lib/Tooltip';
+import type { Placement as TooltipWrapperPlacement } from '@rc-component/trigger/es/interface';
+import type { TooltipProps } from './Tooltip.interface';
+type PropsFromTooltip = Omit<TooltipProps, keyof Pick<TooltipProps, 'align' | 'children' | 'closeTimeoutDelay' | 'initialIsVisible' | 'openTimeoutDelay' | 'zIndex'>>;
+type PropsFromTooltipTrigger = Pick<TooltipTriggerProps, 'children' | 'destroyOnHidden' | 'trigger'>;
+type TooltipWrapperProps = PropsFromTooltip & PropsFromTooltipTrigger & {
+    closeDelay?: number;
+    isOpen?: boolean;
+    openDelay?: number;
+    placement?: TooltipWrapperPlacement;
+    tooltipContent?: React.ReactNode;
+};
+export type { TooltipWrapperPlacement, TooltipWrapperProps };

package/dist/types/components/Tooltip/index.d.ts

@@ -1,3 +1,5 @@
 export { Tooltip, tooltipConfig } from './Tooltip';
 export { tooltipAppearance } from './Tooltip.appearance';
 export type { TooltipAppearance, TooltipConfig, TooltipProps, } from './Tooltip.interface';
+export { TooltipWrapper } from './TooltipWrapper';
+export type { TooltipWrapperPlacement, TooltipWrapperProps, } from './TooltipWrapper.interface';

package/dist/utils/mergeAppearanceKeys.js

@@ -1,5 +1,6 @@
-export { m as mergeAppearanceKeys } from '../primitives_es_gY0Wzlk_.js';
+export { m as mergeAppearanceKeys } from '../primitives_es_CFZll4Gh.js';
 import 'react/jsx-runtime';
+import '@rc-component/tooltip';
 import 'react';
 import 'clsx';
 import 'lodash/camelCase';

package/dist/utils/setViewportProperty.js

@@ -1,5 +1,6 @@
-export { s as setViewportProperty } from '../primitives_es_gY0Wzlk_.js';
+export { s as setViewportProperty } from '../primitives_es_CFZll4Gh.js';
 import 'react/jsx-runtime';
+import '@rc-component/tooltip';
 import 'react';
 import 'clsx';
 import 'lodash/camelCase';

package/dist/utils.js

@@ -1,5 +1,6 @@
-export { m as mergeAppearanceKeys, s as setViewportProperty } from './primitives_es_gY0Wzlk_.js';
+export { m as mergeAppearanceKeys, s as setViewportProperty } from './primitives_es_CFZll4Gh.js';
 import 'react/jsx-runtime';
+import '@rc-component/tooltip';
 import 'react';
 import 'clsx';
 import 'lodash/camelCase';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.9.72",
+  "version": "1.9.75",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -133,13 +133,14 @@
     "@itcase/tokens-am": "^1.1.45",
     "@itcase/tokens-baikal": "^1.1.41",
     "@itcase/tokens-palette": "^1.1.41",
+    "@rc-component/tooltip": "^1.4.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.35.2",
+    "framer-motion": "^12.37.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.23",
     "luxon": "^3.7.2",
-    "motion": "^12.35.2",
+    "motion": "^12.37.0",
     "rc-slider": "^11.1.9",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -148,7 +149,7 @@
     "react-dropzone": "^15.0.0",
     "react-indiana-drag-scroll": "^3.0.3-alpha",
     "react-inlinesvg": "^4.2.0",
-    "react-modal-sheet": "5.3.1",
+    "react-modal-sheet": "5.4.1",
     "react-modern-drawer": "^1.4.0",
     "react-otp-input": "^3.1.1",
     "react-paginate": "^8.3.0",
@@ -163,12 +164,12 @@
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
-    "@commitlint/cli": "^20.4.3",
-    "@commitlint/config-conventional": "^20.4.3",
+    "@commitlint/cli": "^20.5.0",
+    "@commitlint/config-conventional": "^20.5.0",
     "@itcase/config": "^1.6.52",
-    "@itcase/lint": "^1.1.101",
-    "@itcase/types-core": "^1.1.31",
-    "@itcase/types-ui": "^1.1.46",
+    "@itcase/lint": "^1.1.102",
+    "@itcase/types-core": "^1.1.49",
+    "@itcase/types-ui": "^1.1.53",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-commonjs": "^29.0.2",
@@ -193,15 +194,15 @@
     "conventional-changelog-conventionalcommits": "^9.3.0",
     "eslint": "9",
     "husky": "^9.1.7",
-    "lint-staged": "^16.3.3",
+    "lint-staged": "^16.4.0",
     "prettier": "^3.8.1",
     "rollup": "4.59.0",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-dts": "^6.3.0",
+    "rollup-plugin-dts": "^6.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^25.0.3",
-    "storybook": "^10.2.17",
+    "storybook": "^10.2.19",
     "stylelint": "^17.4.0",
     "typescript": "^5.9.3"
   }