@jetbrains/ring-ui 5.0.46 → 5.0.47

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

@@ -2,11 +2,15 @@
 
 .editableHeading {
   display: flex;
-  gap: unit;
+  align-items: center;
 
   &.fullSize {
     width: 100%;
   }
+
+  &.isEditing {
+    gap: unit;
+  }
 }
 
 .heading.heading {
@@ -61,6 +65,10 @@
     border-bottom-color: var(--ring-main-color);
   }
 
+  &[disabled] {
+    background-color: initial;
+  }
+
   @nest .error & {
     margin-bottom: 1px;
 
@@ -73,6 +81,15 @@
   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;
 }

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

@@ -4,23 +4,22 @@ import { Size } from '../input/input';
 export { Levels };
 export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'> & {
     level?: Levels;
-    className?: string | null;
     headingClassName?: string | null;
     inputClassName?: string | null;
-    editing?: boolean;
-    edited?: boolean;
+    isEditing?: boolean;
+    isSavingPossible?: boolean;
+    isSaving?: boolean;
     children?: string;
-    placeholder?: string;
     embedded?: boolean;
     size?: Size;
     onEdit?: () => void;
     onSave?: () => void;
     onCancel?: () => void;
-    autoFocus?: boolean;
     'data-test'?: string | null;
-    error?: boolean;
-    disabled?: boolean;
+    error?: string;
+    renderMenu?: () => React.ReactNode;
 };
+export { Size } from '../input/input';
 export declare const EditableHeading: (props: EditableHeadingProps) => JSX.Element;
 declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => JSX.Element>;
 export default _default;

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

@@ -4,42 +4,55 @@ import Heading, { Levels } from '../heading/heading';
 import Button from '../button/button';
 import { Size } from '../input/input';
 import inputStyles from '../input/input.css';
-import { ControlsHeight } from '../global/controls-height';
 import getUID from '../global/get-uid';
 import Shortcuts from '../shortcuts/shortcuts';
 import styles from './editable-heading.css';
 export { Levels };
 function noop() { }
 const shortcutsScope = getUID('ring-editable-heading-');
+export { Size } from '../input/input';
 export const EditableHeading = (props) => {
-    const { level = Levels.H1, className, headingClassName, inputClassName, editing, edited, children, placeholder, embedded = false, size = Size.L, onEdit, onSave = noop, onCancel = noop, autoFocus, 'data-test': dataTest, error, disabled, ...restProps } = props;
+    const { level = Levels.H1, className, headingClassName, inputClassName, isEditing, isSavingPossible, isSaving, children, embedded = false, size = Size.L, onEdit, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, renderMenu = () => null, ...restProps } = props;
+    const hasError = error !== undefined;
     const classes = classNames(styles.editableHeading, className, {
         [styles.fullSize]: size === Size.FULL,
-        [styles.error]: error,
+        [styles.isEditing]: isEditing,
+        [styles.error]: hasError,
         [styles.disabled]: disabled
     });
     const headingClasses = classNames(styles.heading, headingClassName);
     const inputClasses = classNames('ring-js-shortcuts', styles.input, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
-    const onClick = () => {
+    const onClick = React.useCallback(() => {
         if (disabled || !onEdit) {
             return undefined;
         }
         return onEdit();
-    };
-    return (<div className={classes}>
-      {!disabled && editing
+    }, [disabled, onEdit]);
+    const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
+    const isCancelDisabled = isSaving;
+    return (<>
+      <div className={classes}>
+        {!disabled && isEditing
             ? (<>
-            <Shortcuts map={{ enter: onSave, esc: onCancel }} scope={shortcutsScope}/>
+              <Shortcuts map={{
+                    enter: () => !isSaveDisabled && onSave(),
+                    esc: () => !isCancelDisabled && onCancel()
+                }} scope={shortcutsScope} disabled={isSaving}/>
 
-            <input className={inputClasses} value={children} placeholder={placeholder} autoFocus={autoFocus} data-test={dataTest} {...restProps}/>
-          </>)
+              <input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} {...restProps}/>
+            </>)
             : (<Heading className={headingClasses} level={level} onClick={onClick} data-test={dataTest}>{children}</Heading>)}
 
-      {editing && !embedded && (<>
-          <Button height={ControlsHeight.M} className={styles.button} primary disabled={!edited || !children || children?.trim() === '' || error} onClick={onSave}>{'Save'}</Button>
+        {!isEditing && (renderMenu())}
 
-          <Button height={ControlsHeight.M} className={styles.button} onClick={onCancel}>{'Cancel'}</Button>
-        </>)}
-    </div>);
+        {isEditing && !embedded && (<>
+            <Button className={styles.button} primary disabled={isSaveDisabled} loader={isSaving} onClick={onSave}>{'Save'}</Button>
+
+            <Button className={styles.button} disabled={isCancelDisabled} onClick={onCancel}>{'Cancel'}</Button>
+          </>)}
+      </div>
+
+      {isEditing && error && (<div className={classNames(styles.errorText, inputStyles[`size${size}`])}>{error}</div>)}
+    </>);
 };
 export default React.memo(EditableHeading);

package/components/global/variables_dark.css

@@ -1,5 +1,6 @@
 /* stylelint-disable color-no-hex */
 
