funda-ui 1.0.406 → 1.0.408

package/RangeSlider/index.js

@@ -620,7 +620,7 @@ var RangeSlider = function RangeSlider(props) {
     type: "text",
     id: idRes + '-min',
     name: minName,
-    value: minValue.toString() //  Convert to a string to ensure that 0 can also be filled
+    value: typeof minValue !== 'undefined' ? minValue.toString() : min //  Convert to a string to ensure that 0 can also be filled
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((funda_input__WEBPACK_IMPORTED_MODULE_1___default()), {
     ref: valMaxRef,
     wrapperClassName: wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative",
@@ -629,7 +629,7 @@ var RangeSlider = function RangeSlider(props) {
     type: "text",
     id: idRes + '-max',
     name: maxName,
-    value: maxValue.toString() //  Convert to a string to ensure that 0 can also be filled
+    value: typeof maxValue !== 'undefined' ? maxValue.toString() : max //  Convert to a string to ensure that 0 can also be filled
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "range-slider__control-wrapper ".concat(disabled ? 'disabled' : '')
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {

package/Scrollbar/index.js

@@ -343,21 +343,14 @@ var Scrollbar = function Scrollbar(props) {
     var thumb = scrollThumbRef.current;
     thumb.style.top = "".concat(newTop, "px");
   }, []);
-  var handleThumbMousedown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+  var handleThumbMouseDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     e.preventDefault();
     e.stopPropagation();
     setScrollStartPosition(e.clientY);
     if (contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
     setIsDragging(true);
   }, []);
-  var handleThumbMouseup = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isDragging) {
-      setIsDragging(false);
-    }
-  }, [isDragging]);
-  var handleThumbMousemove = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+  var handleThumbMouseMove = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     e.preventDefault();
     e.stopPropagation();
     if (isDragging && contentRef.current && scrollStartPosition) {
@@ -369,6 +362,13 @@ var Scrollbar = function Scrollbar(props) {
       contentRef.current.scrollTop = newScrollTop;
     }
   }, [isDragging, scrollStartPosition, thumbHeight]);
+  var handleThumbMouseUp = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isDragging) {
+      setIsDragging(false);
+    }
+  }, [isDragging]);
 
   // Horizontal  --> functions
   //========================================    
@@ -440,21 +440,21 @@ var Scrollbar = function Scrollbar(props) {
     var thumb = scrollThumbHorizontalRef.current;
     thumb.style.left = "".concat(newLeft, "px");
   }, []);
-  var handleHorizontalThumbMousedown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+  var handleHorizontalThumbMouseDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     e.preventDefault();
     e.stopPropagation();
     setScrollHorizontalStartPosition(e.clientX);
     if (contentRef.current) setInitialScrollLeft(contentRef.current.scrollLeft);
     setIsHorizontalDragging(true);
   }, []);
-  var handleHorizontalThumbMouseup = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+  var handleHorizontalThumbMouseUp = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     e.preventDefault();
     e.stopPropagation();
     if (isHorizontalDragging) {
       setIsHorizontalDragging(false);
     }
   }, [isHorizontalDragging]);
-  var handleHorizontalThumbMousemove = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+  var handleHorizontalThumbMouseMove = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     e.preventDefault();
     e.stopPropagation();
     if (isHorizontalDragging && contentRef.current && scrollHorizontalStartPosition) {
@@ -510,13 +510,6 @@ var Scrollbar = function Scrollbar(props) {
 
   // Listen for mouse events to handle scrolling by dragging the thumb
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    document.addEventListener('mousemove', handleThumbMousemove);
-    document.addEventListener('mouseup', handleThumbMouseup);
-    document.addEventListener('mouseleave', handleThumbMouseup);
-    document.addEventListener('mousemove', handleHorizontalThumbMousemove);
-    document.addEventListener('mouseup', handleHorizontalThumbMouseup);
-    document.addEventListener('mouseleave', handleHorizontalThumbMouseup);
-
     // Add function to the element that should be used as the scrollable area.
     if (contentRef.current) {
       contentRef.current.removeEventListener('wheel', contentAreaScrollUpdate);
@@ -524,17 +517,11 @@ var Scrollbar = function Scrollbar(props) {
       contentAreaScrollUpdate();
     }
     return function () {
-      document.removeEventListener('mousemove', handleThumbMousemove);
-      document.removeEventListener('mouseup', handleThumbMouseup);
-      document.removeEventListener('mouseleave', handleThumbMouseup);
-      document.removeEventListener('mousemove', handleHorizontalThumbMousemove);
-      document.removeEventListener('mouseup', handleHorizontalThumbMouseup);
-      document.removeEventListener('mouseleave', handleHorizontalThumbMouseup);
       if (contentRef.current) {
         contentRef.current.removeEventListener('wheel', contentAreaScrollUpdate);
       }
     };
-  }, [handleThumbMousemove, handleThumbMouseup, handleHorizontalThumbMousemove, handleHorizontalThumbMouseup]);
+  }, [handleThumbMouseMove, handleThumbMouseUp, handleHorizontalThumbMouseMove, handleHorizontalThumbMouseUp]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     id: idRes,
     ref: rootRef,
