@wix/design-system/dist/cjs/providers/useOverlayScrollbar/useOverlayScrollbar.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.useOverlayScrollbar = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _overlayscrollbars = require("overlayscrollbars");
var _useOverlayScrollbarSt = require("./useOverlayScrollbar.st.css.js");
var _forkRef = require("../../utils/forkRef");
var _excluded = ["children", "className"],
  _excluded2 = ["children"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/providers/useOverlayScrollbar/useOverlayScrollbar.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var DEFAULT_OPTIONS = {
  scrollbars: {
    autoHide: 'leave',
    autoHideDelay: 0
  }
};
/**
 * @param params Parameters for customization.
 * @returns A tuple with two values:
 * The first value is the overlay scrollbar host component.
 * The second value is the overlay scrollbar content component.
 */
var useOverlayScrollbar = params => {
  var options = (0, _react.useRef)((params == null ? void 0 : params.options) || DEFAULT_OPTIONS);
  var scrollableContainerRef = (0, _react.useRef)(null);
  var contentRef = (0, _react.useRef)(null);
  var instanceRef = (0, _react.useRef)(null);
  var initialize = (0, _react.useCallback)(target => {
    // if already initialized do nothing
    if (_overlayscrollbars.OverlayScrollbars.valid(instanceRef.current)) {
      return;
    }

    /**
     * If the environment is test or window is undefined,
     * do not initialize the OverlayScrollbars.
     */
    if (process.env.NODE_ENV === 'test' || typeof window === 'undefined') {
      return;
    }
    instanceRef.current = (0, _overlayscrollbars.OverlayScrollbars)({
      target,
      elements: {
        content: contentRef.current,
        viewport: contentRef.current
      }
    }, options.current);
  }, [options]);
  (0, _react.useEffect)(() => {
    if (scrollableContainerRef.current) {
      initialize(scrollableContainerRef.current);
    }
    return () => {
      var _instanceRef$current;
      return (_instanceRef$current = instanceRef.current) == null ? void 0 : _instanceRef$current.destroy();
    };
  }, [initialize]);
  var OverlayScrollbarHost = (0, _react.useCallback)(_ref => {
    var {
        children,
        className
      } = _ref,
      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
      "data-overlayscrollbars-initialize": "",
      className: (0, _useOverlayScrollbarSt.st)(_useOverlayScrollbarSt.classes.root, className),
      ref: scrollableContainerRef
    }, rest, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 87,
        columnNumber: 9
      }
    }), children);
  }, []);

  // this is required in order to use forwardRef together with memoization
  var OverlayScrollbarContent = (0, _react.useMemo)(() => forwardOverlayScrollbarContent(contentRef), [contentRef]);
  return [OverlayScrollbarHost, OverlayScrollbarContent];
};
exports.useOverlayScrollbar = useOverlayScrollbar;
var forwardOverlayScrollbarContent = contentRef => /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
  var {
      children
    } = _ref2,
    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    "data-overlayscrollbars-contents": true,
    ref: (0, _forkRef.forkRef)(ref, contentRef)
  }, rest, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 115,
      columnNumber: 9
    }
  }), children);
});
//# sourceMappingURL=useOverlayScrollbar.js.map