Repository: adobe/react-spectrum
File: packages/dev/s2-docs/src/searchUtils.tsx (TypeScript)

Code before:
  const iconFilter = useIconFilter();
  return useMemo(() => {
    if (!searchValue.trim()) {
      return iconList;
    }
    return iconList.filter(item => iconFilter(item.id, searchValue));
  }, [searchValue, iconFilter]);
}

export function useSearchTagSelection(
  searchValue: string,
  sectionTags: Tag[],
  resourceTags: Tag[],
  initialTagId: string
) {
  const [selectedTagId, setSelectedTagId] = useState<string>(initialTagId);
  const prevSearchWasEmptyRef = useRef<boolean>(true);

  // Ensure selected tag is valid for the current library
  const baseSectionIds = sectionTags.map(s => s.id);
  const resourceTagIds = resourceTags.map(t => t.id);
  const allBaseIds = useMemo(() => [...baseSectionIds, ...resourceTagIds], [baseSectionIds, resourceTagIds]);
  const isResourceSelected = selectedTagId && resourceTagIds.includes(selectedTagId);

  // "All" tag is shown when there's a search value and a resource tag is not selected
  const hasShowAllTriggered = searchValue.trim().length > 0 && !isResourceSelected;

  const sectionIds = useMemo(() => {
    return hasShowAllTriggered ? ['all', ...allBaseIds] : allBaseIds;
  }, [hasShowAllTriggered, allBaseIds]);
  
  useEffect(() => {
    if (!selectedTagId || !sectionIds.includes(selectedTagId)) {
      setSelectedTagId(sectionIds[0] || 'components');
    }
  }, [selectedTagId, sectionIds, setSelectedTagId]);

  // Auto-select "All" when search starts (unless resource is selected)
  useEffect(() => {
    const isEmpty = searchValue.trim().length === 0;
    if (prevSearchWasEmptyRef.current && !isEmpty && !isResourceSelected) {
      setSelectedTagId('all');
    }
    prevSearchWasEmptyRef.current = isEmpty;
  }, [searchValue, isResourceSelected]);

  return [selectedTagId, setSelectedTagId] as const;
}

export function useSectionTagsForDisplay(
  sections: Section[],

Review comment (suggestion):
Assuming you want it to stay once it has been shown, you'll still need state. But what I meant was you can call the `setState` during render instead of in an effect

Code after:
  const iconFilter = useIconFilter();
  return useMemo(() => {
    if (!searchValue.trim()) {
      return iconList;
    }
    return iconList.filter(item => iconFilter(item.id, searchValue));
  }, [searchValue, iconFilter]);
}

export function useSearchTagSelection(
  searchValue: string,
  sectionTags: Tag[],
  resourceTags: Tag[],
  initialTagId: string
) {
  const [selectedTagId, setSelectedTagId] = useState<string>(initialTagId);
  const [hasAllBeenShown, setHasAllBeenShown] = useState<boolean>(false);
  const prevSearchWasEmptyRef = useRef<boolean>(true);

  // Ensure selected tag is valid for the current library
  const baseSectionIds = sectionTags.map(s => s.id);
  const resourceTagIds = resourceTags.map(t => t.id);
  const allBaseIds = useMemo(() => [...baseSectionIds, ...resourceTagIds], [baseSectionIds, resourceTagIds]);
  const isResourceSelected = selectedTagId && resourceTagIds.includes(selectedTagId);

  // "All" tag is shown when search starts (first time search value is non-empty and no resource is selected)
  const shouldTriggerAll = searchValue.trim().length > 0 && !isResourceSelected;

  // Track if "All" has been shown, and once shown, keep showing it
  if (shouldTriggerAll && !hasAllBeenShown) {
    setHasAllBeenShown(true);
  }

  const sectionIds = useMemo(() => {
    return hasAllBeenShown ? ['all', ...allBaseIds] : allBaseIds;
  }, [hasAllBeenShown, allBaseIds]);
  
  useEffect(() => {
    if (!selectedTagId || !sectionIds.includes(selectedTagId)) {
      setSelectedTagId(sectionIds[0] || 'components');
    }
  }, [selectedTagId, sectionIds, setSelectedTagId]);

  // Auto-select "All" when search starts (unless resource is selected)
  useEffect(() => {
    const isEmpty = searchValue.trim().length === 0;
    if (prevSearchWasEmptyRef.current && !isEmpty && !isResourceSelected) {
      setSelectedTagId('all');
    }
    prevSearchWasEmptyRef.current = isEmpty;
  }, [searchValue, isResourceSelected]);