funda-ui 4.5.12 → 4.5.35

package/lib/cjs/Tooltip/index.js

@@ -665,6 +665,239 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
 /***/ }),
 
+/***/ 954:
+/***/ (function(module, exports, __webpack_require__) {
+
+/* module decorator */ module = __webpack_require__.nmd(module);
+var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+(function webpackUniversalModuleDefinition(root, factory) {
+  if (( false ? 0 : _typeof(exports)) === 'object' && ( false ? 0 : _typeof(module)) === 'object') module.exports = factory();else if (true) !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
+		(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
+		__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));else {}
+})(this, function () {
+  return (/******/function () {
+      // webpackBootstrap
+      /******/
+      "use strict";
+
+      /******/ // The require scope
+      /******/
+      var __nested_webpack_require_987__ = {};
+      /******/
+      /************************************************************************/
+      /******/ /* webpack/runtime/define property getters */
+      /******/
+      (function () {
+        /******/ // define getter functions for harmony exports
+        /******/__nested_webpack_require_987__.d = function (exports, definition) {
+          /******/for (var key in definition) {
+            /******/if (__nested_webpack_require_987__.o(definition, key) && !__nested_webpack_require_987__.o(exports, key)) {
+              /******/Object.defineProperty(exports, key, {
+                enumerable: true,
+                get: definition[key]
+              });
+              /******/
+            }
+            /******/
+          }
+          /******/
+        };
+        /******/
+      })();
+      /******/
+      /******/ /* webpack/runtime/hasOwnProperty shorthand */
+      /******/
+      (function () {
+        /******/__nested_webpack_require_987__.o = function (obj, prop) {
+          return Object.prototype.hasOwnProperty.call(obj, prop);
+        };
+        /******/
+      })();
+      /******/
+      /******/ /* webpack/runtime/make namespace object */
+      /******/
+      (function () {
+        /******/ // define __esModule on exports
+        /******/__nested_webpack_require_987__.r = function (exports) {
+          /******/if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+            /******/Object.defineProperty(exports, Symbol.toStringTag, {
+              value: 'Module'
+            });
+            /******/
+          }
+          /******/
+          Object.defineProperty(exports, '__esModule', {
+            value: true
+          });
+          /******/
+        };
+        /******/
+      })();
+      /******/
+      /************************************************************************/
+      var __webpack_exports__ = {};
+      __nested_webpack_require_987__.r(__webpack_exports__);
+      /* harmony export */
+      __nested_webpack_require_987__.d(__webpack_exports__, {
+        /* harmony export */"actualPropertyValue": function actualPropertyValue() {
+          return (/* binding */_actualPropertyValue
+          );
+        },
+        /* harmony export */"getElCSS": function getElCSS() {
+          return (/* binding */_getElCSS
+          );
+        },
+        /* harmony export */"getTextTop": function getTextTop() {
+          return (/* binding */_getTextTop
+          );
+        },
+        /* harmony export */"getTextWidth": function getTextWidth() {
+          return (/* binding */_getTextWidth
+          );
+        }
+        /* harmony export */
+      });
+      /**
+       * Gets the relative upside of the text
+       * @param {Element} el    - A DOM node containing one selector to match against.
+       * @returns {Number}      - Returns a pure number.
+       */
+      function _getTextTop(el) {
+        var styles = window.getComputedStyle(el);
+        var fontSize = parseFloat(styles.fontSize);
+        var lineHeight = parseFloat(styles.lineHeight) || fontSize;
+        var paddingTop = parseFloat(styles.paddingTop);
+        var borderWidth = parseFloat(styles.borderWidth);
+        var textTop = paddingTop + (lineHeight - fontSize) / 2 - borderWidth * 2;
+        return textTop;
+      }
+
+      /**
+      * Get the actual value with user specific methed
+      * it can be 'width', 'height', 'outerWidth', 'outerHeight'
+      * @private
+      * @param {Element} el           - A DOM node containing one selector to match against.
+      * @param {String} prop          - A string naming the property of style.
+      * @param {?Json} config         - Whether or not margin is included. The key `includeMargin` 
+                                          takes effect when set to true
+      * @return {Number}              - Returns a pure number.
+      */
+      function _actualPropertyValue(el, prop) {
+        var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+        if (el === null) return 0;
+        var style = window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle,
+          display = style.display,
+          position = style.position,
+          visibility = style.visibility;
+        var marginWidth = 0;
+        var marginHeight = 0;
+        var maxVal;
+        var actualVal;
+        if (config && config.includeMargin === true) {
+          marginWidth = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+          marginHeight = parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+        }
+        if (prop === 'fontSize') {
+          actualVal = parseFloat(style.fontSize);
+        }
+        if (prop === 'fontFamily') {
+          actualVal = style.fontFamily;
+        }
+        if (prop === 'letterSpacing') {
+          actualVal = style.letterSpacing;
+        }
+        if (prop === 'width') {
+          maxVal = parseFloat(style.maxWidth);
+
+          // if its not hidden we just return normal height
+          if (display !== 'none' && maxVal !== 0) {
+            return el.clientWidth;
+          }
+        }
+        if (prop === 'height') {
+          maxVal = parseFloat(style.maxHeight);
+          if (display !== 'none' && maxVal !== 0) {
+            return el.clientHeight;
+          }
+        }
+        if (prop === 'outerWidth') {
+          maxVal = parseFloat(style.maxWidth);
+          if (display !== 'none' && maxVal !== 0) {
+            return el.offsetWidth + marginWidth;
+          }
+        }
+        if (prop === 'outerHeight') {
+          maxVal = parseFloat(style.maxHeight);
+          if (display !== 'none' && maxVal !== 0) {
+            return el.offsetHeight + marginHeight;
+          }
+        }
+
+        // the element is hidden so:
+        // making the el block so we can meassure its height but still be hidden
+        el.style.position = 'absolute';
+        el.style.visibility = 'hidden';
+        el.style.display = 'block';
+        if (prop === 'width') actualVal = el.clientWidth;
+        if (prop === 'height') actualVal = el.clientHeight;
+        if (prop === 'outerWidth') actualVal = el.offsetWidth + marginWidth;
+        if (prop === 'outerHeight') actualVal = el.offsetHeight + marginHeight;
+
+        // reverting to the original values
+        el.style.display = display;
+        el.style.position = position;
+        el.style.visibility = visibility;
+        return actualVal;
+      }
+      function _getElCSS(input, prop, isNumber) {
+        var _document$defaultView;
+        var val = (_document$defaultView = document.defaultView) === null || _document$defaultView === void 0 ? void 0 : _document$defaultView.getComputedStyle(input, null).getPropertyValue(prop);
+        return isNumber ? isNaN(parseFloat(val)) ? 0 : parseFloat(val) : val;
+      }
+
+      /**
+       * Get cursor or text position in pixels for input element
+       * 
+       * @param {HTMLInputElement} input  Required HTMLElement with `value` attribute
+       * @param {HTMLSpanElement} fauxContainer  Container of faux.
+           * @param {HTMLElement} rawTextContainer  The raw text container for the comparison
+       * @returns {Number}
+       */
+
+      function _getTextWidth(input, fauxContainer, rawTextContainer) {
+        if (input === null || fauxContainer === null || rawTextContainer === null) return 0;
+        var _off = input.selectionStart;
+        var _faux = fauxContainer;
+        var _fauxContainer = rawTextContainer;
+        if (_faux && _fauxContainer) {
+          // Styles to simulate a node in an input field
+          // use pre-wrap instead of wrap for white-space to support wrapping in textareas
+          var listOfModifiers = ['direction', 'font-family', 'font-size', 'font-size-adjust', 'font-variant', 'font-weight', 'font-style', 'letter-spacing', 'line-height', 'text-align', 'text-indent', 'text-transform', 'word-wrap', 'word-spacing'];
+
+          // default styles
+          _faux.style.setProperty('white-space', 'pre-wrap');
+          _faux.style.setProperty('padding', '0');
+          _faux.style.setProperty('margin', '0');
+          _faux.style.setProperty('display', 'none');
+          for (var i = 0; i < listOfModifiers.length; i++) {
+            var propertyValue = _getElCSS(_fauxContainer, listOfModifiers[i], false);
+            _faux.style.setProperty(listOfModifiers[i], propertyValue);
+          }
+          _faux.textContent = input.value.substring(0, _off).replace(/\s/g, "\xA0");
+          return _actualPropertyValue(_faux, 'outerWidth');
+        }
+      }
+
+      /******/
+      return __webpack_exports__;
+      /******/
+    }()
+  );
+});
+
+/***/ }),
+
 /***/ 761:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -1189,6 +1422,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(188);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(954);
