@jetbrains/ring-ui-built 6.0.1

package/components/icon/icon.js

@@ -0,0 +1,109 @@
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, d as _createClass, e as _objectWithoutProperties, f 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/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.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) {
+  _inherits(Icon, _PureComponent);
+  var _super = _createSuper(Icon);
+  function Icon() {
+    _classCallCheck(this, Icon);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Icon, [{
+    key: "warnSize",
+    value: function warnSize() {
+      if (this.props.suppressSizeWarning) {
+        return;
+      }
+      _warnSize();
+    }
+  }, {
+    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;
+    }
+  }, {
+    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 Icon;
+}(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);
+
+export { Color, Size, Icon as default };

package/components/icon/icon__constants.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Commonly used icon colors.
+ * @enum {string}
+ */
+export declare enum Color {
+    BLUE = "blue",
+    DEFAULT = "",
+    GRAY = "gray",
+    GREEN = "green",
+    MAGENTA = "magenta",
+    RED = "red",
+    WHITE = "white"
+}
+/**
+ * @enum {number}
+ */
+export declare enum Size {
+    Size12 = 12,
+    Size14 = 14,
+    Size16 = 16,
+    Size18 = 18,
+    Size20 = 20,
+    Size24 = 24,
+    Size32 = 32,
+    Size40 = 40,
+    Size48 = 48,
+    Size64 = 64,
+    Size96 = 96,
+    Size128 = 128
+}

package/components/icon/icon__constants.js

@@ -0,0 +1,34 @@
+/**
+ * Commonly used icon colors.
+ * @enum {string}
+ */
+var Color;
+(function (Color) {
+  Color["BLUE"] = "blue";
+  Color["DEFAULT"] = "";
+  Color["GRAY"] = "gray";
+  Color["GREEN"] = "green";
+  Color["MAGENTA"] = "magenta";
+  Color["RED"] = "red";
+  Color["WHITE"] = "white";
+})(Color || (Color = {}));
+/**
+ * @enum {number}
+ */
+var Size;
+(function (Size) {
+  Size[Size["Size12"] = 12] = "Size12";
+  Size[Size["Size14"] = 14] = "Size14";
+  Size[Size["Size16"] = 16] = "Size16";
+  Size[Size["Size18"] = 18] = "Size18";
+  Size[Size["Size20"] = 20] = "Size20";
+  Size[Size["Size24"] = 24] = "Size24";
+  Size[Size["Size32"] = 32] = "Size32";
+  Size[Size["Size40"] = 40] = "Size40";
+  Size[Size["Size48"] = 48] = "Size48";
+  Size[Size["Size64"] = 64] = "Size64";
+  Size[Size["Size96"] = 96] = "Size96";
+  Size[Size["Size128"] = 128] = "Size128";
+})(Size || (Size = {}));
+
+export { Color, Size };

package/components/icon/icon__svg.d.ts

@@ -0,0 +1,15 @@
+import React, { SVGAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface IconSVGProps extends SVGAttributes<SVGSVGElement> {
+    src: string;
+}
+declare function IconSVG({ src, className, ...rest }: IconSVGProps): React.JSX.Element;
+declare namespace IconSVG {
+    var propTypes: {
+        className: PropTypes.Requireable<string>;
+        src: PropTypes.Validator<string>;
+        style: PropTypes.Requireable<object>;
+    };
+}
+declare const _default: React.MemoExoticComponent<typeof IconSVG>;
+export default _default;

package/components/icon/icon__svg.js

@@ -0,0 +1,14 @@
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';

package/components/icon/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './icon';
+export * from './icon';

package/components/icon/index.js

@@ -0,0 +1,17 @@
+export { default } from './icon.js';
+export { Color, Size } from './icon__constants.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';

package/components/input/input.d.ts

@@ -0,0 +1,77 @@
+import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
+import { ControlsHeight } from '../global/controls-height';
+import { LabelType } from '../control-label/control-label';
+declare function noop(): void;
+/**
+ * @name Input
+ */
+declare enum Size {
+    AUTO = "Auto",
+    S = "S",
+    M = "M",
+    L = "L",
+    FULL = "FULL"
+}
+export interface InputTranslations {
+    clear: string;
+}
+export interface InputBaseProps {
+    size: Size;
+    enableShortcuts: boolean | string[];
+    children?: string | undefined;
+    inputClassName?: string | null | undefined;
+    label?: ReactNode;
+    labelType?: LabelType;
+    active?: boolean | null | undefined;
+    error?: ReactNode | null | undefined;
+    borderless?: boolean | null | undefined;
+    onClear?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | null | undefined;
+    loading?: boolean | null | undefined;
+    icon?: string | ComponentType | null | undefined;
+    height?: ControlsHeight | undefined;
+    afterInput?: ReactNode;
+    translations?: InputTranslations | null | undefined;
+}
+type Override<D, S> = Omit<D, keyof S> & S;
+export type InputSpecificProps = Override<InputHTMLAttributes<HTMLInputElement>, InputBaseProps> & {
+    multiline?: false | undefined;
+    inputRef: Ref<HTMLInputElement>;
+};
+type TextAreaSpecificProps = Override<TextareaHTMLAttributes<HTMLTextAreaElement>, InputBaseProps> & {
+    multiline: true;
+    inputRef: Ref<HTMLTextAreaElement>;
+};
+export type InputProps = InputSpecificProps | TextAreaSpecificProps;
+export declare class Input extends PureComponent<InputProps> {
+    static defaultProps: {
+        size: Size;
+        onChange: typeof noop;
+        inputRef: typeof noop;
+        enableShortcuts: string[];
+    };
+    state: {
+        empty: boolean;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    static contextType: React.Context<ControlsHeight>;
+    frame?: number;
+    input?: HTMLInputElement | HTMLTextAreaElement | null;
+    id: string;
+    getId(): string;
+    checkValue(): void;
+    stretch(el: HTMLElement | null | undefined): void;
+    adapt(): void;
+    inputRef: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
+    clear: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    render(): React.JSX.Element;
+}
+export type ContainerProps<P extends InputProps> = JSX.LibraryManagedAttributes<typeof Input, P>;
+export type InputSpecificAttrs = ContainerProps<InputSpecificProps>;
+export type TextAreaSpecificAttrs = ContainerProps<TextAreaSpecificProps>;
+export type InputAttrs = InputSpecificAttrs | TextAreaSpecificAttrs;
+export default Input;
+export { Size };

package/components/input/input.js

@@ -0,0 +1,35 @@
+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';
+import '@jetbrains/icons/close-12px';
+import '../global/prop-types.js';
+import '../button/button.js';
+import '../global/get-uid.js';
+import '../icon/icon.js';
+import '../i18n/i18n-context.js';
+import '../global/composeRefs.js';
+import '../global/controls-height.js';
+import '../control-label/control-label.js';
+export { I as Input, S as Size, I as default } from '../_helpers/input.js';
+import '@jetbrains/icons/chevron-10px';
+import '../link/clickableLink.js';
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.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.d.ts

@@ -0,0 +1,61 @@
+import React, { ComponentType } from 'react';
+export declare const PhaseContext: React.Context<number | null>;
+type ScrollHandler = (element: Element) => void;
+export declare const ScrollHandlerContext: React.Context<ScrollHandler | null>;
+export default function adaptiveIslandHOC<P>(ComposedComponent: ComponentType<P>): {
+    new (props: P | Readonly<P>): {
+        state: {
+            phase: null;
+        };
+        onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: P, context: any): {
+        state: {
+            phase: null;
+        };
+        onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    propTypes: React.WeakValidationMap<P> | undefined;
+    contextType?: React.Context<any> | undefined;
+};
+export {};

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

@@ -0,0 +1,53 @@
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import React, { createContext, Component } 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);
+function adaptiveIslandHOC(ComposedComponent) {
+  var _class;
+  return _class = /*#__PURE__*/function (_Component) {
+    _inherits(AdaptiveIsland, _Component);
+    var _super = _createSuper(AdaptiveIsland);
+    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];
+      }
+      _this = _super.call.apply(_super, [this].concat(args));
+      _defineProperty(_assertThisInitialized(_this), "state", {
+        phase: null
+      });
+      _defineProperty(_assertThisInitialized(_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;
+    }
+    _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)));
+      }
+    }]);
+    return AdaptiveIsland;
+  }(Component), _defineProperty(_class, "propTypes", ComposedComponent.propTypes), _class;
+}
+
+export { PhaseContext, ScrollHandlerContext, adaptiveIslandHOC as default };

