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

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactElement, ReactNodeArray, HTMLAttributes, SyntheticEvent } from 'react';
+import { SelectHandlerParams } from '../list/list';
+import { AnchorProps, DropdownAttrs } from '../dropdown/dropdown';
+import PopupMenu, { PopupMenuAttrs } from '../popup-menu/popup-menu';
+import { ListDataItem } from '../list/consts';
+export interface DropdownAnchorWrapperProps extends AnchorProps {
+    anchor: ReactElement | ReactNodeArray | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
+    activeListItemId?: string | null | undefined;
+    listId?: string | undefined;
+}
+export interface DropdownMenuProps<T = unknown> extends Omit<DropdownAttrs, 'anchor' | 'onSelect' | 'children'> {
+    anchor: ReactElement | ReactNodeArray | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
+    data?: readonly ListDataItem<T>[] | undefined;
+    ariaLabel?: string | null | undefined;
+    onSelect?: ((item: ListDataItem<T>, event: Event | SyntheticEvent, params?: SelectHandlerParams) => void) | undefined;
+    menuProps?: PopupMenuAttrs<T> | null | undefined;
+}
+declare const _default: (<T = unknown>(props: DropdownMenuProps<T> & {
+    ref?: React.Ref<PopupMenu<unknown>> | undefined;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
+    ListProps: {
+        Type: typeof import("../list/consts").Type;
+        Dimension: {
+            ITEM_PADDING: number;
+            ITEM_HEIGHT: number;
+            COMPACT_ITEM_HEIGHT: number;
+            SEPARATOR_HEIGHT: number;
+            SEPARATOR_FIRST_HEIGHT: number;
+            SEPARATOR_TEXT_HEIGHT: number;
+            TITLE_HEIGHT: number;
+            INNER_PADDING: number;
+            MARGIN: number;
+        };
+    };
+};
+export default _default;

package/components/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,56 @@
+import React, { useMemo, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import List, { ActiveItemContext } from '../list/list';
+import Dropdown from '../dropdown/dropdown';
+import PopupMenu from '../popup-menu/popup-menu';
+import getUID from '../global/get-uid';
+import Anchor from '../dropdown/anchor';
+import { isArray } from '../global/typescript-utils';
+const { children, ...dropdownPropTypes } = Dropdown.propTypes || {};
+const { id: idPropType, data: dataPropType, ariaLabel: ariaLabelPropType, onSelect: onSelectPropType } = PopupMenu.propTypes || {};
+const defaultAriaLabel = 'Dropdown menu';
+function DropdownAnchorWrapper({ anchor, pinned, active, activeListItemId, listId, ...restProps }) {
+    const anchorAriaProps = useMemo(() => ({
+        ...(listId ? { 'aria-haspopup': true } : {}),
+        ...(activeListItemId ? { 'aria-activedescendant': activeListItemId, 'aria-owns': listId } : {}),
+        ...(active ? { 'aria-expanded': true } : {})
+    }), [active, activeListItemId, listId]);
+    const anchorProps = useMemo(() => ({ active, pinned, ...restProps, ...anchorAriaProps }), [pinned, active, restProps, anchorAriaProps]);
+    const anchorComponentProps = useMemo(() => ({ ...anchorProps, pinned: `${anchorProps.pinned}` }), [anchorProps]);
+    if (typeof anchor === 'string') {
+        return (<Anchor {...anchorComponentProps}>{anchor}</Anchor>);
+    }
+    if (typeof anchor === 'function') {
+        return anchor(({ active, pinned, ...restProps }), anchorAriaProps);
+    }
+    if (!isArray(anchor)) {
+        return cloneElement(anchor, typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps);
+    }
+    return (<div {...anchorAriaProps}>{anchor}</div>);
+}
+DropdownAnchorWrapper.propTypes = {
+    anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]).isRequired,
+    pinned: PropTypes.bool,
+    active: PropTypes.bool,
+    activeListItemId: PropTypes.string,
+    listId: PropTypes.string
+};
+const DropdownMenu = React.forwardRef(function DropdownMenu({ id, anchor, ariaLabel, data, onSelect, menuProps, ...restDropdownProps }, forwardedRef) {
+    const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);
+    return (<ActiveItemContext.Provider>
+      <Dropdown anchor={({ pinned, active, ...restAnchorProps }) => (<ActiveItemContext.ValueContext.Consumer>
+            {activeItemId => (<DropdownAnchorWrapper anchor={anchor} pinned={pinned} active={active} activeListItemId={activeItemId} listId={listId} {...restAnchorProps}/>)}
+          </ActiveItemContext.ValueContext.Consumer>)} {...restDropdownProps}>
+        <PopupMenu ref={forwardedRef} id={listId} ariaLabel={ariaLabel || defaultAriaLabel} closeOnSelect activateFirstItem data={data} onSelect={onSelect} {...menuProps}/>
+      </Dropdown>
+    </ActiveItemContext.Provider>);
+});
+DropdownMenu.propTypes = {
+    id: idPropType,
+    data: dataPropType,
+    ariaLabel: ariaLabelPropType,
+    onSelect: onSelectPropType,
+    menuProps: PropTypes.object,
+    ...dropdownPropTypes
+};
+export default Object.assign(DropdownMenu, { ListProps: List.ListProps });

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

@@ -0,0 +1,198 @@
+.editableHeading {
+  display: flex;
+  align-items: center;
+
+  min-width: 0;
+
+  &.fullSize {
+    width: 100%;
+  }
+
+  &.isEditing {
+    gap: var(--ring-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(var(--ring-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(var(--ring-unit) * 12);
+}
+
+.sizeM {
+  max-width: calc(var(--ring-unit) * 30);
+}
+
+.sizeL {
+  max-width: calc(var(--ring-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,77 @@
+: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 * var(--ring-unit));
+  padding-right: calc(2 * var(--ring-unit));
+  padding-left: calc(2 * var(--ring-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: var(--ring-unit);
+  height: var(--ring-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: var(--ring-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,54 @@
+@import "../global/variables.css";
+
+.errorBubblePopup {
+  overflow: visible;
+
+  margin-left: 2px;
+
+  border: none;
+
+  box-shadow: none;
+}
+
+.errorBubbleWrapper {
+  display: inline-block;
+}
+
+.errorBubble {
+  box-sizing: border-box;
+  min-height: calc(var(--ring-unit) * 3);
+  padding-right: calc(var(--ring-unit) * 2);
+  padding-left: calc(var(--ring-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: var(--ring-unit);
+  left: -4px;
+
+  display: block;
+
+  width: var(--ring-unit);
+  height: var(--ring-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);
+}