Hide hidden categories in auto-complete

packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx

@@ -36,6 +36,7 @@ export type CategoryListProps = {
   ) => ReactNode;
   renderCategoryItemGroupHeader?: (props: ItemHeaderProps) => ReactNode;
   renderCategoryItem?: (props: CategoryItemProps) => ReactNode;
+  showHiddenItems?: boolean;
 };
 function CategoryList({
   items,
@@ -46,6 +47,7 @@ function CategoryList({
   renderSplitTransactionButton = defaultRenderSplitTransactionButton,
   renderCategoryItemGroupHeader = defaultRenderCategoryItemGroupHeader,
   renderCategoryItem = defaultRenderCategoryItem,
+  showHiddenItems,
 }: CategoryListProps) {
   let lastGroup: string | undefined | null = null;
 
@@ -68,6 +70,10 @@ function CategoryList({
             });
           }
 
+          if ((item.hidden || item.group?.hidden) && !showHiddenItems) {
+            return <Fragment key={item.id} />;
+          }
+
           const showGroup = item.cat_group !== lastGroup;
           lastGroup = item.cat_group;
           return (
@@ -76,6 +82,13 @@ function CategoryList({
                 <Fragment key={item.group.name}>
                   {renderCategoryItemGroupHeader({
                     title: item.group.name,
+                    style: {
+                      color:
+                        showHiddenItems && item.group?.hidden
+                          ? theme.pageTextSubdued
+                          : theme.menuAutoCompleteTextHeader,
+                    },
+                    item: item.group,
                   })}
                 </Fragment>
               )}
@@ -85,6 +98,12 @@ function CategoryList({
                   item,
                   highlighted: highlightedIndex === idx,
                   embedded,
+                  style: {
+                    color:
+                      showHiddenItems && item.hidden
+                        ? theme.pageTextSubdued
+                        : 'inherit',
+                  },
                 })}
               </Fragment>
             </Fragment>
@@ -104,6 +123,7 @@ type CategoryAutocompleteProps = ComponentProps<typeof Autocomplete> & {
   ) => ReactNode;
   renderCategoryItemGroupHeader?: (props: ItemHeaderProps) => ReactNode;
   renderCategoryItem?: (props: CategoryItemProps) => ReactNode;
+  showHiddenItems?: boolean;
 };
 
 export function CategoryAutocomplete({
@@ -114,6 +134,7 @@ export function CategoryAutocomplete({
   renderSplitTransactionButton,
   renderCategoryItemGroupHeader,
   renderCategoryItem,
+  showHiddenItems,
   ...props
 }: CategoryAutocompleteProps) {
   const categorySuggestions: Array<
@@ -167,6 +188,7 @@ export function CategoryAutocomplete({
           renderSplitTransactionButton={renderSplitTransactionButton}
           renderCategoryItemGroupHeader={renderCategoryItemGroupHeader}
           renderCategoryItem={renderCategoryItem}
+          showHiddenItems={showHiddenItems}
         />
       )}
       {...props}
@@ -268,13 +290,15 @@ type CategoryItemProps = {
 export function CategoryItem({
   item,
   className,
+  style,
   highlighted,
   embedded,
   ...props
 }: CategoryItemProps) {
   const { isNarrowWidth } = useResponsive();
   return (
     <div
+      style={style}
       // See comment above.
       role="button"
       className={`${className} ${css([
@@ -294,6 +318,7 @@ export function CategoryItem({
       {...props}
     >
       {item.name}
+      {item.hidden ? ' (hidden)' : null}
     </div>
   );
 }

packages/desktop-client/src/components/autocomplete/ItemHeader.tsx

@@ -1,15 +1,24 @@
 import React from 'react';
 
+import { type CategoryGroupEntity } from 'loot-core/types/models/category-group';
+
 import { theme } from '../../style/theme';
 import { type CSSProperties } from '../../style/types';
 
 export type ItemHeaderProps = {
   title: string;
   style?: CSSProperties;
   type?: string;
+  item?: CategoryGroupEntity;
 };
 
-export function ItemHeader({ title, style, type, ...props }: ItemHeaderProps) {
+export function ItemHeader({
+  title,
+  style,
+  type,
+  item,
+  ...props
+}: ItemHeaderProps) {
   return (
     <div
       style={{
@@ -21,6 +30,7 @@ export function ItemHeader({ title, style, type, ...props }: ItemHeaderProps) {
       {...props}
     >
       {title}
+      {item?.hidden ? ' (hidden)' : null}
     </div>
   );
 }

packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx

@@ -58,6 +58,7 @@ export function CoverTooltip({
                 }
               },
             }}
+            showHiddenItems={false}
           />
         )}
       </InitialFocus>

packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx

@@ -101,6 +101,7 @@ export function TransferTooltip({
         onUpdate={() => {}}
         onSelect={id => setCategory(id)}
         inputProps={{ onEnter: submit, placeholder: '(none)' }}
+        showHiddenItems={true}
       />
 
       <View

packages/desktop-client/src/components/modals/CloseAccount.tsx

@@ -151,6 +151,7 @@ export function CloseAccount({
                           setCategoryError(false);
                         }
                       }}
+                      showHiddenItems={true}
                     />
 
                     {categoryError && (

packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx

@@ -113,6 +113,7 @@ export function ConfirmCategoryDelete({
                   placeholder: 'Select category...',
                 }}
                 onSelect={category => setTransferCategory(category)}
+                showHiddenItems={true}
               />
             </View>
 

packages/desktop-client/src/components/modals/EditField.jsx

@@ -249,6 +249,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) {
             ),
           })}
           {...autocompleteProps}
+          showHiddenItems={false}
         />
       );
       break;

packages/desktop-client/src/components/transactions/TransactionsTable.jsx

@@ -1281,6 +1281,7 @@ const Transaction = memo(function Transaction(props) {
               onUpdate={onUpdate}
               onSelect={onSave}
               menuPortalTarget={undefined}
+              showHiddenItems={false}
             />
           )}
         </CustomCell>

packages/desktop-client/src/components/util/GenericInput.jsx

@@ -85,6 +85,7 @@ export function GenericInput({
               multi={multi}
               openOnFocus={true}
               onSelect={onChange}
+              showHiddenItems={false}
               inputProps={{
                 inputRef,
                 ...(showPlaceholder ? { placeholder: 'nothing' } : null),

upcoming-release-notes/2429.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [Shazib, carkom]
+---
+
+Hide hidden categories on the Category AutoComplete. Allow a prop for showing (with indication).