@@ -567,7 +554,9 @@ var Scrollbar = function Scrollbar(props) {
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "custom-scrollbars__thumb",
     ref: scrollThumbRef,
-    onMouseDown: handleThumbMousedown,
+    onMouseDown: handleThumbMouseDown,
+    onMouseMove: handleThumbMouseMove,
+    onMouseUp: handleThumbMouseUp,
     style: {
       height: "".concat(thumbHeight, "px"),
       cursor: isDragging ? 'grabbing' : 'grab'
@@ -604,7 +593,9 @@ var Scrollbar = function Scrollbar(props) {
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "custom-scrollbars__thumb",
     ref: scrollThumbHorizontalRef,
-    onMouseDown: handleHorizontalThumbMousedown,
+    onMouseDown: handleHorizontalThumbMouseDown,
+    onMouseMove: handleHorizontalThumbMouseMove,
+    onMouseUp: handleHorizontalThumbMouseUp,
     style: {
       width: "".concat(thumbWidth, "px"),
       cursor: isHorizontalDragging ? 'grabbing' : 'grab'

package/Tooltip/index.css

@@ -85,17 +85,17 @@
   content: "";
 }
 .tooltip__wrapper.active::before,
-.tooltip__wrapper.active .tooltip__content {
+.tooltip__wrapper.active > .tooltip__content {
   opacity: 1;
   pointer-events: auto;
 }
 .tooltip__wrapper:focus::before,
-.tooltip__wrapper:focus .tooltip__content {
+.tooltip__wrapper:focus > .tooltip__content {
   opacity: 1;
   pointer-events: auto;
 }
 .tooltip__wrapper::before,
-.tooltip__wrapper .tooltip__content {
+.tooltip__wrapper > .tooltip__content {
   backface-visibility: hidden;
   will-change: transform;
   opacity: 0;
@@ -107,7 +107,7 @@
   box-shadow: var(--tooltip-box-shadow);
   transition: 0.1s ease-in-out;
 }
-.tooltip__wrapper .tooltip__content {
+.tooltip__wrapper > .tooltip__content {
   background: var(--tooltip-content-bg);
   border-radius: 4px;
   color: var(--tooltip-content-color);
@@ -120,7 +120,7 @@
   box-sizing: content-box;
   line-height: var(--tooltip-content-line-height);
 }
-.tooltip__wrapper .tooltip__content img {
+.tooltip__wrapper > .tooltip__content img {
   height: auto !important;
   margin: 0.5rem 0;
 }
@@ -129,24 +129,24 @@
   height: var(--tooltip-arrow-height);
   width: var(--tooltip-arrow-width);
 }
-.tooltip__wrapper[data-microtip-position|=top] .tooltip__content {
+.tooltip__wrapper[data-microtip-position|=top] > .tooltip__content {
   margin-bottom: var(--tooltip-arrow-height);
 }
 .tooltip__wrapper[data-microtip-position|=top]::before {
   bottom: calc(100% + var(--tooltip-arrow-height));
   left: calc(50% - var(--tooltip-arrow-width) / 2);
 }
-.tooltip__wrapper[data-microtip-position|=top] .tooltip__content {
+.tooltip__wrapper[data-microtip-position|=top] > .tooltip__content {
   bottom: calc(100% + var(--tooltip-arrow-height));
   left: 50%;
   transform: translateX(-50%);
 }
-.tooltip__wrapper[data-microtip-position=top-left] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=top-left] > .tooltip__content {
   bottom: calc(100% + var(--tooltip-arrow-height));
   left: 50%;
   transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
 }
-.tooltip__wrapper[data-microtip-position=top-right] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=top-right] > .tooltip__content {
   bottom: calc(100% + var(--tooltip-arrow-height));
   left: 50%;
   transform: translateX(calc(0% - var(--tooltip-arrow-width)));
@@ -158,7 +158,7 @@
   margin-top: 5px;
   margin-bottom: 0;
 }
-.tooltip__wrapper[data-microtip-position|=bottom] .tooltip__content {
+.tooltip__wrapper[data-microtip-position|=bottom] > .tooltip__content {
   margin-top: var(--tooltip-arrow-height);
 }
 .tooltip__wrapper[data-microtip-position|=bottom]::before {
@@ -166,26 +166,26 @@
   top: calc(100% + 1px);
   left: calc(50% - var(--tooltip-arrow-width) / 2);
 }
-.tooltip__wrapper[data-microtip-position|=bottom] .tooltip__content {
+.tooltip__wrapper[data-microtip-position|=bottom] > .tooltip__content {
   bottom: auto;
   top: calc(100% + var(--tooltip-arrow-height));
   left: 50%;
   transform: translateX(-50%);
 }
-.tooltip__wrapper[data-microtip-position=bottom-left] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=bottom-left] > .tooltip__content {
   bottom: auto;
   top: calc(100% + var(--tooltip-arrow-height));
   left: 50%;
   transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
 }
-.tooltip__wrapper[data-microtip-position=bottom-right] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=bottom-right] > .tooltip__content {
   bottom: auto;
   top: calc(100% + var(--tooltip-arrow-height));
   left: 50%;
   transform: translateX(calc(0% - var(--tooltip-arrow-width)));
 }
 .tooltip__wrapper[data-microtip-position=left]::before,
-.tooltip__wrapper[data-microtip-position=left] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=left] > .tooltip__content {
   bottom: auto;
   left: auto;
   right: 100%;
@@ -199,11 +199,11 @@
   margin-right: 5px;
   margin-bottom: 0;
 }
-.tooltip__wrapper[data-microtip-position=left] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=left] > .tooltip__content {
   margin-right: 10px;
 }
 .tooltip__wrapper[data-microtip-position=right]::before,
-.tooltip__wrapper[data-microtip-position=right] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=right] > .tooltip__content {
   bottom: auto;
   left: 100%;
   top: 50%;
@@ -216,7 +216,7 @@
   margin-bottom: 0;
   margin-left: 5px;
 }
-.tooltip__wrapper[data-microtip-position=right] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=right] > .tooltip__content {
   margin-left: 10px;
 }
 .tooltip__wrapper[data-microtip-size=auto].tooltip__content {

package/lib/cjs/RangeSlider/index.js

@@ -620,7 +620,7 @@ var RangeSlider = function RangeSlider(props) {
     type: "text",
     id: idRes + '-min',
     name: minName,
-    value: minValue.toString() //  Convert to a string to ensure that 0 can also be filled
+    value: typeof minValue !== 'undefined' ? minValue.toString() : min //  Convert to a string to ensure that 0 can also be filled
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((funda_input__WEBPACK_IMPORTED_MODULE_1___default()), {
     ref: valMaxRef,
     wrapperClassName: wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative",
@@ -629,7 +629,7 @@ var RangeSlider = function RangeSlider(props) {
     type: "text",
     id: idRes + '-max',
     name: maxName,
-    value: maxValue.toString() //  Convert to a string to ensure that 0 can also be filled
+    value: typeof maxValue !== 'undefined' ? maxValue.toString() : max //  Convert to a string to ensure that 0 can also be filled
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "range-slider__control-wrapper ".concat(disabled ? 'disabled' : '')
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {

package/lib/cjs/Scrollbar/index.js

@@ -343,21 +343,14 @@ var Scrollbar = function Scrollbar(props) {
     var thumb = scrollThumbRef.current;
     thumb.style.top = "".concat(newTop, "px");
   }, []);
-  var handleThumbMousedown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+  var handleThumbMouseDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     e.preventDefault();
     e.stopPropagation();
     setScrollStartPosition(e.clientY);
     if (contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
     setIsDragging(true);
   }, []);
-  var handleThumbMouseup = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isDragging) {
-      setIsDragging(false);
-    }
-  }, [isDragging]);
-  var handleThumbMousemove = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+  var handleThumbMouseMove = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     e.preventDefault();
     e.stopPropagation();
     if (isDragging && contentRef.current && scrollStartPosition) {
@@ -369,6 +362,13 @@ var Scrollbar = function Scrollbar(props) {
       contentRef.current.scrollTop = newScrollTop;
     }
   }, [isDragging, scrollStartPosition, thumbHeight]);
+  var handleThumbMouseUp = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isDragging) {
+      setIsDragging(false);
+    }
+  }, [isDragging]);
 
   // Horizontal  --> functions
   //========================================    
