@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/editable-heading/editable-heading.css

@@ -0,0 +1,200 @@
+@value unit from "../global/global.css";
+
+.editableHeading {
+  display: flex;
+  align-items: center;
+
+  min-width: 0;
+
+  &.fullSize {
+    width: 100%;
+  }
+
+  &.isEditing {
+    gap: unit;
+  }
+}
+
+.headingWrapperButton {
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+
+  cursor: pointer;
+  user-select: text;
+
+  text-align: inherit;
+
+  color: inherit;
+
+  border: none;
+  border-radius: var(--ring-border-radius);
+  outline: none;
+  background: inherit;
+
+  font-size: inherit;
+
+  .disabled &,
+  .selectionMode & {
+    user-select: text;
+
+    border-radius: 0;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px var(--ring-border-hover-color);
+  }
+
+  .disabled &:focus,
+  .selectionMode &:focus {
+    box-shadow: none;
+  }
+
+  &:hover {
+    background-color: var(--ring-hover-background-color);
+  }
+
+  .disabled &:hover,
+  .selectionMode &:hover {
+    cursor: initial;
+
+    background-color: initial;
+  }
+}
+
+.heading {
+  display: -webkit-box;
+  overflow: hidden;
+
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+
+  word-break: break-all;
+
+  border-radius: var(--ring-border-radius);
+
+  .multiline & {
+    -webkit-line-clamp: 3;
+
+    word-break: break-word;
+  }
+}
+
+.heading.heading,
+.heading.heading:first-child {
+  margin: 6px 0;
+
+  line-height: 28px;
+}
+
+.input {
+  margin-bottom: 2px;
+  padding: 0;
+  padding-top: 6px;
+  padding-bottom: 3px;
+
+  color: var(--ring-heading-color);
+  caret-color: var(--ring-main-color);
+
+  border: none;
+  border-bottom: 1px solid var(--ring-borders-color);
+  outline: none;
+  background-color: transparent;
+
+  font-family: var(--ring-font-family);
+  font-weight: bold;
+  line-height: 28px;
+
+  &::placeholder {
+    color: var(--ring-disabled-color);
+  }
+
+  &:focus {
+    margin-bottom: 1px;
+
+    border-bottom-width: 2px;
+    border-bottom-color: var(--ring-main-color);
+  }
+
+  &[disabled] {
+    background-color: initial;
+  }
+
+  .error & {
+    margin-bottom: 1px;
+
+    border-bottom-width: 2px;
+    border-bottom-color: var(--ring-icon-error-color);
+  }
+}
+
+.textarea {
+  resize: none;
+}
+
+.textareaNotOverflow {
+  overflow: hidden;
+}
+
+.textareaFade {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  width: 100%;
+  height: 30px;
+
+  content: "";
+  pointer-events: none;
+
+  background: linear-gradient(to bottom, rgba(var(--ring-content-background-components), 0), rgba(var(--ring-content-background-components), 1));
+}
+
+
+.textareaWrapper {
+  position: relative;
+
+  display: flex;
+}
+
+.button {
+  margin: 6px 0;
+}
+
+.errorText {
+  margin: calc(unit / 2) 0;
+
+  color: var(--ring-error-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}
+
+.level1 {
+  font-size: 24px;
+}
+
+.level2 {
+  font-size: 20px;
+}
+
+.level3 {
+  font-size: 16px;
+}
+
+.sizeS {
+  max-width: calc(unit * 12);
+}
+
+.sizeM {
+  max-width: calc(unit * 30);
+}
+
+.sizeL {
+  max-width: calc(unit * 50);
+}
+
+.sizeFULL {
+  max-width: 100%;
+}

package/components/editable-heading/editable-heading.d.ts

@@ -0,0 +1,32 @@
+import React, { InputHTMLAttributes } from 'react';
+import { Levels } from '../heading/heading';
+import { Size } from '../input/input';
+export { Levels };
+export { Size };
+export interface EditableHeadingTranslations {
+    save: string;
+    cancel: string;
+}
+export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'value' | 'size'> & {
+    level?: Levels;
+    headingClassName?: string | null;
+    inputClassName?: string | null;
+    isEditing?: boolean;
+    isSavingPossible?: boolean;
+    isSaving?: boolean;
+    children?: string;
+    embedded?: boolean;
+    size?: Size;
+    onEdit?: () => void;
+    onSave?: () => void;
+    onCancel?: () => void;
+    'data-test'?: string | null;
+    error?: string;
+    multiline?: boolean;
+    maxInputRows?: number;
+    renderMenu?: () => React.ReactNode;
+    translations?: EditableHeadingTranslations;
+};
+export declare const EditableHeading: (props: EditableHeadingProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => React.JSX.Element>;
+export default _default;

package/components/editable-heading/editable-heading.js

@@ -0,0 +1,141 @@
+import React, { useCallback, useEffect } from 'react';
+import classNames from 'classnames';
+import Heading, { Levels } from '../heading/heading';
+import Button from '../button/button';
+import { Size } from '../input/input';
+import inputStyles from '../input/input.css';
+import getUID from '../global/get-uid';
+import Shortcuts from '../shortcuts/shortcuts';
+import styles from './editable-heading.css';
+export { Levels };
+export { Size };
+function noop() { }
+export const EditableHeading = (props) => {
+    const { level = Levels.H1, className, headingClassName, inputClassName, children, isEditing = false, isSavingPossible = false, isSaving = false, embedded = false, size = Size.L, onEdit = noop, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, multiline = false, renderMenu = () => null, onFocus, onBlur, onChange, onScroll, maxInputRows, translations = {
+        save: 'Save',
+        cancel: 'Cancel'
+    }, ...restProps } = props;
+    const [shortcutsScope] = React.useState(getUID('ring-editable-heading-'));
+    const [isInFocus, setIsInFocus] = React.useState(false);
+    const [isMouseDown, setIsMouseDown] = React.useState(false);
+    const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);
+    const textAreaRef = React.useRef(null);
+    const [isScrolledToBottom, setIsScrolledToBottom] = React.useState(false);
+    const [isOverflow, setIsOverflow] = React.useState(false);
+    const hasError = error !== undefined;
+    const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
+    const isCancelDisabled = isSaving;
+    const isShortcutsDisabled = !isInFocus || isSaving;
+    const shortcutsMap = React.useMemo(() => {
+        const map = {};
+        if (!isSaveDisabled) {
+            map.enter = onSave;
+        }
+        if (isCancelDisabled) {
+            map.esc = onCancel;
+        }
+        return map;
+    }, [isSaveDisabled, isCancelDisabled, onSave, onCancel]);
+    const classes = classNames(styles.editableHeading, className, {
+        [styles.fullSize]: isEditing && size === Size.FULL,
+        [styles.isEditing]: isEditing,
+        [styles.error]: hasError,
+        [styles.disabled]: disabled,
+        [styles.multiline]: multiline,
+        [styles.selectionMode]: isInSelectionMode
+    });
+    const headingClasses = classNames(styles.heading, headingClassName, styles[`size${size}`]);
+    const inputClasses = classNames('ring-js-shortcuts', styles.input, styles.textarea, { [styles.textareaNotOverflow]: !isOverflow }, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
+    const stretch = useCallback((el) => {
+        if (!el || !el.style) {
+            return;
+        }
+        el.style.height = '0';
+        const { paddingTop, paddingBottom } = window.getComputedStyle(el);
+        el.style.height = `${el.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom)}px`;
+    }, []);
+    const checkValue = useCallback((el) => {
+        if (multiline && el != null && el.scrollHeight >= el.clientHeight) {
+            stretch(el);
+        }
+    }, [stretch, multiline]);
+    const checkOverflow = useCallback((el) => {
+        const scrollHeight = el.scrollHeight || 0;
+        const clientHeight = el.clientHeight || 0;
+        const scrollTop = el.scrollTop || 0;
+        setIsScrolledToBottom(scrollHeight - clientHeight <= scrollTop);
+        setIsOverflow(scrollHeight > clientHeight);
+    }, [setIsScrolledToBottom]);
+    const onHeadingMouseDown = React.useCallback(() => {
+        setIsMouseDown(true);
+    }, []);
+    const onMouseMove = React.useCallback(() => {
+        if (!isMouseDown) {
+            return;
+        }
+        setIsInSelectionMode(true);
+    }, [isMouseDown]);
+    const onMouseUp = React.useCallback(() => {
+        if (isMouseDown && !isInSelectionMode && !disabled) {
+            onEdit();
+        }
+        setIsMouseDown(false);
+        setIsInSelectionMode(false);
+    }, [isMouseDown, isInSelectionMode, disabled, onEdit]);
+    const onInputFocus = React.useCallback((e) => {
+        setIsInFocus(true);
+        checkValue(e.target);
+        checkOverflow(e.target);
+        onFocus?.(e);
+    }, [onFocus, checkOverflow, checkValue]);
+    const onInputChange = React.useCallback((e) => {
+        checkValue(e.target);
+        checkOverflow(e.target);
+        onChange?.(e);
+    }, [onChange, checkOverflow, checkValue]);
+    const onInputScroll = React.useCallback((e) => {
+        checkOverflow(e.target);
+        onScroll?.(e);
+    }, [onScroll, checkOverflow]);
+    const onInputBlur = React.useCallback((e) => {
+        setIsInFocus(false);
+        onBlur?.(e);
+    }, [onBlur]);
+    useEffect(() => {
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+        return () => {
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+    }, [onMouseMove, onMouseUp]);
+    return (<>
+      <div className={classes}>
+        {!disabled && isEditing
+            ? (<>
+              <Shortcuts map={shortcutsMap} scope={shortcutsScope} disabled={isShortcutsDisabled}/>
+
+              {!multiline
+                    ? (<input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>)
+                    : (<div className={classNames(styles.textareaWrapper, inputStyles[`size${size}`])}>
+                    <textarea ref={textAreaRef} className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onInputChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur} onScroll={onInputScroll} style={{ maxHeight: maxInputRows ? `${maxInputRows}lh` : '' }}/>
+                    {!isScrolledToBottom && <div className={styles.textareaFade}/>}
+                  </div>)}
+            </>)
+            : (<button type="button" className={styles.headingWrapperButton} onMouseDown={onHeadingMouseDown}>
+              <Heading className={headingClasses} level={level} data-test={dataTest}>{children}</Heading>
+            </button>)}
+
+        {!isEditing && (renderMenu())}
+
+        {isEditing && !embedded && (<>
+            <Button className={styles.button} primary disabled={isSaveDisabled} loader={isSaving} onClick={onSave}>{translations.save}</Button>
+
+            <Button className={styles.button} disabled={isCancelDisabled} onClick={onCancel}>{translations.cancel}</Button>
+          </>)}
+      </div>
+
+      {isEditing && error && (<div className={classNames(styles.errorText, inputStyles[`size${size}`])}>{error}</div>)}
+    </>);
+};
+export default React.memo(EditableHeading);

package/components/error-bubble/error-bubble-legacy.css

@@ -0,0 +1,79 @@
+@value unit from "../global/global.css";
+
+:global(.ring-error-bubble) {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: calc(100% + 2px);
+
+  display: none;
+
+  box-sizing: border-box;
+  min-height: calc(3 * unit);
+  padding-right: calc(2 * unit);
+  padding-left: calc(2 * unit);
+
+  white-space: nowrap;
+
+  color: var(--ring-error-color);
+  border: 1px solid var(--ring-popup-border-color);
+
+  border-radius: var(--ring-border-radius);
+  background: var(--ring-popup-background-color);
+  box-shadow: var(--ring-popup-shadow);
+
+  font-family: var(--ring-font-family);
+
+  font-size: 12px;
+
+  line-height: 22px;
+}
+
+:global(.ring-error-bubble.active) {
+  display: inline-block;
+}
+
+:global(.ring-error-bubble::before) {
+  position: absolute;
+  z-index: var(--ring-invisible-element-z-index);
+  top: 7px;
+  left: -5px;
+
+  display: block;
+
+  width: unit;
+  height: unit;
+
+  content: "";
+  transform: rotate(45deg);
+
+  border: 1px solid var(--ring-popup-border-color);
+  border-top: none;
+  border-right: none;
+
+  background: var(--ring-popup-background-color);
+}
+
+:global(.ring-error-bubble_material) {
+  padding-left: unit;
+
+  border: 0;
+  background: transparent none;
+  box-shadow: none;
+}
+
+:global(.ring-error-bubble_material::before) {
+  display: none;
+}
+
+:global(.ring-form__control .ring-error-bubble) {
+  top: 1px;
+}
+
+/**
+ * .ring-error-bubble requires a position: relative container.
+ * Use this class if your markup doesn't have one.
+ */
+:global(.ring-error-bubble-wrapper) {
+  position: relative;
+}

package/components/error-bubble/error-bubble.css

@@ -0,0 +1,56 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+.errorBubblePopup {
+  overflow: visible;
+
+  margin-left: 2px;
+
+  border: none;
+
+  box-shadow: none;
+}
+
+.errorBubbleWrapper {
+  display: inline-block;
+}
+
+.errorBubble {
+  box-sizing: border-box;
+  min-height: calc(unit * 3);
+  padding-right: calc(unit * 2);
+  padding-left: calc(unit * 2);
+
+  white-space: nowrap;
+
+  color: var(--ring-error-color);
+
+  border: 1px solid var(--ring-popup-border-color);
+  border-radius: var(--ring-border-radius);
+
+  background: var(--ring-popup-background-color);
+  box-shadow: var(--ring-popup-shadow);
+
+  font-size: 12px;
+  line-height: 22px;
+}
+
+.errorBubble::before {
+  position: absolute;
+  top: unit;
+  left: -4px;
+
+  display: block;
+
+  width: unit;
+  height: unit;
+
+  content: "";
+  transform: rotate(45deg);
+
+  border: 1px solid var(--ring-popup-border-color);
+  border-top: none;
+  border-right: none;
+  background: var(--ring-popup-background-color);
+}

package/components/error-bubble/error-bubble.d.ts

@@ -0,0 +1,18 @@
+import React, { PureComponent, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+export type ErrorBubbleProps<P> = Partial<P> & {
+    className?: string | null | undefined;
+    children: ReactElement<P> | ReactElement<P>[];
+    error?: string | null | undefined;
+};
+/**
+ * @name Error Bubble
+ */
+export default class ErrorBubble<P> extends PureComponent<ErrorBubbleProps<P>> {
+    static propTypes: {
+        error: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): React.JSX.Element;
+}

package/components/error-bubble/error-bubble.js

@@ -0,0 +1,28 @@
+import React, { Children, cloneElement, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Popup from '../popup/popup';
+import { Directions } from '../popup/popup.consts';
+import styles from './error-bubble.css';
+/**
+ * @name Error Bubble
+ */
+export default class ErrorBubble extends PureComponent {
+    static propTypes = {
+        error: PropTypes.string,
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, ...restProps } = this.props;
+        const errorBubbleClasses = classNames(styles.errorBubble, className);
+        return (<div className={styles.errorBubbleWrapper}>
+        {Children.map(children, (child) => cloneElement(child, { ...child.props, ...restProps }))}
+        {restProps.error && (<Popup trapFocus={false} className={styles.errorBubblePopup} hidden={false} attached={false} directions={[Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP]}>
+            <div className={errorBubbleClasses} data-test="ring-error-bubble">
+              {restProps.error}
+            </div>
+          </Popup>)}
+      </div>);
+    }
+}

package/components/error-message/error-message.css

@@ -0,0 +1,37 @@
+@import "../global/variables.css";
+
+.errorMessage {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+
+  max-width: 600px;
+  height: 100%;
+  margin: 0 auto;
+}
+
+.title {
+  font-size: 21px;
+}
+
+.description {
+  font-size: 15px;
+}
+
+.content {
+  flex-direction: column;
+
+  color: var(--ring-text-color);
+}
+
+.content > .title,
+.description {
+  margin-bottom: 16px;
+}
+
+.icon {
+  margin: 0 16px 24px 0;
+
+  color: var(--ring-icon-secondary-color);
+}

package/components/error-message/error-message.d.ts

@@ -0,0 +1,27 @@
+import React, { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { IconType } from '../icon/icon';
+export interface ErrorMessageProps {
+    children?: ReactNode;
+    icon?: string | IconType | null | undefined;
+    code?: string | null | undefined;
+    message?: string | null | undefined;
+    description?: string | null | undefined;
+    className?: string | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Error Message
+ */
+export default class ErrorMessage extends Component<ErrorMessageProps> {
+    static propTypes: {
+        icon: PropTypes.Requireable<NonNullable<PropTypes.ReactComponentLike | null | undefined>>;
+        code: PropTypes.Requireable<string>;
+        message: PropTypes.Requireable<string>;
+        description: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}

package/components/error-message/error-message.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Icon from '../icon/icon';
+import { Size } from '../icon/icon__constants';
+import dataTests from '../global/data-tests';
+import styles from './error-message.css';
+/**
+ * @name Error Message
+ */
+export default class ErrorMessage extends Component {
+    static propTypes = {
+        icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+        code: PropTypes.string,
+        message: PropTypes.string,
+        description: PropTypes.string,
+        children: PropTypes.node,
+        className: PropTypes.string,
+        'data-test': PropTypes.string
+    };
+    render() {
+        const { className, icon, code, message, description, children, 'data-test': dataTest } = this.props;
+        const classes = classNames(styles.errorMessage, className);
+        return (<div className={classes} data-test={dataTests('ring-error-message', dataTest)}>
+        {icon && (<Icon className={styles.icon} glyph={icon} size={Size.Size64} suppressSizeWarning/>)}
+        <div className={styles.content}>
+          <div className={styles.title}>
+            {code && `${code}:`} {message}
+          </div>
+          {description && (<div className={styles.description}>
+              {description}
+            </div>)}
+          {children}
+        </div>
+      </div>);
+    }
+}