feature: allow assing ll button props to the ClipboardButton

Author: fabiankaegy

components/clipboard-button/index.tsx

@@ -1,28 +1,25 @@
-import { useCopyToClipboard } from '@wordpress/compose';
+import { useCopyToClipboard, useMergeRefs } from '@wordpress/compose';
 import { useState, useEffect } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-interface ClipboardButtonProps {
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+interface ClipboardButtonProps extends Partial<Omit<ButtonProps, 'children'>> {
 	/**
 	 * The text to copy to the clipboard.
 	 */
 	text: string;
 
-	/**
-	 * Boolean to disable the button.
-	 */
-	disabled: boolean;
-
 	/**
 	 * Function to run when the text is successfully copied.
 	 */
-	onSuccess: Function;
+	onSuccess?: Function;
 
 	/**
 	 * Labels for the button.
 	 */
-	labels: ButtonLabels;
+	labels?: ButtonLabels;
 }
 
 interface ButtonLabels {
@@ -39,9 +36,9 @@ interface ButtonLabels {
 
 export const ClipboardButton: React.FC<ClipboardButtonProps> = ({
 	text = '',
-	disabled = false,
 	onSuccess = () => {},
 	labels = {},
+	...rest
 }) => {
 	const [hasCopied, setHasCopied] = useState(false);
 	const copy = labels.copy ? labels.copy : __('Copy');
@@ -77,9 +74,10 @@ export const ClipboardButton: React.FC<ClipboardButtonProps> = ({
 	}
 
 	const ref = useCopyToClipboard(text, successfullyCopied);
+	const mergedRefs = useMergeRefs([ref, (rest.ref as any) || null]);
 
 	return (
-		<Button disabled={disabled} ref={ref}>
+		<Button {...(rest as any)} ref={mergedRefs}>
 			{hasCopied ? copied : copy}
 		</Button>
 	);