+/* harmony import */ var funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_6__);
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -1201,6 +1436,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
+
 var useContainerDimensions = function useContainerDimensions(myRef) {
   var _useState = useState({
       width: 0,
@@ -1240,7 +1476,7 @@ var Tooltip = function Tooltip(props) {
     content = props.content,
     id = props.id,
     children = props.children;
-  var POS_OFFSET = Number(offset) || 10;
+  var POS_OFFSET = Number(offset) || 4;
   var EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
   var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_2___default()();
   var idRes = id || uniqueID;
@@ -1311,7 +1547,23 @@ var Tooltip = function Tooltip(props) {
     var _modalContent = _modalRef.querySelector('.tooltip__content');
     var _modalBox = _modalContent.getBoundingClientRect();
     if (typeof _modalContent.dataset.offset === 'undefined' && _modalBox.left > 0) {
+      // Adjust the coordinates due to height
+      //------------------
+      var triggerEl = document.querySelector("[data-overlay-id=\"".concat(_modalRef.id, "\"]"));
+      if (triggerEl !== null) {
+        var pos = triggerEl.dataset.microtipPosition;
+        if (typeof pos === 'undefined') pos = 'top';
+        var _offsetY = _modalBox.height - (0,funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_6__.getElCSS)(_modalContent, 'font-size', true) - (0,funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_6__.getElCSS)(_modalContent, 'padding-top', true) - (0,funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_6__.getElCSS)(_modalContent, 'padding-bottom', true);
+
+        // TOP
+        //
+        if (pos.indexOf('top') >= 0) {
+          _modalRef.style.transform = "translateY(-".concat(_offsetY, "px)");
+        }
+      }
+
       // 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;
         _modalContent.dataset.offset = _modalOffsetPosition;

package/lib/cjs/Utils/inputsCalculation.d.ts

@@ -15,6 +15,7 @@ declare function getTextTop(el: HTMLElement): number;
 * @return {Number}              - Returns a pure number.
 */
 declare function actualPropertyValue(el: any, prop: string, config?: any): any;
+declare function getElCSS(input: HTMLElement, prop: any, isNumber: boolean): any;
 /**
  * Get cursor or text position in pixels for input element
  *
@@ -24,4 +25,4 @@ declare function actualPropertyValue(el: any, prop: string, config?: any): any;
  * @returns {Number}
  */
 declare function getTextWidth(input: HTMLInputElement, fauxContainer: HTMLSpanElement, rawTextContainer: HTMLElement): any;
-export { getTextTop, actualPropertyValue, getTextWidth };
+export { getElCSS, getTextTop, actualPropertyValue, getTextWidth };

package/lib/cjs/Utils/inputsCalculation.js

@@ -47,6 +47,7 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "actualPropertyValue": () => (/* binding */ actualPropertyValue),
+/* harmony export */   "getElCSS": () => (/* binding */ getElCSS),
 /* harmony export */   "getTextTop": () => (/* binding */ getTextTop),
 /* harmony export */   "getTextWidth": () => (/* binding */ getTextWidth)
 /* harmony export */ });

package/lib/esm/MultipleCheckboxes/index.tsx

@@ -331,6 +331,13 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
         
         return Array.isArray(dataInit) ? dataInit.map((item: any, index: number) => {
 
+            const _optiondata: any = {};
+            Object.entries(item).forEach(([key, value]) => {
+                if (key !== 'extends') {
+                    _optiondata[key] = value;
+                }
+            });
+
             const _groupEl = () => {
                 return <>
     
@@ -339,7 +346,14 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
                     {/* /GROUP LABEL */}
     
                     {item.optgroup.map((opt: any, optIndex: number) => {
-    
+
+                        const _optiondata2: any = {};
+                        Object.entries(item).forEach(([key, value]) => {
+                            if (key !== 'extends') {
+                                _optiondata2[key] = value;
+                            }
+                        });
+
                         return <div
                             key={'checkbox' + optIndex}
                             className={combinedCls(
@@ -367,7 +381,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
                                 data-list-item-label={`${typeof opt.listItemLabel === 'undefined' ? '' : opt.listItemLabel}`}
                                 data-value={opt.value}
                                 data-disabled={disabled || (typeof opt.disabled !== 'undefined' ? `${opt.disabled}` : 'false')}
-                                data-optiondata={JSON.stringify(opt)}
+                                data-optiondata={JSON.stringify(_optiondata2)}
                                 value={opt.value}
                                 disabled={disabled || (typeof opt.disabled !== 'undefined' ? opt.disabled : null)}
                                 checked={selectedItems.has(opt.value)}
@@ -404,6 +418,14 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
                             />
     
                             {labelRes(typeof opt.listItemLabel === 'undefined' ? opt.label : opt.listItemLabel, `multiple-checkboxes__control-label-${index}-${optIndex}-${idRes}`)}
+
+                            {/* EXTENDS */}
+                            {typeof opt.extends !== 'undefined' ? <>
+                                <div className="d-inline-block">
+                                    <div className="form-control-extends__wrapper">{opt.extends}</div>
+                                </div>
+                            </> : null}
+
     
                         </div>;
     
@@ -428,7 +450,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
                         data-list-item-label={`${typeof item.listItemLabel === 'undefined' ? '' : item.listItemLabel}`}
                         data-value={item.value}
                         data-disabled={disabled || (typeof item.disabled !== 'undefined' ? `${item.disabled}` : 'false')}
-                        data-optiondata={JSON.stringify(item)}
+                        data-optiondata={JSON.stringify(_optiondata)}
                         value={item.value}
                         disabled={disabled || (typeof item.disabled !== 'undefined' ? item.disabled : null)}
                         checked={selectedItems.has(item.value)}
@@ -451,6 +473,14 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
                     />
     
                     {labelRes(typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel, `multiple-checkboxes__control-label-${index}-${idRes}`)}
+
+                    {/* EXTENDS */}
+                    {typeof item.extends !== 'undefined' ? <>
+                        <div className="d-inline-block">
+                            <div className="form-control-extends__wrapper">{item.extends}</div>
+                        </div>
+                    </> : null}
+
                 </>;
             };
     
@@ -467,7 +497,6 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
                             tableLayoutCellClassName
                         )} 
                         key={'optgroup-' + index}
-                        data-optiondata={JSON.stringify(item)}
                     >
                         {_groupEl()}
                     </td>;
@@ -488,7 +517,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
                         data-value={item.value}
                         data-disabled={disabled || (typeof item.disabled !== 'undefined' ? `${item.disabled}` : 'false')}
                         key={'checkbox' + index}
-                        data-optiondata={JSON.stringify(item)}
+                        data-optiondata={JSON.stringify(_optiondata)}
                     >
                         {_normalEl()}
                     </td>;
@@ -504,7 +533,6 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
                             groupWrapperClassName
                         )} 
                         key={'optgroup-' + index}
-                        data-optiondata={JSON.stringify(item)}
                     >
                         {_groupEl()}
                     </div>;
@@ -523,7 +551,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
                         data-value={item.value}
                         data-disabled={disabled || (typeof item.disabled !== 'undefined' ? `${item.disabled}` : 'false')}
                         key={'checkbox' + index}
-                        data-optiondata={JSON.stringify(item)}
+                        data-optiondata={JSON.stringify(_optiondata)}
                     >
                         {_normalEl()}
                     </div>;

package/lib/esm/Radio/index.tsx

@@ -11,7 +11,6 @@ import {
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
-
 export interface OptionConfig {
     [propName: string]: string | number | React.ReactNode | boolean;
 }
@@ -468,9 +467,14 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
                                 {labelRes(typeof opt.listItemLabel === 'undefined' ? opt.label : opt.listItemLabel, `field-${uniqueID}-${index}-${optIndex}`)}
 
                             </div>
-                            <div className="d-inline-block">
-                                <div className="form-control-extends__wrapper">{typeof opt.extends !== 'undefined' ? <>{opt.extends}</> : null}</div>
-                            </div>
+                            
+                            {/* EXTENDS */}
+                            {typeof opt.extends !== 'undefined' ? <>
+                                <div className="d-inline-block">
+                                    <div className="form-control-extends__wrapper">{opt.extends}</div>
+                                </div>
+                            </> : null}
+
                         </div>;
 
                     })}
@@ -511,9 +515,13 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
                             __html: `${typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel}`
                         }}></label>
                     </div>
-                    <div className="d-inline-block">
-                        <div className="form-control-extends__wrapper">{typeof item.extends !== 'undefined' ? <>{item.extends}</> : null}</div>
-                    </div>
+
+                    {/* EXTENDS */}
+                    {typeof item.extends !== 'undefined' ? <>
+                        <div className="d-inline-block">
+                            <div className="form-control-extends__wrapper">{item.extends}</div>
+                        </div>
+                    </> : null}
 
                 </>;
             };

package/lib/esm/Tabs/Tabs.tsx

@@ -122,24 +122,27 @@ const Tabs = forwardRef((props: TabsProps, externalRef: any) => {
     
         //
         Array.prototype.forEach.call($li, (node) => {
-            node.classList.remove('active');
-            node.firstChild.classList.remove('active');
+            if (node !== null) {
+                node.classList.remove('active');
+                node.firstChild.classList.remove('active');
 
-            runExClassName(node, _classNameNav, 'remove');
-            runExClassName(node.firstChild, _classNameNav, 'remove');
+                runExClassName(node, _classNameNav, 'remove');
+                runExClassName(node.firstChild, _classNameNav, 'remove');
+            }
         });
 
         
 
-        $allContent.forEach( (node) => {
-            // 
-            elDisplay('hide', node);
-
+        $allContent.forEach((node) => {
+            if (node !== null) {
+                // 
+                elDisplay('hide', node);
 
-            setTimeout(() => {
-                node.classList.remove('active');
-                runExClassName(node, _classNamePanel, 'remove');
-            }, speed); 
+                setTimeout(() => {
+                    node.classList.remove('active');
+                    runExClassName(node, _classNamePanel, 'remove');
+                }, speed);
+            }
         });
 
         // currently active

package/lib/esm/Tooltip/index.scss

@@ -40,7 +40,6 @@
     display: none;
     margin-top: -.2rem;
 
-
     &::before {
         background-size: 100% auto !important;
         content: "";

package/lib/esm/Tooltip/index.tsx

@@ -8,6 +8,9 @@ import {
     getAbsolutePositionOfStage
 } from 'funda-utils/dist/cjs/getElementProperty';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+import { getElCSS } from 'funda-utils/dist/cjs/inputsCalculation';
+
+
 
 
 export type TooltipProps = {
@@ -74,7 +77,7 @@ const Tooltip = (props: TooltipProps) => {
     } = props;
 
 
-    const POS_OFFSET = Number(offset) || 10;
+    const POS_OFFSET = Number(offset) || 4;
     const EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
     const uniqueID = useComId();
     const idRes = id || uniqueID;
@@ -152,7 +155,26 @@ const Tooltip = (props: TooltipProps) => {
         const _modalBox = _modalContent.getBoundingClientRect();
         if (typeof _modalContent.dataset.offset === 'undefined' && _modalBox.left > 0) {
 
+            // Adjust the coordinates due to height
+            //------------------
+            const triggerEl: any = document.querySelector(`[data-overlay-id="${_modalRef.id}"]`);
+            if (triggerEl !== null) {
+                let pos = triggerEl.dataset.microtipPosition;
+                if (typeof pos === 'undefined') pos = 'top';
+
+                const _offsetY = _modalBox.height - getElCSS(_modalContent, 'font-size', true) - getElCSS(_modalContent, 'padding-top', true) - getElCSS(_modalContent, 'padding-bottom', true);
+
+                // TOP
+                //
+                if (pos.indexOf('top') >= 0) {
+                    _modalRef.style.transform = `translateY(-${_offsetY}px)`;
+                }
+
+            }
+
+     
             // 10 pixels is used to account for some bias in mobile devices
+            //------------------
             if ((_modalBox.right + 10) > window.innerWidth) {
                 const _modalOffsetPosition = _modalBox.right - window.innerWidth + EXCEEDED_SIDE_POS_OFFSET;
                 _modalContent.dataset.offset = _modalOffsetPosition;

package/lib/esm/Utils/libs/inputsCalculation.ts

@@ -151,6 +151,7 @@ function getTextWidth(input: HTMLInputElement, fauxContainer: HTMLSpanElement, r
 
 
 export {
+    getElCSS,
     getTextTop,
     actualPropertyValue,
     getTextWidth

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.5.12",
+  "version": "4.5.35",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",