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

package/dist/true-react-common-ui-kit.umd.cjs

@@ -1045,9 +1045,11 @@
       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,
@@ -7812,6 +7814,14 @@
     }) : icon;
   };
   var DEFAULT_OFFSET = 6;
+  var minWidthRelativeToTrigger = react.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"
@@ -7827,6 +7837,7 @@
       zIndex: 5,
       outline: "none"
     },
+    arrow: {},
     animationEnd: {},
     animationStart: {},
     "dropdown-initial": {
@@ -7968,11 +7979,12 @@
       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(React.useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
+    var arrowRef = React.useRef(null);
     var handleToggle = function(isActive, event) {
       event === null || event === void 0 ? void 0 : event.stopPropagation();
       if (!isDisabled) {
@@ -7989,8 +8001,13 @@
         react.offset(popupOffset),
         canBeFlipped && react.flip({
           fallbackAxisSideDirection: "start"
+        }),
+        isMinWidthSameAsTrigger && minWidthRelativeToTrigger
+      ].concat(_to_consumable_array$7(middlewares), [
+        shouldShowArrow && react.arrow({
+          element: arrowRef
         })
-      ].concat(_to_consumable_array$7(middlewares)),
+      ]),
       whileElementsMounted: react.autoUpdate,
       placement,
       onOpenChange: handleToggle
@@ -8044,21 +8061,29 @@
       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, trueReactPlatformHelpers.addDataTestId(testId), trueReactPlatformHelpers.addDataAttributes(data)), {
+        }, referenceProps, trueReactPlatformHelpers.addDataAttributes(data, testId)), {
           children: triggerElement
         })) : triggerElement,
         isMounted && /* @__PURE__ */ jsx(react.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(), trueReactPlatformHelpers.addDataAttributes(popupData)), {
+            children: /* @__PURE__ */ jsxs("div", {
               className: classes["dropdown-".concat(status)],
-              children: trueReactPlatformHelpers.applyAction(children, {
-                onClose: handleClose
-              })
+              children: [
+                shouldShowArrow && /* @__PURE__ */ jsx(react.FloatingArrow, _object_spread_props$T(_object_spread$11({}, arrowProps), {
+                  ref: arrowRef,
+                  context,
+                  className: classes.arrow
+                })),
+                trueReactPlatformHelpers.applyAction(children, {
+                  floatingContext: context,
+                  onClose: handleClose
+                })
+              ]
             })
           }))
         })
@@ -8214,7 +8239,7 @@
       paddingLeft: 4
     }
   });
-  var withPopupStyles = {
+  var withPopupStyles$1 = {
     trigger: {
       width: "100%"
     }
@@ -8299,7 +8324,7 @@
         return /* @__PURE__ */ jsx(React.Fragment, {
           children: trueReactPlatformHelpers.isArrayNotEmpty(item.nestedItems) ? /* @__PURE__ */ jsx(WithPopup, {
             eventType: "hover",
-            tweakStyles: withPopupStyles,
+            tweakStyles: withPopupStyles$1,
             placement: "right-start",
             popupOffset: 0,
             shouldRenderInBody: false,
@@ -31306,6 +31331,11 @@
       }
     }));
   };
+  var withPopupStyles = {
+    popup: {
+      zIndex: 9999
+    }
+  };
   function _define_property(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -31391,7 +31421,7 @@
     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",
@@ -31399,22 +31429,29 @@
       "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 || !trueReactPlatformHelpers.isReactNodeNotEmpty(tooltipText),
+      isTriggerWrapped: true,
       tweakStyles: tweakWithPopupStyles
     }, restProps), {
       children: /* @__PURE__ */ jsx(Tooltip, {