Use SelectTree in Parent Category field (woocommerce#38261)

* Increment label CSS to look the same as TextControl's label * Migrate Parent Category field to SelectTree * Add changelogs * Fix unit test that was edited by mistake * Revert css changes in select-control.scss * Use BaseControl as label on SelectTree * Increment changelog * Increment changelogs * Refactor test * Refactor category-field functions and use them in related places * Fix ordered list appearing empty
vishstack · May 19, 2023 · 5437ed5 · 5437ed5
1 parent 869b897
commit 5437ed5
Show file tree

Hide file tree

Showing 9 changed files with 171 additions and 227 deletions.
diff --git a/packages/js/components/changelog/improve-selecttree-label b/packages/js/components/changelog/improve-selecttree-label
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Use BaseControl in the SelectTree label
diff --git a/packages/js/components/src/experimental-select-tree-control/select-tree.tsx b/packages/js/components/src/experimental-select-tree-control/select-tree.tsx
@@ -5,7 +5,7 @@ import { chevronDown } from '@wordpress/icons';
 import classNames from 'classnames';
 import { createElement, useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
-import { TextControl } from '@wordpress/components';
+import { BaseControl, TextControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -130,61 +130,55 @@ export const SelectTree = function SelectTree( {
 					}
 				) }
 			>
-				<label
-					htmlFor={ `${ props.id }-input` }
-					id={ `${ props.id }-label` }
-					className="woocommerce-experimental-select-control__label"
-				>
-					{ props.label }
-				</label>
-				{ props.multiple ? (
-					<ComboBox
-						comboBoxProps={ {
-							className:
-								'woocommerce-experimental-select-control__combo-box-wrapper',
-							role: 'combobox',
-							'aria-expanded': isOpen,
-							'aria-haspopup': 'tree',
-							'aria-labelledby': `${ props.id }-label`,
-							'aria-owns': `${ props.id }-menu`,
-						} }
-						inputProps={ inputProps }
-						suffix={ suffix }
-					>
-						<SelectedItems
-							isReadOnly={ isReadOnly }
-							items={ ( props.selected as Item[] ) || [] }
-							getItemLabel={ ( item ) => item?.label || '' }
-							getItemValue={ ( item ) => item?.value || '' }
-							onRemove={ ( item ) => {
-								if (
-									! Array.isArray( item ) &&
-									props.onRemove
-								) {
-									props.onRemove( item );
+				<BaseControl label={ props.label } id={ `${ props.id }-input` }>
+					{ props.multiple ? (
+						<ComboBox
+							comboBoxProps={ {
+								className:
+									'woocommerce-experimental-select-control__combo-box-wrapper',
+								role: 'combobox',
+								'aria-expanded': isOpen,
+								'aria-haspopup': 'tree',
+								'aria-owns': `${ props.id }-menu`,
+							} }
+							inputProps={ inputProps }
+							suffix={ suffix }
+						>
+							<SelectedItems
+								isReadOnly={ isReadOnly }
+								items={ ( props.selected as Item[] ) || [] }
+								getItemLabel={ ( item ) => item?.label || '' }
+								getItemValue={ ( item ) => item?.value || '' }
+								onRemove={ ( item ) => {
+									if (
+										! Array.isArray( item ) &&
+										props.onRemove
+									) {
+										props.onRemove( item );
+									}
+								} }
+								getSelectedItemProps={ () => ( {} ) }
+							/>
+						</ComboBox>
+					) : (
+						<TextControl
+							{ ...inputProps }
+							value={ props.createValue || '' }
+							onChange={ ( value ) => {
+								if ( onInputChange ) onInputChange( value );
+								const item = items.find(
+									( i ) => i.label === value
+								);
+								if ( props.onSelect && item ) {
+									props.onSelect( item );
+								}
+								if ( ! value && props.onRemove ) {
+									props.onRemove( props.selected as Item );
 								}
 							} }
-							getSelectedItemProps={ () => ( {} ) }
 						/>
-					</ComboBox>
-				) : (
-					<TextControl
-						{ ...inputProps }
-						value={ props.createValue || '' }
-						onChange={ ( value ) => {
-							if ( onInputChange ) onInputChange( value );
-							const item = items.find(
-								( i ) => i.label === value
-							);
-							if ( props.onSelect && item ) {
-								props.onSelect( item );
-							}
-							if ( ! value && props.onRemove ) {
-								props.onRemove( props.selected as Item );
-							}
-						} }
-					/>
-				) }
+					) }
+				</BaseControl>
 			</div>
 			<SelectTreeMenu
 				{ ...props }

diff --git a/packages/js/components/src/experimental-tree-control/tree.tsx b/packages/js/components/src/experimental-tree-control/tree.tsx
@@ -33,34 +33,36 @@ export const Tree = forwardRef( function ForwardedTree(
 
 	return (
 		<>
-			<ol
-				{ ...treeProps }
-				className={ classNames(
-					treeProps.className,
-					'experimental-woocommerce-tree',
-					`experimental-woocommerce-tree--level-${ level }`
-				) }
-			>
-				{ items.map( ( child, index ) => (
-					<TreeItem
-						{ ...treeItemProps }
-						isExpanded={ props.isExpanded }
-						key={ child.data.value }
-						item={ child }
-						index={ index }
-						// Button ref is not working, so need to use CSS directly
-						onLastItemLoop={ () => {
-							(
-								rootListRef.current
-									?.closest( 'ol[role="tree"]' )
-									?.parentElement?.querySelector(
-										'.experimental-woocommerce-tree__button'
-									) as HTMLButtonElement
-							 )?.focus();
-						} }
-					/>
-				) ) }
-			</ol>
+			{ items.length || isCreateButtonVisible ? (
+				<ol
+					{ ...treeProps }
+					className={ classNames(
+						treeProps.className,
+						'experimental-woocommerce-tree',
+						`experimental-woocommerce-tree--level-${ level }`
+					) }
+				>
+					{ items.map( ( child, index ) => (
+						<TreeItem
+							{ ...treeItemProps }
+							isExpanded={ props.isExpanded }
+							key={ child.data.value }
+							item={ child }
+							index={ index }
+							// Button ref is not working, so need to use CSS directly
+							onLastItemLoop={ () => {
+								(
+									rootListRef.current
+										?.closest( 'ol[role="tree"]' )
+										?.parentElement?.querySelector(
+											'.experimental-woocommerce-tree__button'
+										) as HTMLButtonElement
+								 )?.focus();
+							} }
+						/>
+					) ) }
+				</ol>
+			) : null }
 			{ isCreateButtonVisible && (
 				<Button
 					className="experimental-woocommerce-tree__button"

diff --git a/packages/js/product-editor/changelog/update-parent-categ b/packages/js/product-editor/changelog/update-parent-categ
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Use SelectTree in the Parent Category field
diff --git a/packages/js/product-editor/src/components/details-categories-field/category-field.tsx b/packages/js/product-editor/src/components/details-categories-field/category-field.tsx
@@ -55,31 +55,41 @@ function getSelectedWithParents(
 	return selected;
 }
 
-function mapFromCategoryType(
+export function mapFromCategoryToTreeItem(
+	val: ProductCategoryNode
+): TreeItemType {
+	return val.parent
+		? {
+				value: String( val.id ),
+				label: val.name,
+				parent: String( val.parent ),
+		  }
+		: {
+				value: String( val.id ),
+				label: val.name,
+		  };
+}
+
+export function mapFromTreeItemToCategory(
+	val: TreeItemType
+): ProductCategoryNode {
+	return {
+		id: +val.value,
+		name: val.label,
+		parent: val.parent ? +val.parent : 0,
+	};
+}
+
+export function mapFromCategoriesToTreeItems(
 	categories: ProductCategoryNode[]
 ): TreeItemType[] {
-	return categories.map( ( val ) =>
-		val.parent
-			? {
-					value: String( val.id ),
-					label: val.name,
-					parent: String( val.parent ),
-			  }
-			: {
-					value: String( val.id ),
-					label: val.name,
-			  }
-	);
+	return categories.map( mapFromCategoryToTreeItem );
 }
 
-function mapToCategoryType(
+export function mapFromTreeItemsToCategories(
 	categories: TreeItemType[]
 ): ProductCategoryNode[] {
-	return categories.map( ( cat ) => ( {
-		id: +cat.value,
-		name: cat.label,
-		parent: cat.parent ? +cat.parent : 0,
-	} ) );
+	return categories.map( mapFromTreeItemToCategory );
 }
 
 export const CategoryField: React.FC< CategoryFieldProps > = ( {
@@ -129,15 +139,15 @@ export const CategoryField: React.FC< CategoryFieldProps > = ( {
 					) === -1
 				}
 				items={ getFilteredItemsForSelectTree(
-					mapFromCategoryType( categoriesSelectList ),
+					mapFromCategoriesToTreeItems( categoriesSelectList ),
 					searchValue,
-					mapFromCategoryType( value )
+					mapFromCategoriesToTreeItems( value )
 				) }
-				selected={ mapFromCategoryType( value ) }
+				selected={ mapFromCategoriesToTreeItems( value ) }
 				onSelect={ ( selectedItems ) => {
 					if ( Array.isArray( selectedItems ) ) {
 						const newItems: ProductCategoryNode[] =
-							mapToCategoryType(
+							mapFromTreeItemsToCategories(
 								selectedItems.filter(
 									( { value: selectedItemValue } ) =>
 										! value.some(

diff --git a/...ages/js/product-editor/src/components/details-categories-field/create-category-modal.scss b/...ages/js/product-editor/src/components/details-categories-field/create-category-modal.scss
@@ -1,5 +1,6 @@
 .woocommerce-create-new-category-modal {
 	min-width: 650px;
+	overflow: visible;
 
 	&__buttons {
 		margin-top: $gap-larger;