funda-ui 4.7.517 → 4.7.533

package/Select/index.js

@@ -3578,7 +3578,7 @@ var format_string = __webpack_require__(933);
 // EXTERNAL MODULE: ../Utils/dist/cjs/cls.js
 var cls = __webpack_require__(188);
 ;// CONCATENATED MODULE: ./src/index.tsx
-var _excluded = ["contentRef", "popupRef", "wrapperClassName", "controlClassName", "controlExClassName", "optionsExClassName", "exceededSidePosOffset", "clearIcon", "renderOption", "multiSelect", "multiSelectEntireAreaTrigger", "multiSelectSelectedItemOnlyStatus", "renderSelectedValue", "disabled", "required", "defaultValue", "value", "label", "name", "readOnly", "placeholder", "id", "autoComplete", "autoCapitalize", "spellCheck", "options", "clearTrigger", "loader", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "firstRequestAutoExec", "fetchTrigger", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus", "onKeyPressed"];
+var _excluded = ["contentRef", "popupRef", "wrapperClassName", "controlClassName", "controlExClassName", "optionsExClassName", "customScrollContainer", "exceededSidePosOffset", "clearIcon", "renderOption", "multiSelect", "multiSelectEntireAreaTrigger", "multiSelectSelectedItemOnlyStatus", "renderSelectedValue", "disabled", "required", "defaultValue", "value", "label", "name", "readOnly", "placeholder", "id", "autoComplete", "autoCapitalize", "spellCheck", "options", "clearTrigger", "loader", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "firstRequestAutoExec", "fetchTrigger", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus", "onKeyPressed"];
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -3626,6 +3626,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     controlClassName = props.controlClassName,
     controlExClassName = props.controlExClassName,
     optionsExClassName = props.optionsExClassName,
+    customScrollContainer = props.customScrollContainer,
     exceededSidePosOffset = props.exceededSidePosOffset,
     clearIcon = props.clearIcon,
     renderOption = props.renderOption,
@@ -3701,6 +3702,8 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   var listContentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var optionsRes = options ? (0,validate.isJSON)(options) ? JSON.parse(options) : options : [];
   var LIST_CONTAINER_MAX_HEIGHT = 300;
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
+
   var keyboardSelectedItem = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
 
   // loading
@@ -4321,8 +4324,36 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     _contentOldHeight = listContainerHeightLimit(_contentOldHeight);
 
     // You need to wait for the height of the pop-up container to be set
-    // Detect position、
-    if (window.innerHeight - _triggerBox.top > 100) {
+    // Detect position
+    var containerHeight = window.innerHeight;
+    var containerTop = 0;
+
+    // If custom scroll container is specified, use it instead of window
+    if (customScrollContainer) {
+      var customContainer = null;
+      if (typeof customScrollContainer === 'string') {
+        // Handle selector string
+        customContainer = document.querySelector(customScrollContainer);
+      } else if (customScrollContainer instanceof HTMLElement) {
+        // Handle DOM element directly
+        customContainer = customScrollContainer;
+      } else if (customScrollContainer && 'current' in customScrollContainer) {
+        // Handle React ref
+        customContainer = customScrollContainer.current;
+      }
+      if (customContainer) {
+        var containerRect = customContainer.getBoundingClientRect();
+        containerHeight = containerRect.height;
+        containerTop = containerRect.top;
+      }
+    }
+
+    // Calculate available space below the trigger
+    var availableSpaceBelow = containerHeight - (_triggerBox.top - containerTop);
+
+    // Use a more reasonable threshold for position decision
+    // Consider the minimum space needed for a usable dropdown
+    if (availableSpaceBelow > MIN_SPACE_FOR_DROPDOWN) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';
@@ -4333,7 +4364,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     //-----------
     // Set the pop-up height
     if (targetPos === 'top') {
-      contentMaxHeight = _triggerBox.top;
+      // Calculate available space above the trigger
+      var availableSpaceAbove = _triggerBox.top - containerTop;
+      contentMaxHeight = availableSpaceAbove;
 
       // height restrictions
       contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
@@ -4354,7 +4387,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       }
     }
     if (targetPos === 'bottom') {
-      contentMaxHeight = window.innerHeight - _triggerBox.bottom;
+      // Calculate available space below the trigger
+      var _availableSpaceBelow = containerHeight - (_triggerBox.bottom - containerTop);
+      contentMaxHeight = _availableSpaceBelow;
 
       // height restrictions
       contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
@@ -4380,17 +4415,16 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     // Adjust position
     if (targetPos === 'top') {
       _modalRef.style.left = x + 'px';
-      //_modalRef.style.top = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2 + 'px';
-      _modalRef.style.top = 'auto';
-      _modalRef.style.bottom = window.innerHeight - _triggerBox.top + POS_OFFSET + 2 + 'px';
-      _modalRef.style.setProperty('position', 'fixed', 'important');
+      _modalRef.style.bottom = 'auto';
+      // Position the popup above the trigger without overlapping
+      var topPosition = y - POS_OFFSET - listContentRef.current.clientHeight - 2;
+      _modalRef.style.top = topPosition + 'px';
       _modalRef.classList.add('pos-top');
     }
     if (targetPos === 'bottom') {
       _modalRef.style.left = x + 'px';
       _modalRef.style.bottom = 'auto';
       _modalRef.style.top = y + height + POS_OFFSET + 'px';
-      _modalRef.style.setProperty('position', 'absolute', 'important');
       _modalRef.classList.remove('pos-top');
     }
 
@@ -4400,16 +4434,38 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     var _modalContent = _modalRef;
     var _modalBox = _modalContent.getBoundingClientRect();
     if (typeof _modalContent.dataset.offset === 'undefined' && _modalBox.left > 0) {
+      // Get container width for boundary checking
+      var containerWidth = window.innerWidth;
+      var containerLeft = 0;
+      if (customScrollContainer) {
+        var _customContainer = null;
+        if (typeof customScrollContainer === 'string') {
+          // Handle selector string
+          _customContainer = document.querySelector(customScrollContainer);
+        } else if (customScrollContainer instanceof HTMLElement) {
+          // Handle DOM element directly
+          _customContainer = customScrollContainer;
+        } else if (customScrollContainer && 'current' in customScrollContainer) {
+          // Handle React ref
+          _customContainer = customScrollContainer.current;
+        }
+        if (_customContainer) {
+          var _containerRect = _customContainer.getBoundingClientRect();
+          containerWidth = _containerRect.width;
+          containerLeft = _containerRect.left;
+        }
+      }
+
       // 10 pixels is used to account for some bias in mobile devices
-      if (_modalBox.right + 10 > window.innerWidth) {
-        var _modalOffsetPosition = _modalBox.right - window.innerWidth + EXCEEDED_SIDE_POS_OFFSET;
+      if (_modalBox.right + 10 > containerLeft + containerWidth) {
+        var _modalOffsetPosition = _modalBox.right - (containerLeft + containerWidth) + EXCEEDED_SIDE_POS_OFFSET;
         _modalContent.dataset.offset = _modalOffsetPosition;
         _modalContent.style.marginLeft = "-".concat(_modalOffsetPosition, "px");
         // console.log('_modalPosition: ', _modalOffsetPosition)
       }
 
-      if (_modalBox.left - 10 < 0) {
-        var _modalOffsetPosition2 = Math.abs(_modalBox.left) + EXCEEDED_SIDE_POS_OFFSET;
+      if (_modalBox.left - 10 < containerLeft) {
+        var _modalOffsetPosition2 = Math.abs(_modalBox.left - containerLeft) + EXCEEDED_SIDE_POS_OFFSET;
         _modalContent.dataset.offset = _modalOffsetPosition2;
         _modalContent.style.marginLeft = "".concat(_modalOffsetPosition2, "px");
         // console.log('_modalPosition: ', _modalOffsetPosition)

package/Tooltip/index.css

@@ -13,20 +13,20 @@
  * 9. Position Modifiers - Right
  * 10. Size
 */
-.tooltip__wrapper {
-  --tooltip-box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
-  --tooltip-content-bg: rgba(17, 17, 17, 0.9);
-  --tooltip-content-color: #fff;
-  --tooltip-content-font-size: 0.75em;
-  --tooltip-content-padding-x: 1em;
-  --tooltip-content-padding-y: .5em;
-  --tooltip-content-line-height: 1.5;
-  --tooltip-arrow-bg-top: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-  --tooltip-arrow-bg-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-  --tooltip-arrow-bg-left: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-  --tooltip-arrow-bg-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-  --tooltip-arrow-width: 18px;
-  --tooltip-arrow-height: 6px;
+.cus-tooltip__wrapper {
+  --cus-tooltip-box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
+  --cus-tooltip-content-bg: rgba(17, 17, 17, 0.9);
+  --cus-tooltip-content-color: #fff;
+  --cus-tooltip-content-font-size: 0.75em;
+  --cus-tooltip-content-padding-x: 1em;
+  --cus-tooltip-content-padding-y: .5em;
+  --cus-tooltip-content-line-height: 1.5;
+  --cus-tooltip-arrow-bg-top: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  --cus-tooltip-arrow-bg-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  --cus-tooltip-arrow-bg-left: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  --cus-tooltip-arrow-bg-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  --cus-tooltip-arrow-width: 18px;
+  --cus-tooltip-arrow-height: 6px;
   position: absolute;
   z-index: 1055; /* --bs-modal-zindex */
   pointer-events: none;
@@ -73,125 +73,126 @@
   ---------------------------
   */
 }
-.tooltip__wrapper::before {
+.cus-tooltip__wrapper::before {
   background-size: 100% auto !important;
   content: "";
   position: absolute;
 }
-.tooltip__wrapper.active {
+.cus-tooltip__wrapper.active {
   display: block !important;
 }
-.tooltip__wrapper.active::before,
-.tooltip__wrapper.active > .tooltip__content {
+.cus-tooltip__wrapper.active::before,
+.cus-tooltip__wrapper.active > .cus-tooltip__content {
   opacity: 1;
 }
-.tooltip__wrapper:focus::before,
-.tooltip__wrapper:focus > .tooltip__content {
+.cus-tooltip__wrapper:focus::before,
+.cus-tooltip__wrapper:focus > .cus-tooltip__content {
   opacity: 1;
 }
-.tooltip__wrapper::before,
-.tooltip__wrapper > .tooltip__content {
+.cus-tooltip__wrapper::before,
+.cus-tooltip__wrapper > .cus-tooltip__content {
   backface-visibility: hidden;
   will-change: transform;
   opacity: 0;
   box-sizing: border-box;
   z-index: 10;
   transform-origin: top;
-  box-shadow: var(--tooltip-box-shadow);
+  box-shadow: var(--cus-tooltip-box-shadow);
   transition: none !important; /* Don't use transition if position is outside window */
 }
-.tooltip__wrapper > .tooltip__content {
-  background: var(--tooltip-content-bg);
+.cus-tooltip__wrapper > .cus-tooltip__content {
+  pointer-events: auto;
+  background: var(--cus-tooltip-content-bg);
   border-radius: 4px;
-  color: var(--tooltip-content-color);
+  color: var(--cus-tooltip-content-color);
   content: attr(aria-label);
-  font-size: var(--tooltip-content-font-size);
+  font-size: var(--cus-tooltip-content-font-size);
   font-weight: normal;
   text-transform: none;
-  padding: var(--tooltip-content-padding-y) var(--tooltip-content-padding-x);
+  padding: var(--cus-tooltip-content-padding-y) var(--cus-tooltip-content-padding-x);
   white-space: nowrap;
   box-sizing: content-box;
-  line-height: var(--tooltip-content-line-height);
+  line-height: var(--cus-tooltip-content-line-height);
 }
-.tooltip__wrapper > .tooltip__content img {
+.cus-tooltip__wrapper > .cus-tooltip__content img {
   height: auto !important;
   margin: 0.5rem 0;
 }
-.tooltip__wrapper[data-microtip-position|=top]::before {
-  background: var(--tooltip-arrow-bg-top);
-  height: var(--tooltip-arrow-height);
-  width: var(--tooltip-arrow-width);
+.cus-tooltip__wrapper[data-microtip-position|=top]::before {
+  background: var(--cus-tooltip-arrow-bg-top);
+  height: var(--cus-tooltip-arrow-height);
+  width: var(--cus-tooltip-arrow-width);
 }
-.tooltip__wrapper[data-microtip-position|=top] > .tooltip__content {
-  margin-bottom: var(--tooltip-arrow-height);
+.cus-tooltip__wrapper[data-microtip-position|=top] > .cus-tooltip__content {
+  margin-bottom: var(--cus-tooltip-arrow-height);
 }
-.tooltip__wrapper[data-microtip-position|=top]::before {
-  top: calc(100% - var(--tooltip-arrow-height));
-  left: calc(var(--tooltip-arrow-width) / 2 * -1);
+.cus-tooltip__wrapper[data-microtip-position|=top]::before {
+  top: calc(100% - var(--cus-tooltip-arrow-height));
+  left: calc(var(--cus-tooltip-arrow-width) / 2 * -1);
 }
-.tooltip__wrapper[data-microtip-position|=top] > .tooltip__content {
-  bottom: calc(100% + var(--tooltip-arrow-height));
+.cus-tooltip__wrapper[data-microtip-position|=top] > .cus-tooltip__content {
+  bottom: calc(100% + var(--cus-tooltip-arrow-height));
   left: 50%;
   transform: translateX(-50%);
 }
-.tooltip__wrapper[data-microtip-position=top-left] > .tooltip__content {
-  bottom: calc(100% + var(--tooltip-arrow-height));
+.cus-tooltip__wrapper[data-microtip-position=top-left] > .cus-tooltip__content {
+  bottom: calc(100% + var(--cus-tooltip-arrow-height));
   left: 50%;
-  transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
+  transform: translateX(calc(-100% + var(--cus-tooltip-arrow-width)));
 }
-.tooltip__wrapper[data-microtip-position=top-right] > .tooltip__content {
-  bottom: calc(100% + var(--tooltip-arrow-height));
+.cus-tooltip__wrapper[data-microtip-position=top-right] > .cus-tooltip__content {
+  bottom: calc(100% + var(--cus-tooltip-arrow-height));
   left: 50%;
-  transform: translateX(calc(0% - var(--tooltip-arrow-width)));
+  transform: translateX(calc(0% - var(--cus-tooltip-arrow-width)));
 }
-.tooltip__wrapper[data-microtip-position|=bottom]::before {
-  background: var(--tooltip-arrow-bg-bottom);
-  height: var(--tooltip-arrow-height);
-  width: var(--tooltip-arrow-width);
+.cus-tooltip__wrapper[data-microtip-position|=bottom]::before {
+  background: var(--cus-tooltip-arrow-bg-bottom);
+  height: var(--cus-tooltip-arrow-height);
+  width: var(--cus-tooltip-arrow-width);
   margin-top: 5px;
   margin-bottom: 0;
 }
-.tooltip__wrapper[data-microtip-position|=bottom] > .tooltip__content {
-  margin-top: var(--tooltip-arrow-height);
+.cus-tooltip__wrapper[data-microtip-position|=bottom] > .cus-tooltip__content {
+  margin-top: var(--cus-tooltip-arrow-height);
 }
-.tooltip__wrapper[data-microtip-position|=bottom]::before {
-  bottom: calc(100% - var(--tooltip-arrow-height));
-  left: calc(var(--tooltip-arrow-width) / 2 * -1);
+.cus-tooltip__wrapper[data-microtip-position|=bottom]::before {
+  bottom: calc(100% - var(--cus-tooltip-arrow-height));
+  left: calc(var(--cus-tooltip-arrow-width) / 2 * -1);
 }
-.tooltip__wrapper[data-microtip-position|=bottom] > .tooltip__content {
+.cus-tooltip__wrapper[data-microtip-position|=bottom] > .cus-tooltip__content {
   bottom: auto;
-  top: calc(100% + var(--tooltip-arrow-height));
+  top: calc(100% + var(--cus-tooltip-arrow-height));
   left: 50%;
   transform: translateX(-50%);
 }
-.tooltip__wrapper[data-microtip-position=bottom-left] > .tooltip__content {
+.cus-tooltip__wrapper[data-microtip-position=bottom-left] > .cus-tooltip__content {
   bottom: auto;
-  top: calc(100% + var(--tooltip-arrow-height));
+  top: calc(100% + var(--cus-tooltip-arrow-height));
   left: 50%;
-  transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
+  transform: translateX(calc(-100% + var(--cus-tooltip-arrow-width)));
 }
-.tooltip__wrapper[data-microtip-position=bottom-right] > .tooltip__content {
+.cus-tooltip__wrapper[data-microtip-position=bottom-right] > .cus-tooltip__content {
   bottom: auto;
-  top: calc(100% + var(--tooltip-arrow-height));
+  top: calc(100% + var(--cus-tooltip-arrow-height));
   left: 50%;
-  transform: translateX(calc(0% - var(--tooltip-arrow-width)));
+  transform: translateX(calc(0% - var(--cus-tooltip-arrow-width)));
 }
-.tooltip__wrapper[data-microtip-size=auto].tooltip__content {
+.cus-tooltip__wrapper[data-microtip-size=auto].cus-tooltip__content {
   white-space: nowrap;
   width: auto;
   max-width: 530px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.tooltip__wrapper[data-microtip-size=small].tooltip__content {
+.cus-tooltip__wrapper[data-microtip-size=small].cus-tooltip__content {
   white-space: initial;
   width: 80px;
 }
-.tooltip__wrapper[data-microtip-size=medium].tooltip__content {
+.cus-tooltip__wrapper[data-microtip-size=medium].cus-tooltip__content {
   white-space: initial;
   width: 150px;
 }
-.tooltip__wrapper[data-microtip-size=large].tooltip__content {
+.cus-tooltip__wrapper[data-microtip-size=large].cus-tooltip__content {
   white-space: initial;
   width: 260px;
 }

package/Tooltip/index.d.ts

@@ -16,9 +16,23 @@ export declare type TooltipProps = {
     mouseOutDelay?: number;
     /** Set a piece of text or HTML code */
     content?: React.ReactNode;
+    /** If true, Tooltip is controlled by parent via ref, not by mouse events */
+    controlled?: boolean;
+    /** Custom color for the popup arrow */
+    popupArrowColor?: number[];
+    /** Custom style for the popup content */
+    popupContentStyle?: React.CSSProperties;
+    /** If true, tooltip closes only if mouse does not enter wrapper within timeout after leaving trigger */
+    delayedClose?: boolean;
+    /** Timeout in ms for delayed close (ms) */
+    delayedCloseTimeout?: number;
+    /** Called when mouse enters the tooltip wrapper */
+    onContentMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** Called when mouse leaves the tooltip wrapper */
+    onContentMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
     /** -- */
     id?: string;
     children: React.ReactNode;
 };
-declare const Tooltip: (props: TooltipProps) => JSX.Element;
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<any>>;
 export default Tooltip;