Use HTMLElement for useRefCallback

packages/compose/README.md

@@ -185,7 +185,7 @@ _Parameters_
 
 _Returns_
 
--   `import('react').Ref<Node>`: A ref to assign to the target element.
+-   `import('react').Ref<HTMLElement>`: A ref to assign to the target element.
 
 <a name="useDebounce" href="#useDebounce">#</a> **useDebounce**
 
@@ -394,12 +394,12 @@ callback will be called multiple times for the same node.
 
 _Parameters_
 
--   _callback_ `(node: Node) => (() => void) | undefined`: Callback with ref as argument.
+-   _callback_ `(node: HTMLElement) => (() => void) | undefined`: Callback with ref as argument.
 -   _dependencies_ `import('react').DependencyList`: Dependencies of the callback.
 
 _Returns_
 
--   `import('react').RefCallback<Node | null>`: Ref callback.
+-   `import('react').RefCallback<HTMLElement | null>`: Ref callback.
 
 <a name="useResizeObserver" href="#useResizeObserver">#</a> **useResizeObserver**
 

packages/compose/src/hooks/use-copy-to-clipboard/index.js

@@ -13,10 +13,6 @@ import { useRef } from '@wordpress/element';
  */
 import useRefEffect from '../use-ref-effect';
 
-/**
- * @template T
- * @typedef {import('react').RefObject<T>} RefObject */
-
 /**
  * @template T
  * @param {T} value
@@ -31,20 +27,20 @@ function useUpdatedRef( value ) {
 /**
  * Copies the given text to the clipboard when the element is clicked.
  *
- * @param {string | (() => string)} text      The text to copy. Use a function if not
+ * @param {string | (() => string)} text The text to copy. Use a function if not
  *                                  already available and expensive to compute.
- * @param {Function}      onSuccess Called when to text is copied.
+ * @param {Function} onSuccess Called when to text is copied.
  *
- * @return {import('react').Ref<Node>} A ref to assign to the target element.
+ * @return {import('react').Ref<HTMLElement>} A ref to assign to the target element.
  */
 export default function useCopyToClipboard( text, onSuccess ) {
 	// Store the dependencies as refs and continuesly update them so they're
 	// fresh when the callback is called.
 	const textRef = useUpdatedRef( text );
-	const onSuccesRef = useUpdatedRef( onSuccess );
+	const onSuccessRef = useUpdatedRef( onSuccess );
 	return useRefEffect( ( node ) => {
 		// Clipboard listens to click events.
-		const clipboard = new Clipboard( /** @type {Element} */ ( node ), {
+		const clipboard = new Clipboard( node, {
 			text() {
 				return typeof textRef.current === 'function'
 					? textRef.current()
@@ -59,10 +55,10 @@ export default function useCopyToClipboard( text, onSuccess ) {
 			clearSelection();
 			// Handle ClipboardJS focus bug, see
 			// https://github.com/zenorocha/clipboard.js/issues/680
-			/** @type {HTMLElement} */ ( node ).focus();
+			node.focus();
 
-			if ( onSuccesRef.current ) {
-				onSuccesRef.current();
+			if ( onSuccessRef.current ) {
+				onSuccessRef.current();
 			}
 		} );
 

packages/compose/src/hooks/use-ref-effect/index.js

@@ -17,15 +17,15 @@ import { useCallback, useRef } from '@wordpress/element';
  * to be removed. It *is* necessary if you add dependencies because the ref
  * callback will be called multiple times for the same node.
  *
- * @param {(node: Node) => (() => void) | undefined} callback     Callback with ref as argument.
- * @param {import('react').DependencyList}    dependencies Dependencies of the callback.
+ * @param {(node: HTMLElement) => (() => void) | undefined} callback Callback with ref as argument.
+ * @param {import('react').DependencyList} dependencies Dependencies of the callback.
  *
- * @return {import('react').RefCallback<Node | null>} Ref callback.
+ * @return {import('react').RefCallback<HTMLElement | null>} Ref callback.
  */
 export default function useRefEffect( callback, dependencies ) {
 	/** @type {import('react').MutableRefObject<(() => void) | undefined>}  */
 	const cleanup = useRef();
-	return useCallback( ( /** @type {Node | null} */ node ) => {
+	return useCallback( ( /** @type {HTMLElement | null} */ node ) => {
 		if ( node ) {
 			cleanup.current = callback( node );
 		} else if ( cleanup.current ) {