@jetbrains/ring-ui 5.0.96 → 5.0.98

package/components/clipboard/clipboard-fallback.d.ts

@@ -0,0 +1,2 @@
+export declare function copyTextToClipboard(str: string): void;
+export declare function copyHTMLToClipboard(str: string): void;

package/components/clipboard/clipboard-fallback.js

@@ -0,0 +1,44 @@
+export function copyTextToClipboard(str) {
+    const el = document.createElement('textarea');
+    el.value = str;
+    el.setAttribute('readonly', '');
+    el.style.position = 'absolute';
+    el.style.left = '-9999px';
+    document.body.appendChild(el);
+    const selection = document.getSelection();
+    // Should restore previous selection
+    const selected = (selection && selection.rangeCount > 0)
+        ? selection.getRangeAt(0)
+        : false;
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+    if (selected && selection) {
+        selection.removeAllRanges();
+        selection.addRange(selected);
+    }
+}
+export function copyHTMLToClipboard(str) {
+    const el = document.createElement('div');
+    el.innerHTML = str;
+    el.setAttribute('readonly', '');
+    el.style.position = 'absolute';
+    el.style.left = '-9999px';
+    document.body.appendChild(el);
+    const selection = document.getSelection();
+    // Should restore previous selection
+    const selected = (selection && selection.rangeCount > 0)
+        ? selection.getRangeAt(0)
+        : false;
+    selection?.removeAllRanges();
+    const range = document.createRange();
+    range.selectNode(el);
+    selection?.addRange(range);
+    document.execCommand('copy');
+    selection?.removeAllRanges();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+    if (selected && selection) {
+        selection.addRange(selected);
+    }
+}

package/components/clipboard/clipboard.d.ts

@@ -0,0 +1,5 @@
+declare const clipboard: {
+    copyText: (text: string, successMessage?: string | undefined, errorMessage?: string | undefined, delay?: number) => Promise<void>;
+    copyHTML: (html: string, successMessage?: string | undefined, errorMessage?: string | undefined, delay?: number) => Promise<void>;
+};
+export default clipboard;

package/components/clipboard/clipboard.js

@@ -0,0 +1,41 @@
+import alertService from '../alert-service/alert-service';
+import { copyHTMLToClipboard, copyTextToClipboard } from './clipboard-fallback';
+const ALERT_DELAY = 1000;
+function getClipboardImplementation() {
+    if (navigator.clipboard && !window.isSecureContext) {
+        return {
+            copy: (text) => navigator.clipboard.writeText(text),
+            copyHTML: (html) => navigator.clipboard.write([
+                new ClipboardItem({
+                    ['text/html']: new Blob([html], { type: 'text/html' })
+                })
+            ])
+        };
+    }
+    return {
+        copy: (str) => Promise.resolve(copyTextToClipboard(str)),
+        copyHTML: (html) => Promise.resolve(copyHTMLToClipboard(html))
+    };
+}
+async function copy(text, successMessage, errorMessage, delay = ALERT_DELAY, isHtml = false) {
+    try {
+        const clipboardImpl = getClipboardImplementation();
+        const copyMethod = isHtml ? clipboardImpl.copyHTML : clipboardImpl.copy;
+        await copyMethod(text);
+        if (successMessage) {
+            alertService.successMessage(successMessage, delay);
+        }
+    }
+    catch (e) {
+        if (errorMessage) {
+            alertService.error(errorMessage, delay);
+        }
+        // eslint-disable-next-line no-console
+        console.error(e);
+    }
+}
+const clipboard = {
+    copyText: async (text, successMessage, errorMessage, delay = ALERT_DELAY) => await copy(text, successMessage, errorMessage, delay),
+    copyHTML: async (html, successMessage, errorMessage, delay = ALERT_DELAY) => await copy(html, successMessage, errorMessage, delay, true)
+};
+export default clipboard;

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

@@ -11,7 +11,7 @@ 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, translations = {
+    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, translations = {
         save: 'Save',
         cancel: 'Cancel'
     }, ...restProps } = props;
