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

package/components/input/input.js

@@ -1,228 +1,161 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close';
-
-import Theme, {withTheme} from '../global/theme';
+import { refObject } from '../global/prop-types';
 import Button from '../button/button';
-
 import getUID from '../global/get-uid';
-
 import Icon from '../icon/icon';
-
+import composeRefs from '../global/composeRefs';
+import { ControlsHeightContext } from '../global/controls-height';
 import styles from './input.css';
-
-function noop() {}
-
+function noop() { }
 /**
  * @name Input
  */
-
-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 = {}));
 export class Input extends PureComponent {
-  static propTypes = {
+    static defaultProps = {
+        size: Size.M,
+        onChange: noop,
+        inputRef: noop,
+        enableShortcuts: ['esc']
+    };
+    state = {
+        empty: true
+    };
+    componentDidMount() {
+        this.frame = requestAnimationFrame(() => this.adapt());
+    }
+    componentDidUpdate() {
+        this.adapt();
+    }
+    componentWillUnmount() {
+        if (this.frame != null) {
+            cancelAnimationFrame(this.frame);
+        }
+    }
+    static contextType = ControlsHeightContext;
+    frame;
+    input;
+    id = getUID('ring-input-');
+    getId() {
+        return this.props.id || this.id;
+    }
+    checkValue() {
+        this.setState({
+            empty: !this.input?.value
+        });
+        if (this.props.multiline &&
+            this.input != null && this.input.scrollHeight > this.input.clientHeight) {
+            this.stretch(this.input);
+        }
+    }
+    stretch(el) {
+        if (!el || !el.style) {
+            return;
+        }
+        el.style.height = `${el.scrollHeight + 2}px`;
+    }
+    adapt() {
+        this.checkValue();
+    }
+    inputRef = (el) => {
+        this.input = el;
+    };
+    clear = (e) => {
+        this.props.onClear && this.props.onClear(e);
+    };
+    handleInputChange = (e) => {
+        if (!this.props.multiline) {
+            this.props.onChange?.(e);
+            this.checkValue();
+        }
+    };
+    handleTextareaChange = (e) => {
+        if (this.props.multiline) {
+            this.props.onChange?.(e);
+            this.checkValue();
+        }
+    };
+    render() {
+        const { 
+        // Modifiers
+        size, active, multiline, borderless, 
+        // Props
+        label, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, height = this.context, afterInput, ...restProps } = this.props;
+        const { empty } = this.state;
+        const clearable = !!onClear;
+        const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {
+            'ring-js-shortcuts': enableShortcuts === true,
+            [styles.active]: active,
+            [styles.error]: error != null,
+            [styles.empty]: empty,
+            [styles.noLabel]: !this.props.label,
+            [styles.withIcon]: icon != null,
+            [styles.clearable]: clearable,
+            [styles.borderless]: borderless
+        });
+        const inputClasses = classNames(styles.input, inputClassName);
+        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 (<div className={classes} data-test="ring-input">
+        {label && (<label htmlFor={this.getId()} className={classNames(styles.label, {
+                    [styles.disabledLabel]: disabled
+                })}>{label}</label>)}
+        <div className={styles.container}>
+          {icon && <Icon glyph={icon} className={styles.icon}/>}
+          {multiline
+                ? (<textarea onChange={this.handleTextareaChange} rows={1} {...commonProps} {...restProps}/>)
+                : (<input onChange={this.handleInputChange} {...commonProps} {...restProps}/>)}
+          {clearable && !disabled && (<Button title="Clear input" data-test="ring-input-clear" className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
+          {afterInput}
+        </div>
+        {error && <div className={styles.errorText}>{error}</div>}
+      </div>);
+    }
+}
+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)})
+        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
-  };
-
-  static defaultProps = {
-    size: Size.M,
-    onChange: noop,
-    inputRef: noop,
-    enableShortcuts: ['esc'],
-    renderUnderline: (underlineRef, errorText) => (
-      <div
-        className={styles.errorText}
-        ref={underlineRef}
-      >{errorText}</div>
-    )
-  };
-
-  state = {
-    empty: true
-  };
-
-  componentDidMount() {
-    this.adapt();
-  }
-
-  componentDidUpdate() {
-    this.adapt();
-  }
-
-  id = getUID('ring-input-');
-  getId() {
-    return this.props.id || this.id;
-  }
-
-  checkValue() {
-    this.setState({
-      empty: !this.input.value
-    });
-
-    if (this.props.multiline && this.input.scrollHeight > this.input.clientHeight) {
-      this.stretch(this.input);
-    }
-  }
-
-  stretch(el) {
-    if (!el || !el.style) {
-      return;
-    }
-    el.style.height = `${el.scrollHeight}px`;
-  }
-
-  adapt() {
-    this.checkValue();
-    this.stretch(this.underlineNode);
-  }
-
-  underlineRef = el => {
-    this.underlineNode = el;
-  };
-
-  inputRef = el => {
-    const {inputRef} = this.props;
-
-    this.input = el;
-    if (typeof inputRef === 'function') {
-      inputRef(el);
-    } else {
-      inputRef.current = el;
-    }
-  };
-
-  clear = e => {
-    this.props.onClear && this.props.onClear(e);
-  };
-
-  handleChange = e => {
-    this.props.onChange(e);
-    this.checkValue(e.target);
-  };
-
-  render() {
-    const {
-      // Modifiers
-      theme,
-      size,
-      active,
-      multiline,
-      borderless,
-      compact,
-
-      // Props
-      label,
-      error,
-      className,
-      inputClassName,
-      children,
-      value,
-      onClear,
-      disabled,
-      inputRef, onChange,
-      enableShortcuts,
-      id,
-      placeholder,
-      icon,
-      renderUnderline,
-      ...restProps
-    } = this.props;
-    const minimizeMargins = compact || borderless;
-    const {empty} = this.state;
-    const clearable = !!onClear;
-    const classes = classNames(
-      styles.container,
-      className,
-      styles[theme],
-      [styles[`size${size}`]],
-      {
-        'ring-js-shortcuts': enableShortcuts === true,
-        [styles.active]: active,
-        [styles.error]: error != null,
-        [styles.empty]: empty,
-        [styles.noLabel]: !this.props.label,
-        [styles.withIcon]: icon != null,
-        [styles.clearable]: clearable,
-        [styles.compact]: minimizeMargins
-      }
-    );
-
-    const inputClasses = classNames(styles.input, inputClassName);
-
-    const TagName = multiline ? 'textarea' : 'input';
-
-    const text = value != null ? value : children;
-
-    return (
-      <div
-        className={classes}
-        data-test="ring-input"
-      >
-        {icon && <Icon glyph={icon} className={styles.icon}/>}
-        <TagName
-          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 && (
-          <Button
-            title="Clear input"
-            data-test="ring-input-clear"
-            className={styles.clear}
-            icon={closeIcon}
-            onClick={this.clear}
-          />
-        )}
-
-        {!minimizeMargins && <label htmlFor={this.getId()} className={styles.label}>{label}</label>}
-        {!borderless && <div className={styles.underline}/>}
-        {!borderless && <div className={styles.focusUnderline}/>}
-        {!minimizeMargins && <div className={styles.errorUnderline}/>}
-        {!minimizeMargins && renderUnderline(this.underlineRef, error)}
-      </div>
-    );
-  }
-}
-
-export default withTheme()(Input);
-
-export {Size, Theme};
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType])
+};
+export default Input;
+export { Size };

