@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/input/input.css

@@ -0,0 +1,194 @@
+@import "../global/variables.css";
+@import "../button/button.css";
+
+.outerContainer {
+  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
+  --ring-input-padding-inline: var(--ring-unit);
+  --ring-input-background-color: var(--ring-content-background-color);
+}
+
+.borderless {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  --ring-input-padding-inline: 0px;
+}
+
+.container {
+  position: relative;
+
+  box-sizing: border-box;
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+
+  & * {
+    box-sizing: border-box;
+  }
+}
+
+.input {
+  --ring-input-padding-start: var(--ring-input-padding-inline);
+  --ring-input-padding-end: var(--ring-input-padding-inline);
+
+  width: 100%;
+
+  margin: 0;
+  padding-top: var(--ring-input-padding-block);
+  padding-right: var(--ring-input-padding-end);
+  padding-bottom: var(--ring-input-padding-block);
+  padding-left: var(--ring-input-padding-start);
+
+  transition: border-color var(--ring-ease);
+
+  color: var(--ring-text-color);
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  outline: none;
+  background-color: var(--ring-input-background-color);
+
+  font: inherit;
+
+  caret-color: var(--ring-main-color);
+
+  [dir="rtl"] & {
+    padding-right: var(--ring-input-padding-start);
+    padding-left: var(--ring-input-padding-end);
+  }
+
+  &:hover {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
+  }
+
+  .error & {
+    border-color: var(--ring-icon-error-color);
+  }
+
+  &:focus {
+    transition: none;
+
+    border-color: var(--ring-main-color);
+  }
+
+  &[disabled] {
+    color: var(--ring-disabled-color);
+    border-color: var(--ring-border-disabled-color);
+    background-color: var(--ring-disabled-background-color);
+
+    -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
+  }
+
+  /*
+    Kill yellow/blue webkit autocomplete
+    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
+  */
+  &:-webkit-autofill {
+    &,
+    &:hover,
+    &:focus {
+      transition: background-color 50000s ease-in-out 0s;
+    }
+  }
+}
+
+.borderless .input {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.withIcon .input {
+  --ring-input-padding-start: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
+}
+
+.clearable .input {
+  --ring-input-padding-end: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
+}
+
+.icon {
+  position: absolute;
+  top: calc(var(--ring-input-padding-block) + 1px);
+  left: var(--ring-input-padding-inline);
+
+  pointer-events: none;
+
+  color: var(--ring-icon-secondary-color);
+
+  [dir="rtl"] & {
+    right: var(--ring-unit);
+    left: auto;
+  }
+}
+
+.clear {
+  position: absolute;
+  top: calc(var(--ring-input-padding-block) + 2px);
+  right: var(--ring-input-padding-inline);
+
+  height: auto;
+
+  padding-right: 0;
+
+  line-height: inherit;
+
+  .empty & {
+    display: none;
+  }
+
+  [dir="rtl"] & {
+    right: auto;
+    left: var(--ring-unit);
+  }
+}
+
+textarea.input {
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  resize: none;
+}
+
+.input::placeholder {
+  color: var(--ring-disabled-color);
+}
+
+.input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+.errorText {
+  margin-top: calc(var(--ring-unit) / 2);
+
+  color: var(--ring-error-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}
+
+.sizeS {
+  width: calc(var(--ring-unit) * 12);
+}
+
+.sizeM {
+  width: calc(var(--ring-unit) * 30);
+}
+
+.sizeL {
+  width: calc(var(--ring-unit) * 50);
+}
+
+.sizeFULL {
+  width: 100%;
+}
+
+.heightS {
+  --ring-input-padding-block: 1px;
+}
+
+.heightM {
+  --ring-input-padding-block: 3px;
+}
+
+.heightL {
+  --ring-input-padding-block: 5px;
+}

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,165 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import closeIcon from '@jetbrains/icons/close-12px';
+import { refObject } from '../global/prop-types';
+import Button from '../button/button';
+import getUID from '../global/get-uid';
+import Icon from '../icon/icon';
+import { I18nContext } from '../i18n/i18n-context';
+import composeRefs from '../global/composeRefs';
+import { ControlsHeightContext } from '../global/controls-height';
+import { ControlLabel } from '../control-label/control-label';
+import styles from './input.css';
+function noop() { }
+/**
+ * @name Input
+ */
+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 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 = '0'; // To know the real scrollHeight
+        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, labelType, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, 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 (<I18nContext.Consumer>
+        {({ translate }) => (<div className={classes} data-test="ring-input">
+            {label && (<ControlLabel htmlFor={this.getId()} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
+            <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={translations?.clear ?? translate('clear')} data-test="ring-input-clear" className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
+              {afterInput}
+            </div>
+            {error && <div className={styles.errorText}>{error}</div>}
+          </div>)}
+      </I18nContext.Consumer>);
+    }
+}
+Input.propTypes = {
+    value: PropTypes.string,
+    className: PropTypes.string,
+    inputClassName: PropTypes.string,
+    size: PropTypes.oneOf(Object.values(Size)).isRequired,
+    label: PropTypes.node,
+    active: PropTypes.bool,
+    error: PropTypes.string,
+    multiline: PropTypes.bool,
+    onChange: PropTypes.func,
+    onClear: PropTypes.func,
+    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.isRequired)
+    ]),
+    disabled: PropTypes.bool,
+    id: PropTypes.string,
+    placeholder: PropTypes.string,
+    translations: PropTypes.object,
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType])
+};
+export default Input;
+export { Size };

