react-elegant-ui/esm/components/Select/Select.hocs/ScrollbarOverlapContentFix.js

Elegant UI components, made by BEM best practices for react

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __read = this && this.__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
    r,
    ar = [],
    e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }
  return ar;
};
import React, { useEffect, useState, useRef, useContext, useMemo } from 'react';
import { canUseDOM } from '../../../lib/canUseDOM';
import { getDisplayName } from '../../../lib/getDisplayName';
import { mergeProps } from '../../../lib/merge';
import { overflowAutoFix } from '../../../polyfills/overflowAutoFix';
import { SelectListContext } from '../List/Select-List';
/**
 * HOC to fix scrollbar overlaping while use `scroll: auto` in firefox
 *
 * Original bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1424328
 */
export var ScrollbarOverlapContentFix = function (
// WARNING: any object type
BaseComponent) {
  var WrappedComponent = function (props) {
    var opened = props.opened;
    var listboxRef = useRef(null);
    var _a = __read(useState(), 2),
      listStyles = _a[0],
      setListStyles = _a[1];
    useEffect(function () {
      if (!opened || listboxRef.current === null) {
        return;
      }
      // Observe resize and fix indents
      var cancel = overflowAutoFix(listboxRef.current, function (_a) {
        var x = _a.x;
        setListStyles({
          paddingInlineEnd: x ? x + 'px' : undefined
        });
      });
      return function () {
        cancel();
        setListStyles({});
      };
    }, [opened, setListStyles]);
    // Inject props to list
    var SelectListContextObj = useContext(SelectListContext);
    var SelectListContextMix = useMemo(function () {
      return mergeProps(SelectListContextObj, {
        style: listStyles,
        innerRef: listboxRef
      });
    }, [SelectListContextObj, listStyles, listboxRef]);
    return /*#__PURE__*/React.createElement(SelectListContext.Provider, {
      value: SelectListContextMix
    }, /*#__PURE__*/React.createElement(BaseComponent, __assign({}, props)));
  };
  WrappedComponent.displayName = "ScrollbarOverlapContentFix(".concat(getDisplayName(BaseComponent), ")");
  return WrappedComponent;
};
// TODO: test it in safari
/**
 * Isomorphic `ScrollbarOverlapContentFix`
 *
 * It will auto enable in browsers who have this bug
 *
 * WARNING: if you use SSR, you should use your own manager which decide use HOC or not depends of user agent
 */
export var ScrollbarOverlapContentFixIsomorphic = function (BaseComponent) {
  var isNeedFix = canUseDOM() ? navigator.userAgent.match(/firefox/i) : false;
  if (!isNeedFix) {
    return BaseComponent;
  }
  return ScrollbarOverlapContentFix(BaseComponent);
};