feat!: use native copy method

package.json

@@ -144,7 +144,6 @@
         "lodash": "^4.17.21",
         "rc-slider": "^11.1.7",
         "react-beautiful-dnd": "^13.1.1",
-        "react-copy-to-clipboard": "^5.1.0",
         "react-transition-group": "^4.4.5",
         "react-virtualized-auto-sizer": "^1.0.24",
         "react-window": "^1.8.10",
@@ -184,7 +183,6 @@
         "@types/lodash": "^4.17.13",
         "@types/react": "^18.3.12",
         "@types/react-beautiful-dnd": "^13.1.8",
-        "@types/react-copy-to-clipboard": "^5.0.7",
         "@types/react-dom": "^18.3.1",
         "@types/react-transition-group": "^4.4.11",
         "@types/react-virtualized-auto-sizer": "^1.0.4",

src/components/ClipboardButton/ClipboardButton.tsx

@@ -102,7 +102,6 @@
         text,
         timeout = DEFAULT_TIMEOUT,
         onCopy,
-        options,
         hasTooltip = true,
         onMouseEnter,
         onFocus,
@@ -116,7 +115,7 @@
     React.useEffect(() => window.clearTimeout(timerIdRef.current), []);
 
     const handleCopy: OnCopyHandler = React.useCallback(
         (text, result) => {
             onCopy?.(text, result);
             setTooltipDisabled(false);
             setTooltipCloseDelay(timeout);
@@ -154,7 +153,7 @@
     );
 
     return (
-        <CopyToClipboard text={text} timeout={timeout} onCopy={handleCopy} options={options}>
+        <CopyToClipboard text={text} timeout={timeout} onCopy={handleCopy}>
             {(status) => (
                 <ClipboardButtonComponent
                     {...buttonProps}

src/components/ClipboardButton/README.md

@@ -32,15 +32,14 @@ LANDING_BLOCK-->
 
 `ClipboardButton` properties are inherited from `Button` [properties](../Button/README.md#properties) except `href`, `component`, `target`, `rel`, `loading`, `children`.
 
-| Name               | Description                                                              |                       Type                        |   Default   |
-| :----------------- | :----------------------------------------------------------------------- | :-----------------------------------------------: | :---------: |
-| hasTooltip         | Disable tooltip. Tooltip won't be shown                                  |                     `boolean`                     |   `true`    |
-| onCopy             | Callback after copy `(text: string, result: boolean) => void`            |                    `Function`                     |             |
-| options            | Copy to clipboard options                                                | [CopyToClipboardOptions](#copytoclipboardoptions) |             |
-| text               | Text to copy                                                             |                     `string`                      |             |
-| timeout            | Time before state bounces back to its normal after the button is clicked |                     `number`                      |   `1000`    |
-| tooltipInitialText | Text shown before copy                                                   |                     `string`                      |  `"Copy"`   |
-| tooltipSuccessText | Text shown after copy                                                    |                     `string`                      | `"Copied!"` |
+| Name               | Description                                                              |    Type    |   Default   |
+| :----------------- | :----------------------------------------------------------------------- | :--------: | :---------: |
+| hasTooltip         | Disable tooltip. Tooltip won't be shown                                  | `boolean`  |   `true`    |
+| onCopy             | Callback after copy `(text: string, result: boolean) => void`            | `Function` |             |
+| text               | Text to copy                                                             |  `string`  |             |
+| timeout            | Time before state bounces back to its normal after the button is clicked |  `number`  |   `1000`    |
+| tooltipInitialText | Text shown before copy                                                   |  `string`  |  `"Copy"`   |
+| tooltipSuccessText | Text shown after copy                                                    |  `string`  | `"Copied!"` |
 
 ### CopyToClipboardOptions
 

src/components/ClipboardButton/__stories__/ClipboardButton.stories.tsx

@@ -9,6 +9,9 @@ import {ClipboardButton} from '../ClipboardButton';
 export default {
     title: 'Components/Utils/ClipboardButton',
     component: ClipboardButton,
+    args: {
+        text: 'Clipboard text from `<ClipboardButton/>`',
+    },
 } as Meta;
 
 type Story = StoryObj<typeof ClipboardButton>;

src/components/CopyToClipboard/CopyToClipboard.tsx

@@ -2,23 +2,27 @@
 
 import React from 'react';
 
-import ReactCopyToClipboard from 'react-copy-to-clipboard';
+import {copyText} from '../../utils/copyText';
 
 import type {CopyToClipboardProps, CopyToClipboardStatus} from './types';
 
 const INITIAL_STATUS: CopyToClipboardStatus = 'pending';
 
 export function CopyToClipboard(props: CopyToClipboardProps) {
-    const {children, text, options, timeout, onCopy} = props;
+    const {children, text, timeout, onCopy} = props;
 
+    const textRef = React.useRef(text);
     const [status, setStatus] = React.useState<CopyToClipboardStatus>(INITIAL_STATUS);
 
     const timerIdRef = React.useRef<number>();
 
-    const content = React.useMemo(() => children(status), [children, status]);
+    const content = React.useMemo<React.ReactElement<React.HTMLAttributes<HTMLElement>>>(
+        () => children(status),
+        [children, status],
+    );
 
-    const handleCopy = React.useCallback<Required<ReactCopyToClipboard.Props>['onCopy']>(
-        (copyText, result) => {
+    const handleCopy = React.useCallback(
+        (copyText: string, result: boolean) => {
             setStatus(result ? 'success' : 'error');
             window.clearTimeout(timerIdRef.current);
             timerIdRef.current = window.setTimeout(() => setStatus(INITIAL_STATUS), timeout);
@@ -27,15 +31,37 @@
         [onCopy, timeout],
     );
 
+    const onClickWithCopy: React.MouseEventHandler<HTMLElement> = React.useCallback(
+        (event) => {
+            textRef.current = text;
+
+            function copy(result: boolean) {
+                if (text === textRef.current) {
+                    handleCopy(text, result);
+
+                    content.props?.onClick?.(event);
+                }
+            }
+
+            copyText(text).then(
+                () => {
+                    copy(true);
+                },
+                () => {
+                    copy(false);
+                },
+            );
+        },
+        [content.props, handleCopy, text],
+    );
+
     React.useEffect(() => () => window.clearTimeout(timerIdRef.current), []);
 
     if (!React.isValidElement(content)) {
         throw new Error('Content must be a valid react element');
     }
 
-    return (
-        <ReactCopyToClipboard text={text} onCopy={handleCopy} options={options}>
-            {content}
-        </ReactCopyToClipboard>
-    );
+    return React.cloneElement(content, {
+        onClick: onClickWithCopy,
+    });
 }

src/components/CopyToClipboard/types.ts

@@ -1,7 +1,5 @@
 import type React from 'react';
 
-import type ReactCopyToClipboard from 'react-copy-to-clipboard';
-
 export type CopyToClipboardStatus = 'pending' | 'success' | 'error';
 
 export type OnCopyHandler = (text: string, result: boolean) => void;
@@ -11,7 +9,7 @@ export type CopyToClipboardContent = (status: CopyToClipboardStatus) => React.Re
 export interface CopyToClipboardProps {
     text: string;
     timeout?: number;
+    /** Child element should have `onClick` handler to work properly */
     children: CopyToClipboardContent;
     onCopy?: OnCopyHandler;
-    options?: ReactCopyToClipboard.Options;
 }

src/demo/colors/ColorPanel.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import {Bulb} from '@gravity-ui/icons';
-import ReactCopyToClipboard from 'react-copy-to-clipboard';
 
-import {ActionTooltip, Button, Icon} from '../../components';
+import {ActionTooltip, Button, CopyToClipboard, Icon} from '../../components';
 import {useUniqId} from '../../hooks';
 
 import './ColorPanel.scss';
@@ -39,18 +38,20 @@ export function ColorPanel(props: ColorPanelProps) {
             const copyText = `var(${varName})`;
             return (
                 <div className="color-panel__card" key={color.name}>
-                    <ReactCopyToClipboard text={copyText}>
-                        <div
-                            className={`color-panel__card-box ${boxBorders}`}
-                            style={{background: `var(${varName})`}}
-                        />
-                    </ReactCopyToClipboard>
+                    <CopyToClipboard text={copyText}>
+                        {() => (
+                            <div
+                                className={`color-panel__card-box ${boxBorders}`}
+                                style={{background: `var(${varName})`}}
+                            />
+                        )}
+                    </CopyToClipboard>
                     <div className="color-panel__card-texts">
                         <div className="color-panel__card-headline">
                             <div className="color-panel__card-title">{color.title}</div>
-                            <ReactCopyToClipboard text={copyText}>
-                                <div className="color-panel__card-var">{varName}</div>
-                            </ReactCopyToClipboard>
+                            <CopyToClipboard text={copyText}>
+                                {() => <div className="color-panel__card-var">{varName}</div>}
+                            </CopyToClipboard>
                         </div>
                         <div className="color-panel__card-description">{color.description}</div>
                     </div>

src/demo/colors/ColorTable.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import {Ban} from '@gravity-ui/icons';
-import ReactCopyToClipboard from 'react-copy-to-clipboard';
 
-import {Icon} from '../../components';
+import {CopyToClipboard, Icon} from '../../components';
 import {cn} from '../../components/utils/cn';
 
 import './ColorTable.scss';
@@ -83,9 +82,9 @@ export function ColorTable({theme}: ColorTableProps) {
                                 );
 
                                 return varExist ? (
-                                    <ReactCopyToClipboard text={`var(${varName})`} key={step}>
-                                        {content}
-                                    </ReactCopyToClipboard>
+                                    <CopyToClipboard text={`var(${varName})`} key={step}>
+                                        {() => content}
+                                    </CopyToClipboard>
                                 ) : (
                                     content
                                 );

src/demo/typography/TextPanel.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import ReactCopyToClipboard from 'react-copy-to-clipboard';
-
+import {CopyToClipboard} from '../../components';
 import {cn} from '../../components/utils/cn';
 
 import './TextPanel.scss';
@@ -32,24 +31,28 @@ export function TextPanel(props: TextPanelProps) {
                     <div className={b('card-texts')}>
                         <div className={b('card-headline')}>
                             <div className={b('card-title')}>{item.title}</div>
-                            <ReactCopyToClipboard text={copyText}>
-                                <div className={b('card-var')}>{varName}</div>
-                            </ReactCopyToClipboard>
+                            <CopyToClipboard text={copyText}>
+                                {() => <div className={b('card-var')}>{varName}</div>}
+                            </CopyToClipboard>
                         </div>
                         {item.description && (
                             <div className={b('card-description')}>{item.description}</div>
                         )}
                         {props.variant && (
-                            <ReactCopyToClipboard text={copyText}>
-                                <div
-                                    className={b('card-sample', {variant: varName})}
-                                    style={
-                                        props.variant ? undefined : {fontFamily: `var(${varName})`}
-                                    }
-                                >
-                                    {SAMPLE_TEXT}
-                                </div>
-                            </ReactCopyToClipboard>
+                            <CopyToClipboard text={copyText}>
+                                {() => (
+                                    <div
+                                        className={b('card-sample', {variant: varName})}
+                                        style={
+                                            props.variant
+                                                ? undefined
+                                                : {fontFamily: `var(${varName})`}
+                                        }
+                                    >
+                                        {SAMPLE_TEXT}
+                                    </div>
+                                )}
+                            </CopyToClipboard>
                         )}
                     </div>
                 </div>

src/utils/copyText.ts

@@ -0,0 +1,7 @@
+export function copyText(text: string) {
+    if (navigator?.clipboard?.writeText) {
+        return navigator.clipboard.writeText(text);
+    }
+
+    return Promise.reject(new Error('Native copy is not available'));
+}