package/components/input-size/input-size.css

@@ -0,0 +1,82 @@
+@import "../global/variables.css";
+
+:root {
+  --ring-input-xs: calc(var(--ring-unit) * 12);
+  --ring-input-s: calc(var(--ring-unit) * 12);
+  --ring-input-m: calc(var(--ring-unit) * 30);
+  --ring-input-l: calc(var(--ring-unit) * 50);
+}
+
+/**
+ * @name Input Sizes
+ */
+
+/* XS */
+
+:global(.ring-input-size_xs.ring-input-size_xs) {
+  display: inline-block;
+
+  width: var(--ring-input-xs);
+}
+
+:global(.ring-input-size_xs.ring-input-size_xs ~ .ring-error-bubble) {
+  left: calc(var(--ring-input-xs) + 2px);
+}
+
+/* S */
+
+:global(.ring-input-size_s.ring-input-size_s) {
+  display: inline-block;
+
+  width: var(--ring-input-s);
+}
+
+:global(.ring-input-size_s.ring-input-size_s ~ .ring-error-bubble) {
+  left: calc(var(--ring-input-s) + 2px);
+}
+
+/* M */
+
+:global(.ring-input-size_m.ring-input-size_m) {
+  display: inline-block;
+
+  width: var(--ring-input-m);
+}
+
+:global(.ring-input-size_m.ring-input-size_m ~ .ring-error-bubble) {
+  left: calc(var(--ring-input-m) + 2px);
+}
+
+:global(.ring-input-size_md.ring-input-size_md) {
+  display: inline-block;
+
+  width: var(--ring-input-m);
+}
+
+:global(.ring-input-size_md.ring-input-size_md ~ .ring-error-bubble) {
+  left: calc(var(--ring-input-m) + 2px);
+}
+
+/* L */
+
+:global(.ring-input-size_l.ring-input-size_l) {
+  display: inline-block;
+
+  width: var(--ring-input-l);
+}
+
+:global(.ring-input-size_l.ring-input-size_l ~ .ring-error-bubble) {
+  left: calc(var(--ring-input-l) + 2px);
+}
+
+:global(.ring-input-height_s.ring-input-height_s) {
+  --ring-input-padding-block: 1px;
+}
+
+:global(.ring-input-height_m.ring-input-height_m) {
+  --ring-input-padding-block: 3px;
+}
+
+:global(.ring-input-height_l.ring-input-height_l) {
+  --ring-input-padding-block: 5px;
+}

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

@@ -0,0 +1,73 @@
+import '../input/input-legacy.css';
+import '../form/form.css';
+import './input-size.css';
+import '../error-bubble/error-bubble-legacy.css';
+import React from 'react';
+
+export default {
+  title: 'Style-only/Input Sizes'
+};
+
+export const basic = () => (
+  <div>
+    <h3 className="example-block">Inputs</h3>
+    <div className="example-block">
+      <div className="ring-error-bubble-wrapper">
+        <input id="extra-short-input" type="number" className="ring-input ring-input-size_xs"/>
+        <label htmlFor="extra-short-input" className="ring-error-bubble active">Extra-short Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="short-input" type="number" className="ring-input ring-input-size_s"/>
+        <label htmlFor="short-input" className="ring-error-bubble active">Short Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="medium-input" type="number" className="ring-input ring-input-size_m"/>
+        <label htmlFor="medium-input" className="ring-error-bubble active">Medium Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="long-input" type="number" className="ring-input ring-input-size_l"/>
+        <label htmlFor="long-input" className="ring-error-bubble active">Long Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="full-width-input" type="number" className="ring-input"/>
+        <label htmlFor="full-width-input" className="ring-error-bubble active">Full-width Input</label>
+      </div>
+    </div>
+
+    <h3 className="example-block">Textareas</h3>
+    <div className="example-block">
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="extra-short-textarea" className="ring-input ring-input-size_xs"/>
+        <label htmlFor="extra-short-textarea" className="ring-error-bubble active">Extra-short Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="short-textarea" className="ring-input ring-input-size_s"/>
+        <label htmlFor="short-textarea" className="ring-error-bubble active">Short Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="medium-textarea" className="ring-input ring-input-size_m"/>
+        <label htmlFor="medium-textarea" className="ring-error-bubble active">Medium Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="long-textarea" className="ring-input ring-input-size_l"/>
+        <label htmlFor="long-textarea" className="ring-error-bubble active">Long Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="full-width-textarea" className="ring-input"/>
+        <label htmlFor="full-width-textarea" className="ring-error-bubble active">Full-width Textarea</label>
+      </div>
+    </div>
+  </div>
+);
+
+basic.storyName = 'Input Sizes';
+
+basic.parameters = {
+  storyStyles: `
+<style>
+  .example-block {
+    margin: 16px;
+    max-width: 600px;
+  }
+</style>`
+};

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,28 @@
+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(null);
+export const ScrollHandlerContext = createContext(null);
+export default function adaptiveIslandHOC(ComposedComponent) {
+    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>);
+        }
+    };
+}