@@ -40,19 +40,21 @@ export const EditableHeading = (props) => {
         }
         return onEdit();
     }, [disabled, onEdit]);
-    const onInputFocus = React.useCallback(() => {
+    const onInputFocus = React.useCallback((e) => {
         setIsInFocus(true);
-    }, []);
-    const onInputBlur = React.useCallback(() => {
+        onFocus?.(e);
+    }, [onFocus]);
+    const onInputBlur = React.useCallback((e) => {
         setIsInFocus(false);
-    }, []);
+        onBlur?.(e);
+    }, [onBlur]);
     return (<>
       <div className={classes}>
         {!disabled && isEditing
             ? (<>
               <Shortcuts map={shortcutsMap} scope={shortcutsScope} disabled={isShortcutsDisabled}/>
 
-              <input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onFocus={onInputFocus} onBlur={onInputBlur} {...restProps}/>
+              <input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>
             </>)
             : (<button type="button" className={styles.headingWrapperButton} onClick={onHeadingClick}>
               <Heading className={headingClasses} level={level} data-test={dataTest}>{children}</Heading>

package/components/user-card/card.d.ts

@@ -9,11 +9,16 @@ export interface UserCardUser {
     online?: boolean | null | undefined;
     banned?: boolean | null | undefined;
     banReason?: string | undefined;
+    unverifiedEmail?: boolean | null | undefined;
 }
 export interface UserCardWording {
     banned: string;
     online: string;
     offline: string;
+    copyToClipboard: string;
+    copiedToClipboard: string;
+    copingToClipboardError: string;
+    unverified: string;
 }
 export interface UserCardProps extends HTMLAttributes<HTMLDivElement> {
     user: UserCardUser;
@@ -35,11 +40,16 @@ export default class UserCard extends PureComponent<UserCardProps> {
             online: PropTypes.Requireable<boolean>;
             banned: PropTypes.Requireable<boolean>;
             banReason: PropTypes.Requireable<string>;
+            unverifiedEmail: PropTypes.Requireable<boolean>;
         }>>>;
         wording: PropTypes.Requireable<PropTypes.InferProps<{
             banned: PropTypes.Validator<string>;
             online: PropTypes.Validator<string>;
             offline: PropTypes.Validator<string>;
+            copyToClipboard: PropTypes.Validator<string>;
+            copiedToClipboard: PropTypes.Validator<string>;
+            copingToClipboardError: PropTypes.Validator<string>;
+            unverified: PropTypes.Requireable<string>;
         }>>;
     };
     static defaultProps: {
@@ -47,8 +57,13 @@ export default class UserCard extends PureComponent<UserCardProps> {
             banned: string;
             online: string;
             offline: string;
+            copyToClipboard: string;
+            copiedToClipboard: string;
+            copingToClipboardError: string;
+            unverified: string;
         };
     };
+    copyEmail: () => void;
     render(): JSX.Element;
 }
 export type UserCardAttrs = JSX.LibraryManagedAttributes<typeof UserCard, UserCardProps>;

package/components/user-card/card.js

@@ -1,9 +1,12 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Avatar, { Size } from '../avatar/avatar';
+import copyIcon from '@jetbrains/icons/copy';
+import Avatar, { Size as AvatarSize } from '../avatar/avatar';
 import Link from '../link/link';
+import clipboard from '../clipboard/clipboard';
 import badgeStyles from '../badge/badge.css';
+import Icon, { Size as IconSize } from '../icon/icon';
 import styles from './user-card.css';
 export default class UserCard extends PureComponent {
     static propTypes = {
@@ -18,47 +21,64 @@ export default class UserCard extends PureComponent {
             href: PropTypes.string,
             online: PropTypes.bool,
             banned: PropTypes.bool,
-            banReason: PropTypes.string
+            banReason: PropTypes.string,
+            unverifiedEmail: PropTypes.bool
         }).isRequired,
         wording: PropTypes.shape({
             banned: PropTypes.string.isRequired,
             online: PropTypes.string.isRequired,
-            offline: PropTypes.string.isRequired
+            offline: PropTypes.string.isRequired,
+            copyToClipboard: PropTypes.string.isRequired,
+            copiedToClipboard: PropTypes.string.isRequired,
+            copingToClipboardError: PropTypes.string.isRequired,
+            unverified: PropTypes.string
         })
     };
     static defaultProps = {
         wording: {
             banned: 'banned',
             online: 'online',
-            offline: 'offline'
+            offline: 'offline',
+            copyToClipboard: 'Copy to clipboard',
+            copiedToClipboard: 'Email was copied to clipboard',
+            copingToClipboardError: 'Failed to copy to clipboard',
+            unverified: 'Unverified'
         }
     };
+    copyEmail = () => {
+        const { user, wording } = this.props;
+        clipboard.copyText(user.email || '', wording.copiedToClipboard, wording.copingToClipboardError);
+    };
     render() {
         const { children, info, className, user, wording, ...restProps } = this.props;
         const classes = classNames(className, {});
         const userActiveStatusClasses = classNames(styles.userActiveStatus, user.online ? styles.online : '');
         return (<div className={classes} {...restProps}>
         <div className={styles.userInformationContainer}>
-          <Avatar size={Size.Size56} url={user.avatarUrl}/>
+          <Avatar size={AvatarSize.Size56} url={user.avatarUrl}/>
           <div className={styles.userInformation}>
-            <div>
+            <div className={styles.userNameLine}>
               {user.href && (<Link href={user.href} className={styles.userName}>
                   {user.name}
                 </Link>)}
               {!user.href && <span className={styles.userName}>{user.name}</span>}
+              {typeof user.online === 'boolean' &&
+                (<span className={userActiveStatusClasses} title={user.online ? wording.online : wording.offline}/>)}
               {!!info && <span className={styles.userNameInfo}>{info}</span>}
               {user.banned &&
                 (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{wording.banned}</span>)}
             </div>
-            <div>
-              {typeof user.online === 'boolean' &&
-                (<span className={userActiveStatusClasses} title={user.online ? wording.online : wording.offline}/>)}
-              {user.login}
-            </div>
-            {user.email && <div>{user.email}</div>}
+            <div className={styles.userLogin}>{user.login}</div>
+            {user.email && (<span className={styles.userEmailWrapper}>
+                <Link pseudo onClick={this.copyEmail} className={styles.userEmail}>
+                  {user.email}
+                </Link>
+                {user.unverifiedEmail && (<span className={styles.unverifiedLabel}>{wording.unverified}</span>)}
+                <Icon title={wording.copyToClipboard} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
+              </span>)}
+            {children}
           </div>
         </div>
-        {children}
       </div>);
     }
 }

package/components/user-card/user-card.css

@@ -8,7 +8,7 @@
 
 .userInformationContainer {
   display: flex;
-  align-items: center;
+  align-items: start;
 }
 
 .userInformation {
@@ -22,20 +22,70 @@
   line-height: 18px;
 }
 
+.userNameLine {
+  height: var(--ring-line-height-lowest);
+
+  white-space: nowrap;
+
+  line-height: var(--ring-line-height-lowest);
+}
+
 .userName {
   display: inline-block;
 
   margin-right: 4px;
-  margin-bottom: 3px;
 
   font-size: 16px;
   font-weight: 600;
 }
 
+.userLogin {
+  margin-bottom: 7px;
+
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+.userEmail {
+  margin-right: 4px;
+
+  font-size: var(--ring-font-size);
+}
+
+.userCopyIcon {
+  cursor: pointer;
+
+  opacity: 0;
+}
+
+.userCopyIcon svg {
+  margin-left: 4px;
+
+  color: var(--ring-link-hover-color);
+}
+
+.userEmailWrapper:hover .userCopyIcon {
+  transition: opacity 300ms ease-out;
+
+  opacity: 1;
+}
+
+.userEmailWrapper:hover .userEmail {
+  color: var(--ring-link-hover-color);
+}
+
+.unverifiedLabel {
+  margin: 0 4px;
+
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+}
+
 .userNameInfo {
   display: inline-block;
 
-  margin-right: 4px;
   margin-bottom: 3px;
 }
 
@@ -44,8 +94,8 @@
 
   width: unit;
   height: unit;
-
-  margin-right: 4px;
+  margin-right: var(--ring-unit);
+  margin-left: 6px;
 
   border-radius: 50%;
   background-color: var(--ring-icon-secondary-color);

package/dist/_helpers/card.js

@@ -2,13 +2,27 @@ import { _ as _defineProperty, a as _extends } from './_rollupPluginBabelHelpers
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import copyIcon from '@jetbrains/icons/copy';
 import Avatar, { Size } from '../avatar/avatar.js';
 import Link from '../link/link.js';
+import clipboard from '../clipboard/clipboard.js';
 import { m as modules_6c9187df } from './badge.js';
+import Icon from '../icon/icon.js';
+import { Size as Size$1 } from '../icon/icon__constants.js';
 
-var modules_a4196c17 = {"unit":"8px","light":"light_rui_6e59","userCardSpaced":"userCardSpaced_rui_6e59","userInformationContainer":"userInformationContainer_rui_6e59","userInformation":"userInformation_rui_6e59","userName":"userName_rui_6e59","userNameInfo":"userNameInfo_rui_6e59","userActiveStatus":"userActiveStatus_rui_6e59","online":"online_rui_6e59"};
+var modules_a4196c17 = {"unit":"8px","light":"light_rui_6e59","userCardSpaced":"userCardSpaced_rui_6e59","userInformationContainer":"userInformationContainer_rui_6e59","userInformation":"userInformation_rui_6e59","userNameLine":"userNameLine_rui_6e59","userName":"userName_rui_6e59","userLogin":"userLogin_rui_6e59","userEmail":"userEmail_rui_6e59","userCopyIcon":"userCopyIcon_rui_6e59","userEmailWrapper":"userEmailWrapper_rui_6e59","unverifiedLabel":"unverifiedLabel_rui_6e59","userNameInfo":"userNameInfo_rui_6e59","userActiveStatus":"userActiveStatus_rui_6e59","online":"online_rui_6e59"};
 
 class UserCard extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "copyEmail", () => {
+      const {
+        user,
+        wording
+      } = this.props;
+      clipboard.copyText(user.email || '', wording.copiedToClipboard, wording.copingToClipboardError);
+    });
+  }
   render() {
     const {
       children,
@@ -29,20 +43,39 @@ class UserCard extends PureComponent {
       url: user.avatarUrl
     }), /*#__PURE__*/React.createElement("div", {
       className: modules_a4196c17.userInformation
-    }, /*#__PURE__*/React.createElement("div", null, user.href && /*#__PURE__*/React.createElement(Link, {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: modules_a4196c17.userNameLine
+    }, user.href && /*#__PURE__*/React.createElement(Link, {
       href: user.href,
       className: modules_a4196c17.userName
     }, user.name), !user.href && /*#__PURE__*/React.createElement("span", {
       className: modules_a4196c17.userName
-    }, user.name), !!info && /*#__PURE__*/React.createElement("span", {
+    }, user.name), typeof user.online === 'boolean' && /*#__PURE__*/React.createElement("span", {
+      className: userActiveStatusClasses,
+      title: user.online ? wording.online : wording.offline
+    }), !!info && /*#__PURE__*/React.createElement("span", {
       className: modules_a4196c17.userNameInfo
     }, info), user.banned && /*#__PURE__*/React.createElement("span", {
       className: classNames(modules_6c9187df.badge, modules_6c9187df.invalid),
       title: user.banReason
-    }, wording.banned)), /*#__PURE__*/React.createElement("div", null, typeof user.online === 'boolean' && /*#__PURE__*/React.createElement("span", {
-      className: userActiveStatusClasses,
-      title: user.online ? wording.online : wording.offline
-    }), user.login), user.email && /*#__PURE__*/React.createElement("div", null, user.email))), children);
+    }, wording.banned)), /*#__PURE__*/React.createElement("div", {
+      className: modules_a4196c17.userLogin
+    }, user.login), user.email && /*#__PURE__*/React.createElement("span", {
+      className: modules_a4196c17.userEmailWrapper
+    }, /*#__PURE__*/React.createElement(Link, {
+      pseudo: true,
+      onClick: this.copyEmail,
+      className: modules_a4196c17.userEmail
+    }, user.email), user.unverifiedEmail && /*#__PURE__*/React.createElement("span", {
+      className: modules_a4196c17.unverifiedLabel
+    }, wording.unverified), /*#__PURE__*/React.createElement(Icon, {
+      title: wording.copyToClipboard,
+      className: modules_a4196c17.userCopyIcon,
+      onClick: this.copyEmail,
+      glyph: copyIcon,
+      size: Size$1.Size14,
+      suppressSizeWarning: true
+    })), children)));
   }
 }
 _defineProperty(UserCard, "propTypes", {
@@ -57,19 +90,28 @@ _defineProperty(UserCard, "propTypes", {
     href: PropTypes.string,
     online: PropTypes.bool,
     banned: PropTypes.bool,
-    banReason: PropTypes.string
+    banReason: PropTypes.string,
+    unverifiedEmail: PropTypes.bool
   }).isRequired,
   wording: PropTypes.shape({
     banned: PropTypes.string.isRequired,
     online: PropTypes.string.isRequired,
-    offline: PropTypes.string.isRequired
+    offline: PropTypes.string.isRequired,
+    copyToClipboard: PropTypes.string.isRequired,
+    copiedToClipboard: PropTypes.string.isRequired,
+    copingToClipboardError: PropTypes.string.isRequired,
+    unverified: PropTypes.string
   })
 });
 _defineProperty(UserCard, "defaultProps", {
   wording: {
     banned: 'banned',
     online: 'online',
-    offline: 'offline'
+    offline: 'offline',
+    copyToClipboard: 'Copy to clipboard',
+    copiedToClipboard: 'Email was copied to clipboard',
+    copingToClipboardError: 'Failed to copy to clipboard',
+    unverified: 'Unverified'
   }
 });
 