package/components/island/content.d.ts

@@ -0,0 +1,43 @@
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import createResizeDetector from 'element-resize-detector';
+export interface IslandContentProps extends Omit<HTMLAttributes<HTMLElement>, 'onScroll'> {
+    fade?: boolean | null | undefined;
+    onScrollToBottom?: (() => void) | null | undefined;
+    scrollableWrapperClassName?: string | null | undefined;
+}
+export interface IslandContentInnerProps extends IslandContentProps {
+    onScroll: (node: HTMLElement) => void;
+    bottomBorder: boolean;
+}
+declare class Content extends Component<IslandContentInnerProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        scrollableWrapperClassName: PropTypes.Requireable<string>;
+        fade: PropTypes.Requireable<boolean>;
+        bottomBorder: PropTypes.Requireable<boolean>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        onScrollToBottom: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        fade: boolean;
+        bottomBorder: boolean;
+        onScroll: () => void;
+        onScrollToBottom: () => void;
+    };
+    state: {
+        scrolledToTop: boolean;
+        scrolledToBottom: boolean;
+    };
+    componentWillUnmount(): void;
+    resizeDetector: createResizeDetector.Erd;
+    wrapperNode?: HTMLElement | null;
+    setWrapper: (node: HTMLElement | null) => void;
+    calculateScrollPosition: () => void;
+    scrollableNode?: HTMLElement | null;
+    setScrollableNodeAndCalculatePosition: (node: HTMLElement | null) => void;
+    render(): React.JSX.Element;
+}
+declare const ContentWrapper: React.ForwardRefExoticComponent<IslandContentProps & React.RefAttributes<Content>>;
+export default ContentWrapper;