@@ -440,21 +440,21 @@ var Scrollbar = function Scrollbar(props) {
     var thumb = scrollThumbHorizontalRef.current;
     thumb.style.left = "".concat(newLeft, "px");
   }, []);
-  var handleHorizontalThumbMousedown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+  var handleHorizontalThumbMouseDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     e.preventDefault();
     e.stopPropagation();
     setScrollHorizontalStartPosition(e.clientX);
     if (contentRef.current) setInitialScrollLeft(contentRef.current.scrollLeft);
     setIsHorizontalDragging(true);
   }, []);
-  var handleHorizontalThumbMouseup = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+  var handleHorizontalThumbMouseUp = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     e.preventDefault();
     e.stopPropagation();
     if (isHorizontalDragging) {
       setIsHorizontalDragging(false);
     }
   }, [isHorizontalDragging]);
-  var handleHorizontalThumbMousemove = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+  var handleHorizontalThumbMouseMove = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     e.preventDefault();
     e.stopPropagation();
     if (isHorizontalDragging && contentRef.current && scrollHorizontalStartPosition) {
@@ -510,13 +510,6 @@ var Scrollbar = function Scrollbar(props) {
 
   // Listen for mouse events to handle scrolling by dragging the thumb
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    document.addEventListener('mousemove', handleThumbMousemove);
-    document.addEventListener('mouseup', handleThumbMouseup);
-    document.addEventListener('mouseleave', handleThumbMouseup);
-    document.addEventListener('mousemove', handleHorizontalThumbMousemove);
-    document.addEventListener('mouseup', handleHorizontalThumbMouseup);
-    document.addEventListener('mouseleave', handleHorizontalThumbMouseup);
-
     // Add function to the element that should be used as the scrollable area.
     if (contentRef.current) {
       contentRef.current.removeEventListener('wheel', contentAreaScrollUpdate);
@@ -524,17 +517,11 @@ var Scrollbar = function Scrollbar(props) {
       contentAreaScrollUpdate();
     }
     return function () {
-      document.removeEventListener('mousemove', handleThumbMousemove);
-      document.removeEventListener('mouseup', handleThumbMouseup);
-      document.removeEventListener('mouseleave', handleThumbMouseup);
-      document.removeEventListener('mousemove', handleHorizontalThumbMousemove);
-      document.removeEventListener('mouseup', handleHorizontalThumbMouseup);
-      document.removeEventListener('mouseleave', handleHorizontalThumbMouseup);
       if (contentRef.current) {
         contentRef.current.removeEventListener('wheel', contentAreaScrollUpdate);
       }
     };
-  }, [handleThumbMousemove, handleThumbMouseup, handleHorizontalThumbMousemove, handleHorizontalThumbMouseup]);
+  }, [handleThumbMouseMove, handleThumbMouseUp, handleHorizontalThumbMouseMove, handleHorizontalThumbMouseUp]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     id: idRes,
     ref: rootRef,