package/dist/clipboard/clipboard-fallback.d.ts

@@ -0,0 +1,2 @@
+export declare function copyTextToClipboard(str: string): void;
+export declare function copyHTMLToClipboard(str: string): void;

package/dist/clipboard/clipboard-fallback.js

@@ -0,0 +1,42 @@
+function copyTextToClipboard(str) {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+  const selection = document.getSelection();
+  // Should restore previous selection
+  const selected = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+  if (selected && selection) {
+    selection.removeAllRanges();
+    selection.addRange(selected);
+  }
+}
+function copyHTMLToClipboard(str) {
+  const el = document.createElement('div');
+  el.innerHTML = str;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+  const selection = document.getSelection();
+  // Should restore previous selection
+  const selected = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
+  selection?.removeAllRanges();
+  const range = document.createRange();
+  range.selectNode(el);
+  selection?.addRange(range);
+  document.execCommand('copy');
+  selection?.removeAllRanges();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+  if (selected && selection) {
+    selection.addRange(selected);
+  }
+}
+
+export { copyHTMLToClipboard, copyTextToClipboard };

package/dist/clipboard/clipboard.d.ts

@@ -0,0 +1,5 @@
+declare const clipboard: {
+    copyText: (text: string, successMessage?: string | undefined, errorMessage?: string | undefined, delay?: number) => Promise<void>;
+    copyHTML: (html: string, successMessage?: string | undefined, errorMessage?: string | undefined, delay?: number) => Promise<void>;
+};
+export default clipboard;