package/components/island/content.js

@@ -0,0 +1,151 @@
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, e as _objectWithoutProperties, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import React, { Component, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import createResizeDetector from 'element-resize-detector';
+import scheduleRAF from '../global/schedule-raf.js';
+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) {
+  _inherits(Content, _Component);
+  var _super = _createSuper(Content);
+  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];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      scrolledToTop: true,
+      scrolledToBottom: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "resizeDetector", createResizeDetector({
+      strategy: 'scroll'
+    }));
+    _defineProperty(_assertThisInitialized(_this), "wrapperNode", void 0);
+    _defineProperty(_assertThisInitialized(_this), "setWrapper", function (node) {
+      if (!node) {
+        return;
+      }
+      _this.wrapperNode = node;
+      _this.resizeDetector.listenTo(node, _this.calculateScrollPosition);
+    });
+    _defineProperty(_assertThisInitialized(_this), "calculateScrollPosition", function () {
+      return scheduleScrollAction(function () {
+        var _assertThisInitialize = _assertThisInitialized(_this),
+          scrollableNode = _assertThisInitialize.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(_assertThisInitialized(_this), "scrollableNode", void 0);
+    _defineProperty(_assertThisInitialized(_this), "setScrollableNodeAndCalculatePosition", function (node) {
+      if (!node) {
+        return;
+      }
+      _this.scrollableNode = node;
+      _this.calculateScrollPosition();
+    });
+    return _this;
+  }
+  _createClass(Content, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.scrollableNode = null;
+      if (!this.wrapperNode) {
+        return;
+      }
+      this.resizeDetector.removeAllListeners(this.wrapperNode);
+    }
+  }, {
+    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));
+    }
+  }]);
+  return Content;
+}(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
+    }));
+  });
+});
+ContentWrapper.displayName = 'ContentWrapper';
+
+export { ContentWrapper as default };

package/components/island/header.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export interface IslandHeaderProps extends HTMLAttributes<HTMLElement> {
+    wrapWithTitle?: boolean | undefined;
+    border?: boolean | null | undefined;
+    phase?: number | undefined;
+}
+declare const HeaderWrapper: (props: IslandHeaderProps) => React.JSX.Element;
+export default HeaderWrapper;