Refactor QueryControls component to TypeScript

packages/components/CHANGELOG.md

@@ -14,6 +14,7 @@
 -   `DropdownMenu`: migrate Storybook to controls ([47149](https://github.com/WordPress/gutenberg/pull/47149)).
 -   Removed deprecated `@storybook/addon-knobs` dependency from the package ([47152](https://github.com/WordPress/gutenberg/pull/47152)).
 -   `ColorListPicker`: Convert to TypeScript ([#46358](https://github.com/WordPress/gutenberg/pull/46358)).
+-   `QueryControls`: Convert to TypeScript ([#46721](https://github.com/WordPress/gutenberg/pull/46721)).
 
 ### Bug Fix
 

packages/components/src/query-controls/README.md

@@ -28,10 +28,10 @@ const QUERY_DEFAULTS = {
 		},
 	],
 	maxItems: 20,
-	minItems: 1,	
+	minItems: 1,
 	numberOfItems: 10,
 	order: 'asc',
-	orderBy: 'title',	
+	orderBy: 'title',
 };
 
 const MyQueryControls = () => {
@@ -66,24 +66,33 @@ The `QueryControls` component now supports multiple category selection, to repla
 const QUERY_DEFAULTS = {
 	orderBy: 'title',
 	order: 'asc',
-	selectedCategories: [ 1 ],
-	categories: [
+	selectedCategories: [
+		{
+			id: 1,
+			value: 'Category 1',
+		},
 		{
+			id: 2,
+			value: 'Category 1b',
+		},
+	],
+	categories: {
+		'Category 1': {
 			id: 1,
 			name: 'Category 1',
 			parent: 0,
 		},
-		{
+		'Category 1b': {
 			id: 2,
 			name: 'Category 1b',
 			parent: 1,
 		},
-		{
+		'Category 2': {
 			id: 3,
 			name: 'Category 2',
 			parent: 0,
 		},
-	],
+	},
 	numberOfItems: 10,
 };
 
@@ -115,128 +124,116 @@ The format of the categories list also needs to be updated to match what `FormTo
 
 ### Props
 
-#### authorList
+#### `authorList`: `AuthorSelectProps[ 'authorList' ]`
 
-An array of author IDs that is passed into an `AuthorSelect` sub-component.
+An array of authors that is passed into an `AuthorSelect` sub-component.
 
--   Type: `Array`
 -   Required: No
 -   Platform: Web
 
-#### selectedAuthorId
+#### `categoriesList`: `CategorySelectProps[ 'categoriesList' ]`
 
-The selected author ID.
+An array of categories, renders a `CategorySelect` sub-component when passed in conjunction with `onCategoryChange`.
 
--   Type: `Number`
 -   Required: No
 -   Platform: Web
 
-#### categoriesList
+#### `categorySuggestions`: `{ [ categoryName: Category[ 'name' ] ]: Category }`
 
-An array of category IDs; renders a `CategorySelect` sub-component when passed in conjunction with `onCategoryChange`.
+An object of categories, renders a `FormTokenField` component when passed in conjunction with `onCategoryChange`.
 
--   Type: `Array`
 -   Required: No
 -   Platform: Web
 
-#### categorySuggestions
+#### `maxItems`: `number`
 
-An array of category names; renders a `FormTokenField` component when passed in conjunction with `onCategoryChange`.
+The maximum of items.
 
--   Type: `Array`
--   Required: No
--   Platform: Web
-
-#### maxItems
-
--   Type: `Number`
 -   Required: No
 -   Default: 100
 -   Platform: Web
 
-#### minItems
+#### `minItems`: `number`
+
+The minimum of items.
 
--   Type: `Number`
 -   Required: No
 -   Default: 1
 -   Platform: Web
 
-#### numberOfItems
+#### `numberOfItems`: `number`
 
 The selected number of items to retrieve via the query.
 
--   Type: `Number`
 -   Required: No
 -   Platform: Web
 
-#### onAuthorChange
+#### `onAuthorChange`: `AuthorSelectProps[ 'onChange' ]`
 
 A function that receives the new author value. If this is not specified, the author controls are not included.
 
--   Type: `Function`
 -   Required: No
 -   Platform: Web
 
-#### onCategoryChange
+#### `onCategoryChange`: `CategorySelectProps[ 'onChange' ] | FormTokenFieldProps[ 'onChange' ]`
 
 A function that receives the new category value. If this is not specified, the category controls are not included.
 
--   Type: `Function`
 -   Required: No
 -   Platform: Web
 
-#### onNumberOfItemsChange
+#### `onNumberOfItemsChange`: `( newNumber?: number ) => void`
 
 A function that receives the new number of items value. If this is not specified, then the number of items range control is not included.
 
--   Type: `Function`
 -   Required: No
 -   Platform: Web
 
-#### onOrderChange
+#### `onOrderChange`: `( newOrder: Order ) => void`
 
 A function that receives the new order value. If this or onOrderByChange are not specified, then the order controls are not included.
 
--   Type: `Function`
 -   Required: No
 -   Platform: Web
 
-#### onOrderByChange
+#### `onOrderByChange`: `( newOrderBy: OrderBy ) => void`
 
 A function that receives the new orderby value. If this or onOrderChange are not specified, then the order controls are not included.
 
--   Type: `Function`
 -   Required: No
 -   Platform: Web
 
-#### order
+#### `order`: `Order`
 
-The order in which to retrieve posts. Can be 'asc' or 'desc'.
+The order in which to retrieve posts.
 
--   Type: `String`
 -   Required: No
 -   Platform: Web
 
-#### orderBy
+#### `orderBy`: `OrderBy`
+
+The meta key by which to order posts.
 
-The meta key by which to order posts. Can be 'date' or 'title'.
+-   Required: No
+-   Platform: Web
+
+#### `selectedAuthorId`: `AuthorSelectProps[ 'selectedAuthorId' ]`
+
+The selected author ID.
 
--   Type: `String`
 -   Required: No
 -   Platform: Web
 
-#### selectedCategories
+#### `selectedCategories`: `Category[]`
 
 The selected categories for the `categorySuggestions`.
 
--   Type: `Array`
 -   Required: No
 -   Platform: Web
 
-#### selectedCategoryId
+#### `selectedCategoryId`: `CategorySelectProps[ 'selectedCategoryId' ]`
 
 The selected category for the `categoriesList`.
 
--   Type: `Number`
 -   Required: No
 -   Platform: Web

packages/components/src/query-controls/author-select.tsx

@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import { buildTermsTree } from './terms';
+import TreeSelect from '../tree-select';
+import type { TreeSelectProps } from '../tree-select/types';
+import type { AuthorSelectProps } from './types';
+
+export default function AuthorSelect( {
+	label,
+	noOptionLabel,
+	authorList,
+	selectedAuthorId,
+	onChange: onChangeProp,
+}: AuthorSelectProps ) {
+	if ( ! authorList ) return null;
+	const termsTree = buildTermsTree( authorList );
+	return (
+		<TreeSelect
+			{ ...{
+				label,
+				noOptionLabel,
+				// Since the `multiple` attribute is not passed to `TreeSelect`, it is
+				// safe to assume that the argument of `onChange` cannot be `string[]`.
+				// The correct solution would be to type `SelectControl` better, so that
+				// the type of `value` and `onChange` vary depending on `multiple`.
+				onChange: onChangeProp as TreeSelectProps[ 'onChange' ],
+			} }
+			tree={ termsTree }
+			selectedId={
+				selectedAuthorId !== undefined
+					? String( selectedAuthorId )
+					: undefined
+			}
+		/>
+	);
+}

packages/components/src/query-controls/category-select.tsx

@@ -0,0 +1,46 @@
+/**
+ * Internal dependencies
+ */
+import { buildTermsTree } from './terms';
+import TreeSelect from '../tree-select';
+import type { TreeSelectProps } from '../tree-select/types';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import type { CategorySelectProps } from './types';
+
+export default function CategorySelect( {
+	label,
+	noOptionLabel,
+	categoriesList,
+	selectedCategoryId,
+	onChange: onChangeProp,
+	...props
+}: CategorySelectProps ) {
+	const termsTree = useMemo( () => {
+		return buildTermsTree( categoriesList );
+	}, [ categoriesList ] );
+
+	return (
+		<TreeSelect
+			{ ...{
+				label,
+				noOptionLabel,
+				// Since the `multiple` attribute is not passed to `TreeSelect`, it is
+				// safe to assume that the argument of `onChange` cannot be `string[]`.
+				// The correct solution would be to type `SelectControl` better, so that
+				// the type of `value` and `onChange` vary depending on `multiple`.
+				onChange: onChangeProp as TreeSelectProps[ 'onChange' ],
+			} }
+			tree={ termsTree }
+			selectedId={
+				selectedCategoryId !== undefined
+					? String( selectedCategoryId )
+					: undefined
+			}
+			{ ...props }
+		/>
+	);
+}