@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha3

package/README.md

@@ -11,6 +11,46 @@
 
 # Release Notes
 
+## 3.45.2
+
+### Changes
+
+- **SearchInput**: Добавлен класс `iconClickable`
+
+## 3.45.0
+
+### Changes
+
+- **Input**: Добавлена стандартная пропса `inputMode`
+- **SearchInput**: Добавлена пропса `onSearchIconClick`
+
+## 3.44.1
+
+### Changes
+
+- **WithPopup**: Явный рендер попапа в `document.body`
+
+## 3.44.0
+
+### Changes
+
+- **WithPopup**:
+
+  1. Реализована возможность отрисовки стрелочки
+  2. Добавлены пропсы `arrow` и `arrowProps`
+  3. Добавлена пропса `isMinWidthSameAsTrigger`, которая выставляет минимальную ширину попапа равной ширине триггера
+  4. Добавлена пропса `popupData`, которая позволяет прокинуть data-атрибуты в попап
+  5. В `children` добавлена пропса `floatingContext`, возвращаемый хуком `useFloating`
+  6. Дефолтное значение пропсы `shouldStopPropagation` изменено с `true` на `eventType === 'click`
+
+- **WithTooltip**: `zIndex` тултипа как в `TextWithTooltip` (9999)
+
+## 3.43.0
+
+### Changes
+
+- **withScrollBar**: Переносит константы размеров скролла в CSS-переменные: `--webkit-scrollbar-width` и `--webkit-scrollbar-height`
+
 ## 3.42.0
 
 ### Changes

package/dist/components/WithPopup/WithPopup.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { Placement, Middleware, OffsetOptions, UseHoverProps } from '@floating-ui/react';
-import { ICommonProps, IRenderNode } from '../../types';
-import { IPopupEventType, IWithPopupChildrenProps, IWithPopupToggleEvent, IWithPopupTriggerProps } from './types';
+import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
+import { IPopupArrowProps, IPopupEventType, IWithPopupChildrenProps, IWithPopupToggleEvent, IWithPopupTriggerProps } from './types';
 import { IWithPopupStyles } from './WithPopup.styles';
 export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
     trigger: IRenderNode<IWithPopupTriggerProps>;
@@ -15,7 +15,9 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
     hoverDelay?: UseHoverProps['delay'];
     /** @default 6 */
     popupOffset?: OffsetOptions;
-    /** @default true */
+    arrowProps?: IPopupArrowProps;
+    popupData?: IDataAttributes;
+    /** @default true, if eventType === click */
     shouldStopPropagation?: boolean;
     /** @default false */
     shouldHideOnScroll?: boolean;
@@ -28,6 +30,11 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
     canBeFlipped?: boolean;
     /** @default false */
     isDisabled?: boolean;
+    /** @default false */
+    shouldShowArrow?: boolean;
+    /** Должна ли минимальная ширина попапа быть равна ширине триггера
+     * @default false */
+    isMinWidthSameAsTrigger?: boolean;
     onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
 }
 export declare const WithPopup: FC<IWithPopupProps>;

package/dist/components/WithPopup/WithPopup.styles.d.ts

@@ -1,3 +1,3 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"active" | "disabled" | "clickable" | "animationEnd" | "animationStart" | "trigger" | "popup" | "dropdown-initial" | "dropdown-open" | "dropdown-close" | "dropdown-unmounted", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"active" | "disabled" | "clickable" | "animationEnd" | "animationStart" | "arrow" | "trigger" | "popup" | "dropdown-initial" | "dropdown-open" | "dropdown-close" | "dropdown-unmounted", unknown>;
 export type IWithPopupStyles = ITweakStyles<typeof useStyles>;

package/dist/components/WithPopup/helpers.d.ts

@@ -0,0 +1,2 @@
+import { Middleware } from '@floating-ui/react';
+export declare const minWidthRelativeToTrigger: Middleware;

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

@@ -1,4 +1,5 @@
 import type { MouseEvent, KeyboardEvent } from 'react';
+import type { FloatingArrowProps, UseFloatingReturn } from '@floating-ui/react';
 import type { IDataAttributesProps, IDomElementInteractions } from '../../types';
 import type { POPUP_EVENT_TYPES } from './constants';
 export type IPopupEventType = (typeof POPUP_EVENT_TYPES)[number];
@@ -15,5 +16,7 @@ export interface IWithPopupTriggerProps {
     referenceProps?: IReferenceProps;
 }
 export interface IWithPopupChildrenProps {
+    floatingContext: UseFloatingReturn['context'];
     onClose: (event?: IWithPopupToggleEvent) => void;
 }