+:global(.ring-ui-theme-dark),
 .dark,
 :root.dark {
   --ring-line-components: 71, 81, 89;

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

@@ -4,23 +4,22 @@ import { Size } from '../input/input';
 export { Levels };
 export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'> & {
     level?: Levels;
-    className?: string | null;
     headingClassName?: string | null;
     inputClassName?: string | null;
-    editing?: boolean;
-    edited?: boolean;
+    isEditing?: boolean;
+    isSavingPossible?: boolean;
+    isSaving?: boolean;
     children?: string;
-    placeholder?: string;
     embedded?: boolean;
     size?: Size;
     onEdit?: () => void;
     onSave?: () => void;
     onCancel?: () => void;
-    autoFocus?: boolean;
     'data-test'?: string | null;
-    error?: boolean;
-    disabled?: boolean;
+    error?: string;
+    renderMenu?: () => React.ReactNode;
 };
+export { Size } from '../input/input';
 export declare const EditableHeading: (props: EditableHeadingProps) => JSX.Element;
 declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => JSX.Element>;
 export default _default;

package/dist/editable-heading/editable-heading.js

@@ -5,8 +5,8 @@ import Heading, { Levels } from '../heading/heading.js';
 export { Levels } from '../heading/heading.js';
 import { Button } from '../button/button.js';
 import { Size } from '../input/input.js';
+export { Size } from '../input/input.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
-import { ControlsHeight } from '../global/controls-height.js';
 import getUID from '../global/get-uid.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import 'prop-types';
@@ -19,6 +19,7 @@ import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
 import '../global/memoize.js';
 import '../link/clickableLink.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '@jetbrains/icons/close-12px';
 import '../global/prop-types.js';
@@ -28,7 +29,7 @@ import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 
-var modules_6e69b0fe = {"unit":"8px","editableHeading":"editableHeading_rui_0870","fullSize":"fullSize_rui_0870","heading":"heading_rui_0870","disabled":"disabled_rui_0870","input":"input_rui_0870","error":"error_rui_0870","button":"button_rui_0870","level1":"level1_rui_0870","level2":"level2_rui_0870","level3":"level3_rui_0870"};
+var modules_6e69b0fe = {"unit":"8px","editableHeading":"editableHeading_rui_0870","fullSize":"fullSize_rui_0870","isEditing":"isEditing_rui_0870","heading":"heading_rui_0870","disabled":"disabled_rui_0870","input":"input_rui_0870","error":"error_rui_0870","button":"button_rui_0870","errorText":"errorText_rui_0870","level1":"level1_rui_0870","level2":"level2_rui_0870","level3":"level3_rui_0870"};
 
 function noop() {}
 const shortcutsScope = getUID('ring-editable-heading-');
@@ -38,64 +39,72 @@ const EditableHeading = props => {
     className,
     headingClassName,
     inputClassName,
-    editing,
-    edited,
+    isEditing,
+    isSavingPossible,
+    isSaving,
     children,
-    placeholder,
     embedded = false,
     size = Size.L,
     onEdit,
     onSave = noop,
     onCancel = noop,
-    autoFocus,
+    autoFocus = true,
     'data-test': dataTest,
     error,
     disabled,
+    renderMenu = () => null,
     ...restProps
   } = props;
+  const hasError = error !== undefined;
   const classes = classNames(modules_6e69b0fe.editableHeading, className, {
     [modules_6e69b0fe.fullSize]: size === Size.FULL,
-    [modules_6e69b0fe.error]: error,
+    [modules_6e69b0fe.isEditing]: isEditing,
+    [modules_6e69b0fe.error]: hasError,
     [modules_6e69b0fe.disabled]: disabled
   });
   const headingClasses = classNames(modules_6e69b0fe.heading, headingClassName);
   const inputClasses = classNames('ring-js-shortcuts', modules_6e69b0fe.input, modules_88cfaf40[`size${size}`], modules_6e69b0fe[`level${level}`], inputClassName);
-  const onClick = () => {
+  const onClick = React.useCallback(() => {
     if (disabled || !onEdit) {
       return undefined;
     }
     return onEdit();
-  };
-  return /*#__PURE__*/React.createElement("div", {
+  }, [disabled, onEdit]);
+  const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
+  const isCancelDisabled = isSaving;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classes
-  }, !disabled && editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Shortcuts, {
+  }, !disabled && isEditing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Shortcuts, {
     map: {
-      enter: onSave,
-      esc: onCancel
+      enter: () => !isSaveDisabled && onSave(),
+      esc: () => !isCancelDisabled && onCancel()
     },
-    scope: shortcutsScope
+    scope: shortcutsScope,
+    disabled: isSaving
   }), /*#__PURE__*/React.createElement("input", _extends({
     className: inputClasses,
     value: children,
-    placeholder: placeholder,
     autoFocus: autoFocus,
-    "data-test": dataTest
+    "data-test": dataTest,
+    disabled: isSaving
   }, restProps))) : /*#__PURE__*/React.createElement(Heading, {
     className: headingClasses,
     level: level,
     onClick: onClick,
     "data-test": dataTest
-  }, children), editing && !embedded && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    height: ControlsHeight.M,
+  }, children), !isEditing && renderMenu(), isEditing && !embedded && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     className: modules_6e69b0fe.button,
     primary: true,
-    disabled: !edited || !children || (children === null || children === void 0 ? void 0 : children.trim()) === '' || error,
+    disabled: isSaveDisabled,
+    loader: isSaving,
     onClick: onSave
   }, 'Save'), /*#__PURE__*/React.createElement(Button, {
-    height: ControlsHeight.M,
     className: modules_6e69b0fe.button,
+    disabled: isCancelDisabled,
     onClick: onCancel
-  }, 'Cancel')));
+  }, 'Cancel'))), isEditing && error && /*#__PURE__*/React.createElement("div", {
+    className: classNames(modules_6e69b0fe.errorText, modules_88cfaf40[`size${size}`])
+  }, error));
 };
 var editableHeading = /*#__PURE__*/React.memo(EditableHeading);