@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/dist/input/input.js

@@ -3,11 +3,12 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close';
-import { withTheme } from '../global/theme.js';
-export { default as Theme } from '../global/theme.js';
-import Button from '../button/button.js';
+import { refObject } from '../global/prop-types.js';
+import { Button } from '../button/button.js';
 import getUID from '../global/get-uid.js';
 import Icon from '../icon/icon.js';
+import composeRefs from '../global/composeRefs.js';
+import { ControlsHeightContext } from '../global/controls-height.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
 import 'focus-visible';
 import '@jetbrains/icons/chevron-10px';
@@ -25,13 +26,16 @@ function noop() {}
  */
 
 
-const Size = {
-  AUTO: 'Auto',
-  S: 'S',
-  M: 'M',
-  L: 'L',
-  FULL: 'FULL'
-};
+var Size;
+
+(function (Size) {
+  Size["AUTO"] = "Auto";
+  Size["S"] = "S";
+  Size["M"] = "M";
+  Size["L"] = "L";
+  Size["FULL"] = "FULL";
+})(Size || (Size = {}));
+
 class Input extends PureComponent {
   constructor() {
     super(...arguments);
@@ -40,53 +44,65 @@ class Input extends PureComponent {
       empty: true
     });
 
-    _defineProperty(this, "id", getUID('ring-input-'));
+    _defineProperty(this, "frame", void 0);
 
-    _defineProperty(this, "underlineRef", el => {
-      this.underlineNode = el;
-    });
+    _defineProperty(this, "input", void 0);
+
+    _defineProperty(this, "id", getUID('ring-input-'));
 
     _defineProperty(this, "inputRef", el => {
-      const {
-        inputRef
-      } = this.props;
       this.input = el;
-
-      if (typeof inputRef === 'function') {
-        inputRef(el);
-      } else {
-        inputRef.current = el;
-      }
     });
 
     _defineProperty(this, "clear", e => {
       this.props.onClear && this.props.onClear(e);
     });
 
-    _defineProperty(this, "handleChange", e => {
-      this.props.onChange(e);
-      this.checkValue(e.target);
+    _defineProperty(this, "handleInputChange", e => {
+      if (!this.props.multiline) {
+        var _this$props$onChange, _this$props;
+
+        (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e);
+        this.checkValue();
+      }
+    });
+
+    _defineProperty(this, "handleTextareaChange", e => {
+      if (this.props.multiline) {
+        var _this$props$onChange2, _this$props2;
+
+        (_this$props$onChange2 = (_this$props2 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props2, e);
+        this.checkValue();
+      }
     });
   }
 
   componentDidMount() {
-    this.adapt();
+    this.frame = requestAnimationFrame(() => this.adapt());
   }
 
   componentDidUpdate() {
     this.adapt();
   }
 
+  componentWillUnmount() {
+    if (this.frame != null) {
+      cancelAnimationFrame(this.frame);
+    }
+  }
+
   getId() {
     return this.props.id || this.id;
   }
 
   checkValue() {
+    var _this$input;
+
     this.setState({
-      empty: !this.input.value
+      empty: !((_this$input = this.input) !== null && _this$input !== void 0 && _this$input.value)
     });
 
-    if (this.props.multiline && this.input.scrollHeight > this.input.clientHeight) {
+    if (this.props.multiline && this.input != null && this.input.scrollHeight > this.input.clientHeight) {
       this.stretch(this.input);
     }
   }
@@ -96,23 +112,20 @@ class Input extends PureComponent {
       return;
     }
 
-    el.style.height = `${el.scrollHeight}px`;
+    el.style.height = `${el.scrollHeight + 2}px`;
   }
 
   adapt() {
     this.checkValue();
-    this.stretch(this.underlineNode);
   }
 
   render() {
     const {
       // Modifiers
-      theme,
       size,
       active,
       multiline,
       borderless,
-      compact,
       // Props
       label,
       error,
@@ -128,15 +141,15 @@ class Input extends PureComponent {
       id,
       placeholder,
       icon,
-      renderUnderline,
+      height = this.context,
+      afterInput,
       ...restProps
     } = this.props;
-    const minimizeMargins = compact || borderless;
     const {
       empty
     } = this.state;
     const clearable = !!onClear;
-    const classes = classNames(modules_88cfaf40.container, className, modules_88cfaf40[theme], [modules_88cfaf40[`size${size}`]], {
+    const classes = classNames(className, modules_88cfaf40.outerContainer, [modules_88cfaf40[`size${size}`]], [modules_88cfaf40[`height${height}`]], {
       'ring-js-shortcuts': enableShortcuts === true,
       [modules_88cfaf40.active]: active,
       [modules_88cfaf40.error]: error != null,
@@ -144,85 +157,78 @@ class Input extends PureComponent {
       [modules_88cfaf40.noLabel]: !this.props.label,
       [modules_88cfaf40.withIcon]: icon != null,
       [modules_88cfaf40.clearable]: clearable,
-      [modules_88cfaf40.compact]: minimizeMargins
+      [modules_88cfaf40.borderless]: borderless
     });
     const inputClasses = classNames(modules_88cfaf40.input, inputClassName);
-    const TagName = multiline ? 'textarea' : 'input';
     const text = value != null ? value : children;
+    const commonProps = {
+      ref: composeRefs(this.inputRef, inputRef),
+      className: inputClasses,
+      value: text,
+      disabled,
+      id: this.getId(),
+      placeholder,
+      'aria-label': typeof label === 'string' && label ? label : placeholder,
+      'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
+    };
     return /*#__PURE__*/React.createElement("div", {
       className: classes,
       "data-test": "ring-input"
+    }, label && /*#__PURE__*/React.createElement("label", {
+      htmlFor: this.getId(),
+      className: classNames(modules_88cfaf40.label, {
+        [modules_88cfaf40.disabledLabel]: disabled
+      })
+    }, label), /*#__PURE__*/React.createElement("div", {
+      className: modules_88cfaf40.container
     }, icon && /*#__PURE__*/React.createElement(Icon, {
       glyph: icon,
       className: modules_88cfaf40.icon
-    }), /*#__PURE__*/React.createElement(TagName, _extends({
-      ref: this.inputRef,
-      onChange: this.handleChange,
-      className: inputClasses,
-      value: text,
-      rows: multiline ? 1 : null,
-      disabled: disabled,
-      id: this.getId(),
-      placeholder: placeholder,
-      "aria-label": typeof label === 'string' && label ? label : placeholder,
-      "data-enabled-shortcuts": Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
-    }, restProps)), clearable && !disabled && /*#__PURE__*/React.createElement(Button, {
+    }), multiline ? /*#__PURE__*/React.createElement("textarea", _extends({
+      onChange: this.handleTextareaChange,
+      rows: 1
+    }, commonProps, restProps)) : /*#__PURE__*/React.createElement("input", _extends({
+      onChange: this.handleInputChange
+    }, commonProps, restProps)), clearable && !disabled && /*#__PURE__*/React.createElement(Button, {
       title: "Clear input",
       "data-test": "ring-input-clear",
       className: modules_88cfaf40.clear,
       icon: closeIcon,
       onClick: this.clear
-    }), !minimizeMargins && /*#__PURE__*/React.createElement("label", {
-      htmlFor: this.getId(),
-      className: modules_88cfaf40.label
-    }, label), !borderless && /*#__PURE__*/React.createElement("div", {
-      className: modules_88cfaf40.underline
-    }), !borderless && /*#__PURE__*/React.createElement("div", {
-      className: modules_88cfaf40.focusUnderline
-    }), !minimizeMargins && /*#__PURE__*/React.createElement("div", {
-      className: modules_88cfaf40.errorUnderline
-    }), !minimizeMargins && renderUnderline(this.underlineRef, error));
+    }), afterInput), error && /*#__PURE__*/React.createElement("div", {
+      className: modules_88cfaf40.errorText
+    }, error));
   }
 
 }
 
-_defineProperty(Input, "propTypes", {
+_defineProperty(Input, "defaultProps", {
+  size: Size.M,
+  onChange: noop,
+  inputRef: noop,
+  enableShortcuts: ['esc']
+});
+
+_defineProperty(Input, "contextType", ControlsHeightContext);
+
+Input.propTypes = {
   value: PropTypes.string,
-  theme: PropTypes.string,
   className: PropTypes.string,
   inputClassName: PropTypes.string,
-  size: PropTypes.string,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  size: PropTypes.oneOf(Object.values(Size)).isRequired,
+  label: PropTypes.node,
   active: PropTypes.bool,
   error: PropTypes.string,
   multiline: PropTypes.bool,
-  borderless: PropTypes.bool,
-  compact: PropTypes.bool,
   onChange: PropTypes.func,
   onClear: PropTypes.func,
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(HTMLInputElement)
-  })]),
+  inputRef: PropTypes.oneOfType([PropTypes.func, refObject(PropTypes.instanceOf(HTMLInputElement)), refObject(PropTypes.instanceOf(HTMLTextAreaElement))]),
   children: PropTypes.string,
-  enableShortcuts: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.string)]),
+  enableShortcuts: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.string.isRequired)]),
   disabled: PropTypes.bool,
   id: PropTypes.string,
   placeholder: PropTypes.string,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  renderUnderline: PropTypes.func
