@jetbrains/ring-ui-built 6.0.31 → 6.0.32

package/components/i18n/i18n-context.js

@@ -1,19 +1,16 @@
 import React, { useEffect } from 'react';
 import { getTranslations, translate, setTranslations } from './i18n.js';
-import '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 
-var I18nContext = /*#__PURE__*/React.createContext({
+const I18nContext = /*#__PURE__*/React.createContext({
   messages: getTranslations(),
   translate
 });
-var I18nContextHolder = function I18nContextHolder(_ref) {
-  var children = _ref.children,
-    messages = _ref.messages;
-  useEffect(function () {
+const I18nContextHolder = _ref => {
+  let {
+    children,
+    messages
+  } = _ref;
+  useEffect(() => {
     setTranslations(messages);
   }, [messages]);
   return /*#__PURE__*/React.createElement(I18nContext.Provider, {

package/components/i18n/i18n.js

@@ -1,9 +1,3 @@
-import { d as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-
 var login = "Log in";
 var logout = "Log out";
 var loginTo = "Log in to {{serviceName}}";
@@ -109,15 +103,15 @@ var defaultMessages = {
 	unverified: unverified
 };
 
-var messages = defaultMessages;
-var warned = new Set();
+let messages = defaultMessages;
+const warned = new Set();
 function warnMissedKeyOnce(key) {
   if (warned.has(key)) {
     return;
   }
   warned.add(key);
   // eslint-disable-next-line no-console
-  console.warn("Missing localisation for key \"".concat(key, "\""));
+  console.warn(`Missing localisation for key "${key}"`);
 }
 function setTranslations(newMessages) {
   messages = newMessages;
@@ -126,7 +120,10 @@ function getTranslations() {
   return messages;
 }
 function getTranslationsWithFallback() {
-  return _objectSpread2(_objectSpread2({}, defaultMessages), messages);
+  return {
+    ...defaultMessages,
+    ...messages
+  };
 }
 function translate(key) {
   var _messages$key;

package/components/icon/icon.js

@@ -1,107 +1,90 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, e as _extends, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import deprecate from 'util-deprecate';
 import { Color, Size } from './icon__constants.js';
 import { m as modules_29747b80, I as IconSVG } from '../_helpers/icon__svg.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/es.string.starts-with.js';
 import '../global/memoize.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.weak-map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 
-var _excluded = ["className", "size", "color", "loading", "glyph", "width", "height", "suppressSizeWarning"];
-var _warnSize = deprecate(function () {}, "`size`, `width` and `height` props are not recommended to use in Ring UI `Icon` component. The intrinsic sizes of SVG icon (`width` and `height` SVG attributes) are used instead.\n\nWe strongly recommend to use icons handcrafted for particular sizes. If your icon doesn't exist in the desired size, please ask your designer to draw one. \"Responsive\" checkmark should be unchecked when exporting icon.'");
-var Icon = /*#__PURE__*/function (_PureComponent) {
-  function Icon() {
-    _classCallCheck(this, Icon);
-    return _callSuper(this, Icon, arguments);
+const warnSize = deprecate(() => {}, `\`size\`, \`width\` and \`height\` props are not recommended to use in Ring UI \`Icon\` component. The intrinsic sizes of SVG icon (\`width\` and \`height\` SVG attributes) are used instead.
+
+We strongly recommend to use icons handcrafted for particular sizes. If your icon doesn't exist in the desired size, please ask your designer to draw one. "Responsive" checkmark should be unchecked when exporting icon.'`);
+class Icon extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    color: PropTypes.string,
+    glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]).isRequired,
+    height: PropTypes.number,
+    size: PropTypes.number,
+    width: PropTypes.number,
+    loading: PropTypes.bool,
+    suppressSizeWarning: PropTypes.bool
+  };
+  static defaultProps = {
+    className: '',
+    color: Color.DEFAULT,
+    glyph: ''
+  };
+  static Color = Color;
+  static Size = Size;
+  warnSize() {
+    if (this.props.suppressSizeWarning) {
+      return;
+    }
+    warnSize();
   }
-  _inherits(Icon, _PureComponent);
-  return _createClass(Icon, [{
-    key: "warnSize",
-    value: function warnSize() {
-      if (this.props.suppressSizeWarning) {
-        return;
-      }
-      _warnSize();
+  getStyle() {
+    const {
+      size,
+      width,
+      height
+    } = this.props;
+    if (width || height) {
+      this.warnSize();
+      return {
+        width,
+        height
+      };
     }
-  }, {
-    key: "getStyle",
-    value: function getStyle() {
-      var _this$props = this.props,
-        size = _this$props.size,
-        width = _this$props.width,
-        height = _this$props.height;
-      if (width || height) {
-        this.warnSize();
-        return {
-          width,
-          height
-        };
-      }
-      if (size) {
-        this.warnSize();
-        return {
-          width: size,
-          height: size
-        };
-      }
-      return undefined;
+    if (size) {
+      this.warnSize();
+      return {
+        width: size,
+        height: size
+      };
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        className = _this$props2.className;
-        _this$props2.size;
-        var color = _this$props2.color,
-        loading = _this$props2.loading,
-        Glyph = _this$props2.glyph;
-        _this$props2.width;
-        _this$props2.height;
-        _this$props2.suppressSizeWarning;
-        var restProps = _objectWithoutProperties(_this$props2, _excluded);
-      if (!Glyph) {
-        return null;
-      }
-      var classes = classNames(modules_29747b80.icon, {
-        [modules_29747b80[color]]: !!color,
-        [modules_29747b80.loading]: loading
-      }, className);
-      return /*#__PURE__*/React.createElement("span", _extends({}, restProps, {
-        className: classes
-      }), typeof Glyph === 'string' ? /*#__PURE__*/React.createElement(IconSVG, {
-        src: Glyph,
-        style: this.getStyle()
-      }) : /*#__PURE__*/React.createElement(Glyph, {
-        className: modules_29747b80.glyph,
-        style: this.getStyle()
-      }));
+    return undefined;
+  }
+  render() {
+    const {
+      className,
+      size,
+      color,
+      loading,
+      glyph: Glyph,
+      width,
+      height,
+      suppressSizeWarning,
+      ...restProps
+    } = this.props;
+    if (!Glyph) {
+      return null;
     }
-  }]);
-}(PureComponent);
-_defineProperty(Icon, "propTypes", {
-  className: PropTypes.string,
-  color: PropTypes.string,
-  glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]).isRequired,
-  height: PropTypes.number,
-  size: PropTypes.number,
-  width: PropTypes.number,
-  loading: PropTypes.bool,
-  suppressSizeWarning: PropTypes.bool
-});
-_defineProperty(Icon, "defaultProps", {
-  className: '',
-  color: Color.DEFAULT,
-  glyph: ''
-});
-_defineProperty(Icon, "Color", Color);
-_defineProperty(Icon, "Size", Size);
+    const classes = classNames(modules_29747b80.icon, {
+      [modules_29747b80[color]]: !!color,
+      [modules_29747b80.loading]: loading
+    }, className);
+    return /*#__PURE__*/React.createElement("span", _extends({}, restProps, {
+      className: classes
+    }), typeof Glyph === 'string' ? /*#__PURE__*/React.createElement(IconSVG, {
+      src: Glyph,
+      style: this.getStyle()
+    }) : /*#__PURE__*/React.createElement(Glyph, {
+      className: modules_29747b80.glyph,
+      style: this.getStyle()
+    }));
+  }
+}
 
 export { Color, Size, Icon as default };

package/components/icon/icon__svg.js

@@ -1,14 +1,6 @@
 import '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/es.string.starts-with.js';
 import 'react';
 import 'classnames';
 import 'prop-types';
 import '../global/memoize.js';
 export { I as default } from '../_helpers/icon__svg.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.weak-map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';

package/components/icon/index.js

@@ -6,12 +6,4 @@ import 'prop-types';
 import 'classnames';
 import 'util-deprecate';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/es.string.starts-with.js';
 import '../global/memoize.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.weak-map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';

package/components/input/input.js

@@ -1,6 +1,4 @@
 import '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.object.values.js';
 import 'react';
 import 'prop-types';
 import 'classnames';
@@ -20,16 +18,5 @@ import '../_helpers/button__classes.js';
 import '../icon/icon__constants.js';
 import 'util-deprecate';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/es.string.starts-with.js';
 import '../global/memoize.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.weak-map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.regexp.to-string.js';
 import '../i18n/i18n.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/web.dom-collections.for-each.js';

package/components/island/adaptive-island-hoc.js

@@ -1,51 +1,38 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
-import React, { createContext, Component } from 'react';
+import React, { Component, createContext } from 'react';
 import { interpolateLinear } from '../global/linear-function.js';
 
-var TITLE_RESIZE_END = 20;
-var TITLE_RESIZE_THRESHOLD = 36;
-var PhaseContext = /*#__PURE__*/createContext(null);
-var ScrollHandlerContext = /*#__PURE__*/createContext(null);
+const TITLE_RESIZE_END = 20;
+const TITLE_RESIZE_THRESHOLD = 36;
+const PhaseContext = /*#__PURE__*/createContext(null);
+const ScrollHandlerContext = /*#__PURE__*/createContext(null);
 function adaptiveIslandHOC(ComposedComponent) {
-  var _AdaptiveIsland;
-  return _AdaptiveIsland = /*#__PURE__*/function (_Component) {
-    function AdaptiveIsland() {
-      var _this;
-      _classCallCheck(this, AdaptiveIsland);
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
+  return class AdaptiveIsland extends Component {
+    static propTypes = ComposedComponent.propTypes;
+    state = {
+      phase: null
+    };
+    onContentScroll = _ref => {
+      var _this$state$phase;
+      let {
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      } = _ref;
+      if (scrollHeight - clientHeight >= interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, (_this$state$phase = this.state.phase) !== null && _this$state$phase !== void 0 ? _this$state$phase : 0)) {
+        const phase = Math.min(1, scrollTop / TITLE_RESIZE_END);
+        this.setState({
+          phase
+        });
       }
-      _this = _callSuper(this, AdaptiveIsland, [].concat(args));
-      _defineProperty(_this, "state", {
-        phase: null
-      });
-      _defineProperty(_this, "onContentScroll", function (_ref) {
-        var _this$state$phase;
-        var scrollTop = _ref.scrollTop,
-          scrollHeight = _ref.scrollHeight,
-          clientHeight = _ref.clientHeight;
-        if (scrollHeight - clientHeight >= interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, (_this$state$phase = _this.state.phase) !== null && _this$state$phase !== void 0 ? _this$state$phase : 0)) {
-          var phase = Math.min(1, scrollTop / TITLE_RESIZE_END);
-          _this.setState({
-            phase
-          });
-        }
-      });
-      return _this;
+    };
+    render() {
+      return /*#__PURE__*/React.createElement(PhaseContext.Provider, {
+        value: this.state.phase
+      }, /*#__PURE__*/React.createElement(ScrollHandlerContext.Provider, {
+        value: this.onContentScroll
+      }, /*#__PURE__*/React.createElement(ComposedComponent, this.props)));
     }
-    _inherits(AdaptiveIsland, _Component);
-    return _createClass(AdaptiveIsland, [{
-      key: "render",
-      value: function render() {
-        return /*#__PURE__*/React.createElement(PhaseContext.Provider, {
-          value: this.state.phase
-        }, /*#__PURE__*/React.createElement(ScrollHandlerContext.Provider, {
-          value: this.onContentScroll
-        }, /*#__PURE__*/React.createElement(ComposedComponent, this.props)));
-      }
-    }]);
-  }(Component), _defineProperty(_AdaptiveIsland, "propTypes", ComposedComponent.propTypes), _AdaptiveIsland;
+  };
 }
 
 export { PhaseContext, ScrollHandlerContext, adaptiveIslandHOC as default };

package/components/island/content.js

@@ -1,5 +1,4 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, e as _extends, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
+import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { Component, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -9,141 +8,125 @@ import { m as modules_e6a056e1 } from '../_helpers/island.js';
 import { ScrollHandlerContext } from './adaptive-island-hoc.js';
 import '../global/linear-function.js';
 
-var _excluded = ["children", "className", "bottomBorder", "scrollableWrapperClassName", "onScroll", "onScrollToBottom", "fade"];
-var scheduleScrollAction = scheduleRAF();
-var noop = function noop() {};
-var END_DISTANCE = 16;
-var Content = /*#__PURE__*/function (_Component) {
-  function Content() {
-    var _this;
-    _classCallCheck(this, Content);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+const scheduleScrollAction = scheduleRAF();
+const noop = () => {};
+const END_DISTANCE = 16;
+class Content extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    scrollableWrapperClassName: PropTypes.string,
+    fade: PropTypes.bool,
+    bottomBorder: PropTypes.bool,
+    onScroll: PropTypes.func,
+    onScrollToBottom: PropTypes.func
+  };
+  static defaultProps = {
+    fade: true,
+    bottomBorder: false,
+    onScroll: noop,
+    onScrollToBottom: noop
+  };
+  state = {
+    scrolledToTop: true,
+    scrolledToBottom: false
+  };
+  componentWillUnmount() {
+    this.scrollableNode = null;
+    if (!this.wrapperNode) {
+      return;
     }
-    _this = _callSuper(this, Content, [].concat(args));
-    _defineProperty(_this, "state", {
-      scrolledToTop: true,
-      scrolledToBottom: false
-    });
-    _defineProperty(_this, "resizeDetector", createResizeDetector({
-      strategy: 'scroll'
-    }));
-    _defineProperty(_this, "wrapperNode", void 0);
-    _defineProperty(_this, "setWrapper", function (node) {
-      if (!node) {
-        return;
-      }
-      _this.wrapperNode = node;
-      _this.resizeDetector.listenTo(node, _this.calculateScrollPosition);
-    });
-    _defineProperty(_this, "calculateScrollPosition", function () {
-      return scheduleScrollAction(function () {
-        var _this2 = _this,
-          scrollableNode = _this2.scrollableNode;
-        if (!scrollableNode) {
-          return;
-        }
-        _this.props.onScroll(scrollableNode);
-        var scrollTop = scrollableNode.scrollTop,
-          scrollHeight = scrollableNode.scrollHeight,
-          offsetHeight = scrollableNode.offsetHeight;
-        var scrolledToTop = scrollTop === 0;
-        var scrolledToBottom = offsetHeight + scrollTop >= scrollHeight - END_DISTANCE;
-        if (scrolledToBottom) {
-          var _this$props$onScrollT, _this$props;
-          (_this$props$onScrollT = (_this$props = _this.props).onScrollToBottom) === null || _this$props$onScrollT === void 0 || _this$props$onScrollT.call(_this$props);
-        }
-        _this.setState({
-          scrolledToTop,
-          scrolledToBottom
-        });
-      });
-    });
-    _defineProperty(_this, "scrollableNode", void 0);
-    _defineProperty(_this, "setScrollableNodeAndCalculatePosition", function (node) {
-      if (!node) {
-        return;
-      }
-      _this.scrollableNode = node;
-      _this.calculateScrollPosition();
-    });
-    return _this;
+    this.resizeDetector.removeAllListeners(this.wrapperNode);
   }
-  _inherits(Content, _Component);
-  return _createClass(Content, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.scrollableNode = null;
-      if (!this.wrapperNode) {
-        return;
-      }
-      this.resizeDetector.removeAllListeners(this.wrapperNode);
+  resizeDetector = createResizeDetector({
+    strategy: 'scroll'
+  });
+  wrapperNode;
+  setWrapper = node => {
+    if (!node) {
+      return;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        children = _this$props2.children,
-        className = _this$props2.className,
-        bottomBorder = _this$props2.bottomBorder,
-        scrollableWrapperClassName = _this$props2.scrollableWrapperClassName;
-        _this$props2.onScroll;
-        _this$props2.onScrollToBottom;
-        var fade = _this$props2.fade,
-        restProps = _objectWithoutProperties(_this$props2, _excluded);
-      var _this$state = this.state,
-        scrolledToTop = _this$state.scrolledToTop,
-        scrolledToBottom = _this$state.scrolledToBottom;
-      var classes = classNames(modules_e6a056e1.content, className, {
-        [modules_e6a056e1.contentWithTopFade]: fade && !scrolledToTop,
-        [modules_e6a056e1.contentWithBottomFade]: fade && !scrolledToBottom,
-        [modules_e6a056e1.withTransparentBottomBorder]: bottomBorder,
-        [modules_e6a056e1.withBottomBorder]: bottomBorder && !scrolledToBottom
-      });
-      var scrollableWrapperClasses = classNames(modules_e6a056e1.scrollableWrapper, scrollableWrapperClassName);
-      return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-        "data-test": "ring-island-content",
-        className: classes
-      }), /*#__PURE__*/React.createElement("div", {
-        // it has to be focusable because it can be scrollable
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex: 0,
-        "data-scrollable-container": true,
-        className: scrollableWrapperClasses,
-        ref: this.setScrollableNodeAndCalculatePosition,
-        onScroll: fade ? this.calculateScrollPosition : noop
-      }, fade && /*#__PURE__*/React.createElement("div", {
-        ref: this.setWrapper
-      }, children), !fade && children));
+    this.wrapperNode = node;
+    this.resizeDetector.listenTo(node, this.calculateScrollPosition);
+  };
+  calculateScrollPosition = () => scheduleScrollAction(() => {
+    const {
+      scrollableNode
+    } = this;
+    if (!scrollableNode) {
+      return;
     }
-  }]);
-}(Component);
-_defineProperty(Content, "propTypes", {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  scrollableWrapperClassName: PropTypes.string,
-  fade: PropTypes.bool,
-  bottomBorder: PropTypes.bool,
-  onScroll: PropTypes.func,
-  onScrollToBottom: PropTypes.func
-});
-_defineProperty(Content, "defaultProps", {
-  fade: true,
-  bottomBorder: false,
-  onScroll: noop,
-  onScrollToBottom: noop
-});
-var ContentWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(ScrollHandlerContext.Consumer, null, function (onScroll) {
-    var addProps = onScroll != null ? {
-      onScroll,
-      bottomBorder: true
-    } : {};
-    return /*#__PURE__*/React.createElement(Content, _extends({}, props, addProps, {
-      ref: ref
-    }));
+    this.props.onScroll(scrollableNode);
+    const {
+      scrollTop,
+      scrollHeight,
+      offsetHeight
+    } = scrollableNode;
+    const scrolledToTop = scrollTop === 0;
+    const scrolledToBottom = offsetHeight + scrollTop >= scrollHeight - END_DISTANCE;
+    if (scrolledToBottom) {
+      this.props.onScrollToBottom?.();
+    }
+    this.setState({
+      scrolledToTop,
+      scrolledToBottom
+    });
   });
-});
+  scrollableNode;
+  setScrollableNodeAndCalculatePosition = node => {
+    if (!node) {
+      return;
+    }
+    this.scrollableNode = node;
+    this.calculateScrollPosition();
+  };
+  render() {
+    const {
+      children,
+      className,
+      bottomBorder,
+      scrollableWrapperClassName,
+      onScroll,
+      onScrollToBottom,
+      fade,
+      ...restProps
+    } = this.props;
+    const {
+      scrolledToTop,
+      scrolledToBottom
+    } = this.state;
+    const classes = classNames(modules_e6a056e1.content, className, {
+      [modules_e6a056e1.contentWithTopFade]: fade && !scrolledToTop,
+      [modules_e6a056e1.contentWithBottomFade]: fade && !scrolledToBottom,
+      [modules_e6a056e1.withTransparentBottomBorder]: bottomBorder,
+      [modules_e6a056e1.withBottomBorder]: bottomBorder && !scrolledToBottom
+    });
+    const scrollableWrapperClasses = classNames(modules_e6a056e1.scrollableWrapper, scrollableWrapperClassName);
+    return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+      "data-test": "ring-island-content",
+      className: classes
+    }), /*#__PURE__*/React.createElement("div", {
+      // it has to be focusable because it can be scrollable
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex: 0,
+      "data-scrollable-container": true,
+      className: scrollableWrapperClasses,
+      ref: this.setScrollableNodeAndCalculatePosition,
+      onScroll: fade ? this.calculateScrollPosition : noop
+    }, fade && /*#__PURE__*/React.createElement("div", {
+      ref: this.setWrapper
+    }, children), !fade && children));
+  }
+}
+const ContentWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(ScrollHandlerContext.Consumer, null, onScroll => {
+  const addProps = onScroll != null ? {
+    onScroll,
+    bottomBorder: true
+  } : {};
+  return /*#__PURE__*/React.createElement(Content, _extends({}, props, addProps, {
+    ref: ref
+  }));
+}));
 ContentWrapper.displayName = 'ContentWrapper';
 
 export { ContentWrapper as default };