Move useDebouncedInput hook to @wordpress/compose package (#56744)

packages/block-editor/src/components/inserter/media-tab/media-panel.js

@@ -5,12 +5,12 @@ import { useRef, useEffect } from '@wordpress/element';
 import { Spinner, SearchControl } from '@wordpress/components';
 import { focus } from '@wordpress/dom';
 import { __ } from '@wordpress/i18n';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import MediaList from './media-list';
-import useDebouncedInput from '../hooks/use-debounced-input';
 import { useMediaResults } from './hooks';
 import InserterNoResults from '../no-results';
 

packages/block-editor/src/components/inserter/menu.js

@@ -17,6 +17,7 @@ import {
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -28,7 +29,6 @@ import BlockPatternsTab from './block-patterns-tab';
 import { PatternCategoryPreviewPanel } from './block-patterns-tab/pattern-category-preview-panel';
 import { MediaTab, MediaCategoryDialog, useMediaCategories } from './media-tab';
 import InserterSearchResults from './search-results';
-import useDebouncedInput from './hooks/use-debounced-input';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';

packages/compose/README.md

@@ -249,6 +249,18 @@ _Returns_
 
 -   `import('../../utils/debounce').DebouncedFunc<TFunc>`: Debounced function.
 
+### useDebouncedInput
+
+Helper hook for input fields that need to debounce the value before using it.
+
+_Parameters_
+
+-   _defaultValue_ `any`: The default value to use.
+
+_Returns_
+
+-   `[string, Function, string]`: The input value, the setter and the debounced input value.
+
 ### useDisabled
 
 In some circumstances, such as block previews, all focusable DOM elements (input fields, links, buttons, etc.) need to be disabled. This hook adds the behavior to disable nested DOM elements to the returned ref.

packages/block-editor/src/components/inserter/hooks/use-debounced-input.js → packages/compose/src/hooks/use-debounced-input/index.js

@@ -2,8 +2,18 @@
  * WordPress dependencies
  */
 import { useEffect, useState } from '@wordpress/element';
-import { useDebounce } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import useDebounce from '../use-debounce';
+
+/**
+ * Helper hook for input fields that need to debounce the value before using it.
+ *
+ * @param {any} defaultValue The default value to use.
+ * @return {[string, Function, string]} The input value, the setter and the debounced input value.
+ */
 export default function useDebouncedInput( defaultValue = '' ) {
 	const [ input, setInput ] = useState( defaultValue );
 	const [ debouncedInput, setDebouncedState ] = useState( defaultValue );

packages/compose/src/index.js

@@ -39,6 +39,7 @@ export { default as useResizeObserver } from './hooks/use-resize-observer';
 export { default as useAsyncList } from './hooks/use-async-list';
 export { default as useWarnOnChange } from './hooks/use-warn-on-change';
 export { default as useDebounce } from './hooks/use-debounce';
+export { default as useDebouncedInput } from './hooks/use-debounced-input';
 export { default as useThrottle } from './hooks/use-throttle';
 export { default as useMergeRefs } from './hooks/use-merge-refs';
 export { default as useRefEffect } from './hooks/use-ref-effect';

packages/compose/src/index.native.js

@@ -33,6 +33,7 @@ export { default as usePreferredColorScheme } from './hooks/use-preferred-color-
 export { default as usePreferredColorSchemeStyle } from './hooks/use-preferred-color-scheme-style';
 export { default as useResizeObserver } from './hooks/use-resize-observer';
 export { default as useDebounce } from './hooks/use-debounce';
+export { default as useDebouncedInput } from './hooks/use-debounced-input';
 export { default as useThrottle } from './hooks/use-throttle';
 export { default as useMergeRefs } from './hooks/use-merge-refs';
 export { default as useRefEffect } from './hooks/use-ref-effect';

packages/dataviews/src/search.js

@@ -4,11 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
 import { SearchControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import useDebouncedInput from './utils/use-debounced-input';
+import { useDebouncedInput } from '@wordpress/compose';
 
 export default function Search( { label, view, onChangeView } ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(

packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js

@@ -15,12 +15,12 @@ import {
 } from '@wordpress/components';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import useDebouncedInput from '../../utils/use-debounced-input';
 import { mapToIHasNameAndId } from './utils';
 
 const {

packages/edit-site/src/components/page-patterns/patterns-list.js

@@ -15,7 +15,11 @@ import {
 import { __, _x, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useAsyncList, useViewportMatch } from '@wordpress/compose';
+import {
+	useAsyncList,
+	useViewportMatch,
+	useDebouncedInput,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,7 +29,6 @@ import Grid from './grid';
 import NoPatterns from './no-patterns';
 import usePatterns from './use-patterns';
 import SidebarButton from '../sidebar-button';
-import useDebouncedInput from '../../utils/use-debounced-input';
 import { unlock } from '../../lock-unlock';
 import { PATTERN_SYNC_TYPES, PATTERN_TYPES } from '../../utils/constants';
 import Pagination from './pagination';