@jetbrains/ring-ui 7.0.0-beta.9 → 7.0.0

package/components/auth-dialog/auth-dialog.js

@@ -15,10 +15,10 @@ export default class AuthDialog extends Component {
         confirmLabel: 'Log in',
         cancelLabel: 'Remain a guest',
         onConfirm: () => { },
-        onCancel: () => { }
+        onCancel: () => { },
     };
     state = {
-        retrying: false
+        retrying: false,
     };
     componentDidMount() {
         window.addEventListener('online', this.onRetryPress);
@@ -47,18 +47,18 @@ export default class AuthDialog extends Component {
         }
     };
     render() {
-        const { show, className, errorMessage, serviceImage, serviceName, loginCaption, loginToCaption, confirmLabel, cancelLabel, tryAgainLabel, onConfirm, onCancel, onTryAgain } = this.props;
+        const { show, className, errorMessage, serviceImage, serviceName, loginCaption, loginToCaption, confirmLabel, cancelLabel, tryAgainLabel, onConfirm, onCancel, onTryAgain, } = this.props;
         const { retrying } = this.state;
         const defaultTitle = serviceName ? loginToCaption : loginCaption;
-        const title = (this.props.title || defaultTitle).
-            replace('%serviceName%', serviceName ?? '').
-            replace('{{serviceName}}', serviceName ?? '');
+        const title = (this.props.title || defaultTitle)
+            .replace('%serviceName%', serviceName ?? '')
+            .replace('{{serviceName}}', serviceName ?? '');
         return (<Dialog label={title} data-test="ring-auth-dialog" className={className} contentClassName={classNames(className, styles.dialog)} onEscPress={this.onEscPress} show={show} trapFocus>
         <Content>
           <div className={styles.content}>
-            {serviceImage && (<img alt={`${serviceName} logo`} className={styles.logo} src={serviceImage}/>)}
+            {serviceImage && <img alt={`${serviceName} logo`} className={styles.logo} src={serviceImage}/>}
             <H2 className={styles.title}>{title}</H2>
-            {errorMessage && (<div className={styles.error}>{errorMessage}</div>)}
+            {errorMessage && <div className={styles.error}>{errorMessage}</div>}
             <Button primary className={styles.firstButton} data-test="auth-dialog-confirm-button" onClick={onConfirm}>
               {confirmLabel}
             </Button>

package/components/auth-dialog-service/auth-dialog-service.js

@@ -10,14 +10,14 @@ export const reactRoot = createRoot(containerElement);
  * Renders AuthDialog into virtual node to skip maintaining container
  */
 function renderAuthDialog(props) {
-    reactRoot.render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
-        <AuthDialog {...props}/>
-      </ControlsHeightContext.Provider>));
+    reactRoot.render(<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+      <AuthDialog {...props}/>
+    </ControlsHeightContext.Provider>);
 }
 export default function showAuthDialog(props = {}) {
     renderAuthDialog({
         ...props,
-        show: true
+        show: true,
     });
     return () => {
         renderAuthDialog({ show: false });

package/components/avatar/avatar.js

@@ -23,10 +23,10 @@ export default class Avatar extends PureComponent {
         dpr: getPixelRatio(),
         size: Size.Size20,
         subavatarSize: Size.Size20 / 2,
-        style: {}
+        style: {},
     };
     state = {
-        errorUrl: ''
+        errorUrl: '',
     };
     handleError = () => {
         this.setState({ errorUrl: this.props.url });
@@ -43,16 +43,18 @@ export default class Avatar extends PureComponent {
             borderRadius: round ? '50%' : borderRadius,
             height: sizeString,
             width: sizeString,
-            ...style
+            ...style,
         };
         const styleObjGroup = {
             borderRadius: '2px',
             height: subavatarSizeString,
             width: subavatarSizeString,
-            ...style
+            ...style,
         };
         if (!url || this.state.errorUrl === url) {
-            return (<span {...restProps} data-test="avatar" className={classNames(styles.avatar, this.props.className, { [styles.empty]: username == null })} style={styleObj}>{username != null && (<FallbackAvatar size={size} round={round} username={username}/>)}</span>);
+            return (<span {...restProps} data-test="avatar" className={classNames(styles.avatar, this.props.className, { [styles.empty]: username == null })} style={styleObj}>
+          {username != null && <FallbackAvatar size={size} round={round} username={username}/>}
+        </span>);
         }
         let src = url;
         if (!skipParams && !isDataURI(url)) {
@@ -60,7 +62,7 @@ export default class Avatar extends PureComponent {
             const queryParams = {
                 ...parseQueryString(query),
                 dpr,
-                size
+                size,
             };
             src = encodeURL(urlStart, queryParams);
         }
@@ -70,7 +72,7 @@ export default class Avatar extends PureComponent {
             const queryParams = {
                 ...parseQueryString(query),
                 dpr,
-                subavatarSizeString
+                subavatarSizeString,
             };
             subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
             return (<div>

package/components/avatar/fallback-avatar.js

@@ -21,39 +21,42 @@ const colorPairs = [
     ['#ED5502', '#E73AE8'],
     ['#ED358C', '#DBED18'],
     ['#ED358C', '#F9902E'],
-    ['#FF7500', '#FFCA00']
+    ['#FF7500', '#FFCA00'],
 ];
 const Sizes = {
     18: {
         radius: 2,
         text: { x: 9, y: 13 },
         fontSize: '11px',
-        textAnchor: 'middle'
+        textAnchor: 'middle',
     },
     24: {
         radius: 3,
         text: { x: 2, y: 13 },
         fontSize: '11px',
-        underscore: { x: 3, y: 17 }
+        underscore: { x: 3, y: 17 },
     },
     32: {
         radius: 3,
         text: { x: 3, y: 17 },
         fontSize: '13px',
         letterSpacing: 1,
-        underscore: { x: 4, y: 22 }
+        underscore: { x: 4, y: 22 },
     },
     40: {
         radius: 3,
         text: { x: 5, y: 19 },
         fontSize: '15px',
         letterSpacing: 1,
-        underscore: { x: 6, y: 28 }
-    }
+        underscore: { x: 6, y: 28 },
+    },
 };
 const sizeKeys = Object.keys(Sizes).map(Number);
 function extractLetters(name) {
-    const names = name.split(/[\s._]+/).filter(Boolean).map(word => Array.from(word));
+    const names = name
+        .split(/[\s._]+/)
+        .filter(Boolean)
+        .map(word => Array.from(word));
     if (names.length >= 2) {
         return names[0][0].toUpperCase() + names[1][0].toUpperCase();
     }
@@ -74,7 +77,7 @@ const BASE = 32;
 function hashCode(s) {
     let h = 0;
     for (let i = 0; i < s.length; i++) {
-        h = Math.imul(BASE - 1, h) + s.charCodeAt(i) | 0;
+        h = (Math.imul(BASE - 1, h) + s.charCodeAt(i)) | 0;
     }
     return h;
 }
@@ -82,9 +85,7 @@ export default function FallbackAvatar({ username, size, round }) {
     const hash = Math.abs(hashCode(username.toLowerCase()));
     const [fromColor, toColor] = colorPairs[hash % colorPairs.length];
     const possibleSizeKeys = sizeKeys.filter(key => key >= size);
-    const sizeKey = possibleSizeKeys.length > 0
-        ? Math.min(...possibleSizeKeys)
-        : Math.max(...sizeKeys);
+    const sizeKey = possibleSizeKeys.length > 0 ? Math.min(...possibleSizeKeys) : Math.max(...sizeKeys);
     const sizes = Sizes[sizeKey];
     const radius = round ? '50%' : sizes.radius;
     const gradientId = useMemo(() => getUID('gradient-'), []);
@@ -99,7 +100,9 @@ export default function FallbackAvatar({ username, size, round }) {
         <rect fill={`url(#${gradientId})`} x="0" y="0" width={sizeKey} height={sizeKey} rx={radius} ry={radius}/>
         <text x={sizes.text.x} y={sizes.text.y} fontFamily="Arial, Helvetica, sans-serif" fontSize={sizes.fontSize} letterSpacing={sizes.letterSpacing} fill="#FFFFFF" textAnchor={sizes.textAnchor} cursor="default">
           <tspan>{extractLetters(username)}</tspan>
-          {sizes.underscore && <tspan x={sizes.underscore.x} y={sizes.underscore.y}>{'_'}</tspan>}
+          {sizes.underscore && (<tspan x={sizes.underscore.x} y={sizes.underscore.y}>
+              {'_'}
+            </tspan>)}
         </text>
         <title>{username}</title>
       </g>

package/components/button/button.css

@@ -1,7 +1,10 @@
 @import "../global/variables.css";
 
-@value button-shadow: inset 0 0 0 1px;
-@value loaderWidth: calc(var(--ring-unit) * 8);
+:root {
+  --ring-button-focus-border-color: var(--ring-border-hover-color);
+  --ring-button-shadow: inset 0 0 0 1px;
+  --ring-button-loader-width: calc(var(--ring-unit) * 8);
+}
 
 .heightS {
   --ring-button-height: calc(var(--ring-unit) * 3);
@@ -28,13 +31,14 @@
 }
 
 .button {
-  --ring-button-focus-border-color: var(--ring-border-hover-color);
-
   box-sizing: border-box;
   margin: 0;
 
   cursor: pointer;
-  transition: color var(--ring-ease), background-color var(--ring-ease), box-shadow var(--ring-ease);
+  transition:
+    color var(--ring-ease),
+    background-color var(--ring-ease),
+    box-shadow var(--ring-ease);
   white-space: nowrap;
   text-decoration: none;
 
@@ -71,7 +75,7 @@
   color: var(--ring-text-color);
 
   background-color: var(--ring-button-background-color);
-  box-shadow: button-shadow var(--ring-button-border-color);
+  box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 
   font-size: var(--ring-button-font-size);
   line-height: var(--ring-button-line-height);
@@ -86,7 +90,9 @@
   }
 
   &:focus-visible {
-    box-shadow: button-shadow var(--ring-button-focus-border-color), 0 0 0 1px var(--ring-button-focus-border-color);
+    box-shadow:
+      var(--ring-button-shadow) var(--ring-button-focus-border-color),
+      0 0 0 1px var(--ring-button-focus-border-color);
   }
 }
 
@@ -181,13 +187,12 @@
     border-radius: var(--ring-border-radius);
 
     &::before {
-      background-image:
-        linear-gradient(
-          to right,
-          var(--ring-main-color),
-          var(--ring-button-loader-background) 40%,
-          var(--ring-main-color) 80%
-        );
+      background-image: linear-gradient(
+        to right,
+        var(--ring-main-color),
+        var(--ring-button-loader-background) 40%,
+        var(--ring-main-color) 80%
+      );
     }
   }
 }
@@ -212,7 +217,9 @@
 .disabled {
   cursor: auto;
 
-  &, &:hover, &:active {
+  &,
+  &:hover,
+  &:active {
     --ring-button-background-color: var(--ring-disabled-background-color);
     --ring-button-border-color: var(--ring-border-disabled-color);
 
@@ -305,22 +312,21 @@
   &::before {
     display: block;
 
-    width: calc(100% + loaderWidth);
+    width: calc(100% + var(--ring-button-loader-width));
     height: 100%;
 
     content: "";
     animation: progress 1s linear infinite;
 
-    background-image:
-      linear-gradient(
-        to right,
-        var(--ring-content-background-color),
-        var(--ring-selected-background-color) 40%,
-        var(--ring-content-background-color) 80%
-      );
+    background-image: linear-gradient(
+      to right,
+      var(--ring-content-background-color),
+      var(--ring-selected-background-color) 40%,
+      var(--ring-content-background-color) 80%
+    );
 
     background-repeat: repeat;
-    background-size: loaderWidth;
+    background-size: var(--ring-button-loader-width);
   }
 }
 
@@ -340,6 +346,7 @@
   transition: color var(--ring-ease);
 
   .block & {
+    margin-top: -1px;
     margin-right: calc(var(--ring-unit) * -0.5);
 
     color: var(--ring-icon-secondary-color);

package/components/button/button.js

@@ -30,25 +30,25 @@ export class Button extends PureComponent {
             warnText();
         }
         const classes = getButtonClasses({
-            ...this.props, inline: isInline, height: height ?? this.context
+            ...this.props,
+            inline: isInline,
+            height: height ?? this.context,
         });
         const content = (<>
         {icon && (<Icon className={classNames(styles.icon, iconClassName)} glyph={icon} size={iconSize} loading={loader && isInline} suppressSizeWarning={iconSuppressSizeWarning}/>)}
         {children}
-        {dropdown && (<Icon glyph={chevronDown} className={styles.dropdownIcon}/>)}
+        {dropdown && <Icon glyph={chevronDown} className={styles.dropdownIcon}/>}
       </>);
         const commonProps = {
             tabIndex: loader ? -1 : 0,
             ...props,
             className: classes,
-            children: <>
-        {loader && !isInline && <div className={styles.loaderBackground}/>}
-        {content}
-      </>
+            children: (<>
+          {loader && !isInline && <div className={styles.loaderBackground}/>}
+          {content}
+        </>),
         };
-        return commonProps.href != null
-            ? (<ClickableLink {...commonProps}/>)
-            : (<button ref={this.buttonRef} type="button" {...commonProps}/>);
+        return commonProps.href != null ? (<ClickableLink {...commonProps}/>) : (<button ref={this.buttonRef} type="button" {...commonProps}/>);
     }
 }
 export { Size as IconSize };

package/components/button/button__classes.d.ts

@@ -1,2 +1,2 @@
 import { ButtonProps } from './button';
-export declare function getButtonClasses({ className, active, disabled, loader, primary, short, inline, danger, delayed, icon, height, children }: ButtonProps): string;
+export declare function getButtonClasses({ className, active, disabled, loader, primary, short, inline, danger, delayed, icon, height, children, }: ButtonProps): string;

package/components/button/button__classes.js

@@ -1,10 +1,9 @@
 import classNames from 'classnames';
 import styles from './button.css';
-export function getButtonClasses({ className, active, disabled, loader, primary, short, inline, danger, delayed, icon, height, children }) {
+export function getButtonClasses({ className, active, disabled, loader, primary, short, inline, danger, delayed, icon, height, children, }) {
     const iconOnly = icon && !children;
     const primaryBlock = primary && !inline;
-    const withNormalIcon = icon && !active && !danger && !primary && !disabled &&
-        (!inline || iconOnly);
+    const withNormalIcon = icon && !active && !danger && !primary && !disabled && (!inline || iconOnly);
     return classNames(styles.button, className, styles[`height${height}`], inline ? styles.inline : styles.block, {
         [styles.active]: active,
         [styles.danger]: danger,
@@ -15,6 +14,6 @@ export function getButtonClasses({ className, active, disabled, loader, primary,
         [styles.primaryBlock]: primaryBlock,
         [styles.short]: short,
         [styles.disabled]: disabled,
-        [styles.iconOnly]: iconOnly
+        [styles.iconOnly]: iconOnly,
     });
 }

package/components/button-group/button-group.css

@@ -1,6 +1,6 @@
 @import "../global/variables.css";
 
-@value button, active, primary, button-shadow from "../button/button.css";
+@value button, active, primary from "../button/button.css";
 
 :root {
   --ring-button-group-default-z-index: 1;
@@ -22,7 +22,7 @@
 
   border-radius: var(--ring-border-radius);
 
-  box-shadow: button-shadow var(--ring-borders-color);
+  box-shadow: var(--ring-button-shadow) var(--ring-borders-color);
 
   line-height: normal;
 }
@@ -34,12 +34,12 @@
 
   transition: none;
 
-  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset;
+  box-shadow:
+    0 1px var(--ring-button-group-button-border-color) inset,
+    0 -1px var(--ring-button-group-button-border-color) inset;
 }
 
 .buttonGroup .button[disabled] {
-  --ring-button-group-button-border-color: var(--ring-border-disabled-color);
-
   /* stylelint-disable selector-max-specificity */
   &::before,
   &::after {
@@ -54,7 +54,9 @@
 
     background-color: var(--ring-disabled-background-color);
 
-    box-shadow: 0 1px var(--ring-border-disabled-color) inset, 0 -1px var(--ring-border-disabled-color) inset;
+    box-shadow:
+      0 1px var(--ring-button-group-button-border-color) inset,
+      0 -1px var(--ring-button-group-button-border-color) inset;
   }
 
   &::before {
@@ -69,7 +71,10 @@
 
 .buttonGroup > .button:first-child,
 .buttonGroup > :first-child .button {
-  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset, 1px 0 var(--ring-button-group-button-border-color) inset;
+  box-shadow:
+    0 1px var(--ring-button-group-button-border-color) inset,
+    0 -1px var(--ring-button-group-button-border-color) inset,
+    1px 0 var(--ring-button-group-button-border-color) inset;
 
   /* stylelint-disable-next-line selector-max-specificity */
   &::before {
@@ -79,7 +84,10 @@
 
 .buttonGroup > .button:last-child,
 .buttonGroup > :last-child .button {
-  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset, -1px 0 var(--ring-button-group-button-border-color) inset;
+  box-shadow:
+    0 1px var(--ring-button-group-button-border-color) inset,
+    0 -1px var(--ring-button-group-button-border-color) inset,
+    -1px 0 var(--ring-button-group-button-border-color) inset;
 
   /* stylelint-disable-next-line selector-max-specificity */
   &::after {
@@ -105,26 +113,30 @@
 .buttonGroup .button.button:hover:not(:disabled),
 .buttonGroup .button.button:active:not(:disabled) {
   border-radius: var(--ring-border-radius);
-  box-shadow: button-shadow var(--ring-border-hover-color);
+  box-shadow: var(--ring-button-shadow) var(--ring-border-hover-color);
 }
 
 .buttonGroup .button.button:focus-visible {
   border-radius: var(--ring-border-radius);
-  box-shadow: button-shadow var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
+  box-shadow:
+    var(--ring-button-shadow) var(--ring-border-hover-color),
+    0 0 0 1px var(--ring-border-hover-color);
 }
 
 .buttonGroup .button.button.active {
   border-radius: var(--ring-border-radius);
-  box-shadow: button-shadow var(--ring-main-color);
+  box-shadow: var(--ring-button-shadow) var(--ring-main-color);
 }
 
 .buttonGroup .button:focus-visible.active {
   border-radius: var(--ring-border-radius);
-  box-shadow: button-shadow var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
+  box-shadow:
+    var(--ring-button-shadow) var(--ring-main-color),
+    0 0 0 1px var(--ring-border-hover-color);
 }
 
 .buttonGroup .button.active[disabled] {
-  box-shadow: button-shadow var(--ring-border-selected-disabled-color);
+  box-shadow: var(--ring-button-shadow) var(--ring-border-selected-disabled-color);
 }
 /* stylelint-enable */
 

package/components/button-group/caption.js

@@ -5,6 +5,6 @@ export default class Caption extends PureComponent {
     render() {
         const { className } = this.props;
         const classes = classNames(styles.caption, className);
-        return (<span {...this.props} className={classes}/>);
+        return <span {...this.props} className={classes}/>;
     }
 }

package/components/button-toolbar/button-toolbar.d.ts

@@ -4,7 +4,7 @@ export interface ButtonToolbarProps extends HTMLAttributes<HTMLElement> {
 }
 /**
  * @name Button Toolbar
-*/
+ */
 export default class ButtonToolbar extends PureComponent<ButtonToolbarProps> {
     render(): import("react").JSX.Element;
 }

package/components/button-toolbar/button-toolbar.js

@@ -4,11 +4,11 @@ import dataTests from '../global/data-tests';
 import styles from './button-toolbar.css';
 /**
  * @name Button Toolbar
-*/
+ */
 export default class ButtonToolbar extends PureComponent {
     render() {
         const { className, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(styles.buttonToolbar, className);
-        return (<div {...restProps} data-test={dataTests('ring-button-toolbar', dataTest)} className={classes}/>);
+        return <div {...restProps} data-test={dataTests('ring-button-toolbar', dataTest)} className={classes}/>;
     }
 }

package/components/caret/caret.js

@@ -70,15 +70,13 @@ export default class Caret {
             range2.setEnd(range1.endContainer, range1.endOffset);
             const _curNode = range1.startContainer;
             if (this.target === _curNode) {
-                return range1.startOffset === 0 || _curNode.textContent == null
-                    ? 0
-                    : _curNode.textContent.length;
+                return range1.startOffset === 0 || _curNode.textContent == null ? 0 : _curNode.textContent.length;
             }
             else if (!this.target.contains(_curNode)) {
                 return -1;
             }
             else if (!_curNode) {
-                return 'selectionStart' in this.target && this.target.selectionStart || -1;
+                return ('selectionStart' in this.target && this.target.selectionStart) || -1;
             }
             const curPos = this.getAbsolutePosition(_curNode);
             if (range1.startContainer === range1.endContainer) {
@@ -86,9 +84,11 @@ export default class Caret {
                     return curPos + range1.startOffset;
                 }
                 else {
-                    return { startOffset: curPos + range1.startOffset,
+                    return {
+                        startOffset: curPos + range1.startOffset,
                         endOffset: curPos + range1.endOffset,
-                        position: range2.toString().length };
+                        position: range2.toString().length,
+                    };
                 }
             }
             else {
@@ -98,7 +98,7 @@ export default class Caret {
                 return { startOffset, endOffset, position: range2.toString().length };
             }
         }
-        return 'selectionStart' in this.target && this.target.selectionStart || -1;
+        return ('selectionStart' in this.target && this.target.selectionStart) || -1;
     }
     /**
      * Get relative position of query
@@ -209,7 +209,7 @@ export default class Caret {
             offset =
                 getRect(range).right -
                     getRect(this.target).left -
-                    (range.startContainer instanceof HTMLElement && range.startContainer.offsetLeft || 0);
+                    ((range.startContainer instanceof HTMLElement && range.startContainer.offsetLeft) || 0);
         }
         return offset;
     }

package/components/checkbox/checkbox.css

@@ -1,8 +1,8 @@
 @import "../global/variables.css";
 
-@value checkboxSize: 14px;
-
 .checkbox {
+  --ring-checkbox-size: 14px;
+
   position: relative;
 
   display: inline-flex;
@@ -27,11 +27,14 @@
   display: inline-block;
 
   box-sizing: border-box;
-  width: checkboxSize;
-  height: checkboxSize;
+  width: var(--ring-checkbox-size);
+  height: var(--ring-checkbox-size);
 
   user-select: none;
-  transition: border-color var(--ring-ease), background-color var(--ring-ease), box-shadow var(--ring-ease);
+  transition:
+    border-color var(--ring-ease),
+    background-color var(--ring-ease),
+    box-shadow var(--ring-ease);
   vertical-align: middle;
   pointer-events: none;
 

package/components/checkbox/checkbox.js

@@ -14,7 +14,7 @@ import styles from './checkbox.css';
  */
 export default class Checkbox extends PureComponent {
     static defaultProps = {
-        indeterminate: false
+        indeterminate: false,
     };
     componentDidMount() {
         if (this.input != null) {

package/components/clipboard/clipboard-fallback.js

@@ -7,9 +7,7 @@ export function copyTextToClipboard(str) {
     document.body.appendChild(el);
     const selection = document.getSelection();
     // Should restore previous selection
-    const selected = (selection && selection.rangeCount > 0)
-        ? selection.getRangeAt(0)
-        : false;
+    const selected = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
     el.select();
     document.execCommand('copy');
     document.body.removeChild(el);
@@ -27,9 +25,7 @@ export function copyHTMLToClipboard(str) {
     document.body.appendChild(el);
     const selection = document.getSelection();
     // Should restore previous selection
-    const selected = (selection && selection.rangeCount > 0)
-        ? selection.getRangeAt(0)
-        : false;
+    const selected = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
     selection?.removeAllRanges();
     const range = document.createRange();
     range.selectNode(el);

package/components/clipboard/clipboard.js

@@ -7,14 +7,14 @@ function getClipboardImplementation() {
             copy: (text) => navigator.clipboard.writeText(text),
             copyHTML: (html) => navigator.clipboard.write([
                 new ClipboardItem({
-                    ['text/html']: new Blob([html], { type: 'text/html' })
-                })
-            ])
+                    ['text/html']: new Blob([html], { type: 'text/html' }),
+                }),
+            ]),
         };
     }
     return {
         copy: (str) => Promise.resolve(copyTextToClipboard(str)),
-        copyHTML: (html) => Promise.resolve(copyHTMLToClipboard(html))
+        copyHTML: (html) => Promise.resolve(copyHTMLToClipboard(html)),
     };
 }
 async function copy(text, successMessage, errorMessage, delay = ALERT_DELAY, isHtml = false) {
@@ -36,6 +36,6 @@ async function copy(text, successMessage, errorMessage, delay = ALERT_DELAY, isH
 }
 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)
+    copyHTML: async (html, successMessage, errorMessage, delay = ALERT_DELAY) => await copy(html, successMessage, errorMessage, delay, true),
 };
 export default clipboard;

package/components/code/code.d.ts

@@ -5,7 +5,7 @@ export interface CodeProps {
     code: string;
     inline: boolean;
     softWrap: boolean;
-    replacer: ((element: HTMLElement | null) => void);
+    replacer: (element: HTMLElement | null) => void;
     className?: string | null | undefined;
     language?: string | null | undefined;
     codeRef?: Ref<HTMLElement> | null | undefined;