+export type IPopupArrowProps = Pick<FloatingArrowProps, 'width' | 'height' | 'tipRadius' | 'staticOffset' | 'd' | 'stroke' | 'strokeWidth'>;

package/dist/components/WithTooltip/WithTooltip.styles.d.ts

@@ -1,5 +1,6 @@
 import { ITooltipStyles } from '../Tooltip';
 import { IWithPopupStyles } from '../WithPopup';
+export declare const withPopupStyles: IWithPopupStyles;
 export interface IWithTooltipStyles {
     tweakWithPopup?: IWithPopupStyles;
     tweakTooltip?: ITooltipStyles;

package/dist/theme/common.d.ts

@@ -48,9 +48,11 @@ export declare const helpers: {
         boxSizing: string;
         overflow: string;
         '@supports selector(::-webkit-scrollbar)': {
+            '--webkit-scrollbar-width': string;
+            '--webkit-scrollbar-height': string;
             '&::-webkit-scrollbar': {
-                height: number;
-                width: number;
+                width: string;
+                height: string;
                 '&-thumb': {
                     width: number;
                     minHeight: number;

package/dist/true-react-common-ui-kit.js

@@ -4,7 +4,7 @@ import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNo
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
 import hexToRgba from "hex-to-rgba";
-import { useFloating, offset as offset$2, flip as flip$2, autoUpdate, useHover, safePolygon, useFocus, useClick, useDismiss, useInteractions, useTransitionStatus, FloatingPortal } from "@floating-ui/react";
+import { size, useFloating, offset as offset$2, flip as flip$2, arrow as arrow$2, autoUpdate, useHover, safePolygon, useFocus, useClick, useDismiss, useInteractions, useTransitionStatus, FloatingPortal, FloatingArrow } from "@floating-ui/react";
 import InputMask from "react-input-mask";
 import { getYear, getMonth, format, parse, isSameDay, isValid, isAfter, isBefore, startOfMonth, endOfMonth, sub, startOfYear, endOfYear } from "date-fns";
 import { Portal } from "react-overlays";
@@ -1057,9 +1057,11 @@ var helpers = {
     overflow: "auto",
     // Chromium
     "@supports selector(::-webkit-scrollbar)": {
+      "--webkit-scrollbar-width": "10px",
+      "--webkit-scrollbar-height": "10px",
       "&::-webkit-scrollbar": {
-        height: 10,
-        width: 10,
+        width: "var(--webkit-scrollbar-width)",
+        height: "var(--webkit-scrollbar-height)",
         "&-thumb": {
           width: 6,
           minHeight: 30,
@@ -1396,9 +1398,9 @@ function mapCacheHas(key) {
   return getMapData(this, key).has(key);
 }
 function mapCacheSet(key, value) {
-  var data = getMapData(this, key), size = data.size;
+  var data = getMapData(this, key), size2 = data.size;
   data.set(key, value);
-  this.size += data.size == size ? 0 : 1;
+  this.size += data.size == size2 ? 0 : 1;
   return this;
 }
 function MapCache(entries) {
@@ -7824,6 +7826,14 @@ var renderIcon = function(icon) {
   }) : icon;
 };
 var DEFAULT_OFFSET = 6;
+var minWidthRelativeToTrigger = size({
+  apply: function apply2(param) {
+    var rects = param.rects, elements = param.elements;
+    Object.assign(elements.floating.style, {
+      minWidth: "".concat(rects.reference.width, "px")
+    });
+  }
+});
 var useStyles$V = createThemedStyles("WithPopup", {
   trigger: {
     width: "fit-content"
@@ -7839,6 +7849,7 @@ var useStyles$V = createThemedStyles("WithPopup", {
     zIndex: 5,
     outline: "none"
   },
+  arrow: {},
   animationEnd: {},
   animationStart: {},
   "dropdown-initial": {
@@ -7980,11 +7991,12 @@ function _unsupported_iterable_to_array$m(o, minLen) {
     return _array_like_to_array$m(o, minLen);
 }
 var WithPopup = function(param) {
-  var trigger = param.trigger, children = param.children, _param_middlewares = param.middlewares, middlewares = _param_middlewares === void 0 ? [] : _param_middlewares, _param_eventType = param.eventType, eventType = _param_eventType === void 0 ? "click" : _param_eventType, _param_placement = param.placement, placement = _param_placement === void 0 ? eventType === "click" ? "bottom-end" : "top" : _param_placement, _param_hoverDelay = param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 0 : _param_hoverDelay, _param_popupOffset = param.popupOffset, popupOffset = _param_popupOffset === void 0 ? DEFAULT_OFFSET : _param_popupOffset, _param_shouldStopPropagation = param.shouldStopPropagation, shouldStopPropagation = _param_shouldStopPropagation === void 0 ? true : _param_shouldStopPropagation, _param_shouldHideOnScroll = param.shouldHideOnScroll, shouldHideOnScroll = _param_shouldHideOnScroll === void 0 ? false : _param_shouldHideOnScroll, _param_shouldRenderInBody = param.shouldRenderInBody, shouldRenderInBody = _param_shouldRenderInBody === void 0 ? true : _param_shouldRenderInBody, _param_canBeFlipped = param.canBeFlipped, canBeFlipped = _param_canBeFlipped === void 0 ? true : _param_canBeFlipped, _param_isTriggerWrapped = param.isTriggerWrapped, isTriggerWrapped = _param_isTriggerWrapped === void 0 ? eventType === "hover" : _param_isTriggerWrapped, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, tweakStyles = param.tweakStyles, data = param.data, testId = param.testId, onToggle = param.onToggle;
+  var trigger = param.trigger, children = param.children, _param_middlewares = param.middlewares, middlewares = _param_middlewares === void 0 ? [] : _param_middlewares, _param_eventType = param.eventType, eventType = _param_eventType === void 0 ? "click" : _param_eventType, _param_placement = param.placement, placement = _param_placement === void 0 ? eventType === "click" ? "bottom-end" : "top" : _param_placement, _param_hoverDelay = param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 0 : _param_hoverDelay, _param_popupOffset = param.popupOffset, popupOffset = _param_popupOffset === void 0 ? DEFAULT_OFFSET : _param_popupOffset, arrowProps = param.arrowProps, popupData = param.popupData, _param_shouldStopPropagation = param.shouldStopPropagation, shouldStopPropagation = _param_shouldStopPropagation === void 0 ? eventType === "click" : _param_shouldStopPropagation, _param_shouldHideOnScroll = param.shouldHideOnScroll, shouldHideOnScroll = _param_shouldHideOnScroll === void 0 ? false : _param_shouldHideOnScroll, _param_shouldRenderInBody = param.shouldRenderInBody, shouldRenderInBody = _param_shouldRenderInBody === void 0 ? true : _param_shouldRenderInBody, _param_canBeFlipped = param.canBeFlipped, canBeFlipped = _param_canBeFlipped === void 0 ? true : _param_canBeFlipped, _param_isTriggerWrapped = param.isTriggerWrapped, isTriggerWrapped = _param_isTriggerWrapped === void 0 ? eventType === "hover" : _param_isTriggerWrapped, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_shouldShowArrow = param.shouldShowArrow, shouldShowArrow = _param_shouldShowArrow === void 0 ? false : _param_shouldShowArrow, _param_isMinWidthSameAsTrigger = param.isMinWidthSameAsTrigger, isMinWidthSameAsTrigger = _param_isMinWidthSameAsTrigger === void 0 ? false : _param_isMinWidthSameAsTrigger, tweakStyles = param.tweakStyles, data = param.data, testId = param.testId, onToggle = param.onToggle;
   var classes = useStyles$V({
     theme: tweakStyles
   });
   var _useState = _sliced_to_array$m(useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
+  var arrowRef = useRef(null);
   var handleToggle = function(isActive, event) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
     if (!isDisabled) {
@@ -8001,8 +8013,13 @@ var WithPopup = function(param) {
       offset$2(popupOffset),
       canBeFlipped && flip$2({
         fallbackAxisSideDirection: "start"
+      }),
+      isMinWidthSameAsTrigger && minWidthRelativeToTrigger
+    ].concat(_to_consumable_array$7(middlewares), [
+      shouldShowArrow && arrow$2({
+        element: arrowRef
       })
-    ].concat(_to_consumable_array$7(middlewares)),
+    ]),
     whileElementsMounted: autoUpdate,
     placement,
     onOpenChange: handleToggle
@@ -8056,21 +8073,29 @@ var WithPopup = function(param) {
     children: [
       isTriggerWrapped ? /* @__PURE__ */ jsx("div", _object_spread_props$T(_object_spread$11({
         className: clsx(classes.trigger, (_obj2 = {}, _define_property$13(_obj2, classes.clickable, eventType === "click"), _define_property$13(_obj2, classes.disabled, isDisabled), _define_property$13(_obj2, classes.active, isOpen), _obj2))
-      }, referenceProps, addDataTestId(testId), addDataAttributes$1(data)), {
+      }, referenceProps, addDataAttributes$1(data, testId)), {
         children: triggerElement
       })) : triggerElement,
       isMounted && /* @__PURE__ */ jsx(FloatingPortal, {
-        root: !shouldRenderInBody ? refs.reference.current : void 0,
+        root: shouldRenderInBody ? document.body : refs.reference.current,
         children: /* @__PURE__ */ jsx("div", _object_spread_props$T(_object_spread$11({
+          ref: refs.setFloating,
           style: floatingStyles,
-          className: classes.popup,
-          ref: refs.setFloating
-        }, getFloatingProps()), {
-          children: /* @__PURE__ */ jsx("div", {
+          className: classes.popup
+        }, getFloatingProps(), addDataAttributes$1(popupData)), {
+          children: /* @__PURE__ */ jsxs("div", {
             className: classes["dropdown-".concat(status)],
-            children: applyAction(children, {
-              onClose: handleClose
-            })
+            children: [
+              shouldShowArrow && /* @__PURE__ */ jsx(FloatingArrow, _object_spread_props$T(_object_spread$11({}, arrowProps), {
+                ref: arrowRef,
+                context,
+                className: classes.arrow
+              })),
+              applyAction(children, {
+                floatingContext: context,
+                onClose: handleClose
+              })
+            ]
           })
         }))
       })
@@ -8226,7 +8251,7 @@ var useStyles$T = createThemedStyles("List", {
     paddingLeft: 4
   }
 });
-var withPopupStyles = {
+var withPopupStyles$1 = {
   trigger: {
     width: "100%"
   }
@@ -8311,7 +8336,7 @@ var List = function(param) {
       return /* @__PURE__ */ jsx(Fragment$1, {
         children: isArrayNotEmpty(item.nestedItems) ? /* @__PURE__ */ jsx(WithPopup, {
           eventType: "hover",
-          tweakStyles: withPopupStyles,
+          tweakStyles: withPopupStyles$1,
           placement: "right-start",
           popupOffset: 0,
           shouldRenderInBody: false,
@@ -9082,8 +9107,8 @@ var dotsPreloaderStyles = {
     }
   }
 };
-var getPreloaderStyles = function(size) {
-  return size === "s" || size === "m" ? dotsPreloaderStyles : void 0;
+var getPreloaderStyles = function(size2) {
+  return size2 === "s" || size2 === "m" ? dotsPreloaderStyles : void 0;
 };
 function _define_property$Y(obj, key, value) {
   if (key in obj) {
@@ -9170,7 +9195,7 @@ function _object_without_properties_loose$j(source, excluded) {
   return target;
 }
 var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, children = _param.children, _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isFullWidth = _param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, _param_isInline = _param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_shouldSkipTabNavigation = _param.shouldSkipTabNavigation, shouldSkipTabNavigation = _param_shouldSkipTabNavigation === void 0 ? false : _param_shouldSkipTabNavigation, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, icon = _param.icon, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, interactions = _object_without_properties$j(_param, [
+  var _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, children = _param.children, _param_size = _param.size, size2 = _param_size === void 0 ? "l" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isFullWidth = _param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, _param_isInline = _param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_shouldSkipTabNavigation = _param.shouldSkipTabNavigation, shouldSkipTabNavigation = _param_shouldSkipTabNavigation === void 0 ? false : _param_shouldSkipTabNavigation, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, icon = _param.icon, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, interactions = _object_without_properties$j(_param, [
     "type",
     "children",
     "size",
@@ -9192,7 +9217,7 @@ var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
     theme: tweakStyles
   });
   var tweakPreloaderStyles = useTweakStyles({
-    innerStyles: getPreloaderStyles(size),
+    innerStyles: getPreloaderStyles(size2),
     tweakStyles,
     className: "tweakPreloader",
     currentComponentName: "Button"
@@ -9204,7 +9229,7 @@ var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
   return /* @__PURE__ */ jsxs("button", _object_spread_props$N(_object_spread$W({
     ref,
     type,
-    className: clsx(classes.root, classes[size], classes[view], (_obj2 = {}, _define_property$Y(_obj2, classes.disabled, isDisabled), _define_property$Y(_obj2, classes.fullWidth, isFullWidth), _define_property$Y(_obj2, classes.inline, isInline), _define_property$Y(_obj2, classes.active, isActive), _define_property$Y(_obj2, classes.loading, isLoading), _define_property$Y(_obj2, classes.onlyIcon, hasIcon && !hasChildren), _obj2)),
+    className: clsx(classes.root, classes[size2], classes[view], (_obj2 = {}, _define_property$Y(_obj2, classes.disabled, isDisabled), _define_property$Y(_obj2, classes.fullWidth, isFullWidth), _define_property$Y(_obj2, classes.inline, isInline), _define_property$Y(_obj2, classes.active, isActive), _define_property$Y(_obj2, classes.loading, isLoading), _define_property$Y(_obj2, classes.onlyIcon, hasIcon && !hasChildren), _obj2)),
     tabIndex: shouldSkipTabNavigation ? -1 : void 0,
     disabled: hasNoAction
   }, interactions, addDataTestId(testId), addDataAttributes(data)), {
@@ -13498,7 +13523,7 @@ function _object_without_properties_loose$b(source, excluded) {
   return target;
 }
 var IconButton = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var icon = _param.icon, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "cancel-light" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$b(_param, [
+  var icon = _param.icon, _param_size = _param.size, size2 = _param_size === void 0 ? "m" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "cancel-light" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$b(_param, [
     "icon",
     "size",
     "view",
@@ -13518,7 +13543,7 @@ var IconButton = /* @__PURE__ */ forwardRef(function(_param, ref) {
   var _obj2;
   return /* @__PURE__ */ jsx("button", _object_spread_props$z(_object_spread$E({
     ref,
-    className: clsx(classes.root, classes[view], classes[size], (_obj2 = {}, _define_property$G(_obj2, classes.disabled, isDisabled), _define_property$G(_obj2, classes.active, isActive), _define_property$G(_obj2, classes.loading, isLoading), _obj2)),
+    className: clsx(classes.root, classes[view], classes[size2], (_obj2 = {}, _define_property$G(_obj2, classes.disabled, isDisabled), _define_property$G(_obj2, classes.active, isActive), _define_property$G(_obj2, classes.loading, isLoading), _obj2)),
     type,
     disabled: isDisabled,
     onClick: hasNoAction ? void 0 : onClick
@@ -14076,7 +14101,7 @@ var FileItem = function(param) {
     event.stopPropagation();
     onRemove === null || onRemove === void 0 ? void 0 : onRemove(event);
   };
-  var name = fileInfo.name, size = fileInfo.size;
+  var name = fileInfo.name, size2 = fileInfo.size;
   var hasRemoveButton = isFunction$1(onRemove);
   return /* @__PURE__ */ jsxs("div", {
     className: classes.root,
@@ -14105,9 +14130,9 @@ var FileItem = function(param) {
                 className: classes.metadata,
                 children: [
                   metadata,
-                  shouldShowSize && isNotEmpty(size) && /* @__PURE__ */ jsx("div", {
+                  shouldShowSize && isNotEmpty(size2) && /* @__PURE__ */ jsx("div", {
                     className: classes.fileSize,
-                    children: filesize(size)
+                    children: filesize(size2)
                   })
                 ]
               })
@@ -27477,7 +27502,7 @@ function _unsupported_iterable_to_array$6(o, minLen) {
     return _array_like_to_array$6(o, minLen);
 }
 var Modal = function(_param) {
-  var data = _param.data, tweakStyles = _param.tweakStyles, title = _param.title, _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, _param_isFooterSticky = _param.isFooterSticky, isFooterSticky = _param_isFooterSticky === void 0 ? false : _param_isFooterSticky, footer = _param.footer, buttons = _param.buttons, _param_buttonsAlign = _param.buttonsAlign, buttonsAlign = _param_buttonsAlign === void 0 ? "right" : _param_buttonsAlign, _param_hasCloseButton = _param.hasCloseButton, hasCloseButton = _param_hasCloseButton === void 0 ? true : _param_hasCloseButton, _param_hasOverlay = _param.hasOverlay, hasOverlay = _param_hasOverlay === void 0 ? true : _param_hasOverlay, _param_isOpen = _param.isOpen, isOpen = _param_isOpen === void 0 ? false : _param_isOpen, _param_position = _param.position, position = _param_position === void 0 ? "center" : _param_position, children = _param.children, zIndex = _param.zIndex, testId = _param.testId, _param_shouldCloseOnOverlayClick = _param.shouldCloseOnOverlayClick, shouldCloseOnOverlayClick = _param_shouldCloseOnOverlayClick === void 0 ? true : _param_shouldCloseOnOverlayClick, _param_shouldCloseOnEsc = _param.shouldCloseOnEsc, shouldCloseOnEsc = _param_shouldCloseOnEsc === void 0 ? true : _param_shouldCloseOnEsc, _param_shouldBlockScroll = _param.shouldBlockScroll, shouldBlockScroll = _param_shouldBlockScroll === void 0 ? true : _param_shouldBlockScroll, _param_timeout = _param.timeout, timeout = _param_timeout === void 0 ? 150 : _param_timeout, _param_unmountOnExit = _param.unmountOnExit, unmountOnExit = _param_unmountOnExit === void 0 ? true : _param_unmountOnExit, onClose = _param.onClose, restProps = _object_without_properties$6(_param, [
+  var data = _param.data, tweakStyles = _param.tweakStyles, title = _param.title, _param_size = _param.size, size2 = _param_size === void 0 ? "l" : _param_size, _param_isFooterSticky = _param.isFooterSticky, isFooterSticky = _param_isFooterSticky === void 0 ? false : _param_isFooterSticky, footer = _param.footer, buttons = _param.buttons, _param_buttonsAlign = _param.buttonsAlign, buttonsAlign = _param_buttonsAlign === void 0 ? "right" : _param_buttonsAlign, _param_hasCloseButton = _param.hasCloseButton, hasCloseButton = _param_hasCloseButton === void 0 ? true : _param_hasCloseButton, _param_hasOverlay = _param.hasOverlay, hasOverlay = _param_hasOverlay === void 0 ? true : _param_hasOverlay, _param_isOpen = _param.isOpen, isOpen = _param_isOpen === void 0 ? false : _param_isOpen, _param_position = _param.position, position = _param_position === void 0 ? "center" : _param_position, children = _param.children, zIndex = _param.zIndex, testId = _param.testId, _param_shouldCloseOnOverlayClick = _param.shouldCloseOnOverlayClick, shouldCloseOnOverlayClick = _param_shouldCloseOnOverlayClick === void 0 ? true : _param_shouldCloseOnOverlayClick, _param_shouldCloseOnEsc = _param.shouldCloseOnEsc, shouldCloseOnEsc = _param_shouldCloseOnEsc === void 0 ? true : _param_shouldCloseOnEsc, _param_shouldBlockScroll = _param.shouldBlockScroll, shouldBlockScroll = _param_shouldBlockScroll === void 0 ? true : _param_shouldBlockScroll, _param_timeout = _param.timeout, timeout = _param_timeout === void 0 ? 150 : _param_timeout, _param_unmountOnExit = _param.unmountOnExit, unmountOnExit = _param_unmountOnExit === void 0 ? true : _param_unmountOnExit, onClose = _param.onClose, restProps = _object_without_properties$6(_param, [
     "data",
     "tweakStyles",
     "title",
@@ -27569,7 +27594,7 @@ var Modal = function(_param) {
         enabled: shouldBlockScroll,
         forwardProps: true,
         children: /* @__PURE__ */ jsx("div", _object_spread_props$h(_object_spread$i({
-          className: clsx(classes.root, classes[size], (_obj2 = {}, _define_property$j(_obj2, classes.overlay, position !== "static" && hasOverlay), _define_property$j(_obj2, classes.sideBar, position === "left" || position === "right"), _define_property$j(_obj2, classes.fixedPosition, position !== "static"), _obj2)),
+          className: clsx(classes.root, classes[size2], (_obj2 = {}, _define_property$j(_obj2, classes.overlay, position !== "static" && hasOverlay), _define_property$j(_obj2, classes.sideBar, position === "left" || position === "right"), _define_property$j(_obj2, classes.fixedPosition, position !== "static"), _obj2)),
           style: {
             zIndex
           }
@@ -28237,7 +28262,7 @@ function _object_spread_props$e(target, source) {
   return target;
 }
 var Notification = function(param) {
-  var children = param.children, type = param.type, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? true : _param_isFullWidth, text = param.text, title = param.title, testId = param.testId, _param_size = param.size, size = _param_size === void 0 ? "s" : _param_size, data = param.data, icon = param.icon, tweakStyles = param.tweakStyles;
+  var children = param.children, type = param.type, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? true : _param_isFullWidth, text = param.text, title = param.title, testId = param.testId, _param_size = param.size, size2 = _param_size === void 0 ? "s" : _param_size, data = param.data, icon = param.icon, tweakStyles = param.tweakStyles;
   var classes = useStyles$b({
     theme: tweakStyles
   });
@@ -28247,7 +28272,7 @@ var Notification = function(param) {
   var hasIcon = isReactNodeNotEmpty(icon) || isDefaultType;
   var _obj2;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$e(_object_spread$f({
-    className: clsx(classes.root, classes[size], classes[type], (_obj2 = {}, _define_property$g(_obj2, classes.inline, !isFullWidth), _define_property$g(_obj2, classes.withTitle, hasTitle), _define_property$g(_obj2, classes.withText, hasText), _obj2))
+    className: clsx(classes.root, classes[size2], classes[type], (_obj2 = {}, _define_property$g(_obj2, classes.inline, !isFullWidth), _define_property$g(_obj2, classes.withTitle, hasTitle), _define_property$g(_obj2, classes.withText, hasText), _obj2))
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
       hasIcon && /* @__PURE__ */ jsx("div", {
@@ -29360,7 +29385,7 @@ function _unsupported_iterable_to_array$1(o, minLen) {
     return _array_like_to_array$1(o, minLen);
 }
 function Selector(param) {
-  var options = param.options, value = param.value, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_hasSameOptionsWidth = param.hasSameOptionsWidth, hasSameOptionsWidth = _param_hasSameOptionsWidth === void 0 ? true : _param_hasSameOptionsWidth, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_size = param.size, size = _param_size === void 0 ? "l" : _param_size, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onChange = param.onChange;
+  var options = param.options, value = param.value, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_hasSameOptionsWidth = param.hasSameOptionsWidth, hasSameOptionsWidth = _param_hasSameOptionsWidth === void 0 ? true : _param_hasSameOptionsWidth, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_size = param.size, size2 = _param_size === void 0 ? "l" : _param_size, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onChange = param.onChange;
   var classes = useStyles$7({
     theme: tweakStyles
   });
@@ -29380,7 +29405,7 @@ function Selector(param) {
     setElementsData(_to_consumable_array(listEl.querySelectorAll(".".concat(classes.optionWrapper))));
   }, [
     options,
-    size
+    size2
   ]);
   var activeElementData = isNotEmpty(value) ? elementsData[optionsValues.indexOf(value)] : void 0;
   var _obj2;
@@ -29404,7 +29429,7 @@ function Selector(param) {
         }, addDataTestId(testId)), {
           children: /* @__PURE__ */ jsxs("button", _object_spread_props$b(_object_spread$b({
             type: "button",
-            className: clsx(classes.option, classes[size], (_obj3 = {}, _define_property$b(_obj3, classes.active, isActiveOption), _define_property$b(_obj3, classes.disabled, isDisabledOption), _obj3)),
+            className: clsx(classes.option, classes[size2], (_obj3 = {}, _define_property$b(_obj3, classes.active, isActiveOption), _define_property$b(_obj3, classes.disabled, isDisabledOption), _obj3)),
             disabled: isDisabledOption,
             onClick: !isDisabledOption ? function() {
               return onChange(option.value);
@@ -30078,12 +30103,12 @@ function _object_spread_props$8(target, source) {
   return target;
 }
 var Status = function(param) {
-  var children = param.children, color = param.color, _param_size = param.size, size = _param_size === void 0 ? "s" : _param_size, icon = param.icon, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "right" : _param_iconPosition, badge = param.badge, tweakStyles = param.tweakStyles, testId = param.testId, data = param.data;
+  var children = param.children, color = param.color, _param_size = param.size, size2 = _param_size === void 0 ? "s" : _param_size, icon = param.icon, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "right" : _param_iconPosition, badge = param.badge, tweakStyles = param.tweakStyles, testId = param.testId, data = param.data;
   var classes = useStyles$6({
     theme: tweakStyles
   });
   return /* @__PURE__ */ jsxs("span", _object_spread_props$8(_object_spread$8({
-    className: clsx(classes.root, classes[size], classes[color])
+    className: clsx(classes.root, classes[size2], classes[color])
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
       isReactNodeNotEmpty(children) && /* @__PURE__ */ jsx("span", {
@@ -30798,7 +30823,7 @@ function _object_without_properties_loose$2(source, excluded) {
   return target;
 }
 var TextButton = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var children = _param.children, icon = _param.icon, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isBold = _param.isBold, isBold = _param_isBold === void 0 ? false : _param_isBold, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_hasCircleUnderIcon = _param.hasCircleUnderIcon, hasCircleUnderIcon = _param_hasCircleUnderIcon === void 0 ? false : _param_hasCircleUnderIcon, _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$2(_param, [
+  var children = _param.children, icon = _param.icon, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isBold = _param.isBold, isBold = _param_isBold === void 0 ? false : _param_isBold, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_hasCircleUnderIcon = _param.hasCircleUnderIcon, hasCircleUnderIcon = _param_hasCircleUnderIcon === void 0 ? false : _param_hasCircleUnderIcon, _param_size = _param.size, size2 = _param_size === void 0 ? "l" : _param_size, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$2(_param, [
     "children",
     "icon",
     "view",
@@ -30830,7 +30855,7 @@ var TextButton = /* @__PURE__ */ forwardRef(function(_param, ref) {
   return /* @__PURE__ */ jsxs("button", _object_spread_props$4(_object_spread$4({
     ref,
     type,
-    className: clsx(classes.root, classes[size], classes[view], (_obj2 = {}, _define_property$4(_obj2, classes.bold, isBold), _define_property$4(_obj2, classes.loading, isLoading), _define_property$4(_obj2, classes.active, isActive), _define_property$4(_obj2, classes.disabled, isDisabled), _obj2)),
+    className: clsx(classes.root, classes[size2], classes[view], (_obj2 = {}, _define_property$4(_obj2, classes.bold, isBold), _define_property$4(_obj2, classes.loading, isLoading), _define_property$4(_obj2, classes.active, isActive), _define_property$4(_obj2, classes.disabled, isDisabled), _obj2)),
     disabled: hasNoAction,
     onClick: !hasNoAction ? onClick : void 0
   }, restProps, addDataTestId(testId), addDataAttributes(data)), {
@@ -31318,6 +31343,11 @@ var NewMoreMenu = function(_param) {
     }
   }));
 };
+var withPopupStyles = {
+  popup: {
+    zIndex: 9999
+  }
+};
 function _define_property(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -31403,7 +31433,7 @@ function _object_without_properties_loose(source, excluded) {
   return target;
 }
 var WithTooltip = function(_param) {
-  var children = _param.children, _param_eventType = _param.eventType, eventType = _param_eventType === void 0 ? "hover" : _param_eventType, _param_placement = _param.placement, placement = _param_placement === void 0 ? "top" : _param_placement, tooltipText = _param.tooltipText, _param_tooltipView = _param.tooltipView, tooltipView = _param_tooltipView === void 0 ? "tooltip" : _param_tooltipView, _param_tooltipType = _param.tooltipType, tooltipType = _param_tooltipType === void 0 ? "info" : _param_tooltipType, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, tweakStyles = _param.tweakStyles, restProps = _object_without_properties(_param, [
+  var children = _param.children, _param_eventType = _param.eventType, eventType = _param_eventType === void 0 ? "hover" : _param_eventType, _param_placement = _param.placement, placement = _param_placement === void 0 ? "top" : _param_placement, tooltipText = _param.tooltipText, _param_tooltipView = _param.tooltipView, tooltipView = _param_tooltipView === void 0 ? "tooltip" : _param_tooltipView, _param_tooltipType = _param.tooltipType, tooltipType = _param_tooltipType === void 0 ? "info" : _param_tooltipType, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, popupData = _param.popupData, tweakStyles = _param.tweakStyles, restProps = _object_without_properties(_param, [
     "children",
     "eventType",
     "placement",
@@ -31411,22 +31441,29 @@ var WithTooltip = function(_param) {
     "tooltipView",
     "tooltipType",
     "isDisabled",
+    "popupData",
     "tweakStyles"
   ]);
   var tweakWithPopupStyles = useTweakStyles({
+    innerStyles: withPopupStyles,
     tweakStyles,
-    className: "tweakWithPopup"
+    className: "tweakWithPopup",
+    currentComponentName: "WithTooltip"
   });
   var tweakTooltipStyles = useTweakStyles({
     tweakStyles,
-    className: "tweakTooltip"
+    className: "tweakTooltip",
+    currentComponentName: "WithTooltip"
   });
   return /* @__PURE__ */ jsx(WithPopup, _object_spread_props(_object_spread({
     trigger: children,
     placement,
     eventType,
-    isTriggerWrapped: true,
+    popupData: _object_spread_props(_object_spread({}, popupData), {
+      tooltipView
+    }),
     isDisabled: isDisabled || !isReactNodeNotEmpty(tooltipText),
+    isTriggerWrapped: true,
     tweakStyles: tweakWithPopupStyles
   }, restProps), {
     children: /* @__PURE__ */ jsx(Tooltip, {