@jetbrains/ring-ui 4.1.6 → 5.0.0-beta.3

package/components/input/input.js

@@ -1,39 +1,142 @@
-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 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 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'],
+        renderUnderline: (underlineRef, errorText) => (<div className={styles.errorText} ref={underlineRef}>{errorText}</div>)
+    };
+    state = {
+        empty: true
+    };
+    componentDidMount() {
+        this.adapt();
+    }
+    componentDidUpdate() {
+        this.adapt();
+    }
+    input;
+    underlineNode;
+    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}px`;
+    }
+    adapt() {
+        this.checkValue();
+        this.stretch(this.underlineNode);
+    }
+    underlineRef = (el) => {
+        this.underlineNode = el;
+    };
+    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
+        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, theme && 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 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">
+        {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}/>)}
+
+        {!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>);
+    }
+}
+Input.propTypes = {
     value: PropTypes.string,
-    theme: PropTypes.string,
+    theme: PropTypes.oneOf(Object.values(Theme)),
     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,
@@ -42,187 +145,21 @@ export class Input extends PureComponent {
     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};
+};
+const ThemedInput = withTheme()(Input);
+export default ThemedInput;
+export { Size, Theme };

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',

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: number;
+        };
+        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: number;
+        };
+        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: 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}>
           <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;