-});
-
-_defineProperty(Input, "defaultProps", {
-  size: Size.M,
-  onChange: noop,
-  inputRef: noop,
-  enableShortcuts: ['esc'],
-  renderUnderline: (underlineRef, errorText) => /*#__PURE__*/React.createElement("div", {
-    className: modules_88cfaf40.errorText,
-    ref: underlineRef
-  }, errorText)
-});
-
-var Input$1 = withTheme()(Input);
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType])
+};
 
-export { Input, Size, Input$1 as default };
+export { Input, Size, Input as default };

package/dist/input-ng/input-ng.js

@@ -4,15 +4,15 @@ import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close';
 import RingAngularComponent from '../global/ring-angular-component.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
-import Theme from '../global/theme.js';
 import ButtonNG from '../button-ng/button-ng.js';
-import 'react';
 import '../global/dom.js';
 import '../icon-ng/icon-ng.js';
 import '../icon/icon__constants.js';
 import '../template-ng/template-ng.js';
 import '../_helpers/icon.js';
 import '../_helpers/button__classes.js';
+import '../global/controls-height.js';
+import 'react';
 
 var modules_c40fa551 = {"errorText":"errorText_rui_e22b","clear":"clear_rui_e22b"};
 
@@ -62,7 +62,7 @@ class RingInputComponent extends RingAngularComponent {
   }
 
   getContainerClasses() {
-    return classNames(modules_88cfaf40.container, modules_88cfaf40[this.theme || Theme.LIGHT], this.size ? [modules_88cfaf40[`size${this.size}`]] : null, {
+    return classNames(modules_88cfaf40.outerContainer, this.size ? [modules_88cfaf40[`size${this.size}`]] : null, modules_88cfaf40.heightS, {
       [modules_88cfaf40.active]: this.active,
       [modules_88cfaf40.error]: this.error != null,
       [modules_88cfaf40.empty]: !this.value,
@@ -91,7 +91,6 @@ _defineProperty(RingInputComponent, "bindings", {
   label: '@',
   hint: '@',
   size: '@',
-  theme: '@',
   disabled: '@',
   active: '<',
   error: '@',
@@ -106,56 +105,54 @@ _defineProperty(RingInputComponent, "template", `
   data-test="ring-input-container"
   ng-class="$ctrl.getContainerClasses()"
 >
-  <input
-    aria-label="{{$ctrl.label || $ctrl.placeholder}}"
-    type="text"
-    data-test="ring-input"
-    class="${modules_88cfaf40.input}"
-    name="{{$ctrl.name}}"
-    ng-if="!$ctrl.multiline"
-    placeholder="{{$ctrl.placeholder}}"
-    ng-model="$ctrl.value"
-    ng-required="$ctrl.required"
-    ng-disabled="$ctrl.disabled"
-    ng-minlength="$ctrl.ngMinlength"
-    ng-maxlength="$ctrl.ngMaxlength"
-    ng-change="$ctrl.onInputChange()"
-    ng-keyup="$ctrl.onKeyUp()"
-  />
-
-  <textarea
-    aria-label="{{$ctrl.label || $ctrl.placeholder}}"
-    data-test="ring-input"
-    ng-if="$ctrl.multiline"
-    class="${modules_88cfaf40.input}"
-    rows="1"
-    name="{{$ctrl.name}}"
-    placeholder="{{$ctrl.placeholder}}"
-    ng-model="$ctrl.value"
-    ng-required="$ctrl.required"
-    ng-disabled="$ctrl.disabled"
-    ng-minlength="$ctrl.ngMinlength"
-    ng-maxlength="$ctrl.ngMaxlength"
-    ng-change="$ctrl.onInputChange()"
-    ng-keyup="$ctrl.onKeyUp()"
-  ></textarea>
-
-  <rg-button
-    ng-if="$ctrl.clearable"
-    data-test="ring-input-clear"
-    class="${modules_88cfaf40.clear} ${modules_c40fa551.clear}"
-    icon="{{:: $ctrl.closeIcon}}"
-    ng-click="$ctrl.onClear()"
-  ></rg-button>
-
   <label
     ng-if="!$ctrl.borderless"
     class="${modules_88cfaf40.label}"
   >{{$ctrl.label}}</label>
+  <div class="${modules_88cfaf40.container}">
+    <input
+      aria-label="{{$ctrl.label || $ctrl.placeholder}}"
+      type="text"
+      data-test="ring-input"
+      class="${modules_88cfaf40.input}"
+      name="{{$ctrl.name}}"
+      ng-if="!$ctrl.multiline"
+      placeholder="{{$ctrl.placeholder}}"
+      ng-model="$ctrl.value"
+      ng-required="$ctrl.required"
+      ng-disabled="$ctrl.disabled"
+      ng-minlength="$ctrl.ngMinlength"
+      ng-maxlength="$ctrl.ngMaxlength"
+      ng-change="$ctrl.onInputChange()"
+      ng-keyup="$ctrl.onKeyUp()"
+    />
+
+    <textarea
+      aria-label="{{$ctrl.label || $ctrl.placeholder}}"
+      data-test="ring-input"
+      ng-if="$ctrl.multiline"
+      class="${modules_88cfaf40.input}"
+      rows="1"
+      name="{{$ctrl.name}}"
+      placeholder="{{$ctrl.placeholder}}"
+      ng-model="$ctrl.value"
+      ng-required="$ctrl.required"
+      ng-disabled="$ctrl.disabled"
+      ng-minlength="$ctrl.ngMinlength"
+      ng-maxlength="$ctrl.ngMaxlength"
+      ng-change="$ctrl.onInputChange()"
+      ng-keyup="$ctrl.onKeyUp()"
+    ></textarea>
+
+    <rg-button
+      ng-if="$ctrl.clearable"
+      data-test="ring-input-clear"
+      class="${modules_88cfaf40.clear} ${modules_c40fa551.clear}"
+      icon="{{:: $ctrl.closeIcon}}"
+      ng-click="$ctrl.onClear()"
+    ></rg-button>
+  </div>
 
-  <div ng-if="!$ctrl.borderless" class="${modules_88cfaf40.underline}"></div>
-  <div ng-if="!$ctrl.borderless" class="${modules_88cfaf40.focusUnderline}"></div>
-  <div ng-if="!$ctrl.borderless" class="${modules_88cfaf40.errorUnderline}"></div>
   <div ng-if="!$ctrl.borderless && $ctrl.error" class="${modules_88cfaf40.errorText} ${modules_c40fa551.errorText}">{{$ctrl.error}}</div>
 </div>
   `);

package/dist/island/adaptive-island-hoc.d.ts

@@ -0,0 +1,65 @@
+import React, { ComponentType } from 'react';
+export declare const PhaseContext: React.Context<number | null>;
+declare 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(): JSX.Element;
+        context: any;
+        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> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        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(): JSX.Element;
+        context: any;
+        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> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        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/dist/island/adaptive-island-hoc.js

@@ -4,8 +4,8 @@ import { interpolateLinear } from '../global/linear-function.js';
 
 const TITLE_RESIZE_END = 20;
 const TITLE_RESIZE_THRESHOLD = 36;
-const PhaseContext = /*#__PURE__*/createContext();
-const ScrollHandlerContext = /*#__PURE__*/createContext();
+const PhaseContext = /*#__PURE__*/createContext(null);
+const ScrollHandlerContext = /*#__PURE__*/createContext(null);
 function adaptiveIslandHOC(ComposedComponent) {
   var _class, _temp;
 
@@ -14,17 +14,19 @@ function adaptiveIslandHOC(ComposedComponent) {
       super(...arguments);
 
       _defineProperty(this, "state", {
-        phase: 0
+        phase: null
       });
 
       _defineProperty(this, "onContentScroll", _ref => {
+        var _this$state$phase;
+
         let {
           scrollTop,
           scrollHeight,
           clientHeight
         } = _ref;
 
-        if (scrollHeight - clientHeight >= interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, this.state.phase)) {
+        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

package/dist/island/content.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+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 const ContentWrapper: (props: IslandContentProps) => JSX.Element;
+export default ContentWrapper;

package/dist/island/content.js

@@ -27,6 +27,8 @@ class Content extends Component {
       strategy: 'scroll'
     }));
 
+    _defineProperty(this, "wrapperNode", void 0);
+
     _defineProperty(this, "setWrapper", node => {
       if (!node) {
         return;
@@ -45,6 +47,7 @@ class Content extends Component {
         return;
       }
 
+      this.props.onScroll(scrollableNode);
       const {
         scrollTop,
         scrollHeight,
@@ -54,7 +57,9 @@ class Content extends Component {
       const scrolledToBottom = offsetHeight + scrollTop >= scrollHeight - END_DISTANCE;
 
       if (scrolledToBottom) {
-        this.props.onScrollToBottom();
+        var _this$props$onScrollT, _this$props;
+
+        (_this$props$onScrollT = (_this$props = this.props).onScrollToBottom) === null || _this$props$onScrollT === void 0 ? void 0 : _this$props$onScrollT.call(_this$props);
       }
 
       this.setState({
@@ -63,10 +68,7 @@ class Content extends Component {
       });
     }));
 
-    _defineProperty(this, "onScroll", () => {
-      this.props.onScroll(this.scrollableNode);
-      this.calculateScrollPosition();
-    });
+    _defineProperty(this, "scrollableNode", void 0);
 
     _defineProperty(this, "setScrollableNodeAndCalculatePosition", node => {
       if (!node) {
@@ -120,7 +122,7 @@ class Content extends Component {
       "data-scrollable-container": true,
       className: scrollableWrapperClasses,
       ref: this.setScrollableNodeAndCalculatePosition,
-      onScroll: fade ? this.onScroll : noop
+      onScroll: fade ? this.calculateScrollPosition : noop
     }, fade && /*#__PURE__*/React.createElement("div", {
       ref: this.setWrapper
     }, children), !fade && children));

package/dist/island/header.d.ts

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

package/dist/island/header.js

@@ -9,11 +9,17 @@ import { PhaseContext } from './adaptive-island-hoc.js';
 const Start = {
   FONT_SIZE: 24,
   LINE_HEIGHT: 28,
-  PADDING: 16
+  PADDING_TOP: 24,
+  PADDING_BOTTOM: 0,
+  X: 0,
+  Y: 0,
+  SPACING: 0
 };
 const End = {
   FONT_SIZE: 13,
-  LINE_HEIGHT: 28,
+  LINE_HEIGHT: 20,
+  PADDING_TOP: 16,
+  PADDING_BOTTOM: 8,
   // Compensation
   X: 0.4,
   Y: 0.1,
@@ -23,7 +29,9 @@ const BORDER_APPEAR_PHASE = 0.5;
 
 class Header extends Component {
   style(name) {
-    return interpolateLinear(Start[name] || 0, End[name] || 0, this.props.phase);
+    var _this$props$phase;
+
+    return interpolateLinear(Start[name], End[name], (_this$props$phase = this.props.phase) !== null && _this$props$phase !== void 0 ? _this$props$phase : 0);
   }
 
   render() {
@@ -36,19 +44,19 @@ class Header extends Component {
       ...restProps
     } = this.props;
     const classes = classNames(modules_e6a056e1.header, className, {
-      [modules_e6a056e1.withBottomBorder]: border || phase >= BORDER_APPEAR_PHASE
+      [modules_e6a056e1.withBottomBorder]: border || phase != null && phase >= BORDER_APPEAR_PHASE
     });
     const headerStyle = phase != null ? {
       lineHeight: `${this.style('LINE_HEIGHT')}px`,
-      // need to append px because number is a valid line-height value
-      paddingTop: this.style('PADDING')
-    } : null;
+      paddingTop: this.style('PADDING_TOP'),
+      paddingBottom: this.style('PADDING_BOTTOM')
+    } : undefined;
     const scaleFont = phase != null && this.style('FONT_SIZE') / Start.FONT_SIZE;
     const titleStyle = phase != null && phase < 1 ? {
       fontSize: Start.FONT_SIZE,
       transform: `translate(${this.style('X')}px, ${this.style('Y')}px) scale(${scaleFont})`,
       letterSpacing: this.style('SPACING')
-    } : null;
+    } : undefined;
     return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
       "data-test": "ring-island-header",
       className: classes,