package/dist/clipboard/clipboard.js

@@ -0,0 +1,91 @@
+import alertService from '../alert-service/alert-service.js';
+import { copyTextToClipboard, copyHTMLToClipboard } from './clipboard-fallback.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';
+import '../global/react-render-adapter.js';
+import 'react-dom';
+import '../global/get-uid.js';
+import '../alert/alert.js';
+import 'classnames';
+import 'prop-types';
+import '@jetbrains/icons/exception';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/warning';
+import '@jetbrains/icons/close';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import '../loader-inline/loader-inline.js';
+import '../global/data-tests.js';
+import '../_helpers/loader-inline.js';
+import '../global/dom.js';
+import '../button/button.js';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+import '../link/clickableLink.js';
+import '../global/controls-height.js';
+import '../_helpers/button__classes.js';
+import '../_helpers/theme.js';
+import '../popup/popup.target.js';
+import '../popup/popup.js';
+import '../global/schedule-raf.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.consts.js';
+import '../alert/container.js';
+
+const ALERT_DELAY = 1000;
+function getClipboardImplementation() {
+  if (navigator.clipboard && !window.isSecureContext) {
+    return {
+      copy: text => navigator.clipboard.writeText(text),
+      copyHTML: html => navigator.clipboard.write([new ClipboardItem({
+        ['text/html']: new Blob([html], {
+          type: 'text/html'
+        })
+      })])
+    };
+  }
+  return {
+    copy: str => Promise.resolve(copyTextToClipboard(str)),
+    copyHTML: html => Promise.resolve(copyHTMLToClipboard(html))
+  };
+}
+async function copy(text, successMessage, errorMessage) {
+  let delay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ALERT_DELAY;
+  let isHtml = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  try {
+    const clipboardImpl = getClipboardImplementation();
+    const copyMethod = isHtml ? clipboardImpl.copyHTML : clipboardImpl.copy;
+    await copyMethod(text);
+    if (successMessage) {
+      alertService.successMessage(successMessage, delay);
+    }
+  } catch (e) {
+    if (errorMessage) {
+      alertService.error(errorMessage, delay);
+    }
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+}
+const clipboard = {
+  copyText: async function (text, successMessage, errorMessage) {
+    let delay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ALERT_DELAY;
+    return await copy(text, successMessage, errorMessage, delay);
+  },
+  copyHTML: async function (html, successMessage, errorMessage) {
+    let delay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ALERT_DELAY;
+    return await copy(html, successMessage, errorMessage, delay, true);
+  }
+};
+
+export { clipboard as default };

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

@@ -52,6 +52,8 @@ const EditableHeading = props => {
     disabled,
     multiline = false,
     renderMenu = () => null,
+    onFocus,
+    onBlur,
     translations = {
       save: 'Save',
       cancel: 'Cancel'
@@ -83,12 +85,14 @@ const EditableHeading = props => {
     }
     return onEdit();
   }, [disabled, onEdit]);
-  const onInputFocus = React.useCallback(() => {
+  const onInputFocus = React.useCallback(e => {
     setIsInFocus(true);
-  }, []);
-  const onInputBlur = React.useCallback(() => {
+    onFocus?.(e);
+  }, [onFocus]);
+  const onInputBlur = React.useCallback(e => {
     setIsInFocus(false);
-  }, []);
+    onBlur?.(e);
+  }, [onBlur]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classes
   }, !disabled && isEditing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Shortcuts, {
@@ -100,10 +104,11 @@ const EditableHeading = props => {
     value: children,
     autoFocus: autoFocus,
     "data-test": dataTest,
-    disabled: isSaving,
+    disabled: isSaving
+  }, restProps, {
     onFocus: onInputFocus,
     onBlur: onInputBlur
-  }, restProps))) : /*#__PURE__*/React.createElement("button", {
+  }))) : /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: modules_6e69b0fe.headingWrapperButton,
     onClick: onHeadingClick