@@ -567,7 +554,9 @@ var Scrollbar = function Scrollbar(props) {
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "custom-scrollbars__thumb",
     ref: scrollThumbRef,
-    onMouseDown: handleThumbMousedown,
+    onMouseDown: handleThumbMouseDown,
+    onMouseMove: handleThumbMouseMove,
+    onMouseUp: handleThumbMouseUp,
     style: {
       height: "".concat(thumbHeight, "px"),
       cursor: isDragging ? 'grabbing' : 'grab'
@@ -604,7 +593,9 @@ var Scrollbar = function Scrollbar(props) {
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "custom-scrollbars__thumb",
     ref: scrollThumbHorizontalRef,
-    onMouseDown: handleHorizontalThumbMousedown,
+    onMouseDown: handleHorizontalThumbMouseDown,
+    onMouseMove: handleHorizontalThumbMouseMove,
+    onMouseUp: handleHorizontalThumbMouseUp,
     style: {
       width: "".concat(thumbWidth, "px"),
       cursor: isHorizontalDragging ? 'grabbing' : 'grab'

package/lib/css/Tooltip/index.css

@@ -85,17 +85,17 @@
   content: "";
 }
 .tooltip__wrapper.active::before,
-.tooltip__wrapper.active .tooltip__content {
+.tooltip__wrapper.active > .tooltip__content {
   opacity: 1;
   pointer-events: auto;
 }
 .tooltip__wrapper:focus::before,
-.tooltip__wrapper:focus .tooltip__content {
+.tooltip__wrapper:focus > .tooltip__content {
   opacity: 1;
   pointer-events: auto;
 }
 .tooltip__wrapper::before,
-.tooltip__wrapper .tooltip__content {
+.tooltip__wrapper > .tooltip__content {
   backface-visibility: hidden;
   will-change: transform;
   opacity: 0;
@@ -107,7 +107,7 @@
   box-shadow: var(--tooltip-box-shadow);
   transition: 0.1s ease-in-out;
 }
-.tooltip__wrapper .tooltip__content {
+.tooltip__wrapper > .tooltip__content {
   background: var(--tooltip-content-bg);
   border-radius: 4px;
   color: var(--tooltip-content-color);
@@ -120,7 +120,7 @@
   box-sizing: content-box;
   line-height: var(--tooltip-content-line-height);
 }
-.tooltip__wrapper .tooltip__content img {
+.tooltip__wrapper > .tooltip__content img {
   height: auto !important;
   margin: 0.5rem 0;
 }
@@ -129,24 +129,24 @@
   height: var(--tooltip-arrow-height);
   width: var(--tooltip-arrow-width);
 }
-.tooltip__wrapper[data-microtip-position|=top] .tooltip__content {
+.tooltip__wrapper[data-microtip-position|=top] > .tooltip__content {
   margin-bottom: var(--tooltip-arrow-height);
 }
 .tooltip__wrapper[data-microtip-position|=top]::before {
   bottom: calc(100% + var(--tooltip-arrow-height));
   left: calc(50% - var(--tooltip-arrow-width) / 2);
 }
-.tooltip__wrapper[data-microtip-position|=top] .tooltip__content {
+.tooltip__wrapper[data-microtip-position|=top] > .tooltip__content {
   bottom: calc(100% + var(--tooltip-arrow-height));
   left: 50%;
   transform: translateX(-50%);
 }
-.tooltip__wrapper[data-microtip-position=top-left] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=top-left] > .tooltip__content {
   bottom: calc(100% + var(--tooltip-arrow-height));
   left: 50%;
   transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
 }
-.tooltip__wrapper[data-microtip-position=top-right] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=top-right] > .tooltip__content {
   bottom: calc(100% + var(--tooltip-arrow-height));
   left: 50%;
   transform: translateX(calc(0% - var(--tooltip-arrow-width)));
@@ -158,7 +158,7 @@
   margin-top: 5px;
   margin-bottom: 0;
 }
-.tooltip__wrapper[data-microtip-position|=bottom] .tooltip__content {
+.tooltip__wrapper[data-microtip-position|=bottom] > .tooltip__content {
   margin-top: var(--tooltip-arrow-height);
 }
 .tooltip__wrapper[data-microtip-position|=bottom]::before {
@@ -166,26 +166,26 @@
   top: calc(100% + 1px);
   left: calc(50% - var(--tooltip-arrow-width) / 2);
 }
-.tooltip__wrapper[data-microtip-position|=bottom] .tooltip__content {
+.tooltip__wrapper[data-microtip-position|=bottom] > .tooltip__content {
   bottom: auto;
   top: calc(100% + var(--tooltip-arrow-height));
   left: 50%;
   transform: translateX(-50%);
 }
-.tooltip__wrapper[data-microtip-position=bottom-left] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=bottom-left] > .tooltip__content {
   bottom: auto;
   top: calc(100% + var(--tooltip-arrow-height));
   left: 50%;
   transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
 }
-.tooltip__wrapper[data-microtip-position=bottom-right] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=bottom-right] > .tooltip__content {
   bottom: auto;
   top: calc(100% + var(--tooltip-arrow-height));
   left: 50%;
   transform: translateX(calc(0% - var(--tooltip-arrow-width)));
 }
 .tooltip__wrapper[data-microtip-position=left]::before,
-.tooltip__wrapper[data-microtip-position=left] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=left] > .tooltip__content {
   bottom: auto;
   left: auto;
   right: 100%;
@@ -199,11 +199,11 @@
   margin-right: 5px;
   margin-bottom: 0;
 }
-.tooltip__wrapper[data-microtip-position=left] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=left] > .tooltip__content {
   margin-right: 10px;
 }
 .tooltip__wrapper[data-microtip-position=right]::before,
-.tooltip__wrapper[data-microtip-position=right] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=right] > .tooltip__content {
   bottom: auto;
   left: 100%;
   top: 50%;
@@ -216,7 +216,7 @@
   margin-bottom: 0;
   margin-left: 5px;
 }
-.tooltip__wrapper[data-microtip-position=right] .tooltip__content {
+.tooltip__wrapper[data-microtip-position=right] > .tooltip__content {
   margin-left: 10px;
 }
 .tooltip__wrapper[data-microtip-size=auto].tooltip__content {

package/lib/esm/RangeSlider/index.tsx

@@ -2,7 +2,6 @@ import React, { useId, useEffect, useState, useRef } from 'react';
 
 import Input from 'funda-input';
 
-
 type RangeSliderProps = {
     wrapperClassName?: string;
     controlClassName?: string;
@@ -131,7 +130,7 @@ const RangeSlider = (props: RangeSliderProps) => {
                     type="text"
                     id={idRes + '-min'}
                     name={minName}
-                    value={minValue.toString()}  //  Convert to a string to ensure that 0 can also be filled
+                    value={typeof minValue !== 'undefined' ? minValue.toString() : min}  //  Convert to a string to ensure that 0 can also be filled
                 />
 
                 <Input
@@ -142,7 +141,7 @@ const RangeSlider = (props: RangeSliderProps) => {
                     type="text"
                     id={idRes + '-max'}
                     name={maxName}
-                    value={maxValue.toString()}  //  Convert to a string to ensure that 0 can also be filled
+                    value={typeof maxValue !== 'undefined' ? maxValue.toString() : max}  //  Convert to a string to ensure that 0 can also be filled
                 />                
 
 

package/lib/esm/Scrollbar/index.tsx

@@ -175,7 +175,7 @@ const Scrollbar = (props: ScrollbarProps) => {
         thumb.style.top = `${newTop}px`;
     }, []);
 
-    const handleThumbMousedown = useCallback((e: React.MouseEvent) => {
+    const handleThumbMouseDown = useCallback((e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
         setScrollStartPosition(e.clientY);
@@ -183,40 +183,37 @@ const Scrollbar = (props: ScrollbarProps) => {
         setIsDragging(true);
     }, []);
 
-    const handleThumbMouseup = useCallback(
-        (e: React.MouseEvent) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (isDragging) {
-                setIsDragging(false);
-            }
-        },
-        [isDragging]
-    ) as any;
+    const handleThumbMouseMove = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDragging && contentRef.current && scrollStartPosition) {
+            const {
+                scrollHeight: contentScrollHeight,
+                offsetHeight: contentOffsetHeight,
+            } = contentRef.current;
+
+            const deltaY =
+                (e.clientY - scrollStartPosition) *
+                (contentOffsetHeight / thumbHeight);
+            const newScrollTop = Math.min(
+                initialScrollTop + deltaY,
+                contentScrollHeight - contentOffsetHeight
+            );
+
+            contentRef.current.scrollTop = newScrollTop;
+        }
+    }, [isDragging, scrollStartPosition, thumbHeight]);
 
-    const handleThumbMousemove = useCallback(
-        (e: React.MouseEvent) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (isDragging && contentRef.current && scrollStartPosition) {
-                const {
-                    scrollHeight: contentScrollHeight,
-                    offsetHeight: contentOffsetHeight,
-                } = contentRef.current;
 
-                const deltaY =
-                    (e.clientY - scrollStartPosition) *
-                    (contentOffsetHeight / thumbHeight);
-                const newScrollTop = Math.min(
-                    initialScrollTop + deltaY,
-                    contentScrollHeight - contentOffsetHeight
-                );
+    const handleThumbMouseUp = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDragging) {
+            setIsDragging(false);
+        }
+    }, [isDragging]);
+
 
-                contentRef.current.scrollTop = newScrollTop;
-            }
-        },
-        [isDragging, scrollStartPosition, thumbHeight]
-    ) as any;
 
 
     // Horizontal  --> functions
@@ -300,7 +297,7 @@ const Scrollbar = (props: ScrollbarProps) => {
         thumb.style.left = `${newLeft}px`;
     }, []);
 
-    const handleHorizontalThumbMousedown = useCallback((e: React.MouseEvent) => {
+    const handleHorizontalThumbMouseDown = useCallback((e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
         setScrollHorizontalStartPosition(e.clientX);
@@ -308,7 +305,7 @@ const Scrollbar = (props: ScrollbarProps) => {
         setIsHorizontalDragging(true);
     }, []);
 
-    const handleHorizontalThumbMouseup = useCallback(
+    const handleHorizontalThumbMouseUp = useCallback(
         (e: React.MouseEvent) => {
             e.preventDefault();
             e.stopPropagation();
@@ -317,9 +314,9 @@ const Scrollbar = (props: ScrollbarProps) => {
             }
         },
         [isHorizontalDragging]
-    ) as any;
+    );
 
-    const handleHorizontalThumbMousemove = useCallback(
+    const handleHorizontalThumbMouseMove = useCallback(
         (e: React.MouseEvent) => {
             e.preventDefault();
             e.stopPropagation();
@@ -341,7 +338,7 @@ const Scrollbar = (props: ScrollbarProps) => {
             }
         },
         [isHorizontalDragging, scrollHorizontalStartPosition, thumbWidth]
-    ) as any;
+    );
 
 
 
@@ -405,13 +402,6 @@ const Scrollbar = (props: ScrollbarProps) => {
 
     // Listen for mouse events to handle scrolling by dragging the thumb
     useEffect(() => {
-        document.addEventListener('mousemove', handleThumbMousemove);
-        document.addEventListener('mouseup', handleThumbMouseup);
-        document.addEventListener('mouseleave', handleThumbMouseup);
-
-        document.addEventListener('mousemove', handleHorizontalThumbMousemove);
-        document.addEventListener('mouseup', handleHorizontalThumbMouseup);
-        document.addEventListener('mouseleave', handleHorizontalThumbMouseup);
 
 
         // Add function to the element that should be used as the scrollable area.
@@ -422,15 +412,7 @@ const Scrollbar = (props: ScrollbarProps) => {
         }
 
 
-
         return () => {
-            document.removeEventListener('mousemove', handleThumbMousemove);
-            document.removeEventListener('mouseup', handleThumbMouseup);
-            document.removeEventListener('mouseleave', handleThumbMouseup);
-
-            document.removeEventListener('mousemove', handleHorizontalThumbMousemove);
-            document.removeEventListener('mouseup', handleHorizontalThumbMouseup);
-            document.removeEventListener('mouseleave', handleHorizontalThumbMouseup);
 
             if (contentRef.current) {
                 contentRef.current.removeEventListener('wheel', contentAreaScrollUpdate);
@@ -440,7 +422,7 @@ const Scrollbar = (props: ScrollbarProps) => {
         };
 
 
-    }, [handleThumbMousemove, handleThumbMouseup, handleHorizontalThumbMousemove, handleHorizontalThumbMouseup]);
+    }, [handleThumbMouseMove, handleThumbMouseUp, handleHorizontalThumbMouseMove, handleHorizontalThumbMouseUp]);
 
 
     return (
@@ -455,6 +437,7 @@ const Scrollbar = (props: ScrollbarProps) => {
                     {children}
                 </div>
 
+
                 {/* SCROLLBAR */}
                 {/*
                 !!! IMPORTANT:
@@ -479,7 +462,9 @@ const Scrollbar = (props: ScrollbarProps) => {
                         <div
                             className="custom-scrollbars__thumb"
                             ref={scrollThumbRef}
-                            onMouseDown={handleThumbMousedown}
+                            onMouseDown={handleThumbMouseDown}
+                            onMouseMove={handleThumbMouseMove}
+                            onMouseUp={handleThumbMouseUp}
                             style={{
                                 height: `${thumbHeight}px`,
                                 cursor: isDragging ? 'grabbing' : 'grab',
@@ -520,7 +505,9 @@ const Scrollbar = (props: ScrollbarProps) => {
                         <div
                             className="custom-scrollbars__thumb"
                             ref={scrollThumbHorizontalRef}
-                            onMouseDown={handleHorizontalThumbMousedown}
+                            onMouseDown={handleHorizontalThumbMouseDown}
+                            onMouseMove={handleHorizontalThumbMouseMove}
+                            onMouseUp={handleHorizontalThumbMouseUp}
                             style={{
                                 width: `${thumbWidth}px`,
                                 cursor: isHorizontalDragging ? 'grabbing' : 'grab',

package/lib/esm/Tooltip/index.scss

@@ -46,7 +46,7 @@
     &.active {
 
         &::before,
-        .tooltip__content {
+        > .tooltip__content {
             opacity: 1;
             pointer-events: auto;
         }
@@ -55,7 +55,7 @@
     &:focus {
 
         &::before,
-        .tooltip__content {
+        > .tooltip__content {
             opacity: 1;
             pointer-events: auto;
         }
@@ -63,7 +63,7 @@
 
 
     &::before,
-    .tooltip__content {
+    > .tooltip__content {
         backface-visibility: hidden;
         will-change: transform;
         opacity: 0;
@@ -85,7 +85,7 @@
 	---------------------------
 	*/
 
-    .tooltip__content {
+    > .tooltip__content {
         background: var(--tooltip-content-bg);
         border-radius: 4px;
         color: var(--tooltip-content-color);
@@ -120,7 +120,7 @@
             width: var(--tooltip-arrow-width);
         }
 
-        .tooltip__content {
+        > .tooltip__content {
             margin-bottom: var(--tooltip-arrow-height);
         }
 
@@ -129,7 +129,7 @@
             left: calc(50% - var(--tooltip-arrow-width)/2);
         }
 
-        .tooltip__content {
+        > .tooltip__content {
             bottom: calc(100% + var(--tooltip-arrow-height));
             left: 50%;
             transform: translateX(-50%);
@@ -144,7 +144,7 @@
     */
 
     &[data-microtip-position="top-left"] {
-        .tooltip__content {
+        > .tooltip__content {
             bottom: calc(100% + var(--tooltip-arrow-height));
             left: 50%;
             transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
@@ -161,7 +161,7 @@
     */
 
     &[data-microtip-position="top-right"] {
-        .tooltip__content {
+        > .tooltip__content {
             bottom: calc(100% + var(--tooltip-arrow-height));
             left: 50%;
             transform: translateX(calc(0% - var(--tooltip-arrow-width)));
@@ -184,7 +184,7 @@
             margin-bottom: 0;
         }
 
-        .tooltip__content {
+        > .tooltip__content {
             margin-top: var(--tooltip-arrow-height);
         }
 
@@ -194,7 +194,7 @@
             left: calc(50% - var(--tooltip-arrow-width)/2);
         }
 
-        .tooltip__content {
+        > .tooltip__content {
             bottom: auto;
             top: calc(100% + var(--tooltip-arrow-height));
             left: 50%;
@@ -211,7 +211,7 @@
 
 
     &[data-microtip-position="bottom-left"] {
-        .tooltip__content {
+        > .tooltip__content {
             bottom: auto;
             top: calc(100% + var(--tooltip-arrow-height));
             left: 50%;
@@ -227,7 +227,7 @@
 
 
     &[data-microtip-position="bottom-right"] {
-        .tooltip__content {
+        > .tooltip__content {
             bottom: auto;
             top: calc(100% + var(--tooltip-arrow-height));
             left: 50%;
@@ -244,7 +244,7 @@
     &[data-microtip-position="left"] {
 
         &::before,
-        .tooltip__content {
+        > .tooltip__content {
             bottom: auto;
             left: auto;
             right: 100%;
@@ -260,7 +260,7 @@
             margin-bottom: 0;
         }
 
-        .tooltip__content {
+        > .tooltip__content {
             margin-right: 10px;
         }
     }
@@ -275,7 +275,7 @@
     &[data-microtip-position="right"] {
 
         &::before,
-        .tooltip__content {
+        > .tooltip__content {
             bottom: auto;
             left: 100%;
             top: 50%;
@@ -290,7 +290,7 @@
             margin-left: 5px;
         }
 
-        .tooltip__content {
+        > .tooltip__content {
             margin-left: 10px;
         }
     }

package/package.json

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