@jetbrains/ring-ui 5.0.55 → 5.0.56

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

@@ -19,6 +19,23 @@
   line-height: 28px;
 }
 
+.headingWrapperButton {
+  margin: 0;
+  padding: 0;
+
+  color: inherit;
+
+  border: none;
+  border-radius: var(--ring-border-radius);
+  background: inherit;
+
+  font-size: inherit;
+
+  &:focus {
+    outline: 1px solid var(--ring-border-hover-color);
+  }
+}
+
 .heading {
   padding: 6px 0;
 

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

@@ -3,6 +3,10 @@ import { Levels } from '../heading/heading';
 import { Size } from '../input/input';
 export { Levels };
 export { Size };
+export interface EditableHeadingTranslations {
+    save: string;
+    cancel: string;
+}
 export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'> & {
     level?: Levels;
     headingClassName?: string | null;
@@ -19,6 +23,7 @@ export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputEle
     'data-test'?: string | null;
     error?: string;
     renderMenu?: () => React.ReactNode;
+    translations?: EditableHeadingTranslations;
 };
 export declare const EditableHeading: (props: EditableHeadingProps) => JSX.Element;
 declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => JSX.Element>;

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

@@ -11,7 +11,10 @@ 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, renderMenu = () => null, ...restProps } = 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, renderMenu = () => null, translations = {
+        save: 'Save',
+        cancel: 'Cancel'
+    }, ...restProps } = props;
     const [shortcutsScope] = React.useState(getUID('ring-editable-heading-'));
     const [isInFocus, setIsInFocus] = React.useState(false);
     const hasError = error !== undefined;
@@ -50,14 +53,16 @@ export const EditableHeading = (props) => {
 
               <input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onFocus={onInputFocus} onBlur={onInputBlur} {...restProps}/>
             </>)
-            : (<Heading className={headingClasses} level={level} onClick={onHeadingClick} data-test={dataTest}>{children}</Heading>)}
+            : (<button type="button" className={styles.headingWrapperButton} onClick={onHeadingClick}>
+              <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}>{'Save'}</Button>
+            <Button className={styles.button} primary disabled={isSaveDisabled} loader={isSaving} onClick={onSave}>{translations.save}</Button>
 
-            <Button className={styles.button} disabled={isCancelDisabled} onClick={onCancel}>{'Cancel'}</Button>
+            <Button className={styles.button} disabled={isCancelDisabled} onClick={onCancel}>{translations.cancel}</Button>
           </>)}
       </div>
 

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

@@ -3,6 +3,10 @@ import { Levels } from '../heading/heading';
 import { Size } from '../input/input';
 export { Levels };
 export { Size };
+export interface EditableHeadingTranslations {
+    save: string;
+    cancel: string;
+}
 export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'> & {
     level?: Levels;
     headingClassName?: string | null;
@@ -19,6 +23,7 @@ export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputEle
     'data-test'?: string | null;
     error?: string;
     renderMenu?: () => React.ReactNode;
+    translations?: EditableHeadingTranslations;
 };
 export declare const EditableHeading: (props: EditableHeadingProps) => JSX.Element;
 declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => JSX.Element>;

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

@@ -30,7 +30,7 @@ import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 
-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"};
+var modules_6e69b0fe = {"unit":"8px","editableHeading":"editableHeading_rui_0870","fullSize":"fullSize_rui_0870","isEditing":"isEditing_rui_0870","heading":"heading_rui_0870","headingWrapperButton":"headingWrapperButton_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 EditableHeading = props => {
@@ -53,6 +53,10 @@ const EditableHeading = props => {
     error,
     disabled,
     renderMenu = () => null,
+    translations = {
+      save: 'Save',
+      cancel: 'Cancel'
+    },
     ...restProps
   } = props;
   const [shortcutsScope] = React.useState(getUID('ring-editable-heading-'));
@@ -99,22 +103,25 @@ const EditableHeading = props => {
     disabled: isSaving,
     onFocus: onInputFocus,
     onBlur: onInputBlur
-  }, restProps))) : /*#__PURE__*/React.createElement(Heading, {
+  }, restProps))) : /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: modules_6e69b0fe.headingWrapperButton,
+    onClick: onHeadingClick
+  }, /*#__PURE__*/React.createElement(Heading, {
     className: headingClasses,
     level: level,
-    onClick: onHeadingClick,
     "data-test": dataTest
-  }, children), !isEditing && renderMenu(), isEditing && !embedded && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+  }, children)), !isEditing && renderMenu(), isEditing && !embedded && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     className: modules_6e69b0fe.button,
     primary: true,
     disabled: isSaveDisabled,
     loader: isSaving,
     onClick: onSave
-  }, 'Save'), /*#__PURE__*/React.createElement(Button, {
+  }, translations.save), /*#__PURE__*/React.createElement(Button, {
     className: modules_6e69b0fe.button,
     disabled: isCancelDisabled,
     onClick: onCancel
-  }, 'Cancel'))), isEditing && error && /*#__PURE__*/React.createElement("div", {
+  }, translations.cancel))), isEditing && error && /*#__PURE__*/React.createElement("div", {
     className: classNames(modules_6e69b0fe.errorText, modules_88cfaf40[`size${size}`])
   }, error));
 };