@m4l/components 0.0.6 → 0.0.9

package/dist/simplebar.js

@@ -0,0 +1,849 @@
+import require$$0, { useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./core-js.js";
+import { l as lodash_throttle, a as lodash_debounce, b as lodash_memoize } from "./lodash.js";
+import { R as ResizeObserver } from "./juggle.js";
+import { c as canUseDom } from "./can-use-dom.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+function getElementWindow(element) {
+  if (!element || !element.ownerDocument || !element.ownerDocument.defaultView) {
+    return window;
+  }
+  return element.ownerDocument.defaultView;
+}
+function getElementDocument(element) {
+  if (!element || !element.ownerDocument) {
+    return document;
+  }
+  return element.ownerDocument;
+}
+var cachedScrollbarWidth = null;
+var cachedDevicePixelRatio = null;
+if (canUseDom) {
+  window.addEventListener("resize", function() {
+    if (cachedDevicePixelRatio !== window.devicePixelRatio) {
+      cachedDevicePixelRatio = window.devicePixelRatio;
+      cachedScrollbarWidth = null;
+    }
+  });
+}
+function scrollbarWidth(el) {
+  if (cachedScrollbarWidth === null) {
+    var document2 = getElementDocument(el);
+    if (typeof document2 === "undefined") {
+      cachedScrollbarWidth = 0;
+      return cachedScrollbarWidth;
+    }
+    var body = document2.body;
+    var box = document2.createElement("div");
+    box.classList.add("simplebar-hide-scrollbar");
+    body.appendChild(box);
+    var width = box.getBoundingClientRect().right;
+    body.removeChild(box);
+    cachedScrollbarWidth = width;
+  }
+  return cachedScrollbarWidth;
+}
+var SimpleBar$1 = /* @__PURE__ */ function() {
+  function SimpleBar2(element, options) {
+    var _this = this;
+    this.onScroll = function() {
+      var elWindow = getElementWindow(_this.el);
+      if (!_this.scrollXTicking) {
+        elWindow.requestAnimationFrame(_this.scrollX);
+        _this.scrollXTicking = true;
+      }
+      if (!_this.scrollYTicking) {
+        elWindow.requestAnimationFrame(_this.scrollY);
+        _this.scrollYTicking = true;
+      }
+    };
+    this.scrollX = function() {
+      if (_this.axis.x.isOverflowing) {
+        _this.showScrollbar("x");
+        _this.positionScrollbar("x");
+      }
+      _this.scrollXTicking = false;
+    };
+    this.scrollY = function() {
+      if (_this.axis.y.isOverflowing) {
+        _this.showScrollbar("y");
+        _this.positionScrollbar("y");
+      }
+      _this.scrollYTicking = false;
+    };
+    this.onMouseEnter = function() {
+      _this.showScrollbar("x");
+      _this.showScrollbar("y");
+    };
+    this.onMouseMove = function(e) {
+      _this.mouseX = e.clientX;
+      _this.mouseY = e.clientY;
+      if (_this.axis.x.isOverflowing || _this.axis.x.forceVisible) {
+        _this.onMouseMoveForAxis("x");
+      }
+      if (_this.axis.y.isOverflowing || _this.axis.y.forceVisible) {
+        _this.onMouseMoveForAxis("y");
+      }
+    };
+    this.onMouseLeave = function() {
+      _this.onMouseMove.cancel();
+      if (_this.axis.x.isOverflowing || _this.axis.x.forceVisible) {
+        _this.onMouseLeaveForAxis("x");
+      }
+      if (_this.axis.y.isOverflowing || _this.axis.y.forceVisible) {
+        _this.onMouseLeaveForAxis("y");
+      }
+      _this.mouseX = -1;
+      _this.mouseY = -1;
+    };
+    this.onWindowResize = function() {
+      _this.scrollbarWidth = _this.getScrollbarWidth();
+      _this.hideNativeScrollbar();
+    };
+    this.hideScrollbars = function() {
+      _this.axis.x.track.rect = _this.axis.x.track.el.getBoundingClientRect();
+      _this.axis.y.track.rect = _this.axis.y.track.el.getBoundingClientRect();
+      if (!_this.isWithinBounds(_this.axis.y.track.rect)) {
+        _this.axis.y.scrollbar.el.classList.remove(_this.classNames.visible);
+        _this.axis.y.isVisible = false;
+      }
+      if (!_this.isWithinBounds(_this.axis.x.track.rect)) {
+        _this.axis.x.scrollbar.el.classList.remove(_this.classNames.visible);
+        _this.axis.x.isVisible = false;
+      }
+    };
+    this.onPointerEvent = function(e) {
+      var isWithinTrackXBounds, isWithinTrackYBounds;
+      _this.axis.x.track.rect = _this.axis.x.track.el.getBoundingClientRect();
+      _this.axis.y.track.rect = _this.axis.y.track.el.getBoundingClientRect();
+      if (_this.axis.x.isOverflowing || _this.axis.x.forceVisible) {
+        isWithinTrackXBounds = _this.isWithinBounds(_this.axis.x.track.rect);
+      }
+      if (_this.axis.y.isOverflowing || _this.axis.y.forceVisible) {
+        isWithinTrackYBounds = _this.isWithinBounds(_this.axis.y.track.rect);
+      }
+      if (isWithinTrackXBounds || isWithinTrackYBounds) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.type === "mousedown") {
+          if (isWithinTrackXBounds) {
+            _this.axis.x.scrollbar.rect = _this.axis.x.scrollbar.el.getBoundingClientRect();
+            if (_this.isWithinBounds(_this.axis.x.scrollbar.rect)) {
+              _this.onDragStart(e, "x");
+            } else {
+              _this.onTrackClick(e, "x");
+            }
+          }
+          if (isWithinTrackYBounds) {
+            _this.axis.y.scrollbar.rect = _this.axis.y.scrollbar.el.getBoundingClientRect();
+            if (_this.isWithinBounds(_this.axis.y.scrollbar.rect)) {
+              _this.onDragStart(e, "y");
+            } else {
+              _this.onTrackClick(e, "y");
+            }
+          }
+        }
+      }
+    };
+    this.drag = function(e) {
+      var eventOffset;
+      var track = _this.axis[_this.draggedAxis].track;
+      var trackSize = track.rect[_this.axis[_this.draggedAxis].sizeAttr];
+      var scrollbar = _this.axis[_this.draggedAxis].scrollbar;
+      var contentSize = _this.contentWrapperEl[_this.axis[_this.draggedAxis].scrollSizeAttr];
+      var hostSize = parseInt(_this.elStyles[_this.axis[_this.draggedAxis].sizeAttr], 10);
+      e.preventDefault();
+      e.stopPropagation();
+      if (_this.draggedAxis === "y") {
+        eventOffset = e.pageY;
+      } else {
+        eventOffset = e.pageX;
+      }
+      var dragPos = eventOffset - track.rect[_this.axis[_this.draggedAxis].offsetAttr] - _this.axis[_this.draggedAxis].dragOffset;
+      var dragPerc = dragPos / (trackSize - scrollbar.size);
+      var scrollPos = dragPerc * (contentSize - hostSize);
+      if (_this.draggedAxis === "x") {
+        scrollPos = _this.isRtl && SimpleBar2.getRtlHelpers().isRtlScrollbarInverted ? scrollPos - (trackSize + scrollbar.size) : scrollPos;
+        scrollPos = _this.isRtl && SimpleBar2.getRtlHelpers().isRtlScrollingInverted ? -scrollPos : scrollPos;
+      }
+      _this.contentWrapperEl[_this.axis[_this.draggedAxis].scrollOffsetAttr] = scrollPos;
+    };
+    this.onEndDrag = function(e) {
+      var elDocument = getElementDocument(_this.el);
+      var elWindow = getElementWindow(_this.el);
+      e.preventDefault();
+      e.stopPropagation();
+      _this.el.classList.remove(_this.classNames.dragging);
+      elDocument.removeEventListener("mousemove", _this.drag, true);
+      elDocument.removeEventListener("mouseup", _this.onEndDrag, true);
+      _this.removePreventClickId = elWindow.setTimeout(function() {
+        elDocument.removeEventListener("click", _this.preventClick, true);
+        elDocument.removeEventListener("dblclick", _this.preventClick, true);
+        _this.removePreventClickId = null;
+      });
+    };
+    this.preventClick = function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    this.el = element;
+    this.minScrollbarWidth = 20;
+    this.options = Object.assign({}, SimpleBar2.defaultOptions, options);
+    this.classNames = Object.assign({}, SimpleBar2.defaultOptions.classNames, this.options.classNames);
+    this.axis = {
+      x: {
+        scrollOffsetAttr: "scrollLeft",
+        sizeAttr: "width",
+        scrollSizeAttr: "scrollWidth",
+        offsetSizeAttr: "offsetWidth",
+        offsetAttr: "left",
+        overflowAttr: "overflowX",
+        dragOffset: 0,
+        isOverflowing: true,
+        isVisible: false,
+        forceVisible: false,
+        track: {},
+        scrollbar: {}
+      },
+      y: {
+        scrollOffsetAttr: "scrollTop",
+        sizeAttr: "height",
+        scrollSizeAttr: "scrollHeight",
+        offsetSizeAttr: "offsetHeight",
+        offsetAttr: "top",
+        overflowAttr: "overflowY",
+        dragOffset: 0,
+        isOverflowing: true,
+        isVisible: false,
+        forceVisible: false,
+        track: {},
+        scrollbar: {}
+      }
+    };
+    this.removePreventClickId = null;
+    if (SimpleBar2.instances.has(this.el)) {
+      return;
+    }
+    this.recalculate = lodash_throttle(this.recalculate.bind(this), 64);
+    this.onMouseMove = lodash_throttle(this.onMouseMove.bind(this), 64);
+    this.hideScrollbars = lodash_debounce(this.hideScrollbars.bind(this), this.options.timeout);
+    this.onWindowResize = lodash_debounce(this.onWindowResize.bind(this), 64, {
+      leading: true
+    });
+    SimpleBar2.getRtlHelpers = lodash_memoize(SimpleBar2.getRtlHelpers);
+    this.init();
+  }
+  SimpleBar2.getRtlHelpers = function getRtlHelpers() {
+    var dummyDiv = document.createElement("div");
+    dummyDiv.innerHTML = '<div class="hs-dummy-scrollbar-size"><div style="height: 200%; width: 200%; margin: 10px 0;"></div></div>';
+    var scrollbarDummyEl = dummyDiv.firstElementChild;
+    document.body.appendChild(scrollbarDummyEl);
+    var dummyContainerChild = scrollbarDummyEl.firstElementChild;
+    scrollbarDummyEl.scrollLeft = 0;
+    var dummyContainerOffset = SimpleBar2.getOffset(scrollbarDummyEl);
+    var dummyContainerChildOffset = SimpleBar2.getOffset(dummyContainerChild);
+    scrollbarDummyEl.scrollLeft = 999;
+    var dummyContainerScrollOffsetAfterScroll = SimpleBar2.getOffset(dummyContainerChild);
+    return {
+      isRtlScrollingInverted: dummyContainerOffset.left !== dummyContainerChildOffset.left && dummyContainerChildOffset.left - dummyContainerScrollOffsetAfterScroll.left !== 0,
+      isRtlScrollbarInverted: dummyContainerOffset.left !== dummyContainerChildOffset.left
+    };
+  };
+  SimpleBar2.getOffset = function getOffset(el) {
+    var rect = el.getBoundingClientRect();
+    var elDocument = getElementDocument(el);
+    var elWindow = getElementWindow(el);
+    return {
+      top: rect.top + (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
+      left: rect.left + (elWindow.pageXOffset || elDocument.documentElement.scrollLeft)
+    };
+  };
+  var _proto = SimpleBar2.prototype;
+  _proto.init = function init() {
+    SimpleBar2.instances.set(this.el, this);
+    if (canUseDom) {
+      this.initDOM();
+      this.setAccessibilityAttributes();
+      this.scrollbarWidth = this.getScrollbarWidth();
+      this.recalculate();
+      this.initListeners();
+    }
+  };
+  _proto.initDOM = function initDOM() {
+    var _this2 = this;
+    if (Array.prototype.filter.call(this.el.children, function(child) {
+      return child.classList.contains(_this2.classNames.wrapper);
+    }).length) {
+      this.wrapperEl = this.el.querySelector("." + this.classNames.wrapper);
+      this.contentWrapperEl = this.options.scrollableNode || this.el.querySelector("." + this.classNames.contentWrapper);
+      this.contentEl = this.options.contentNode || this.el.querySelector("." + this.classNames.contentEl);
+      this.offsetEl = this.el.querySelector("." + this.classNames.offset);
+      this.maskEl = this.el.querySelector("." + this.classNames.mask);
+      this.placeholderEl = this.findChild(this.wrapperEl, "." + this.classNames.placeholder);
+      this.heightAutoObserverWrapperEl = this.el.querySelector("." + this.classNames.heightAutoObserverWrapperEl);
+      this.heightAutoObserverEl = this.el.querySelector("." + this.classNames.heightAutoObserverEl);
+      this.axis.x.track.el = this.findChild(this.el, "." + this.classNames.track + "." + this.classNames.horizontal);
+      this.axis.y.track.el = this.findChild(this.el, "." + this.classNames.track + "." + this.classNames.vertical);
+    } else {
+      this.wrapperEl = document.createElement("div");
+      this.contentWrapperEl = document.createElement("div");
+      this.offsetEl = document.createElement("div");
+      this.maskEl = document.createElement("div");
+      this.contentEl = document.createElement("div");
+      this.placeholderEl = document.createElement("div");
+      this.heightAutoObserverWrapperEl = document.createElement("div");
+      this.heightAutoObserverEl = document.createElement("div");
+      this.wrapperEl.classList.add(this.classNames.wrapper);
+      this.contentWrapperEl.classList.add(this.classNames.contentWrapper);
+      this.offsetEl.classList.add(this.classNames.offset);
+      this.maskEl.classList.add(this.classNames.mask);
+      this.contentEl.classList.add(this.classNames.contentEl);
+      this.placeholderEl.classList.add(this.classNames.placeholder);
+      this.heightAutoObserverWrapperEl.classList.add(this.classNames.heightAutoObserverWrapperEl);
+      this.heightAutoObserverEl.classList.add(this.classNames.heightAutoObserverEl);
+      while (this.el.firstChild) {
+        this.contentEl.appendChild(this.el.firstChild);
+      }
+      this.contentWrapperEl.appendChild(this.contentEl);
+      this.offsetEl.appendChild(this.contentWrapperEl);
+      this.maskEl.appendChild(this.offsetEl);
+      this.heightAutoObserverWrapperEl.appendChild(this.heightAutoObserverEl);
+      this.wrapperEl.appendChild(this.heightAutoObserverWrapperEl);
+      this.wrapperEl.appendChild(this.maskEl);
+      this.wrapperEl.appendChild(this.placeholderEl);
+      this.el.appendChild(this.wrapperEl);
+    }
+    if (!this.axis.x.track.el || !this.axis.y.track.el) {
+      var track = document.createElement("div");
+      var scrollbar = document.createElement("div");
+      track.classList.add(this.classNames.track);
+      scrollbar.classList.add(this.classNames.scrollbar);
+      track.appendChild(scrollbar);
+      this.axis.x.track.el = track.cloneNode(true);
+      this.axis.x.track.el.classList.add(this.classNames.horizontal);
+      this.axis.y.track.el = track.cloneNode(true);
+      this.axis.y.track.el.classList.add(this.classNames.vertical);
+      this.el.appendChild(this.axis.x.track.el);
+      this.el.appendChild(this.axis.y.track.el);
+    }
+    this.axis.x.scrollbar.el = this.axis.x.track.el.querySelector("." + this.classNames.scrollbar);
+    this.axis.y.scrollbar.el = this.axis.y.track.el.querySelector("." + this.classNames.scrollbar);
+    if (!this.options.autoHide) {
+      this.axis.x.scrollbar.el.classList.add(this.classNames.visible);
+      this.axis.y.scrollbar.el.classList.add(this.classNames.visible);
+    }
+    this.el.setAttribute("data-simplebar", "init");
+  };
+  _proto.setAccessibilityAttributes = function setAccessibilityAttributes() {
+    var ariaLabel = this.options.ariaLabel || "scrollable content";
+    this.contentWrapperEl.setAttribute("tabindex", "0");
+    this.contentWrapperEl.setAttribute("role", "region");
+    this.contentWrapperEl.setAttribute("aria-label", ariaLabel);
+  };
+  _proto.initListeners = function initListeners() {
+    var _this3 = this;
+    var elWindow = getElementWindow(this.el);
+    if (this.options.autoHide) {
+      this.el.addEventListener("mouseenter", this.onMouseEnter);
+    }
+    ["mousedown", "click", "dblclick"].forEach(function(e) {
+      _this3.el.addEventListener(e, _this3.onPointerEvent, true);
+    });
+    ["touchstart", "touchend", "touchmove"].forEach(function(e) {
+      _this3.el.addEventListener(e, _this3.onPointerEvent, {
+        capture: true,
+        passive: true
+      });
+    });
+    this.el.addEventListener("mousemove", this.onMouseMove);
+    this.el.addEventListener("mouseleave", this.onMouseLeave);
+    this.contentWrapperEl.addEventListener("scroll", this.onScroll);
+    elWindow.addEventListener("resize", this.onWindowResize);
+    var resizeObserverStarted = false;
+    var resizeObserver = elWindow.ResizeObserver || ResizeObserver;
+    this.resizeObserver = new resizeObserver(function() {
+      if (!resizeObserverStarted)
+        return;
+      _this3.recalculate();
+    });
+    this.resizeObserver.observe(this.el);
+    this.resizeObserver.observe(this.contentEl);
+    elWindow.requestAnimationFrame(function() {
+      resizeObserverStarted = true;
+    });
+    this.mutationObserver = new elWindow.MutationObserver(this.recalculate);
+    this.mutationObserver.observe(this.contentEl, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  };
+  _proto.recalculate = function recalculate() {
+    var elWindow = getElementWindow(this.el);
+    this.elStyles = elWindow.getComputedStyle(this.el);
+    this.isRtl = this.elStyles.direction === "rtl";
+    var isHeightAuto = this.heightAutoObserverEl.offsetHeight <= 1;
+    var isWidthAuto = this.heightAutoObserverEl.offsetWidth <= 1;
+    var contentElOffsetWidth = this.contentEl.offsetWidth;
+    var contentWrapperElOffsetWidth = this.contentWrapperEl.offsetWidth;
+    var elOverflowX = this.elStyles.overflowX;
+    var elOverflowY = this.elStyles.overflowY;
+    this.contentEl.style.padding = this.elStyles.paddingTop + " " + this.elStyles.paddingRight + " " + this.elStyles.paddingBottom + " " + this.elStyles.paddingLeft;
+    this.wrapperEl.style.margin = "-" + this.elStyles.paddingTop + " -" + this.elStyles.paddingRight + " -" + this.elStyles.paddingBottom + " -" + this.elStyles.paddingLeft;
+    var contentElScrollHeight = this.contentEl.scrollHeight;
+    var contentElScrollWidth = this.contentEl.scrollWidth;
+    this.contentWrapperEl.style.height = isHeightAuto ? "auto" : "100%";
+    this.placeholderEl.style.width = isWidthAuto ? contentElOffsetWidth + "px" : "auto";
+    this.placeholderEl.style.height = contentElScrollHeight + "px";
+    var contentWrapperElOffsetHeight = this.contentWrapperEl.offsetHeight;
+    this.axis.x.isOverflowing = contentElScrollWidth > contentElOffsetWidth;
+    this.axis.y.isOverflowing = contentElScrollHeight > contentWrapperElOffsetHeight;
+    this.axis.x.isOverflowing = elOverflowX === "hidden" ? false : this.axis.x.isOverflowing;
+    this.axis.y.isOverflowing = elOverflowY === "hidden" ? false : this.axis.y.isOverflowing;
+    this.axis.x.forceVisible = this.options.forceVisible === "x" || this.options.forceVisible === true;
+    this.axis.y.forceVisible = this.options.forceVisible === "y" || this.options.forceVisible === true;
+    this.hideNativeScrollbar();
+    var offsetForXScrollbar = this.axis.x.isOverflowing ? this.scrollbarWidth : 0;
+    var offsetForYScrollbar = this.axis.y.isOverflowing ? this.scrollbarWidth : 0;
+    this.axis.x.isOverflowing = this.axis.x.isOverflowing && contentElScrollWidth > contentWrapperElOffsetWidth - offsetForYScrollbar;
+    this.axis.y.isOverflowing = this.axis.y.isOverflowing && contentElScrollHeight > contentWrapperElOffsetHeight - offsetForXScrollbar;
+    this.axis.x.scrollbar.size = this.getScrollbarSize("x");
+    this.axis.y.scrollbar.size = this.getScrollbarSize("y");
+    this.axis.x.scrollbar.el.style.width = this.axis.x.scrollbar.size + "px";
+    this.axis.y.scrollbar.el.style.height = this.axis.y.scrollbar.size + "px";
+    this.positionScrollbar("x");
+    this.positionScrollbar("y");
+    this.toggleTrackVisibility("x");
+    this.toggleTrackVisibility("y");
+  };
+  _proto.getScrollbarSize = function getScrollbarSize(axis) {
+    if (axis === void 0) {
+      axis = "y";
+    }
+    if (!this.axis[axis].isOverflowing) {
+      return 0;
+    }
+    var contentSize = this.contentEl[this.axis[axis].scrollSizeAttr];
+    var trackSize = this.axis[axis].track.el[this.axis[axis].offsetSizeAttr];
+    var scrollbarSize;
+    var scrollbarRatio = trackSize / contentSize;
+    scrollbarSize = Math.max(~~(scrollbarRatio * trackSize), this.options.scrollbarMinSize);
+    if (this.options.scrollbarMaxSize) {
+      scrollbarSize = Math.min(scrollbarSize, this.options.scrollbarMaxSize);
+    }
+    return scrollbarSize;
+  };
+  _proto.positionScrollbar = function positionScrollbar(axis) {
+    if (axis === void 0) {
+      axis = "y";
+    }
+    if (!this.axis[axis].isOverflowing) {
+      return;
+    }
+    var contentSize = this.contentWrapperEl[this.axis[axis].scrollSizeAttr];
+    var trackSize = this.axis[axis].track.el[this.axis[axis].offsetSizeAttr];
+    var hostSize = parseInt(this.elStyles[this.axis[axis].sizeAttr], 10);
+    var scrollbar = this.axis[axis].scrollbar;
+    var scrollOffset = this.contentWrapperEl[this.axis[axis].scrollOffsetAttr];
+    scrollOffset = axis === "x" && this.isRtl && SimpleBar2.getRtlHelpers().isRtlScrollingInverted ? -scrollOffset : scrollOffset;
+    var scrollPourcent = scrollOffset / (contentSize - hostSize);
+    var handleOffset = ~~((trackSize - scrollbar.size) * scrollPourcent);
+    handleOffset = axis === "x" && this.isRtl && SimpleBar2.getRtlHelpers().isRtlScrollbarInverted ? handleOffset + (trackSize - scrollbar.size) : handleOffset;
+    scrollbar.el.style.transform = axis === "x" ? "translate3d(" + handleOffset + "px, 0, 0)" : "translate3d(0, " + handleOffset + "px, 0)";
+  };
+  _proto.toggleTrackVisibility = function toggleTrackVisibility(axis) {
+    if (axis === void 0) {
+      axis = "y";
+    }
+    var track = this.axis[axis].track.el;
+    var scrollbar = this.axis[axis].scrollbar.el;
+    if (this.axis[axis].isOverflowing || this.axis[axis].forceVisible) {
+      track.style.visibility = "visible";
+      this.contentWrapperEl.style[this.axis[axis].overflowAttr] = "scroll";
+    } else {
+      track.style.visibility = "hidden";
+      this.contentWrapperEl.style[this.axis[axis].overflowAttr] = "hidden";
+    }
+    if (this.axis[axis].isOverflowing) {
+      scrollbar.style.display = "block";
+    } else {
+      scrollbar.style.display = "none";
+    }
+  };
+  _proto.hideNativeScrollbar = function hideNativeScrollbar() {
+    this.offsetEl.style[this.isRtl ? "left" : "right"] = this.axis.y.isOverflowing || this.axis.y.forceVisible ? "-" + this.scrollbarWidth + "px" : 0;
+    this.offsetEl.style.bottom = this.axis.x.isOverflowing || this.axis.x.forceVisible ? "-" + this.scrollbarWidth + "px" : 0;
+  };
+  _proto.onMouseMoveForAxis = function onMouseMoveForAxis(axis) {
+    if (axis === void 0) {
+      axis = "y";
+    }
+    this.axis[axis].track.rect = this.axis[axis].track.el.getBoundingClientRect();
+    this.axis[axis].scrollbar.rect = this.axis[axis].scrollbar.el.getBoundingClientRect();
+    var isWithinScrollbarBoundsX = this.isWithinBounds(this.axis[axis].scrollbar.rect);
+    if (isWithinScrollbarBoundsX) {
+      this.axis[axis].scrollbar.el.classList.add(this.classNames.hover);
+    } else {
+      this.axis[axis].scrollbar.el.classList.remove(this.classNames.hover);
+    }
+    if (this.isWithinBounds(this.axis[axis].track.rect)) {
+      this.showScrollbar(axis);
+      this.axis[axis].track.el.classList.add(this.classNames.hover);
+    } else {
+      this.axis[axis].track.el.classList.remove(this.classNames.hover);
+    }
+  };
+  _proto.onMouseLeaveForAxis = function onMouseLeaveForAxis(axis) {
+    if (axis === void 0) {
+      axis = "y";
+    }
+    this.axis[axis].track.el.classList.remove(this.classNames.hover);
+    this.axis[axis].scrollbar.el.classList.remove(this.classNames.hover);
+  };
+  _proto.showScrollbar = function showScrollbar(axis) {
+    if (axis === void 0) {
+      axis = "y";
+    }
+    var scrollbar = this.axis[axis].scrollbar.el;
+    if (!this.axis[axis].isVisible) {
+      scrollbar.classList.add(this.classNames.visible);
+      this.axis[axis].isVisible = true;
+    }
+    if (this.options.autoHide) {
+      this.hideScrollbars();
+    }
+  };
+  _proto.onDragStart = function onDragStart(e, axis) {
+    if (axis === void 0) {
+      axis = "y";
+    }
+    var elDocument = getElementDocument(this.el);
+    var elWindow = getElementWindow(this.el);
+    var scrollbar = this.axis[axis].scrollbar;
+    var eventOffset = axis === "y" ? e.pageY : e.pageX;
+    this.axis[axis].dragOffset = eventOffset - scrollbar.rect[this.axis[axis].offsetAttr];
+    this.draggedAxis = axis;
+    this.el.classList.add(this.classNames.dragging);
+    elDocument.addEventListener("mousemove", this.drag, true);
+    elDocument.addEventListener("mouseup", this.onEndDrag, true);
+    if (this.removePreventClickId === null) {
+      elDocument.addEventListener("click", this.preventClick, true);
+      elDocument.addEventListener("dblclick", this.preventClick, true);
+    } else {
+      elWindow.clearTimeout(this.removePreventClickId);
+      this.removePreventClickId = null;
+    }
+  };
+  _proto.onTrackClick = function onTrackClick(e, axis) {
+    var _this4 = this;
+    if (axis === void 0) {
+      axis = "y";
+    }
+    if (!this.options.clickOnTrack)
+      return;
+    var elWindow = getElementWindow(this.el);
+    this.axis[axis].scrollbar.rect = this.axis[axis].scrollbar.el.getBoundingClientRect();
+    var scrollbar = this.axis[axis].scrollbar;
+    var scrollbarOffset = scrollbar.rect[this.axis[axis].offsetAttr];
+    var hostSize = parseInt(this.elStyles[this.axis[axis].sizeAttr], 10);
+    var scrolled = this.contentWrapperEl[this.axis[axis].scrollOffsetAttr];
+    var t = axis === "y" ? this.mouseY - scrollbarOffset : this.mouseX - scrollbarOffset;
+    var dir = t < 0 ? -1 : 1;
+    var scrollSize = dir === -1 ? scrolled - hostSize : scrolled + hostSize;
+    var scrollTo = function scrollTo2() {
+      if (dir === -1) {
+        if (scrolled > scrollSize) {
+          var _this4$contentWrapper;
+          scrolled -= _this4.options.clickOnTrackSpeed;
+          _this4.contentWrapperEl.scrollTo((_this4$contentWrapper = {}, _this4$contentWrapper[_this4.axis[axis].offsetAttr] = scrolled, _this4$contentWrapper));
+          elWindow.requestAnimationFrame(scrollTo2);
+        }
+      } else {
+        if (scrolled < scrollSize) {
+          var _this4$contentWrapper2;
+          scrolled += _this4.options.clickOnTrackSpeed;
+          _this4.contentWrapperEl.scrollTo((_this4$contentWrapper2 = {}, _this4$contentWrapper2[_this4.axis[axis].offsetAttr] = scrolled, _this4$contentWrapper2));
+          elWindow.requestAnimationFrame(scrollTo2);
+        }
+      }
+    };
+    scrollTo();
+  };
+  _proto.getContentElement = function getContentElement() {
+    return this.contentEl;
+  };
+  _proto.getScrollElement = function getScrollElement() {
+    return this.contentWrapperEl;
+  };
+  _proto.getScrollbarWidth = function getScrollbarWidth() {
+    try {
+      if (getComputedStyle(this.contentWrapperEl, "::-webkit-scrollbar").display === "none" || "scrollbarWidth" in document.documentElement.style || "-ms-overflow-style" in document.documentElement.style) {
+        return 0;
+      } else {
+        return scrollbarWidth(this.el);
+      }
+    } catch (e) {
+      return scrollbarWidth(this.el);
+    }
+  };
+  _proto.removeListeners = function removeListeners() {
+    var _this5 = this;
+    var elWindow = getElementWindow(this.el);
+    if (this.options.autoHide) {
+      this.el.removeEventListener("mouseenter", this.onMouseEnter);
+    }
+    ["mousedown", "click", "dblclick"].forEach(function(e) {
+      _this5.el.removeEventListener(e, _this5.onPointerEvent, true);
+    });
+    ["touchstart", "touchend", "touchmove"].forEach(function(e) {
+      _this5.el.removeEventListener(e, _this5.onPointerEvent, {
+        capture: true,
+        passive: true
+      });
+    });
+    this.el.removeEventListener("mousemove", this.onMouseMove);
+    this.el.removeEventListener("mouseleave", this.onMouseLeave);
+    if (this.contentWrapperEl) {
+      this.contentWrapperEl.removeEventListener("scroll", this.onScroll);
+    }
+    elWindow.removeEventListener("resize", this.onWindowResize);
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    this.recalculate.cancel();
+    this.onMouseMove.cancel();
+    this.hideScrollbars.cancel();
+    this.onWindowResize.cancel();
+  };
+  _proto.unMount = function unMount() {
+    this.removeListeners();
+    SimpleBar2.instances.delete(this.el);
+  };
+  _proto.isWithinBounds = function isWithinBounds(bbox) {
+    return this.mouseX >= bbox.left && this.mouseX <= bbox.left + bbox.width && this.mouseY >= bbox.top && this.mouseY <= bbox.top + bbox.height;
+  };
+  _proto.findChild = function findChild(el, query) {
+    var matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
+    return Array.prototype.filter.call(el.children, function(child) {
+      return matches.call(child, query);
+    })[0];
+  };
+  return SimpleBar2;
+}();
+SimpleBar$1.defaultOptions = {
+  autoHide: true,
+  forceVisible: false,
+  clickOnTrack: true,
+  clickOnTrackSpeed: 40,
+  classNames: {
+    contentEl: "simplebar-content",
+    contentWrapper: "simplebar-content-wrapper",
+    offset: "simplebar-offset",
+    mask: "simplebar-mask",
+    wrapper: "simplebar-wrapper",
+    placeholder: "simplebar-placeholder",
+    scrollbar: "simplebar-scrollbar",
+    track: "simplebar-track",
+    heightAutoObserverWrapperEl: "simplebar-height-auto-observer-wrapper",
+    heightAutoObserverEl: "simplebar-height-auto-observer",
+    visible: "simplebar-visible",
+    horizontal: "simplebar-horizontal",
+    vertical: "simplebar-vertical",
+    hover: "simplebar-hover",
+    dragging: "simplebar-dragging"
+  },
+  scrollbarMinSize: 25,
+  scrollbarMaxSize: 0,
+  timeout: 1e3
+};
+SimpleBar$1.instances = /* @__PURE__ */ new WeakMap();
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0)
+        continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key))
+        continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+var _excluded = ["children", "scrollableNodeProps", "tag"];
+var getOptions = function getOptions2(obj) {
+  var options = Array.prototype.reduce.call(obj, function(acc, attribute) {
+    var option = attribute.name.match(/data-simplebar-(.+)/);
+    if (option) {
+      var key = option[1].replace(/\W+(.)/g, function(x, chr) {
+        return chr.toUpperCase();
+      });
+      switch (attribute.value) {
+        case "true":
+          acc[key] = true;
+          break;
+        case "false":
+          acc[key] = false;
+          break;
+        case void 0:
+          acc[key] = true;
+          break;
+        default:
+          acc[key] = attribute.value;
+      }
+    }
+    return acc;
+  }, {});
+  return options;
+};
+var SimpleBar = /* @__PURE__ */ require$$0.forwardRef(function(_ref, ref) {
+  var children = _ref.children, _ref$scrollableNodePr = _ref.scrollableNodeProps, scrollableNodeProps = _ref$scrollableNodePr === void 0 ? {} : _ref$scrollableNodePr, _ref$tag = _ref.tag, tag = _ref$tag === void 0 ? "div" : _ref$tag, otherProps = _objectWithoutProperties(_ref, _excluded);
+  var RootTag = tag;
+  var instance;
+  var scrollableNodeRef = useRef();
+  var elRef = useRef();
+  var contentNodeRef = useRef();
+  var options = {};
+  var rest = {};
+  var deprecatedOptions = [];
+  Object.keys(otherProps).forEach(function(key) {
+    if (Object.prototype.hasOwnProperty.call(SimpleBar$1.defaultOptions, key)) {
+      options[key] = otherProps[key];
+    } else if (key.match(/data-simplebar-(.+)/) && key !== "data-simplebar-direction") {
+      deprecatedOptions.push({
+        name: key,
+        value: otherProps[key]
+      });
+    } else {
+      rest[key] = otherProps[key];
+    }
+  });
+  if (deprecatedOptions.length) {
+    console.warn(`simplebar-react: this way of passing options is deprecated. Pass it like normal props instead:
+        'data-simplebar-auto-hide="false"' \u2014> 'autoHide="false"'
+      `);
+  }
+  useEffect(function() {
+    scrollableNodeRef = scrollableNodeProps.ref || scrollableNodeRef;
+    if (elRef.current) {
+      instance = new SimpleBar$1(elRef.current, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, getOptions(deprecatedOptions)), options), scrollableNodeRef && {
+        scrollableNode: scrollableNodeRef.current
+      }), contentNodeRef.current && {
+        contentNode: contentNodeRef.current
+      }));
+      if (ref) {
+        ref.current = instance;
+      }
+    }
+    return function() {
+      instance.unMount();
+      instance = null;
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(RootTag, {
+    ref: elRef,
+    "data-simplebar": true,
+    ...rest,
+    children: [/* @__PURE__ */ jsxs("div", {
+      className: "simplebar-wrapper",
+      children: [/* @__PURE__ */ jsx("div", {
+        className: "simplebar-height-auto-observer-wrapper",
+        children: /* @__PURE__ */ jsx("div", {
+          className: "simplebar-height-auto-observer"
+        })
+      }), /* @__PURE__ */ jsx("div", {
+        className: "simplebar-mask",
+        children: /* @__PURE__ */ jsx("div", {
+          className: "simplebar-offset",
+          children: typeof children === "function" ? children({
+            scrollableNodeRef,
+            contentNodeRef
+          }) : /* @__PURE__ */ jsx("div", {
+            ...scrollableNodeProps,
+            className: "simplebar-content-wrapper".concat(scrollableNodeProps.className ? " ".concat(scrollableNodeProps.className) : ""),
+            children: /* @__PURE__ */ jsx("div", {
+              className: "simplebar-content",
+              children
+            })
+          })
+        })
+      }), /* @__PURE__ */ jsx("div", {
+        className: "simplebar-placeholder"
+      })]
+    }), /* @__PURE__ */ jsx("div", {
+      className: "simplebar-track simplebar-horizontal",
+      children: /* @__PURE__ */ jsx("div", {
+        className: "simplebar-scrollbar"
+      })
+    }), /* @__PURE__ */ jsx("div", {
+      className: "simplebar-track simplebar-vertical",
+      children: /* @__PURE__ */ jsx("div", {
+        className: "simplebar-scrollbar"
+      })
+    })]
+  });
+});
+SimpleBar.displayName = "SimpleBar";
+SimpleBar.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  scrollableNodeProps: PropTypes.object,
+  tag: PropTypes.string
+};
+export { SimpleBar as S };