package/components/input-ng/input-ng.examples.js

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import InputNG from '@jetbrains/ring-ui/components/input-ng/input-ng';
+import InputNG from './input-ng';
 
 export default {
   title: 'Legacy Angular/Input Ng',
@@ -113,7 +113,7 @@ basic.parameters = {
   }
 
   .inputs rg-input {
-    margin: 0 16px;
+    margin: 4px 16px;
   }
 
   .dark {

package/components/input-ng/input-ng.js

@@ -8,7 +8,6 @@ import closeIcon from '@jetbrains/icons/close';
 
 import RingAngularComponent from '../global/ring-angular-component';
 import styles from '../input/input.css';
-import Theme from '../global/theme';
 import ButtonNg from '../button-ng/button-ng';
 
 import styleOverrides from './input-ng.css';
@@ -33,7 +32,6 @@ class RingInputComponent extends RingAngularComponent {
     label: '@',
     hint: '@',
     size: '@',
-    theme: '@',
     disabled: '@',
     active: '<',
     error: '@',
@@ -84,9 +82,9 @@ class RingInputComponent extends RingAngularComponent {
 
   getContainerClasses() {
     return classNames(
-      styles.container,
-      styles[this.theme || Theme.LIGHT],
+      styles.outerContainer,
       this.size ? [styles[`size${this.size}`]] : null,
+      styles.heightS,
       {
         [styles.active]: this.active,
         [styles.error]: this.error != null,
@@ -103,56 +101,54 @@ class RingInputComponent extends RingAngularComponent {
   data-test="ring-input-container"
   ng-class="$ctrl.getContainerClasses()"
 >
-  <input
-    aria-label="{{$ctrl.label || $ctrl.placeholder}}"
-    type="text"
-    data-test="ring-input"
-    class="${styles.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="${styles.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="${styles.clear} ${styleOverrides.clear}"
-    icon="{{:: $ctrl.closeIcon}}"
-    ng-click="$ctrl.onClear()"
-  ></rg-button>
-
   <label
     ng-if="!$ctrl.borderless"
     class="${styles.label}"
   >{{$ctrl.label}}</label>
+  <div class="${styles.container}">
+    <input
+      aria-label="{{$ctrl.label || $ctrl.placeholder}}"
+      type="text"
+      data-test="ring-input"
+      class="${styles.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="${styles.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="${styles.clear} ${styleOverrides.clear}"
+      icon="{{:: $ctrl.closeIcon}}"
+      ng-click="$ctrl.onClear()"
+    ></rg-button>
+  </div>
 
-  <div ng-if="!$ctrl.borderless" class="${styles.underline}"></div>
-  <div ng-if="!$ctrl.borderless" class="${styles.focusUnderline}"></div>
-  <div ng-if="!$ctrl.borderless" class="${styles.errorUnderline}"></div>
   <div ng-if="!$ctrl.borderless && $ctrl.error" class="${styles.errorText} ${styleOverrides.errorText}">{{$ctrl.error}}</div>
 </div>
   `;

package/components/input-size/input-size.examples.js

@@ -2,12 +2,12 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import '@jetbrains/ring-ui/components/input/input-legacy.css';
-import '@jetbrains/ring-ui/components/form/form.css';
-import '@jetbrains/ring-ui/components/input-size/input-size.css';
+import '../input/input-legacy.css';
+import '../form/form.css';
+import './input-size.css';
 
-import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
-import QueryAssistNG from '@jetbrains/ring-ui/components/query-assist-ng/query-assist-ng';
+import SelectNG from '../select-ng/select-ng';
+import QueryAssistNG from '../query-assist-ng/query-assist-ng';
 
 export default {
   title: 'Style-only/Input Sizes',

package/components/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/components/island/adaptive-island-hoc.js

@@ -1,38 +1,28 @@
-import React, {Component, createContext} from 'react';
-
-import {interpolateLinear} from '../global/linear-function';
-
+import React, { Component, createContext } from 'react';
+import { interpolateLinear } from '../global/linear-function';
 const TITLE_RESIZE_END = 20;
 const TITLE_RESIZE_THRESHOLD = 36;
-
-export const PhaseContext = createContext();
-export const ScrollHandlerContext = createContext();
-
+export const PhaseContext = createContext(null);
+export const ScrollHandlerContext = createContext(null);
 export default function adaptiveIslandHOC(ComposedComponent) {
-
-  return class AdaptiveIsland extends Component {
-    static propTypes = ComposedComponent.propTypes;
-
-    state = {
-      phase: 0
-    };
-
-    onContentScroll = ({scrollTop, scrollHeight, clientHeight}) => {
-      if (scrollHeight - clientHeight >=
-        interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, this.state.phase)) {
-        const phase = Math.min(1, scrollTop / TITLE_RESIZE_END);
-        this.setState({phase});
-      }
-    };
-
-    render() {
-      return (
-        <PhaseContext.Provider value={this.state.phase}>
+    return class AdaptiveIsland extends Component {
+        static propTypes = ComposedComponent.propTypes;
+        state = {
+            phase: null
+        };
+        onContentScroll = ({ scrollTop, scrollHeight, clientHeight }) => {
+            if (scrollHeight - clientHeight >=
+                interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, this.state.phase ?? 0)) {
+                const phase = Math.min(1, scrollTop / TITLE_RESIZE_END);
+                this.setState({ phase });
+            }
+        };
+        render() {
+            return (<PhaseContext.Provider value={this.state.phase}>
           <ScrollHandlerContext.Provider value={this.onContentScroll}>
             <ComposedComponent {...this.props}/>
           </ScrollHandlerContext.Provider>
-        </PhaseContext.Provider>
-      );
-    }
-  };
+        </PhaseContext.Provider>);
+        }
+    };
 }

package/components/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;