@jetbrains/ring-ui 5.1.21 → 5.1.23

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

@@ -1,198 +0,0 @@
-@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-wrap: break-word;
-
-  border-radius: var(--ring-border-radius);
-
-  .multiline & {
-    -webkit-line-clamp: 3;
-  }
-}
-
-.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

@@ -1,32 +0,0 @@
-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

@@ -1,141 +0,0 @@
-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

@@ -1,79 +0,0 @@
-@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

@@ -1,56 +0,0 @@
-@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

@@ -1,18 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,37 +0,0 @@
-@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

@@ -1,27 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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>);
-    }
-}